微信公众号文章美化编排（Wechat Article Beautify）

Overview

将用户提供的原始文章套用内置排版模板，产出微信公众号后台可直接粘贴的成品 HTML。核心原则：保义重排——只改排版呈现（标题层级、编号徽章、加粗强调、引用块、列表、表格、配色），不改内容语义；支持多模板批量套用并生成并排对比视图。

资源清单

• assets/templates/ — 7 个纯占位 HTML 模板（1 商务咨询 / 2 教育培训 / 3 金融理财 / 4 美食生活 / 5 医疗健康 / 6 文学情感 / 7 科技互联网）。模板内不含示例文章，所有文字均为简单占位描述（「文章主标题」「此处是二级标题」「列表项 1」「表头 1」等），它们是「样式骨架 + 占位符」，不是内容来源。
• references/template-guide.md — 各模板设计 Token 速览、统一结构骨架、占位符对照表、保义重排硬性规则。执行本技能前必读。
• scripts/build_compare.py — 多版本并排对比视图生成器。

工作流程（向导式，共 5 步）

第 0 步 · 准备：确认原文

1. 若用户已提供文章（文件/正文/链接），先通读全文，识别：标题、作者/公众号名、小节结构、要点列表、表格、金句、配图。
2. 若未提供文章，请用户提供，不要凭空开始。
3. Read references/template-guide.md。

第 1 步 · 引导选择模板

只用 AskUserQuestion 提一个问题（multiSelect=true）：

• 问题「选择模板」选项：套用所有模板（推荐，可并排对比） / 1 商务咨询 / 2 教育培训 / 3 金融理财
• 问题正文中注明：其余模板为 4 美食生活 / 5 医疗健康 / 6 文学情感 / 7 科技互联网，需要它们或指定组合时，在「其他」中直接输入序号（如「4,7」或「2 5 7」）。

规则：

• 用户选了「套用所有模板」→ 忽略其他勾选，对全部 7 个模板逐一套用。
• 用户在「其他」中输入序号（可含中文顿号/逗号/空格分隔）→ 解析序号，套用对应模板；序号不在 1-7 范围时提醒并让用户重选。
• 未做任何有效选择 → 请用户明确后再继续。
• 在提问正文中附上各模板一句话风格描述（见 template-guide.md 的 Token 表），帮助用户决策；用户问「有什么模板」时同样引用该表作答。

第 2 步 · 套用模板（单模板）

1. Read 对应的 assets/templates/N-xxx.html，把它当作带占位符的样式骨架。
2. 按 template-guide.md 的「占位符对照表」和「保义重排规则」将原文逐段填充进模板结构：
   • 原文段落文字逐句保留，不增删观点、不概括缩写；
   • ## 小节 → 编号 h2（01/02/03 按顺序）；### → 小节 h3；加粗金句 → 引用块/结论块（每版最多 1 个结论块）；并列要点 → 圆点列表；顺序步骤 → 数字徽章列表；原文表格 → 模板表格；原文无对应内容（如无代码）→ 省略该组件。
3. 所有内联样式从模板原样复制，只把占位文字替换为原文内容；禁止自创样式、禁止改颜色字号。
4. 替换元信息：分类标签文字、日期（当天）、阅读时长（约 400 字/分钟）、标题、作者栏。作者/公众号名用户未提供时询问一次。
5. 头图/配图/底图保留渐变占位区，改写占位提示文字为贴合原文的描述。
6. 原文没有对应内容的占位组件（表格、代码块、对比图、单行命令等）整块删除，成品中不得残留任何占位文字。
7. 输出前逐节自查：无遗漏段落、无顺序颠倒、语义与原文一致、无占位文字残留。

第 3 步 · 批量套用（所有模板）

用户选「套用所有模板」时，对 7 个模板逐一执行第 2 步。要求：

• 逐个生成，顺序 1→7；每个版本独立完整（同一段原文在每个模板中呈现方式按各自模板组件而定，但内容集合一致）。
• 每完成一个版本即写入文件，不要攒到最后一起写。

第 4 步 · 生成对比视图并交付

1. 所有版本写入 output/（当前工作区）目录，命名 N-模板名.html（如 3-finance.html）。
2. 运行对比视图生成器（截图模式，需在 venv .../envs/default/Scripts/python.exe 下运行，依赖 playwright + chromium）：

"<venv-python>" <skill目录>/scripts/build_compare.py output --title "《原文标题》多模板对比"

脚本会用 Playwright 以 375px 手机视口对每个成品 HTML 截全页 PNG（存入 output/compare_assets/），再生成以图片网格呈现的 compare.html（不再使用 iframe）。截图失败时脚本会回退为 iframe 模式并在日志中说明。

3. 用 present_files 展示：单版本时直接展示成品 HTML；多版本时把 compare.html 放在最前，随后列各版本文件。
4. 展示后向用户说明：
   • 成品使用方法：打开文件 → 全选 <section> 之间内容 → 粘贴到公众号后台或 135/秀米；
   • 头图/配图为占位区，需替换真实图片；
   • 若某版本不合适，可继续调整：可换模板、微调某版本（如改标签文字、调换组件、增删占位图）、或整体重排。主动询问「哪个版本最接近预期？需要我针对它继续打磨吗？」

第 5 步 · 迭代调整

用户反馈不合适时：

• 局部调整（文字、标签、组件增删）：直接修改对应版本文件，保持模板样式不变。
• 换模板：回到第 1 步重新选择。
• 重新生成对比视图（重新运行 build_compare.py）后再展示。

硬性约束

• 全程使用内联样式 + <section> 结构，无外部 CSS/JS/class/id，保证公众号编辑器兼容。
• 不改写原文语义；不添加原文没有的观点、数据或总结。
• 模板样式参数（颜色/字体/字号/间距）不得修改，除非用户明确提出定制要求。
• 单个成品只承载一篇文章；成品里不得保留模板占位文字（「此处是二级标题」「列表项 1」等只存在于模板中，套用后必须全部被真实内容替换或整块删除）。