公众号文章排版

自媒体文章排版生成技能

概述

为自媒体文章生成高质量排版 HTML，支持微信公众号和今日头条两大平台。微信公众号采用全内联 CSS（inline style），确保复制粘贴格式不丢失；今日头条采用纯语义 HTML 标签，适配 ProseMirror 编辑器 schema 白名单机制。

排版设计原则

排版的核心目标不是「好看」，而是「好读」。以下三条原则是所有排版决策的底层约束，适用于微信和头条两个平台，在组件选择和生成 HTML 时必须始终遵守。

原则一：克制装饰，突出内容

误区：花哨的背景和动画分散注意力——读者来看内容，不是来看排版炫技。

排版为内容服务，装饰是手段不是目的。具体规则：

• 一篇文章内最多 2 种强调色（主色 PRIMARY + 辅色 ACCENT），不引入令牌之外的额外色彩
• 渐变仅用于：分割线（组件2）、强调卡片背景（组件8）、数据高亮卡片（组件15），不扩散到正文段落和普通引用块
• 不连续堆叠卡片：同一段落区域不连续使用超过 2 个卡片类组件（提示框/强调卡/数据卡），中间用正文段落或分割线过渡
• emoji 克制：微信单篇不超过 4 种不同 emoji；头条不超过 2 种且不连续（算法敏感）
• 克制使用 box-shadow：微信编辑器实测支持阴影，正文以留白和边框制造层次为主
• 背景色统一用 LIGHT_BG：所有浅底区域使用令牌值，不自定义其他背景色

原则二：留白呼吸，拒绝密铺

误区：密密麻麻的文字让读者望而却步——留白是排版的呼吸，没有呼吸感的页面让人窒息。

留白不是浪费空间，是引导视线节奏的工具。具体规则：

• 段落长度：微信正文每段不超过 5 行（约 80 字），头条不超过 4 行（约 60 字）
• 组件间距：组件之间至少 8px 纵向间距，章节切换处至少 24px
• 段间空行：段落与段落之间留视觉间距（padding 4-12px），不连续贴排
• 卡片内 padding：16-20px，文字不贴卡片边缘
• 小标题频率：每 300 字插入一个章节标题（H2/H3），打断文字墙
• 首屏留白：主标题区上方至少 32px padding，给标题呼吸空间
• 页尾留白：底部版权区上方至少 24px，收尾不局促

原则三：层级清晰，节奏分明

误区：标题正文分不清，阅读节奏断裂——读者扫读时应该一眼分清「这是标题」「这是正文」「这是重点」。

视觉层级是阅读的导航图。具体规则：

• 字号阶梯：主标题 24px > 二级标题 19px > 三级标题 17px > 正文 15px，各级之间至少 2px 差距
• 字重区分：标题 700/600，正文 400，强调 600/700——字重是层级的第一信号
• 色彩锚点：标题区用 PRIMARY 色装饰（竖条/方块/标签胶囊），正文用 TEXT_BODY 色，标题与正文一眼可辨
• 一段一意：一个段落只讲一个要点，不混合多个话题
• 组件不越级：H2 下可接正文或 H3，但 H3 下不跳回 H2；列表项不与正文段落混排
• 分割线节制：章节切换用分割线（组件2），但单篇不超过 4 条，避免页面碎片化

以上原则的量化参数（字号/间距/行高/字间距）详见 references/design-system.md 的「字体系统」和「间距系统」。原则是「为什么」，设计系统是「具体多少」。

---

触发条件

• 用户要求生成/创建/排版微信公众号文章或今日头条文章
• 用户需要公众号/头条美化格式、编辑器兼容 HTML
• 用户提到"公众号排版"、"头条排版"、"微信文章格式"、"头条文章格式"
• 用户提供文章内容，要求排版后可直接发布

平台选择

平台选择逻辑

优先级：用户显式指定 > 内容自动匹配 > 默认微信公众号

1. 用户显式指定

2. 内容自动匹配

当用户未明确指定平台时，根据上下文判断：

3. 引导选择

无法自动判断时，使用 AskUserQuestion 工具让用户选择：

• 微信公众号（推荐）— 全内联CSS，精美丰富排版
• 今日头条 — 纯语义HTML，克制信息密度
• 两个平台都要

---

微信公众号平台

微信风格系统

风格色板速查

节日风格（8种，复用通用组件模板，仅替换令牌色值）：

通用/节日/季节/官方/磨砂风格的 PAGE_BG 统一为 #FAFAFA。其余主题风格各有独立 PAGE_BG（讣告 #FFFFFF、赛博 #FAFBFC），详见主题风格色板表。

季节风格（4种，复用通用组件模板，仅替换令牌色值）：

主题风格（4种，复用通用组件模板，仅替换令牌色值 + 风格特色微调）：

赛博·克制霓虹用渐变文字 NEON_GRAD=linear-gradient(90deg,#06b6d4,#d946ef) 模拟霓虹（不加 box-shadow）；磨砂·翡翠凝碧用 LIGHT_BG 实色 #EDF7F2 + #C5DED2 浅翡翠描边模拟磨砂质感（不依赖页面背景色，公众号复制后效果不变）。详见 design-system.md「风格特色微调」。

风格选择逻辑

优先级：用户显式指定 > 节日关键词命中 > 季节关键词命中 > 主题关键词命中 > 内容自动匹配 > 默认 Linear 蓝紫

1. 用户显式指定：「用墨韵素雅风格排版」「换暖阳咖啡色」「用春节红金风格」→ 使用指定风格
2. 节日关键词命中：文章内容含节日关键词时自动选用对应节日风格（关键词表见 design-system.md「节日风格自动匹配关键词」）。例如文章提到「粽子、龙舟」→ 端午·艾绿五彩。
3. 季节关键词命中：文章主题为四季 / 二十四节气 / 物候节气时自动选用对应季节风格（关键词表见 design-system.md「季节风格自动匹配关键词」）。例如文章提到「立夏、消暑、海风」→ 夏·海风晴蓝。
4. 主题关键词命中：文章属于特定领域主题时自动选用对应主题风格（关键词表见 design-system.md「主题风格自动匹配关键词」）。例如文章提到「政务、公告、白皮书」→ 官方·严谨庄重；「讣告、悼念」→ 讣告·肃穆黑白；「赛博、极客、终端」→ 赛博·克制霓虹；「磨砂、亚克力、翡翠」→ 磨砂·翡翠凝碧。
5. 内容自动匹配（非节日、非季节、非主题）：

1. 引导选择：内容类型不明确、且节日/季节/主题关键词均未命中时，使用 AskUserQuestion 工具

风格特色微调

微信排版组件（23个）

详见 references/design-system.md 组件1-23。核心规则：

• 全内联 CSS（inline style），不用 class
• 使用 `` 嵌套，微信编辑器对 section 兼容性最好
• 引用块用 border-left（position:absolute 微信支持但 border-left 更简洁）
• 禁止 + `white-space`（代码块用 + `` +  ）
• section 横向 padding 统一 6px

---

今日头条平台

技术原理

头条编辑器基于 ProseMirror，使用 schema 白名单机制——所有 inline style 默认被剥离，只有 schema 中声明的语义标签才保留。因此头条排版必须使用纯语义 HTML，零 inline style。

头条排版组件（17个）

详见 references/design-system.md 头条组件 T1-T17。

头条排版规范

头条算法雷区（降低推荐权重）

• 连续3个以上感叹号/问号
• 全大写标题
• emoji刷屏（单篇超2种）
• 无图纯文字超长段落
• 过度装饰/花哨排版

头条图片规范

头条页面外壳

头条模板使用双视图预览：美化预览（有CSS模拟理想效果）↔ 头条实际效果（无CSS模拟ProseMirror渲染）。复制时仅复制语义HTML标签，CSS不会被复制。详见 references/design-system.md 头条页面外壳模板。

---

工作流程

1. 确定平台

按「平台选择逻辑」确定是微信公众号还是今日头条。无法判断时用 AskUserQuestion 引导。

2. 获取/生成文章内容

若用户直接提供文章文本，直接进入排版。若只给主题，先产出文章内容再排版。

3. 确定风格（仅微信）

微信平台需要选择 23 种风格之一（7 通用 + 8 节日 + 4 季节 + 4 主题），按「风格选择逻辑」确定。头条平台使用固定配色（#F04142红），无需选风格。

4. 读取设计系统

读取 references/design-system.md，获取对应平台的组件模板：

• 微信 → 组件1-23（inline style，令牌化）
• 头条 → 组件T1-T17（纯语义HTML）

5. 选择排版组件

根据文章结构选择合适的组件组合。

6. 生成 HTML

按组件模板生成完整 HTML 文件。关键规则：

微信：

1. 所有样式内联（style=""），不用 class
2. 使用 `` 嵌套
3. 色值令牌替换为所选风格实际值
4. 页面结构：工具栏 + 预览区 + 复制脚本

头条：

1. 零 inline style，只用语义标签
2. 用 ◆★▶【】 等 Unicode 符号 + 语义标签建立层级
3. 页面结构：工具栏 + 双视图切换 + 预览区 + 复制脚本

7. 输出文件

生成 HTML 文件保存到当前工作目录，文件名格式：

• 微信：wechat-{主题}.html
• 头条：toutiao-{主题}.html

---

注意事项

微信公众号

• 不支持外部 CSS、JavaScript（JS 仅用于预览页复制功能）
• position: absolute：微信编辑器已支持，粘贴后正常渲染。引用块推荐用 border-left（更简洁）
• **禁止 + `white-space`**：换行丢失，代码块用 + `` +  
• emoji 正常显示，渐变 linear-gradient 支持良好
• box-shadow 微信编辑器已支持，正文设计上以边框和留白为主
• section 横向 padding 统一 6px

今日头条

• 禁止 inline style：ProseMirror 全部剥离，必须用语义标签
• 禁止 `` 嵌套：不在 schema 白名单，被忽略或扁平化
• 支持 `` 代码块：与微信不同，头条 ProseMirror schema 保留 pre 标签
• 用 Unicode 符号（◆★▶【】）建立视觉层级，不依赖 CSS
• emoji 最多2种，不连续出现（算法敏感）
• 排版克制，避免过度装饰