| name | wechat-article |
| description | 将 Markdown 内容转换为微信公众号兼容的 HTML 格式。
支持内联 CSS 样式、多种主题（airbnb/apple/binance/claude/coinbase/mastercard/notion/opencode.ai/pinterest/shopify/spacex/stripe/vercel）、智能配图和代码高亮。
同时支持对现有 HTML 进行排版优化（统一样式 + 微信兼容性修复）。
可自动分析内容选择合适的模板和主题，支持 Unsplash API 获取配图。
|
| allowed-tools | ["Read","Write","Edit","Grep","Glob","WebFetch"] |
| metadata | {"trigger":"生成微信公众号文章、Markdown 转 HTML、公众号排版、HTML 排版优化","source":"基于 design-system 设计系统"} |
微信文章排版优化Skill
使用 design-system 定义的视觉风格系统，将Markdown内容转换成HTML，同时支持优化 HTML，使其更适合公众号。
Purpose
关键特性：
- 内联 CSS 样式（公众号不支持
<style> 标签）
- 基于 design-system 的专业排版样式
- 代码高亮支持
- 多种主题风格（airbnb/apple/binance/claude/coinbase/mastercard/notion/opencode.ai/pinterest/shopify/spacex/stripe/vercel）
Input
| 参数 | 类型 | 必填 | 说明 |
|---|
| content | string | 是* | Markdown 格式的文章内容（* 与 inputPath/sourceHtml 二选一） |
| inputPath | string | 是* | HTML 文件路径（支持 glob 模式如 output/*.html），与 content 二选一 |
| sourceHtml | string | 是* | HTML 字符串（备选输入方式），与 content 二选一 |
| title | string | 否 | 文章标题 |
| author | string | 否 | 作者名称 |
| theme | string | 否 | 主题：notion | stripe | claude | vercel，默认 auto |
| filename | string | 否 | 输出文件名（不含扩展名），默认使用标题或时间戳 |
| images | string | 否 | 图片模式：auto | manual | none，默认 auto |
| imageCount | number | 否 | 配图数量（1-5），AI 会根据文章长度智能判断 |
| imageKeywords | string | 否 | 强制指定图片搜索关键词（逗号分隔），未提供时由 AI 从内容自动提取 |
环境变量
| 变量名 | 必填 | 说明 |
|---|
| UNSPLASH_ACCESS_KEY | 否 | Unsplash API Access Key，用于自动获取配图。未设置时跳过图片处理 |
| UNSPLASH_IMAGE_COUNT | 否 | 默认配图数量（1-5），覆盖 imageCount 参数 |
Output
将生成的 HTML 文件写入 output/ 目录，文件名格式为 {filename}.html。
执行流程
当用户请求生成微信公众号文章时，AI 直接执行以下步骤（不调用外部 npm 脚本，由 AI 直接生成 HTML）：
重要提示: 此 Skill 定义的是 AI 的工作流程，AI 应该直接解析 Markdown 并生成内联 CSS 的 HTML，而不是调用 npm run wechat 等外部命令。外部命令是项目的 CLI 工具，与此 Skill 是独立的实现方式。
执行分支
| 输入类型 | 执行流程 |
|---|
content（Markdown） | 步骤 1-3 → 5-8 |
inputPath / sourceHtml（HTML） | 步骤 4 → 5-8 |
1. 智能选择主题和模板（如未指定）
如果用户未指定 theme，AI 分析文章内容特征自动选择：
Theme 自动选择规则：
| 内容特征 | 推荐 Theme |
|---|
| 包含代码、技术术语、编程教程 | claude |
| 商业分析、行业报告、数据图表 | coinbase |
| 深度阅读、人文思考、散文随笔 | airbnb/notion |
| 通用内容、新闻简讯、日常分享 | standard |
| 其他无法分类的情况 | mastercard/standard |
2. 解析 Markdown
AI 自行解析 Markdown 语法，识别以下元素：
- 标题（H1-H6）
- 段落
- 引用块
- 代码块和行内代码
- 列表（有序/无序）
- 表格
- 图片
- 链接
3. 应用 Design System 样式和模板结构
根据选择的 theme，从 design-system 获取对应的设计规范，生成带有内联样式的 HTML。不调用任何脚本或工具，由 AI 完成全部转换。
### 4. HTML 排版优化（inputPath 模式）
当用户提供 `inputPath` 或 `sourceHtml` 时，执行以下流程：
#### 4.1 读取 HTML 内容
- 如果是 `inputPath`：使用 Read 工具读取文件内容
- 如果是 `sourceHtml`：直接使用提供的 HTML 字符串
#### 4.2 提取语义内容
AI 解析 HTML 结构，提取以下语义元素（**丢弃原始样式，仅保留结构和文本**）：
| 元素 | 处理方式 |
|------|----------|
| 标题 (h1-h6) | 保留文本 |
| 段落 (p) | 保留文本，丢弃原始样式 |
| 列表 (ul/ol/li) | 保留结构 |
| 表格 (table/tr/td/th) | 保留结构，包括 rowspan/colspan |
| 代码块 (pre/code) | 保留代码内容 |
| 图片 (img) | **保留 src 和 alt**（不替换，保持原图）|
| 链接 (a) | 保留 href 和文本 |
| 引用 (blockquote) | 保留文本 |
**需要丢弃的内容：**
- 所有 `style` 属性
- 所有 `class` 属性
- 所有 `id` 属性
- `<style>` 标签
- `<script>` 标签
- `<div>` 标签（转换为 `<section>` 或 `<p>`）
#### 4.3 确定主题
- 如果指定了 `theme`，使用指定主题
- 否则 `auto` 根据内容自动选择
#### 4.4 重新生成 HTML
根据选择的主题，从 design-system 获取样式规范，生成带有内联样式的新 HTML。
#### 4.5 微信兼容性修复
| 问题 | 修复方案 |
|------|----------|
| `<div>` 标签 | → `<section>` 或 `<p>` |
| `<style>` 标签 | 移除，内联样式到元素 |
| `<script>` 标签 | 移除 |
| 行内样式 `style="..."` | 丢弃，重新生成 |
| `class` / `id` 属性 | 丢弃 |
| 表格 `rowspan`/`colspan` | 保持兼容 |
| 图片 max-width | 确保 `100%` |
| 字体 | 使用系统字体栈 |
#### 4.6 生成输出文件名
原文件: output/article.html
输出文件: output/optimized-article.html
规则：
- 提取原文件名（不含路径和扩展名）
- 添加 `optimized-` 前缀
- 保留 `.html` 扩展名
- 输出到相同目录
#### 4.7 逐个写入文件
使用 Write 工具将优化后的 HTML 写入 `output/optimized-{原文件名}.html`。
**示例：**
优化 HTML 排版：output/old-article.html
→ 输出：output/optimized-old-article.html
批量处理：output/*.html
→ output/optimized-article1.html
→ output/optimized-article2.html
### 5. 图片处理（智能配图）
AI 自动分析文章内容，智能判断是否适合添加配图，并自动提取主题词搜索合适的图片。
**图片模式说明：**
| 模式 | 说明 |
|------|------|
| auto | AI 智能分析内容，自动判断是否配图（默认）|
| manual | 保留用户 Markdown 中原有的图片，不自动添加 |
| none | 不插入任何图片 |
**当 images=auto 时，执行以下智能配图流程：**
#### 步骤 1：内容分析 - 判断是否适合配图
AI 分析文章类型和内容特征，判断是否需要配图：
**适合配图的文章类型：**
| 类型 | 判断依据 | 配图建议 |
|------|----------|----------|
| 技术教程 | 包含操作步骤、界面说明、代码演示 | 推荐配图（展示界面、架构图、流程图）|
| 产品评测 | 介绍具体产品、工具、应用 | 推荐配图（产品截图、使用场景）|
| 行业分析 | 涉及数据、趋势、案例 | 推荐配图（数据可视化、行业相关场景）|
| 生活随笔 | 旅行、美食、生活方式 | 推荐配图（场景照片、氛围图）|
| 设计/艺术类 | 视觉相关内容 | 强烈推荐配图 |
**不适合配图的文章类型：**
| 类型 | 判断依据 | 处理方式 |
|------|----------|----------|
| 纯技术概念 | 抽象算法、纯理论讨论 | 跳过配图或仅添加1张概念图 |
| 代码密集型 | 大量代码片段，无界面展示 | 跳过配图 |
| 简短资讯 | 内容少于500字 | 跳过配图 |
| 哲学/思考类 | 纯文字思辨内容 | 跳过配图或添加1张氛围图 |
步骤 2：提取主题词
若判断适合配图，AI 从文章中提取搜索关键词：
**主题词提取规则：**
1. **识别核心主题**（2-3个关键词）
- 分析标题、首段、小标题中的高频概念词
- 提取文章讨论的主要对象（产品名、技术名、场景等）
- 示例："React 性能优化指南" → `react, performance, web development`
2. **添加视觉修饰词**
- 根据文章主题自动添加风格词：
- apple/spacex主题: `technology, digital, programming, software`
- binance/coinbase主题: `business, professional, corporate, office`
- neo-brutalist/claude主题: `artistic, warm, lifestyle, nature`
- notion/vercel主题: `minimal, clean, simple, modern`
3. **生成搜索查询**
- 组合格式：`{核心主题} {风格修饰词}`
- 示例：`artificial intelligence technology digital`
#### 步骤 3：确定配图数量
根据文章长度和内容密度自动确定：
| 文章长度 | 内容密度 | 推荐配图数 |
|----------|----------|------------|
| < 800字 | 低 | 1-2 张 |
| 800-1500字 | 中 | 2-3 张 |
| 1500-2500字 | 高 | 3-4 张 |
| > 2500字 | 很高 | 4-5 张 |
**数量控制优先级：**
1. 用户指定的 `imageCount` 参数
2. 环境变量 `UNSPLASH_IMAGE_COUNT`
3. AI 根据内容自动判断（默认 3 张）
4. 最大不超过 5 张
#### 步骤 4：调用 Unsplash API 搜索图片
**环境变量要求：**
- `UNSPLASH_ACCESS_KEY` 必须已设置（Unsplash Access Key）
**前置检查（仅验证存在性，不输出值）：**
```bash
!node -e "process.env.UNSPLASH_ACCESS_KEY ? console.log('UNSPLASH_ACCESS_KEY: 已设置') : console.log('UNSPLASH_ACCESS_KEY: 未设置')"
API 调用：
curl -X GET "https://api.unsplash.com/search/photos?query={AI提取的主题词}&per_page={配图数量}&orientation=landscape" \
-H "Authorization: Client-ID $UNSPLASH_ACCESS_KEY"
错误处理：
- 若
UNSPLASH_ACCESS_KEY 未设置 → 跳过配图，继续生成文章
- 若 API 调用失败 → 跳过配图，记录原因
- 若搜索结果不足 → 减少配图数量或调整关键词重试
步骤 5：智能插入图片
根据文章结构选择最佳插入位置：
插入策略：
文章结构
├── 标题区
│ └── 第1张：封面图（标题下方，营造氛围）
├── 引言/导语
├── 正文段落1
│ └── 第2张：支撑第1-2个段落的内容
├── 正文段落2
├── 正文段落3
│ └── 第3张：支撑中间段落的内容
├── 正文段落4
├── 结论/总结
│ └── 第4-5张（如有）：结尾氛围图或总结图
插入位置规则：
- 避免在代码块、表格、列表中间插入
- 优先选择段落之间的过渡位置
- 封面图必须放在标题和作者信息之后
- 图片之间至少间隔 2-3 个段落
步骤 6：生成图片 HTML
使用内联样式生成图片元素：
<figure style="margin: 24px 0; text-align: center;">
<img src="{urls.regular}" alt="{文章主题}" style="max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px;">
<figcaption style="font-size: 12px; color: #999; margin-top: 8px;">
Photo by <a href="{user.links.html}" style="color: #999; text-decoration: underline;">{user.name}</a> on <a href="https://unsplash.com" style="color: #999; text-decoration: underline;">Unsplash</a>
</figcaption>
</figure>
图片元数据使用：
urls.regular - 图片 URL（1080px 宽度，适合公众号）alt_description 或 description - 图片 alt 文本user.name - 摄影师署名user.links.html - 摄影师主页链接links.html - Unsplash 图片页面（可选）
7. 生成文件名
根据以下优先级确定输出文件名：
- 用户指定的 filename 参数
- 文章标题（转换为拼音或英文，去除特殊字符）
- 时间戳格式：
article-{YYYYMMDD-HHmmss}
8. 写入文件
使用 Write 工具将生成的 HTML 内容写入 output/{filename}.html。
示例输出路径：
output/my-article.html
output/tech-tutorial-20260415.html
output/article-20260415-143052.html
主题系统
主题样式定义在 design-system/references/ 目录下，每个主题都有完整的 DESIGN.md 规范。
自动选择逻辑
当用户未指定 theme 时，AI 基于以下内容特征自动匹配：
内容分析维度：
├── 关键词匹配（代码、算法、API、编程语言 → claude/opencode.ai）
├── 语气分析（数据驱动、专业术语 → apple/spacex）
├── 情感基调（温暖、人文、叙事 → notion）
└── 默认回退（standard）
样式转换规则
在 Markdown 转 HTML 时必须遵循以下样式规则：
容器样式
<section style="max-width: 677px; margin: 0 auto; padding: 20px 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 16px; line-height: 1.75; color: #333;">
标题样式
H1 标题：
<h1 style="font-size: 22px; font-weight: bold; color: #333; margin: 0 0 8px 0; text-align: center;">标题文本</h1>
H2 标题：
<h2 style="font-size: 20px; font-weight: bold; color: #333; margin: 24px 0 16px 0;">标题文本</h2>
H3 标题：
<h3 style="font-size: 18px; font-weight: bold; color: #333; margin: 20px 0 12px 0;">标题文本</h3>
正文样式
<p style="margin: 16px 0; font-size: 16px; line-height: 1.75; color: #333; text-align: justify;">正文内容</p>
引用样式
<blockquote style="margin: 16px 0; padding: 12px 16px; border-left: 4px solid #35b3ff; background-color: #f8f8f8; color: #666;">
引用内容
</blockquote>
代码块样式
<pre style="margin: 16px 0; padding: 16px; background-color: #282c34; color: #abb2bf; border-radius: 6px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 14px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap;"><code>代码内容</code></pre>
行内代码样式
<code style="padding: 2px 6px; background-color: #f5f5f5; border-radius: 4px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 14px;">代码</code>
图片样式
基础图片样式：
<img src="图片URL" alt="描述" style="max-width: 100%; height: auto; display: block; margin: 16px auto; border-radius: 4px;">
Unsplash 配图样式（带署名）：
<figure style="margin: 20px 0; text-align: center;">
<img src="图片URL" alt="图片描述" style="max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px;">
<figcaption style="font-size: 12px; color: #999; margin-top: 8px;">
Photo by <a href="https://unsplash.com/@username" style="color: #999; text-decoration: underline;">作者名</a> on <a href="https://unsplash.com" style="color: #999; text-decoration: underline;">Unsplash</a>
</figcaption>
</figure>
表格样式
<table style="width: 100%; border-collapse: collapse; margin: 16px 0;display: block; overflow-x: auto;">
<thead>
<tr style="background-color: #f5f5f5;">
<th style="padding: 12px; border: 1px solid #e8e8e8; text-align: left; font-weight: bold;">表头</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 12px; border: 1px solid #e8e8e8;">内容</td>
</tr>
</tbody>
</table>
列表样式
无序列表：
<ul style="margin: 16px 0; padding-left: 24px;">
<li style="margin: 8px 0; line-height: 1.75;">列表项</li>
</ul>
有序列表：
<ol style="margin: 16px 0; padding-left: 24px;">
<li style="margin: 8px 0; line-height: 1.75;">列表项</li>
</ol>
Important Notes
- 内联样式: 公众号编辑器会过滤
<style> 标签，所有样式必须内联
- 图片限制: 图片需要先上传到微信服务器或使用外链
- JavaScript: 公众号不支持任何 JavaScript
- 字体: 使用系统默认字体，确保兼容性
- 宽度: 内容区域建议不超过 677px
- div 标签: 公众号不支持
<div> 标签，使用 <section> 替代
- 主题选择: 根据文章内容选择合适的主题风格
- 文件输出: 默认将 HTML 写入
output/ 目录，用户可直接在 Web 界面查看
- Unsplash 图片: 使用 Unsplash API 获取的图片需遵守 Unsplash 使用条款，必须包含作者署名
相关文件
design-system/index.md - Design System 使用指南design-system/references/**/DESIGN.md - 各种主题详细规范design-system/references/airbnb/DESIGN.md - 旅行杂志风格design-system/references/apple/DESIGN.md - 苹果极简风格design-system/references/binance/DESIGN.md - 币安金融风格design-system/references/claude/DESIGN.md - Anthropic 暖调风格design-system/references/coinbase/DESIGN.md - Coinbase 风格design-system/references/japanese-zen/DESIGN.md - 日式禅意风格design-system/references/luxury-editorial/DESIGN.md - 奢华编辑风格design-system/references/mastercard/DESIGN.md - 万事达暖调风格design-system/references/notion/DESIGN.md - Notion 极简风格design-system/references/neo-brutalist/DESIGN.md - 新粗野主义design-system/references/opencode.ai/DESIGN.md - 终端极客风格design-system/references/spacex/DESIGN.md - SpaceX 电影风格design-system/references/standard/DESIGN.md - 财经专业风格design-system/references/stripe/DESIGN.md - Stripe 精致风格design-system/references/vercel/DESIGN.md - Vercel 开发者风格design-system/references/vintage-newspaper/DESIGN.md - 复古报纸风格HTML-CSS-SPEC.md - HTML/CSS 技术规范
示例用法
基础用法（AI 智能判断是否配图）：
生成微信公众号文章，内容为：{markdown内容}
AI 会自动分析内容，如果是技术教程、产品评测、生活随笔等适合配图的文章类型，会自动提取主题词搜索配图。
强制指定配图数量和关键词：
生成微信公众号文章，配图5张，关键词：人工智能, 机器学习, 神经网络
内容为：{markdown内容}
手动模式（保留原有图片，不自动添加）：
生成微信公众号文章，图片模式manual，内容为：{markdown内容}
无图片模式：
生成微信公众号文章，图片模式none，主题为airbnb，内容为：{markdown内容}
纯文字文章示例（AI 会自动跳过配图）：
生成微信公众号文章，内容为：
# 函数式编程的数学基础
函数式编程源于 lambda 演算，由阿隆佐·邱奇在1930年代提出...
HTML 排版优化示例
优化 HTML 排版（单文件）：
优化 HTML 排版：output/old-article.html
→ 读取文件 → 提取语义内容 → 应用新主题 → 输出 output/optimized-old-article.html
优化并指定主题：
优化 HTML 排版：output/article.html，重新应用 standard 主题
批量处理：
优化 HTML 排版：output/*.html
→ 逐个处理每个 HTML 文件 → 输出到 output/optimized-*.html
使用 sourceHtml（HTML 字符串）：
优化 HTML 排版，内容为：<section>...</section>
