# Gzh Design Purple Blue
> 微信公众号文章排版引擎（紫色 / 蓝色 双单色主题），将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。内置两个单色主题——「紫韵」紫罗兰
- Skill: `chenoneto/gzh-design-purple-blue` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add chenoneto/gzh-design-purple-blue`
- Raw SKILL.md: https://api.skillmd.com/api/skills/chenoneto/gzh-design-purple-blue/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: chenoneto (https://skillmd.com/u/chenoneto)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/chenoneto/gzh-design-purple-blue
---
# 紫韵 · 蔚蓝 · 公众号文章排版 Skill
把一篇 Markdown 文章转换为可直接复制粘贴进微信公众号编辑器、且粘贴后样式不丢失的 HTML。**内置两个单色主题**：「紫韵」（紫罗兰 `#6D5AE6`，优雅克制、理性神秘）与「蔚蓝」（科技蓝 `#2F6BFF`，科技清爽、理性开阔），均由同色系深浅 `135°` 渐变构成，结构完全一致、仅配色不同。
核心资产是 `references/` 下的**主题组件库**（设计变量 + 各组件完整 HTML + 模板骨架 + 映射规则）外加 1 套**通用增量库**（代码块 / 图片·GIF / 小标签标题，所有主题共用）。主题清单以 `references/theme-index.md` 为单一来源。本 SKILL.md 只负责流程与决策，**具体 HTML 代码一律从组件库取，不要凭记忆手写**。
## 工作流
### 0. 输入与格式归一化
用户可能给：Markdown 文本或 `.md` 路径（直接进第 1 步）、`.docx`、`.pdf`、`.txt`/无标记纯文本、网页富文本。**非 Markdown 输入必须先读 [references/format-normalize.md](references/format-normalize.md) 按其规则转成 Markdown 草稿并做结构确认**（docx 用 `scripts/extract_docx.py`，PDF 用 Read 分页读取+清噪，纯文本按标题启发式推断结构）。什么都没给时，向用户索要。
用户说「直接排 / 自动排 / 一键 / 不用问」时进**全自动模式**：跳过结构确认，自动推断结构、按默认主题排版校验，交付时附决策说明（章节结构、自拟标题、选题理由、所选主题）。
### 1. 选主题（紫色 / 蓝色 二选一）
读 [references/theme-index.md](references/theme-index.md)。本 skill 内置两套单色主题：
- **紫韵（紫色）** `references/theme-purple.md` —— 适合深度思考、方法论、人文科技、设计、情感向。
- **蔚蓝（蓝色）** `references/theme-blue.md` —— 适合 AI、产品、数据、效率、硬核技术。
选择规则：用户明确指定颜色 → 直接选用；未指定 → 按内容气质推荐（温度/思想/设计用紫，技术/数据/效率用蓝），或简短询问一句。选定后**全文只用该主题一套组件**，不跨主题混用、不两色合并。
### 2. 读组件库（两份）
(1) 读上一步选定的主题文件（紫 → `references/theme-purple.md`；蓝 → `references/theme-blue.md`），含该主题全部专属组件：引言卡、章节标题、正文标记、签名等。
(2) **同时读通用增量库** `references/common-components.md`——代码块、图片/GIF、小标签标题这三类所有主题共用，套用所选主题主色即可。
后续生成完全依据这两份组件库，HTML 一律从中取、不要手写。
### 3. 解析 Markdown 结构
| 元素 | 识别规则 |
|------|---------|
| 文章标题 | `# 标题` 或 frontmatter `title` |
| 开头引言 | 文章最开头的 `> 引用` 块 |
| 章节标题 | `## 标题` |
| 子章节 | `### 标题` |
| 加粗 / 高亮 / 下划线 | `**文字**` / `==文字==` / `文字` 或 `++文字++` |
| 引用段落 | 非开头的 `> 文字` |
| 图片 / GIF | ``、`` |
| 代码 / 命令 / Prompt | ` ``` 围栏代码块 ``` `、行内 `` `code` `` |
| 分割线 / 列表 | `---`、`***` / `- 项` 或 `1. 项` |
| 表格 | `\|` 分隔的 Markdown 表格 |
**解析完结构后，判定文章类型**（取主导类型，可复合）：教程/操作指南、盘点/工具清单、观点/深度分析、访谈/人物特稿、数据复盘/报告、生活/情感随笔、案例实战。
### 4. 按配方选组件组合 → 装配 HTML
**先查所选主题文件的「文章类型 → 组件组合配方」表**，按文章类型确定核心组件组合与点缀组件。然后依该主题库的**"完整文章模板骨架"章节**装配，把每个 Markdown 元素替换为对应组件：
- **骨架顺序以主题库为准**：引言卡 → 前言正文 → 导读（3+ 章节）→ 渐变编号章节 → 结语（∞）→ 终 → 签名。
- **行内标记按语义到所选组件库里找对应组件**：`**加粗**`→深靛加粗；`==高亮==`→浅底标签；`文字`/`++文字++`→主色下划线；`~~文字~~`→荧光笔/删除线；`>引用`→主色竖条引用。
- 来自**通用增量库**的组件：` ``` 代码块 ``` `→ 1a 深色 / 1b 浅色，行内 `` `code` ``→ 1c；``→ 2a 图片（有说明才加说明组件）、`.gif`→ 2b GIF；小标题/强调→ 3a 左竖条 / 3b 渐变药丸，金句→ 3d、提示→ 3e。
- **一篇文章只用选定主题这一套组件 + 通用库**，不跨主题混用、不两色并用。
- **强调与小标题用"小标签/左竖条"，不要用虚线框**。
### 5. 校验合规（强制）
把生成的 HTML 写入目标文件后，**必须运行校验脚本**，ERROR 清零才算完成：
```bash
/scripts/validate_gzh_html.py <生成的.html 的实际路径>
```
它确定性地检查平台禁用项和 `` 包裹。报 ERROR 就回到第 4 步修；**半角标点 WARNING 同样要修复到 0 再交付**（这是实际使用中最高频的返工点）。
### 6. 输出
**产物格式：纯 `` 正文片段，从全局容器开始，不要包 ``/``/``/``**——公众号编辑器只接受正文片段，多余的文档外壳会被丢弃或干扰粘贴。
1. **干净正文文件**：HTML 保存到当前工作目录，文件名 `{原文件名}_排版_{主题中文名}({标识}).html`（紫：`_排版_紫韵(purple).html`；蓝：`_排版_蔚蓝(blue).html`）。这份用于校验和手动粘贴兜底。
2. **带「复制」按钮的预览页**（让用户一键复制，免去手动全选）：
```bash
/scripts/wrap_preview.py <上面的干净正文.html>
```
产出 `{...}_预览.html`——浏览器打开后右上角有「复制到公众号」按钮，点一下即把渲染后的富文本复制到剪贴板，再到公众号编辑器 Ctrl/⌘+V 粘贴。按钮和脚本只在预览外壳里、**不在被复制的 section 内**。
3. 告知用户：**打开 `{...}_预览.html` → 点右上角「复制」→ 公众号编辑器粘贴**；并给出干净正文文件路径作为兜底。附校验脚本结论（已通过 / 剩余 warning）。
## 生成时的智能处理（这些是本 skill 的特色，必须做）
1. **章节自动编号**：按 `##` 出现顺序分配 `01/02/03…`；末章若为结语/总结类，用 `∞`，类别标签用 `结语`。
2. **正文关键词下划线（核心特色）**：对**每个正文段落**主动找出 1–3 个最重要的短语，用**所选主题主色下划线**标记（紫：`border-bottom:2px solid #6D5AE6`；蓝：`border-bottom:2px solid #2F6BFF`）。优先标核心观点、结论、关键数据、专有名词；短语 4–15 字；整段无要点可不标。即使原文没有任何加粗也要主动加下划线。
3. **引言关键词高亮**：识别开头金句里的核心词，用高亮组件标记。
4. **目录提取**：从所有 `##` 取前 3 个作为导读/目录要点（3+ 章节时）。
5. **开头引言卡署名**：按文章的作者或主题而定——文章有署名就写"—— 作者名"，没有明确作者就用与主题相关的简短落款或直接省略。**不要固定写"甲木"**。
6. **尾部作者签名区（作者自填，仅末尾一处）**：**默认不写死任何人名**，用占位署名让用户替换成自己的。
- 第一句：`我是 {{作者名}}，{{一句话简介}}`——用户在请求/偏好里给了署名或简介就直接填入；没给就**保留 `{{作者名}}` / `{{简介}}` 占位**，并在交付时提示用户替换。
- 第二句（通用可保留原样）：`如果你觉得今天这篇有收获，欢迎**点赞、在看、转发**三连，我们下篇见`
- **原文末尾已有作者签名段** → 直接沿用原文的署名，不替换成占位。
7. **列表转换**：按主题库映射规则处理；无专属列表组件时转为带缩进的正文段落。
8. **中文全角标点**：正文标点一律用全角（，。！？：；""''（）—— …），不要用半角 `, . ! ? :` 和英文直引号 `" '`。**生成 HTML 时就直接写弯引号""''**，不要先写直引号再事后替换。代码块、行内代码、英文专名/URL 内部保持原样。
## 视觉层级（3 层递进，单色系）
| 层级 | 作用 | 频率 | 手段（紫韵 / 蔚蓝） |
|------|------|------|------|
| 锚点层 | 深紫 `#2E2154` / 深蓝 `#15357F` 加粗（用主色更深一档） | 全文 ≤ 3 处（含引言卡） | 最强锚点：关键金句/CTA/核心数据 |
| 标记层 | 正文关键词，每段 1–3 处 | 高频 | 主色下划线标记 |
| 容器层 | 引用块、提示块、数据卡 | 按需 | 浅底 + 渐变顶条/竖条 |
## 平台红线（核心，完整检查交给校验脚本）
- **禁止**：`