上一篇文章，我分享了用Claude打造「微信公众号一键发布」Skills的方法论。

今天，我来逐行拆解代码实现。

如果你想打造自己的Claude Skills，这篇文章会给你一个完整的技术蓝图。

先看全局：4个核心模块

整个Skills由4个JavaScript模块组成，共约700行代码：

wechat-publish/├── converter.js            # 核心：Markdown → HTML 转换├── image-uploader.js       # 图片上传到图床├── cover-generator.js      # AI封面图生成├── article-image-generator.js  # AI文章配图生成

每个模块职责单一，互不依赖。这是我从这次开发中学到的第一条原则：

模块化设计，让每个文件只做一件事。

模块一：converter.js —— 最核心的200行

这是整个Skills的心脏。它要解决的问题是：把Markdown转成微信能正确渲染的HTML。

听起来简单，实际上坑多到爆。

1. 为什么不能直接用marked.js？

const { marked } = require('marked');const html = marked.parse(markdown);// 这样生成的HTML，微信会渲染得一塌糊涂

因为微信公众号有几个奇葩限制：

所以我需要自定义渲染器。

2. 自定义Marked Renderer

functioncreateRenderer(theme, links) {const renderer = new marked.Renderer();let listItemIndex = 0;let isOrderedList = false;// 链接转脚注 —— 微信不支持外链  renderer.link = (href, title, text) => {const index = links.length + 1;    links.push({ index, text, href });return`${text}<sup class="wx-footnote-ref">[${index}]</sup>`;  };// 列表用section模拟 —— 避免微信的<li>渲染bug  renderer.listitem = (text) => {    listItemIndex++;const bullet = isOrderedList      ? `<span class="wx-list-bullet">${listItemIndex}.</span>`      : `<span class="wx-list-bullet">•</span>`;const cleanText = text.replace(/<\/?p>/g, '');return`<section class="wx-list-item">${bullet}<span class="wx-list-content">${cleanText}</span></section>`;  };return renderer;}

关键设计决策：

这个渲染器让我踩了三次坑才调通。每一个hack都是一次真实发布后发现的问题。

3. CSS内联：juice库的妙用

const juice = require('juice');functionconvertMarkdown(markdown, theme) {
// ... 生成HTML和CSSconst css = generateThemeCSS(theme);const fullHtml = `<style>${css}</style>${html}`;
// 使用juice将CSS内联到每个元素let inlinedHtml = juice(fullHtml);// 移除换行符，防止微信渲染空行  inlinedHtml = inlinedHtml.replace(/>\s*\n\s*</g, '><');// 移除style标签（已内联）  inlinedHtml = inlinedHtml.replace(/<style>[\s\S]*?<\/style>/g, '');return inlinedHtml;}

juice是一个CSS内联库，它会把：

<style>.title { color: blue; }</style><h1class="title">Hello</h1>

转换成：

<h1style="color: blue;">Hello</h1>

这一步是让HTML能在微信正常显示的关键。

4. 图片防盗链的终极解决方案

这是我踩的最大的坑。

图片上传到catbox.moe后，在微信里完全不显示。原因是微信对外部图片URL有防盗链机制。

最终解决方案：把图片转成Base64嵌入HTML。

asyncfunctionimageToBase64(url) {returnnewPromise((resolve) => {const protocol = url.startsWith('https') ? https : http;const request = protocol.get(url, {timeout: 30000,headers: {'User-Agent': 'Mozilla/5.0 ...',//必须加UA，否则图床会拒绝 'Accept': 'image/*,*/*'      }    }, (response) => {const chunks = [];      response.on('data', (chunk) => chunks.push(chunk));      response.on('end', () => {const buffer = Buffer.concat(chunks);const contentType = response.headers['content-type'] || 'image/jpeg';const base64 = buffer.toString('base64');const dataUrl = `data:${contentType};base64,${base64}`;resolve(dataUrl);      });    });  });}

代价是HTML变大了（图片有几百KB），但换来的是100%的显示成功率。

模块二：cover-generator.js —— AI生成封面图

这个模块调用Gemini API生成封面图。

1. 关键词提取

中文标题直接发给AI，生成的图片往往不够精准。所以我做了一个关键词映射表：

functionextractKeywords(title) {const keywordMap = {'AI': 'artificial intelligence, futuristic, digital brain','编程': 'programming, code, digital, technology','火锅': 'hot pot, steam, warm atmosphere, food','创业': 'startup, entrepreneurship, innovation, growth',// ... 更多映射  };let keywords = [];for (const [cn, en] ofObject.entries(keywordMap)) {if (title.includes(cn)) {      keywords.push(en);    }  }return keywords.join(', ');}

这个小技巧让封面图的相关性提升了一个档次。

2. Gemini API调用

asyncfunctiongenerateCover(title) {const keywords = extractKeywords(title);const prompt = template.replace('{{title}}', title) +'\n\nVisual keywords: ' + keywords;const requestBody = JSON.stringify({contents: [{ role: 'user', parts: [{ text: prompt }] }],generationConfig: {responseModalities: ['TEXT', 'IMAGE'],imageConfig: {aspectRatio: '16:9',imageSize: '1K',      },    },  });const response = awaithttpRequest(url, options, requestBody);
// 从响应中提取图片Base64const imageData = response.data.candidates[0].content.parts    .find(part => part.inlineData?.mimeType?.startsWith('image/'));
// 保存到本地文件saveBase64Image(imageData.inlineData.data, filePath);return filePath;}

要点：

模块三：image-uploader.js —— 图床上传

我用的是catbox.moe免费图床，通过multipart/form-data上传：

asyncfunctionuploadToCatbox(localFilePath) {const fileBuffer = fs.readFileSync(localFilePath);
// 构建multipart表单const boundary = '----formdata-' + crypto.randomBytes(8).toString('hex');let bodyParts = [];  bodyParts.push(Buffer.from('--' + boundary + '\r\n'));  bodyParts.push(Buffer.from('Content-Disposition: form-data; name="reqtype"\r\n\r\n'));  bodyParts.push(Buffer.from('fileupload\r\n'));  bodyParts.push(Buffer.from('--' + boundary + '\r\n'));  bodyParts.push(Buffer.from(`Content-Disposition: form-data; name="fileToUpload"; filename="${fileName}"\r\n`));  bodyParts.push(Buffer.from(`Content-Type: ${mimeType}\r\n\r\n`));  bodyParts.push(fileBuffer);  bodyParts.push(Buffer.from('\r\n--' + boundary + '--\r\n'));
// 发送请求const response = awaithttpsRequest(options, Buffer.concat(bodyParts));return response; 
// 返回 https://files.catbox.moe/xxxxx.png
}

为什么手动构建multipart？ 因为Node.js原生没有FormData，引入第三方库又太重。100行代码就能解决的事，不需要额外依赖。

模块四：article-image-generator.js —— 智能配图

这是新增的功能：根据文章内容自动生成3-6张配图。

1. 智能决定配图数量

functionanalyzeArticleForImages(articleContent, articleTitle) {const contentLength = articleContent.length;let imageCount = 3;if (contentLength > 3000) imageCount = 4;if (contentLength > 5000) imageCount = 5;if (contentLength > 7000) imageCount = 6;
// 分析文章主题const themes = extractThemes(articleContent, articleTitle);return themes.slice(0, imageCount);}

2. 主题检测与配图描述

functionextractThemes(content, title) {const themes = [];const isTechArticle = /技术|代码|编程|开发|AI|Claude/.test(content);const isMethodologyArticle = /方法|流程|步骤|教程/.test(content);if (isTechArticle) {    themes.push({context: '文章开头配图 - 展示技术创新',description: 'A futuristic workspace with holographic displays...'    });    themes.push({context: '工作流程展示 - 自动化流水线',description: 'An elegant automated pipeline visualization...'    });  }
// ... 更多主题检测
return themes;}

设计思路： 用正则检测文章类型，然后匹配预设的视觉描述。这比让AI自己理解文章要快得多、准得多。

方法论总结：打造Skills的5条原则

回顾这700行代码，我总结出几条可复用的原则：

1. 模块化：一个文件只做一件事

converter.js      → 只做格式转换image-uploader.js → 只做图片上传cover-generator.js → 只做封面生成

好处： 哪个模块出问题，就改哪个。不会牵一发动全身。

2. 错误优雅降级

asyncfunctionimageToBase64(url) {try {
// 尝试下载并转换return dataUrl;  } catch (err) {
// 失败就返回原URL，不中断整个流程return url;  }}

原则： 单个环节失败，不应该让整个流程崩溃。

3. 配置与代码分离