微信公众号排版（wechat-format）

把用户提供的 Markdown 内容，按推导的视觉参数，转换成微信公众平台兼容的 HTML 源码（带内联样式）。

核心原理

微信公众号只接受特定标签和内联 style。全文 <section> 包裹、内联 CSS 无 class/id、<p> / <section> 代替 <div>、颜色 rgb()/rgba() 格式。CSS 兼容清单见 [[工作流/CSS兼容性.md|CSS兼容性]]。

架构

> 排版时 LLM 从信号矩阵拿到参数 → 查速查表 → 跳组件文件对应方向 H2 → 取 HTML。一跳直达。
>
> 整页设计原则：短篇靠留白和字体层级（1-2 组件），中篇交替背景色打破全白底（2-3 组件），长篇用大号装饰和渐变过渡柔化分区（3-5 组件）。每次从组件池随机选用不同组合，同一篇文章两次排版结果自然不同。

信号矩阵（核心）

读文章后，从内容中独立推导每个视觉维度——不映射到固定风格名，每个维度独立判定：

> 账号类型影响：服务号文章直接出现在聊天列表（而非"订阅号消息"文件夹），封面图曝光更大；每月只有 4 次推送机会，每篇都是"精品"。排版时服务号自动偏向——色调偏冷色/低饱和、骨架优先简报型→文档型→杂志型、组件方向偏几何、装饰密度 -1 组、配图更倾向信息图而非装饰图。订阅号保持现有逻辑不变。

> 页面骨架：排版前先选定一套页面级结构骨架。骨架决定了「什么元素出现在什么位置、页面从哪里开始、经过怎样的起伏、在哪里结束」——这是人眼感知到的最大差异。骨架从信号矩阵的多个维度综合判定，不受组件级随机影响——同一篇文章两次排版，骨架始终一致。
>
> | 骨架 | 触发信号 | 开篇方式 | 中段节奏 | 结尾方式 | 核心特征 |
> |------|---------|---------|---------|---------|---------|
> | 杂志型 | 感性 + airy + ≥1张图 | 全幅大图 → 标题卡片 → 英文装饰标签 | 大号章节编号 + 引文穿插 + 图片文字交替 | 摄影署名三行 | 章节感强、图文穿插、杂志翻页体验 |
> | 简报型 | 理性 + compact + 数据 ≥5处 | 标题 → 导语 → KPI 数据卡片 | 简洁编号章节 + 要点列表 + 数据对比卡片 | 品牌区 + 相关链接 | 信息密度高、数据驱动、快速扫描 |
> | 叙事型 | 感性 + per-sentence + 长段落 | 日期/场景标签 → 柔光引导语 | 逐句分段 + 大留白 + 沉浸区 + 居中金句 | 慢结尾 + 手写感署名 | 留白呼吸、逐句沉浸、情感驱动 |
> | 画册型 | 图主导 + 口语 + 短句为主 | 全幅大图 → 短标题居中 | 图 → 一句话 → 图 → 一句话交替 | 全幅图收尾 | 图片叙事、文字极少、视觉冲击 |
> | 文档型 | 庄重 + indent + 正式词汇 | 标题居中 → 发文信息行 | 首行缩进正文 + 规范编号章节 + 正式条文引用框 | 三行落款（来源/编辑/日期） | 正式克制、公文规范、无装饰 |
> | 对话型 | 问/答交替 + 口语 + 访谈格式 | 栏目标签 → 简短导语 | 提问(左标签) → 回答(右标签) 交替循环 | 编辑总结 + 署名 | 一问一答、气泡/标签区分说话者、采访节奏 |
> | 时间线型 | 时间跨度明显 + 年份/日期 ≥5处 | 标题 → 时代背景概述 | 时间节点 → 事件卡片 交替（从旧到新） | 收束于当下 + 展望 | 竖向时间轴、圆点连线、事件卡片、历史感 |
> | 书信型 | 称呼语 + 第一人称 + 署名落款 | 称呼（亲爱的XX / XX你好） | 正文逐段 + 祝福/问候语 | 署名 + 日期 | 称呼署名框架、私密留白、不配图、手写感 |
> | 卡片型 | 并列要点 ≥5个 + 非叙事 + 无时序 | 标题 → 简短导语 | 卡片网格排列（每卡：图标+标题+一句） | 总结卡片（主色背景） | 模块化浏览、独立自包含、一目十行 |
> | 教程型 | 步骤编号 + 教程/指南/攻略词 | 标题 → 学习目标卡片 | 步骤编号 → 说明 → 配图 → 重复 | 要点总结框 | 编号步骤、目标前置、每步可配图、知识交付 |

> 骨架匹配规则：信号矩阵的多个维度交叉落入某个骨架的信号区 → 取该骨架。若跨骨架（如感性+airy 但数据也多），优先按以下顺序判定：① 段落惯例（per-sentence→叙事型、indent→文档型、centered-short→画册型）② 是否有称呼+署名（→书信型）③ 是否有访谈格式（→对话型）④ 是否有时间序列（→时间线型）⑤ 是否并列要点≥5（→卡片型）⑥ 是否有步骤编号（→教程型）⑦ 其余按色调+密度。无法判定时默认杂志型。

> 图片展示策略（派生维度——从已有维度组合中计算，不从内容直接推导）：
>
> 文章有图时，按「图片数量 + 骨架 + 组件方向」三级判定选择展示方式：
>
> > 文章有图吗？ > ├─ 无图 → 纯文字排版 > └─ 有图 → 进入判定 > │ > ├─ 1 张图 > │ ├─ 作头图（位置=文章最顶部） > │ │ └─ 图上叠加文字 → 全幅图+居中标题（头图专用） > │ └─ 作正文插图 > │ ├─ 有机方向 → 色块融合 → 图底渐隐过渡 > │ ├─ 圆角方向 → 异形裁剪 → 圆形裁剪 > │ └─ 几何方向 → 异形裁剪 → 斜切角 > │ > ├─ 2 张图 > │ ├─ 内容是对比关系（"vs/不同于/另一方面" ≥2 处） > │ │ └─ 图上叠加文字 → 左右对比布局 > │ ├─ 骨架=杂志型 > │ │ └─ 图文左右交错（现有 4:6 布局） > │ └─ 其他 > │ └─ 各自独立展示（按单图规则，用现有组件） > │ > └─ ≥3 张图 > ├─ 需要并列展示（满足任一） > │ ├─ 教程步骤编号 ≥3 → 图片网格 → 三图横向+编号 > │ ├─ 产品/案例并列 ≥4 → 图片网格 → 2×2 网格 > │ ├─ 系列展示 5-6 张 → 图片网格 → 3×2 网格 > │ └─ 3 张非对比同主题 → 图片网格 → 1大+2小 > └─ 不需要并列（不同主题/不同章节） > └─ 分散嵌入各章节（每张按单图规则 + 图片说明） >
>
> 每条规则的理由：
>
> | 规则 | 理由 |
> |------|------|
> | 头图必叠加文字 | 头图是文章第一眼——图片+标题融合才有杂志封面感，分开放是博客做法 |
> | 有机→色块融合 | 有机风格的渐变/暖光/自然曲线天然适合图片到文字的柔和过渡 |
> | 圆角→圆形裁剪 | 活泼/年轻气质下圆形比矩形框更符合"不严肃"的基调 |
> | 几何→斜切角 | 理性/商务风格下斜切角有设计感但不轻浮，不对称本身是设计语言 |
> | 对比内容→并排+VS | 对比结构天然适合视觉并置——两张图放一起比分开更有说服力 |
> | 杂志骨架→左右交错 | 杂志型本身就需要图文穿插节奏，左右交错最经济 |
> | ≥3 张同主题→网格 | 并列展示比竖着排省空间，读者一眼看到全集 |
> | ≥3 张不同主题→分散 | 强行网格会张冠李戴——图配错段落比图不好看更糟 |

> 配图适配度判定（在考虑配图之前先跑此判定——不是所有文章都适合配图）：
>
> 直接判定为 skip（不适合配图），满足任一即跳过：
>
> | 信号 | 检测方式 | 原因 |
> |------|---------|------|
> | 极短文 | 全文 < 200 字 | 图比字大，喧宾夺主 |
> | 诗歌/韵文 | 换行符密度 > 30%（每 30 字 ≥ 1 换行） | 图片打断韵律和留白意境 |
> | 内心独白/日记体 | "我" ≥ 10 次 + 情感词汇 ≥ 8 处，且无数据/无列表 | 私密感被配图破坏 |
> | 纯对话/访谈 | ≥ 80% 段落以引号、人名、"问"/"答"开头 | 对话节奏快，图片打断交流感 |
> | 法规/正式条文/公告 | "条/款/章/通知/公告/须/应" ≥ 5 处 | 正式文本配图显轻浮 |
> | 纯代码/技术文档 | 代码块字符数 > 全文 50% | 代码本身就是视觉元素 |
>
> 判定为 recommend（推荐配图），满足 ≥ 2 项：
>
> | 信号 | 阈值 |
> |------|------|
> | 数据密集 | 数字/百分比 ≥ 5 处 |
> | 对比结构 | "vs/不同于/另一方面/然而" ≥ 3 处 |
> | 场景/视觉描写 | 地点/颜色/形状/外观描写 ≥ 3 段 |
> | 教程/步骤 | 编号列表 ≥ 3 条 |
> | 长文 | > 2000 字（图片帮助分段呼吸） |
>
> 不满足以上任何条件 → optional（图片可选，视用户偏好决定）。判定为 skip 时，跳过所有配图询问和生成流程，直接纯文字排版。

> 主题词提取：扫描全文输出 2-3 个意象词（内容领域 → 情感基调 → 视觉联想），用于色板微调。叠加规则：数据 ≥5 处 → 追加 KPI 卡片。兜底：特征不鲜明 → 冷色系 cyan-teal、15px、comfortable、standard、几何方向。告知用户后继续。详见 [[工作流/信号矩阵详解.md|信号矩阵详解]]。

> 受控随机：信号矩阵输出的是区间而非定点。色相 ±5°、饱和度 ±8%、明度 ±4%、字号 ±0.5px、行高/字间距/padding 密度范围内随机、组件加权轮换。详见 [[工作流/受控随机规则.md|受控随机规则]]。

完整推理链

> 排版 11 步的依赖声明图——标注每步依赖哪些前置步骤、哪些可并行。排版前扫一眼，完成后逐项打勾。详见 [[工作流/推理链.md|推理链]]。完整端到端示例见 [[工作流/示例文章完整排版.md|示例文章完整排版]]。

排版节奏

> 五级节奏（急/快/中/慢/缓）+ 节奏状态机 + 疲劳打断 + 沉浸区。逐段生成时控制段间呼吸。详见 [[工作流/排版节奏.md|排版节奏]]。

工作流

第〇步：识别模式 + 预处理

0a. 输入检测：

0b. 模式判定：

> 大多数情况是模式 A。排版是与用户对话逐步收敛偏好的过程，关键决策点用 AskUserQuestion。

> 服务号识别：用户提及"服务号"、文章内容为企业通知/活动推广/产品发布/客户服务类、或要求"正式一些""企业风格"时，在信号矩阵中标记 账号类型 = 服务号。无需额外流程——和订阅号走同一套排版逻辑，仅信号矩阵的默认倾向不同。

选择交互深度（模式 A 必问，不可跳过）

> 判定为模式 A 后，在处理任何内容之前，必须先问此问题。 这是模式 A 的第一个交互节点——跳过它等于替用户做决定。无论用户说了什么（"快速排一下""仔细排"），都要用 AskUserQuestion 让用户明确选择。

• 选 A → [[工作流/快速模式.md|快速模式]]：信号矩阵自动推导参数 → 确认设备+配图 → 直接生成
• 选 B → [[工作流/完整模式.md|完整模式]]：四步逐一确认（指纹→调参→预览→生成）

排版 A 的预处理（模式选择后执行，快速/完整通用）

> 自动修复静默执行不告知；追问项用 AskUserQuestion，选项 A. 按建议处理 / B. 保持原样。

> Markdown 剥离规则：排版由信号矩阵 + 骨架 + 组件生成视觉效果——标题、加粗、列表等形式由组件控制，不需要 Markdown 原生语法。剥离后得到干净文本供信号矩阵分析，最终视觉效果由 wechat-format 组件渲染：
>
> | Markdown 语法 | 剥离为 | 说明 |
> |-------------|--------|------|
> | # ## ### ... 标题 | 去掉 #，保留文字 | 标题层级由骨架的章节编号组件表达 |
> | **文字** __文字__ | 去掉标记，保留文字 | 加粗由强调文字组件表达 |
> | *文字* _文字_ | 去掉标记，保留文字 | 斜体可忽略（微信中文排版少用斜体） |
> | - * + 无序列表项 | 去掉前缀标记 | 列表样式由无序列表组件表达 |
> | 1. 2. 有序列表项 | 去掉序号前缀 | 序号样式由列表组件表达 |
> | [文字](url) | 保留文字 | URL 不保留（微信正文链接通过交互组件表达） |
> | ![alt](url) | 替换为 [图片：alt] 标记 | 通知后续步骤此处有配图 |
> | `代码` | 去掉反引号 | 代码样式由终端代码块组件表达 |
> | > 引用 | 去掉 > 前缀 | 引用样式由引用框组件表达 |
> | --- *** 分割线 | 删除整行 | 分割线由分割线组件表达 |
> | | 表格 | | 保留文字内容，去掉 | 和 - 分隔行 | 表格数据可用卡片组件重建 |

> 进度锚点：每个关键步骤完成后写入 知识库/output/_progress.json（格式：{"step": "1d", "tone": "cool", "size": 15}），完成后删除。

问题处理规范

排版过程中遇到的问题分三级，每级有统一的提示风格。能自动修的默默修、需判断的给建议不替用户做决定、无法继续的说明原因给选项。

> 原则：任何 AskUserQuestion 都必须包含「为什么」——不止说检测到什么，还要说为什么这是个问题、建议的方案好在哪里。快速模式和完整模式共用此规范，区别只在完整模式多给几轮把关机会。

关键约束

• 全局容器包裹全文（不可跳过）：输出 HTML 最外层必须是从 components/全局容器.md 取的 <section>，包裹全文内容。缺失 → 微信中字体/颜色/间距全部退回默认值，整篇文章格式全丢。生成完成后立即自检：第一个 <section 标签的 style 中是否含 font-family。不含 → 立刻补全局容器、重扫。
• 禁止 class/id：全部内联 style
• 禁止 <div>：用 <section> 或 <p>
• 禁止外部 CSS/字体/JS（交互 SVG 除外）
• 间距不用 margin 负数：部分安卓渲染异常
• 颜色用 rgb() / rgba() 格式
• 本地预览：图片用 配图/xxx.png 相对路径；HTML 生成到 output/ 目录，浏览器直接打开即可预览
• 深色模式：微信在深色模式下会自动重新计算颜色值（不完全尊重 inline style）。排版时正文色不浅于 rgb(85,85,85)、暗底色板完成后提醒用户手机深色模式下预览。详见 [[工作流/CSS兼容性.md#深色模式适配|CSS兼容性 → 深色模式适配]]

文件索引