# Wechat Layout

> 全能型微信公众号 AI 排版工具。将任意文本/Markdown 转换为公众号编辑器可直接粘贴的内联样式 HTML。三维组合：8 套配色主题（清新绿/科技蓝/商务黑金/活力橙/优雅紫/中国红/少女粉/极简黑白）× 10 种设计风格（柔和卡片/新粗野主义/蒸汽波/瑞士国际主义/国风雅致/复古终端/孟菲斯/杂志编辑/渐变玻璃感/官网落地页）× 6 种文章类型预设，24+ 组件。

- Skill: `wp-x/wechat-layout` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add wp-x/wechat-layout`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wp-x/wechat-layout/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: wp-x (https://skillmd.com/u/wp-x)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/wp-x/wechat-layout

---


# 微信公众号全能排版

将用户提供的任何文档内容，转换为统一、美观、可直接粘贴进公众号编辑器的 HTML。

## 工作流程

排版由三个正交维度组合而成：**主题**（配色，`themes.md`）× **风格**（形态语言，`styles.md`）× **预设**（文章结构，`presets.md`）。

1. **读取内容**：接收用户的文本/Markdown/文件。
2. **选主题与风格**：
   - 用户指定了 → 直接使用。
   - 未指定 → 根据内容气质推荐（见下方两张表），并用一句话告知所选组合，不要停下来等确认。风格默认"柔和卡片风"。
3. **选文章类型预设**（决定组件搭配倾向，见 `references/presets.md`）。
4. **读取 `references/components.md` 拿到组件模板**，将 `{{令牌}}` 替换为 `references/themes.md` 所选色板值；若风格非默认，再按 `references/styles.md` 的全局覆盖规则修改形态，签名组件直接替换对应基础组件。
5. **按"内容映射规则"逐段转换**，输出完整 HTML。
6. **自检**：对照"硬性约束"检查，确认原文无删减。

## 主题推荐

| 内容气质 | 主题 |
|---|---|
| 健康、生活方式、环保、成长干货 | 清新绿 |
| AI、科技、互联网、数码测评 | 科技蓝 |
| 商业分析、财经、行业报告 | 商务黑金 |
| 美食、旅行、活动预告、促销 | 活力橙 |
| 心理、文艺、女性成长、知识付费 | 优雅紫 |
| 节日、国潮、正能量、大事件 | 中国红 |
| 情感、美妆、母婴、小红书风 | 少女粉 |
| 深度长文、人物特稿、极简审美 | 极简黑白 |

## 风格推荐

| 内容气质 | 风格 |
|---|---|
| 通用、稳妥不出错 | 柔和卡片风（默认） |
| 潮流文化、设计圈、犀利观点 | 新粗野主义 |
| 音乐、亚文化、复古创意 | 蒸汽波 |
| 深度长文、设计评论、理性克制 | 瑞士国际主义 |
| 传统文化、节气节日、诗文茶酒 | 国风雅致 |
| 程序员、AI 技术、极客测评 | 复古终端 |
| 亲子、活动、轻松俏皮 | 孟菲斯 |
| 人物特稿、生活方式、品牌软文 | 杂志编辑风 |
| AI 产品、SaaS、科技发布稿 | 渐变玻璃感 |
| 产品发布、工具评测、年度盘点、大厂官网感 | 官网落地页（色带分区范式） |

用户拿参考文章/截图要求"做成这种风格"时，按 `references/style-lab.md` 的五层解剖流程解析并生成新风格，禁止照搬像素值。

蒸汽波、国风雅致、复古终端、孟菲斯自带专属色板，选中后忽略主题维度；组合禁忌见 `styles.md` 末尾的组合建议表。

## 内容映射规则

| 原文特征 | 使用组件 |
|---|---|
| 文章开头第一段 | 首字下沉段落（若已用导语卡，则首段为普通段落，二者不同用） |
| 开篇导语/摘要 | 导语卡 |
| 大章节切换 | 编号分隔符（01、02…）**或**一级标题区块，全篇二选一：章节无标题文字用编号分隔符，有标题文字用一级标题区块，**两者禁止相邻连用** |
| 一级标题 | 一级标题区块（自动补英文副标题，如 `WHY IT MATTERS`） |
| 二级标题 | 二级标题（左竖线） |
| 三级标题 | 三级标题（▍加粗行） |
| 核心结论、关键概念（每段最多 2 处） | 高亮标注（色底） |
| 术语、数据、动作词（每个长段至少 1 处） | 粗体关键词（无底色） |
| 金句、核心观点 | 金句卡或居中强调 |
| 核心原理、要点归纳 | 信息卡片 |
| 步骤、流程 | 步骤时间线 |
| 并列要点 | 列表卡片 |
| 两方对比 | 对比双栏 |
| 关键数字 | 数字亮点 |
| 引用他人/文献 | 引用块 |
| 问答内容 | FAQ 组件 |
| 提示/警告 | 提示条 |
| 代码 | 代码块 |
| 图片位置 | 标准图片组件（保留原 URL；无图则输出 `<!-- 此处配图：xxx -->` 占位注释） |
| 结尾总结 | 重点卡片 |
| 文末 | 引导关注卡（用户未提供公众号名时用"点亮【在看】"通用文案） |

## 硬性约束（公众号编辑器兼容）

- 所有样式必须**内联 style**，禁止 `<style>` 标签、class 选择器（`rich_pages wxw-img` 等公众号保留 class 除外）。
- **所有直接包裹文字的最内层 `<span>` 必须写成 `<span leaf="">`**（组件模板中简写为 `<span>`，生成 HTML 时统一补上 `leaf=""`），用于绕过公众号编辑器的样式过滤，防止粘贴后样式被剥离。
- 禁止 `position`、`transform`、`float`（首字下沉的 float 除外，为已验证可用写法）、`id`、JS、外部字体。
- 布局只用 `section` + `p` + `span`，双栏用 `display: inline-block` 或 `table`。
- 图片必须带 `class="rich_pages wxw-img"` 和 `max-width:100% !important`。
- 字号范围 11px–36px；正文 15px、行高 2.0–2.1、`letter-spacing: 0.3px`、两端对齐。
- 外层容器：`<section>` 包裹全文，背景 `#ffffff`，内边距 `32px 20px`，字体栈 `-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif`。
- 代码末尾追加标准结尾：

```html
<p style="display: none;"><br/></p>
<section class="_135editor"><mp-style-type data-value="3"></mp-style-type></section>
<p><br/></p>
```

## 视觉层次规范（保证层次分明，必须执行）

排版的第一目标是**一眼能看出结构**。逐条自检：

1. **字号阶梯拉开差距**：一级标题 22px > 二级标题 17px > 正文 15px > 辅助/图注/来源 13px。另设**强调层 18–20px**，仅限居中强调、重点卡片、金句卡（18px）、数字亮点使用，且必须居中或置于卡片内，避免与标题混淆。相邻层级差 ≥ 2px，同一层级全篇统一，禁止新增其他字号（徽章、胶囊标签等装饰性文字不计入阶梯）。
2. **视觉重量阶梯**：一级标题 = 卡片 + 粗体 + 大字；二级标题 = 左竖线 + 粗体，**不用卡片**；三级标题 = ▍前缀加粗行，无线无卡；正文无任何装饰。相邻两级标题绝不能长得像同一种东西。
3. **间距节奏（亲密性原则）**：标题上方间距必须 ≥ 下方间距的 2 倍（一级 56px/24px，二级 44px/18px），让标题明确"属于"下文而不是漂在中间；段落间 20px；大章节切换（编号分隔符）前后 ≥ 48px。
4. **颜色三级制**：标题色（最深）、正文主色、次要文字（明显更浅更小），全篇只用这三级灰度 + 主题色，不得混用其他文字颜色。
5. **扫读优先，双层标注（必须执行）**：读者只看"标题 + 高亮 + 粗体"就应获得全文核心信息，这是排版合格线。
   - **高亮标注**（色底）＝核心结论、关键概念：每段最多 2 处，全文覆盖字数 5–10%。
   - **粗体关键词**（无底色、高亮文字色）＝次级重点、术语、数据、动作词：**每个超过 60 字的段落至少标 1 处**，长段 2–3 处，让每一屏都有视觉抓手。
   - 输出前做扫读测试：遮住普通文字只看标注，能否复述文章主线？不能则回去补标。
   - 金句卡/重点卡片一屏（约 500 字）最多一个，避免大组件泛滥。
6. **长段必拆**：单个段落超过 120 字（约 4 行）必须拆成两段，或转为列表卡片/步骤时间线；连续 3 段以上纯文字，中间必须插入一个视觉组件（卡片、金句、数字亮点或图片位）。
7. **卡片留给内容，不留给标题**：信息卡、列表卡等卡片组件只承载"要点归纳"类内容，连续出现必须被普通段落隔开，避免满屏卡片导致层次糊成一片。
8. 输出前通读一遍结构：折叠掉正文只看标题和卡片，应能还原文章大纲；还原不出来就是层次失败，须返工。

## 保留原则

- 不删减任何文字内容，不改写语义（用户明确要求润色除外）。
- 保持原文逻辑顺序与段落分隔。
- 大组件（金句卡/重点卡片）宁缺毋滥，连续两个卡片之间至少隔一个普通段落；但**行内标注（高亮 + 粗体）是下限要求而非上限**，按"扫读优先"规则执行，不得因克制而漏标。

## 输出要求

1. 直接输出完整 HTML 代码块，从外层 `<section>` 到标准结尾。
2. 若用户要求保存文件，写入 `排版-{标题}-{主题}-{风格}.html`。
3. 输出后用 1-2 句中文说明所用主题、风格与组件，并提示可换主题或风格重排。