--- name: wechat-typesetting-cy license: Apache-2.0 description: 微信公众号智能排版技能。没有固定模板——读懂文章后为每一篇现场设计排版：版面结构、阅读节奏、风格气质、配色字体全部从内容推导，每篇都不同，并给出备选风格参考；用微信安全实现手法生成全内联 HTML，以内容完整性、兼容、输出契约和真实渲染四道发布门降低粘贴后崩坏风险；输出带"一键复制"按钮的预览页。当用户提到"微信文章"、"公众号文章"、"发公众号"、"帮我排版"、"公众号排版"、"微信排版"、"排版成微信格式"、"公众号 HTML"，或给出一篇文章/Markdown 要发布到公众号时触发；也用于检查已有公众号 HTML 的兼容性与排版质量、给文章换风格重排。 --- # 微信公众号智能排版 **没有模板。** 每篇文章现场设计：版面结构、阅读节奏、风格气质、配色字体，全部从这一篇的内容推导出来——两篇不同的文章不应该得到同一套排版。唯一不变的是底线：**微信公众号编辑器里粘贴后必须正常显示**。 流程：**读懂文章 → 现场设计（产出设计方案 + 备选气质）→ 用微信安全手法实现 → 一键复制进编辑器**。 资源分两类——硬约束必读，参考仅启发： | 文件 | 作用 | 何时读 | |---|---|---| | `references/wechat-compat.md` | 微信编辑器兼容硬约束 + 自检清单（**底线**） | **每次生成/检查前必读** | | `references/design-craft.md` | 设计感手艺库：记忆点 / 字号对比 / 装饰 / 色彩 / 留白（**上限**） | **每次设计与生成时必读** | | `references/components.md` | 微信安全实现手法（DOM 结构已验证；视觉样式由设计方案决定） | 生成 HTML 时 | | `references/guidelines.md` | 排版审美纪律（层级/节奏/色彩） | 设计与质检时 | | `references/style-directions.md` | 参考案例集：八种已验证的气质组合（**只供启发，禁止整套照搬**） | 需要灵感或用户点名某风格时 | | `assets/examples/four-gate-sample.*` | 原文与 HTML 配对的四门通过样例 | 理解交付证据时 | | `assets/examples/blue-minimal.html` / `dark-tech.html` | 视觉组装与兼容展示页，不是内容完整性样例 | 可选 | ## 任务类型 1. **生成排版** —— 用户给文章（纯文本/Markdown），输出可粘贴的排版 HTML（下方主流程） 2. **检查排版** —— 用户给已有 HTML，对照 compat 硬约束 + 质量规范出问题清单，确认后修复 3. **换风格重排** —— 用户对结果说"换成 XX 风"，内容结构不动，换 token 重新生成 ## 核心原则 **先分清两类规则——这是整个技能的骨架：** - **硬规则（只有两类，与文章无关，永不可违反）**：① 微信兼容（`wechat-compat.md`，违反就崩）；② 内容零改动（违反就是改了用户的文章）。这两类是非黑即白的红线，自检必须 100% 通过。 - **设计判断（其余全部，因文而异，没有红线）**：风格、字号、对比、构图、配色、留白、节奏、装饰……`design-craft.md` / `guidelines.md` 里的所有数字都是"多数文章的好起点"，不是必须达标的尺。**判断"这篇文章要什么"永远高于"规范说几"**——极简要弱对比、对称要居中、短文不要重音时，就该违背默认值，服从内容。 两条硬规则展开： - **内容零改动（第一铁律）**：排版不是编辑。给到的文章必须**完整展示**——一句不删、一字不改、不改写不润色、不调整叙述顺序、不复制重复。金句等组件是把原句"**原位升格**"呈现（换个版式，不是摘抄一份）。允许转化的只有三类**结构记号**：Markdown 语法、枚举词（"步骤一：" → 设计编号）、媒体标记（→ 占位块）；超长段落可以按句拆分（一个字都不动）。版式自身元素（编号 / 分隔 / END / 占位块 / 作者卡占位）不得携带新的正文意思——**不自拟小标题**；副题 / 摘要只有原文自带时才有，没有就不造。凡输出里存在原文没有的可见版式文字，把它放进独立元素并标 `data-layout-text="true"`；只标版式文字，绝不把原文包进去。该标记只服务发布前校验，被微信剥掉也不影响样式 - **兼容是底线**：浏览器里再好看，粘贴后崩了就是零分——所有输出必须过 wechat-compat 自检 - **风格服务内容、内容大于样式**：先读懂气质再决定穿什么衣服；卡片装饰是调味料，正文呼吸感优先 ## 生成排版主流程 ### Step 1 · 内容画像 通读全文，提取： - **题材域**：科技 / 商业财经 / 观点评论 / 情感文学 / 生活方式 / 健康育儿 / 教程方法论 / 盘点清单…… - **气质坐标**：理性 ↔ 感性；严肃 ↔ 轻松；锐利 ↔ 温和 - **结构素材**：有没有数据点、时间线、步骤、清单、金句、引用、案例、代码、外链 - **媒体标记**：识别所有图片/视频位置——`![…](url)`、裸图片链接、【图：…】、【视频：…】、（此处放图）等写法都算；区分"有 https 地址的图"和"本地图/只标了位置的图/视频" - **篇幅密度**：字数、章节数，决定版面松紧 文章太短（< 300 字）或气质严重混杂时，可以问用户一个问题确认定位；其余情况直接判断。 ### Step 2 · 现场设计（核心步骤） 不查模板、不选方向——基于 Step 1 的画像，**像设计师一样回答五个问题**，答案合起来就是这一篇的设计方案： 1. **读者读完该带走什么感觉？** → 气质定位，一句话（如"安静的深夜电台" / "发布会现场" / "周末厨房"） 2. **文章的信息是什么形状的？**（线性叙事 / 并列论点 / 步骤教程 / 数据论证 / 时间线 / 混合）→ 版面策略：让哪种内容形态当视觉主角、章节怎么组织、版面密度多大 3. **阅读节奏该多快？**（沉浸长读 / 快扫跳读）→ 字号层级、行距、留白量、强调密度 4. **这篇文章的世界是什么颜色和质感的？** 从内容意象/行业/品牌取色（咖啡=棕、微信=绿、深夜=暖黄）→ 配色体系（页底色/正文色/主强调/浅底，附取色理由）+ 字体倾向（衬线的文气 / 无衬线的利落 / 等宽的代码感） 5. **形态语言用什么？**（直角细线的严谨 / 圆角色块的轻快 / 无框留白的安静 / 深底卡片的密度感）→ 标题、强调、分隔、卡片的具体做法 **产出一份 6-9 行的设计方案**（气质 / 版面策略 / 节奏 / 配色及理由 / 形态语言 / **视觉记忆点**），外加 **2 个备选气质方向**（各一句话+主色）。交付时原样报告给用户，一句话即可切换重排。 **视觉记忆点是必填项**：读者截图最可能截哪一屏？标题区封面构图 / 贯穿全文的装饰语言 / 一处大胆的金句版面，三选一（手法见 `design-craft.md`）——没有记忆点的设计方案是不完整的。 **反平庸三个着力点**（`design-craft.md` 详述，是**倾向不是硬线**，跟着文章气质用）：① 字号对比敢拉开——别无意识全压在 15/16/17（但极简的弱对比是有意选择）；② 警惕无脑居中——构图随气质选（但对称/极简文章居中可能正是对的）；③ 主色克制、大色面少、有情绪高点的文章给留白重音。装饰尽量从本篇内容意象长出来，少用通用符号库默认项。这些帮你避开平庸，但**这篇文章需要别的时，服从文章**。 设计自由，纪律不自由：三色纪律、字号 ≤ 4 档、组件种类 ≤ 5、`guidelines.md` 全部审美规则照守。 - 用户指定风格 / 品牌色 / 要和上一篇保持一致 → 作为设计输入，优先满足 - 没把握时可翻 `style-directions.md` 的参考案例找灵感——**看某种质感是怎么做出来的，禁止整套照搬任何案例的配色与组合**；好设计经得起一个检验：换一篇文章，这套设计就不再是最优解 ### Step 3 · 读规范 生成前读齐：`wechat-compat.md`（硬约束）→ `design-craft.md`（设计感手艺）→ `components.md`（安全实现手法）→ `guidelines.md`（审美纪律）。 ### Step 4 · 结构映射 把文章元素映射到实现手法。**组件库给的只是微信安全的 DOM 结构**（多列必须 table、列表必须 p+span、深色页必须 table 骨架……）；每个组件的视觉样式——颜色、圆角、边框、装饰、间距——按本篇设计方案重新定，示例里的具体数值只是演示，不是答案： | 文章元素 | 实现手法（形态按设计方案定） | |---|---| | 标题 + 副题 | 头部标题区（杂志式 / 居中式 / 极简式，或自创安全形态） | | 章节 | 章节标题（水印编号 / 序号色块 / 左色条 / 居中细线，或自创） | | 核心观点 / 金句 | 金句卡（色底 / 边框 / 留白居中，或自创） | | 数据点 ≥ 2 个 | 数据栏（table 多列） | | 并列要点 | 清单（p + 序号 span，绝不用 ul/li） | | 操作步骤 | 步骤块（STEP 标签） | | 时间顺序事件 | 时间线（table 左点右文） | | 他人观点 / 引文 | 引用卡（标注来源） | | 多方案对比 | 对比表 | | 代码 | 代码块（pre-wrap，不用 pre 标签） | | 图片（https 外链） | `` + 图注（粘贴时编辑器自动转存） | | 本地图 / 只标位置的图 | **图片占位块**（可视虚线框 + 编号 + 建议内容） | | 视频 | **视频占位块**（视频无法随粘贴带入，编辑器内插入；禁止 video/iframe 标签） | | 外链 | 正文上标 [n] + 文末参考资料（外链不可点） | | 结尾 | 文末区（END / 互动引导 / 递进式） | **组装节奏**：每章节 = 标题 + 正文（主体）+ 至多 1-2 个组件；卡片不连发；全文组件种类 ≤ 5 种。 ### Step 5 · 生成 HTML 1. 按设计方案给实现手法上样式，全部内联 2. 原文之外的可见版式文字（编号、英文眉题、END、媒体/作者占位、参考资料编号等）用独立元素承载并标 `data-layout-text="true"`；若文字来自原文，即使被升格、拆成多个 span 或两侧加了装饰符，也不加此标记 3. 读 `assets/preview-shell.html` 作外壳；复制根必须保持为普通文档树中的 `
`，不能换成会被浏览器自动闭合的 `p`，也不能放进 `template`、`dialog` / `details`、媒体 fallback、`textarea`、`select`、表格解析上下文、SVG / MathML 等会令浏览器把节点惰性化、隐藏、吞掉或改挂位置的祖先。替换全部占位符：`{{文章标题}}`、`{{内容底色}}`、`{{风格说明}}`、`{{风格方向}}`、`{{备选方向1}}`、`{{备选方向2}}`；风格注释必须是 `#wechat-content` 的第一个有效节点： `` 4. 把排版正文插入 `#wechat-content` 内；预览 CSS、按钮和脚本留在复制区外，整段唯一复制脚本与复制按钮的直接 `copyContent()` 调用作为已审计基础设施保持原结构，不随视觉方案改写 5. 保存为 `output/{文章主题 slug}.html`（换风格重排时存 `output/{slug}-{方向}.html` 便于对比） ### Step 6 · 发布前自检 自检分两类——**硬规则必须 100% 过，设计判断是反思不是验收**： **A. 四道硬门（任一道不过都不许交付）** 1. **内容完整性（脚本校验）**：运行 `python3 {技能目录}/scripts/verify-completeness.py <原文文件> <输出.html>` ——脚本只读唯一且浏览器安全的 `
`，排除 `data-layout-text="true"` 与明确不可见节点后按顺序精确比较可见原文流，保留英文词间空格并以 URL token 集合核对链接目标，能抓缺字、改标点、重排、重复、常见藏字、链接丢失与未标记增文；逐字拆开或两侧包装饰符的标记文字只要与原文重叠也会失败。原文是用户口头粘贴的，先存成临时文件再校验；**修复后重跑直到通过** 2. **微信兼容（脚本校验）**：运行 `python3 {技能目录}/scripts/verify-wechat-compat.py <输出.html>` ——按浏览器的“重复属性取第一项”语义解析复制区的标签、属性与 CSS 声明，不扫预览外壳，也不会把合法 `text-transform` 误判成 `transform`；自动检查重复属性、CSS 转义/变量/calc、现代高级颜色函数、藏字手法、禁用标签/事件、flex/grid/gap、定位与动画、背景、图片/链接和整页 table 骨架。**未通过必须修复后重跑**；警告项与脚本覆盖不到的语义规则再对照 `wechat-compat.md` 人工过一遍 3. **输出契约（脚本校验）**：运行 `python3 {技能目录}/scripts/verify-output-contract.py <输出.html>` ——检查唯一、使用 `div`、位于普通文档树且自身与祖先未显式隐藏的复制根，检查重复属性、首节点风格注释及两个备选，以及按钮自身与祖先未显式隐藏、未被 `inert` / 禁用 `fieldset` 等祖先变成不可用、按钮未禁用且直接调用 `copyContent()` 的复制按钮、手机宽度按钮、viewport 和未替换占位符；唯一 `