---
name: wechat-article-polish
description: 把 Markdown 文章转成可直接粘贴进公众号编辑器的内联样式 HTML——移动端自适应、引用块/重点/分隔线样式，零外部依赖。当用户提到公众号排版、推送格式化、文章转公众号时使用。
---

# 公众号排版打磨器

把一篇 Markdown 变成粘进公众号后台就能用的 HTML：所有样式内联（公众号编辑器会剥掉 `<style>` 标签，这是唯一可靠做法）。

## 触发条件

用户提到：公众号排版 / 推送排版 / 文章转公众号 / mp 排版。

## 工作流

1. **读入 Markdown**，识别结构：标题层级、引用、列表、代码块、加粗、图片。
2. **映射到内联样式**（用下方设计令牌），逐节点生成带 `style` 属性的 HTML。
3. **正文样式规则**：
   - 段落：`margin:0 0 20px 0; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;`
   - 二级标题：`margin:32px 0 16px; font-size:17px; font-weight:600; color:#1a1a1a;` 前加 4px 圆角色块（`border-left:4px solid #07c160; padding-left:10px;`）
   - 引用块：浅灰底 + 左侧线（`background:#f7f7f7; border-left:3px solid #07c160; padding:12px 16px; margin:20px 0; color:#666; font-size:14px;`）
   - 加粗重点：`color:#07c160; font-weight:600;`
   - 分隔线：`border:none; border-top:1px dashed #ddd; margin:28px 0;`
   - 图片说明：居中灰字 13px
   - 代码：等宽字体 + 浅底块
4. **输出完整 HTML 文档**（内联样式、无 `<style>`、无外链 CSS/JS），并附一句粘贴指引（公众号后台 → 粘贴为富文本）。
5. **主色调默认微信绿 #07c160**；用户给品牌色则全局替换。

## 质量红线

- 任何样式出现在 `<style>` 标签或 class 里 = 失败（粘贴后必然丢样式）。
- 不引入外部字体、图片 base64 之外的任何外部资源。
- 移动端检查：正文宽度 100%，不出现横向滚动。

## 自测任务（出厂前必须全过）

1. 输入一篇含标题/引用/列表/加粗/代码的测试 Markdown，产出 HTML 用无 `<style>`、无 class、无外链，样式全部内联。
2. 产出的 HTML 在 375px 宽视口渲染无横向滚动、段落间距一致。

## 常见错误

| 错误 | 现象 | 修法 |
|---|---|---|
| 用 CSS 类做样式 | 粘进去样式全丢 | 全部改成 inline style |
| 代码块用 `<p>` 冒充 | 缩进丢失，命令不能复制 | 用 `<pre><code>` 并给浅底 |
| 引用块写成长段落 | 手机上分不清引文还是正文 | 浅底 + 左侧绿线，字号降 1px |
| 图片宽 800px | 手机上横向滚动 | `max-width:100%` |
| 行内代码自配色 | 和正文撞色看不清 | 用 `style-tokens.md` 的令牌 |
| 列表未闭合 | 整篇被包进一个 `<ul>` | 遇到非列表行立刻 `</ul>` |

## 工作流细节

1. 逐行判断块类型：标题 / 段落 / 列表 / 引用 / 代码 / 分隔线。
2. 行内转换顺序固定：代码 → 加粗 → 斜体 → 图片 → 链接。顺序错了会把 `**` 里的 `*` 吃掉。
3. 代码块内部只做 HTML 转义，禁止任何行内替换。
4. 输出完整 `<!doctype html>` 文档，方便本地缩到 390px 宽验收。
5. 一级标题直接丢弃，从 `##` 开始重新编号。

## 验收步骤

```bash
python3 scripts/md2wx.py inputs/example/article.md > demo/output/article.html
python3 scripts/check_html.py demo/output/article.html
```

判据：`<style>` 数量 0、`class=` 数量 0、块级元素 style 覆盖率 100%、无 `<h1>`、无写死 px 宽度。全过才算交付。

## 与其他 skill 的衔接

- 上游写作 / 润色先做完，本 skill 只负责排版与样式令牌。
- 配图仍走外部工具生成，本 skill 不生成图片。
- 需要小红书排版（非公众号）时切到 `xiaohongshu-note`，两者的输出格式不通用。

## 交付清单

- [ ] `demo/output/` 至少 2 份真实 HTML（纯文字 / 含代码）
- [ ] `demo/qa.txt` 有可复跑的命令与结果
- [ ] `references/` 覆盖样式令牌与结构守则
- [ ] `scripts/` 同时具备转换器与校验器

## 输入要求

- 接受标准 Markdown（含 `#`–`####` 标题、`>` 引用、`-`/`1.` 列表、围栏代码块、图片、链接）。
- 不接受富文本粘贴：从 Word / 网页复制的样式化内容先转成纯 Markdown。
- 单篇建议 ≤5000 字；超过时按小标题拆成多篇推送，编辑器粘贴会卡。