wechat-article-format

name	wechat-article-format
description	微信公众号推文排版美化：把用户已写好的推文正文（从公众号编辑器复制的富文本，或纯文本/文件）按成熟微信推文排版规范生成带内联样式的富文本，程序化保证文字零改动，本地预览确认后写回剪贴板整体粘贴。Common aliases 微信排版, 推文排版, 公众号排版, 美化推文, wechat-format, $wechat-format。当用户提到微信推文/公众号文章要排版、美化、优化版式，或发来 mp.weixin.qq.com 编辑器链接要求处理文章样式时使用。

微信推文排版美化

把用户写好的公众号文章做成「成熟微信推文」的排版：导语卡片、列表卡片、图注、重点句标记、统一的正文字号行距。核心承诺是文字零改动——所有环节都有程序化校验兜底。

边界

• 只处理正文排版。标题栏、封面图、摘要不在正文富文本里，不处理。
• 只改样式，不改文字：不加小标题、不加「END」、不加图注文字、不修笔误。发现疑似笔误（如「如果完成」疑为「如何完成」）只报告给用户，由用户决定。
• 强调标记（加粗/标色/荧光笔）算样式不算改字，但要克制：全文 3-6 处，荧光笔至多 1-2 处。

关键事实（为什么是这套流程）

• mp.weixin.qq.com 通常被 agent 的浏览器工具拦截，无法直接操作编辑器。所以原文进出都走剪贴板：用户在编辑器正文 Cmd+A/Cmd+C 拿出来，排版后写回剪贴板 Cmd+A/Cmd+V 贴回去。这也是成熟排版工具（135editor/mdnice）的同款通路，微信编辑器对粘贴的内联样式富文本保留良好。
• 剪贴板纯文本 flavor 直接 pbpaste 会乱码，必须走 HTML flavor（脚本已处理）；HTML flavor 还带着文章图片的微信 CDN 地址（data-src），排版后图片无需重新上传。
• 微信 CDN 图片有防盗链，本地预览会显示「此图片来自微信公众平台 未经允许不可引用」占位图——预览页已加 no-referrer 绕过；就算没绕过也只是预览问题，贴回编辑器后正常。
• 剪贴板脚本用 osascript 读写 HTML flavor，仅支持 macOS。

工作流

脚本在本 skill 目录下的 scripts/（下称 $S）。工作文件一律放临时工作目录，不要污染用户项目。

1. 拿到原文

• 编辑器场景（默认）：请用户在公众号编辑器正文区域 Cmd+A 全选、Cmd+C 复制，然后执行 bash $S/read_clipboard_html.sh raw.html
• 纯文本/文件场景：用户直接给文字或文件时存为 raw.txt，后续命令加 --plain（此时没有图片块；如有配图请用户说明图放在哪些段落之间）。

2. 读懂文章

python3 $S/extract_blocks.py raw.html 输出编号块列表（段落含加粗标记、图片含完整地址）。通读全文，理解结构：哪些是开篇导语、承上启下句、编号列表、图注、小结句、结尾预告。顺手记下疑似笔误，最后报告。

3. 写排版计划 plan.json

角色与视觉说明见 references/layout-patterns.md（写 plan 前先读它）。要点：

• 每个原文块恰好用一次，render.py 会强制校验，不允许丢段落。
• 角色按段落功能选：不确定就 body。图片按长宽比选 img-full（横图）或 img-phone（竖屏截图）。
• 重点句用 emph，子串必须与原文逐字一致。选「读者应该带走的结论」，不要见句就标。
• 主色默认暖橙 #F37021；如果用户的公众号有品牌色，在 plan.json 里覆盖 accent / accent_deep。

4. 渲染 + 零改动校验

python3 $S/render.py raw.html plan.json content.html（纯文本输入加 --plain）。 校验失败会给出第一处差异位置——按报错修 plan，不要绕过校验。

5. 本地预览给用户过目

python3 $S/make_preview.py content.html preview.html --title "文章标题（可选）"
python3 -m http.server <随机端口> --bind 127.0.0.1   # 后台起在工作目录

用浏览器工具打开 http://127.0.0.1:<端口>/preview.html，视口宽度调到 460 左右（贴近手机阅读宽度），截几张关键位置（开头、列表卡片、图片、结尾）给用户看。长页面滚动优先用 window.scrollTo 这类脚本调用，比多次小步滚动更稳。当前环境没有浏览器工具时，把预览地址给用户请他自己打开确认——这一步不能跳过。用户要调整就改 plan.json 重跑第 4-5 步。

6. 写回剪贴板 + 指导粘贴

bash $S/write_clipboard_html.sh content.html（内置回读校验）。 然后告诉用户：回编辑器点进正文 → Cmd+A → Cmd+V → 检查 → 手机预览 → 保存。并说明预览占位图、疑似笔误清单。

微信编辑器 HTML 安全子集（生成/扩展样式时遵守）

• 只用 <section> <span> <img> <br> + 内联 style；不用 <style> 标签、class、id——粘贴时会被剥掉。
• 可靠属性：margin / padding / font-size / color / background-color / line-height / letter-spacing / text-align / border / border-radius / font-weight / width / max-width / display:inline-block。
• 避免：flex / grid / transform / 动画 / 外链字体；定位一律靠常规流 + text-align。
• 内容以 <meta charset='utf-8'> 开头（剪贴板 HTML flavor 的编码声明）。
• 图片保留微信 CDN 原地址即可，同时写在 src 上（编辑器粘贴后自行接管懒加载）。

校验链（每次都要全绿）

1. render.py 内置：块覆盖（不重不漏）+ 纯文字逐字一致
2. write_clipboard_html.sh 内置：剪贴板回读与 content.html 逐字节一致
3. 人工：预览截图让用户确认视觉效果