真實產出 · 驗收進行中真實樣例 · HTML

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>公众号排版样例</title></head>
<body style="margin:0; padding:24px 16px; background:#fff; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;">
<section style="max-width:578px; margin:0 auto;">

<h1 style="margin:0 0 12px; font-size:22px; line-height:1.4; font-weight:600; color:#1a1a1a; letter-spacing:0.5px;">为什么你的周报没人看</h1>
<p style="margin:0 0 20px; font-size:13px; color:#999;">阅读约 3 分钟 · 排版样例由 SkillCube 自测产出</p>

<p style="margin:0 0 20px; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;">先说结论：<strong style="color:#07c160; font-weight:600;">周报不是记录你做了什么，是管理上级的注意力</strong>。大部分周报的问题不是写得少，是信息密度太低。</p>

<h2 style="margin:32px 0 16px; font-size:17px; font-weight:600; color:#1a1a1a; border-left:4px solid #07c160; padding-left:10px; line-height:1.5;">一、把动作翻译成结果</h2>
<p style="margin:0 0 20px; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;">「修复登录 bug」是动作，「修复登录偶发失败，上线后相关工单清零」是结果。上级只对结果有反应——数字、状态、日期，三者必居其一。</p>

<blockquote style="background:#f7f7f7; border-left:3px solid #07c160; padding:12px 16px; margin:20px 0; color:#666; font-size:14px; line-height:1.8;">没有数字的时候，写「上线后观察中」。不编造，是周报复利的唯一来源。</blockquote>

<h2 style="margin:32px 0 16px; font-size:17px; font-weight:600; color:#1a1a1a; border-left:4px solid #07c160; padding-left:10px; line-height:1.5;">二、三条红线</h2>
<p style="margin:0 0 12px; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;">1. 不写「持续推进」——无信息量等于没写；</p>
<p style="margin:0 0 12px; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;">2. 风险区不许硬凑——没有就写「无阻塞」；</p>
<p style="margin:0 0 20px; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;">3. 全文 300 字封顶——上级的注意力是稀缺资源，省着用。</p>

<hr style="border:none; border-top:1px dashed #ddd; margin:28px 0;">

<p style="margin:0 0 20px; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;">本文由 <strong style="color:#07c160; font-weight:600;">weekly-report-studio</strong> 的方法论文稿生成，本页面由 <strong style="color:#07c160; font-weight:600;">wechat-article-polish</strong> 排版——你现在看到的，就是它粘贴进公众号后台的真实效果。</p>

<p style="margin:0; text-align:center; font-size:13px; color:#999;">SkillCube · 热点一出，当天就位</p>

</section>
</body>
</html>

樣例內容原樣呈現，僅做閱讀排版下載完整樣例

運行方式 Codex 由你的 Agent 執行，模型用量由服務商計費

菜鸟skill 工作室公眾號运营

公眾號排版打磨器v1.0.0

Markdown 粘进来，公眾號能用的行內樣式 HTML 出去

工作室 Skill 安裝前查看依賴說明

已記錄檢查 · 1.0.0 · 實測範圍見自測記錄

¥29¥69

立即購買

包里有什么 13 个文件 · 15 KB

工作流规则SKILL.md · 86 lines
参考库references/ · 2
可直接跑的脚本scripts/ · 2
输入样例inputs/ · 2
真实产出样例demo/output/ · 2

压缩包里是规则、参考库、脚本、真实产出和演示片，不只是一个提示词文件。

內測期也可免費獲取下方完整規則。内测期也可免费获取下方完整规则

下載完整包（.zip）

公眾號编辑器会剥掉 <style> 标签，排好的一次性样式粘贴就丢。

適合誰 (Good Fit)

微信公眾號写作者、企业新媒体运营团队厌倦了第三方排版软件繁琐编辑和经常排版错乱的人追求简洁、现代杂志质感排版的深度阅读创作者

實測環境：

Codex · Windows

Agent／模型費用依供應商而定；額外服務與依賴詳見完整包。

主線哪幾關用到它

Skill 是一把武器，配合新手主線實操，打通從「會玩」到「精通」的打怪升級全流程。

1-4 · 用 skill 解决三件真实小事 → 2-4 · 把 skill 串成流程 → 4-4 · 發布、分享与變現 →

帶著這次成果繼續: 把需求说清楚：验收標準先行 →

✓ 適合誰 (Good Fit)

微信公眾號写作者、企业新媒体运营团队
厌倦了第三方排版软件繁琐编辑和经常排版错乱的人
追求简洁、现代杂志质感排版的深度阅读创作者

⊗ 不適合誰 (Not For)

喜欢五颜六色花哨动图、低幼卡通贴纸排版的用户
需要一键自动发布到各开放平台 API 的自动化管道

✦ 你會得到 (What You Get)

全部样式内联，粘贴进编辑器不丢样式
微信绿设计令牌：引用块/重点/标题色条/虚线分隔
移动端 375px 自适应校验
支持自定义品牌色全局替换

交付內容：完整 SKILL.md 規則文件 + 公開自測樣例。需要在你自己的 AI Agent 中運行。

怎麼開始？

Skill 是一份教 AI 完成任務的規則。

領取並安裝 ↑

發給它

把写好的 Markdown 草稿文字发过去

可选微调

指定主色调或喜欢的视觉风格

立刻拿到

带行內樣式的纯净 HTML，一键粘贴进后台

發給你的 AI Agent

用 wechat-article-polish 排版以下公众号文章。品牌主色使用微信绿，保留原文事实，输出适合粘贴进公众号编辑器的内联样式 HTML： [粘贴 Markdown 草稿]

使用前了解公眾號编辑器可能再次处理 HTML。发布前请粘贴预览，并检查手机阅读效果。 Agent／模型費用依供應商而定；額外服務與依賴詳見完整包。

從這裡開始使用

压缩包里是规则、参考库、脚本、真实产出和演示片，不只是一个提示词文件。

下載完整包（.zip）下載 SKILL.md

打開 Codex 或 Claude Code，粘貼安裝提示詞。
讓 Agent 讀取並保存完整規則，確認安裝成功。
複製上方使用示例，換成你的素材開始運行。

手動安裝 · 查看完整 SKILL.md（86 行）

Codex：~/.agents/skills/wechat-article-polish/SKILL.md
Claude Code：~/.claude/skills/wechat-article-polish/SKILL.md

---
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 字；超过时按小标题拆成多篇推送，编辑器粘贴会卡。