gzh-design-purple-blue

微信公众号文章排版引擎（紫色 / 蓝色双单色主题），将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。内置两个单色主题——「紫韵」紫罗兰

跳到安装

仓库: ChenOneTo/gzh-design-purple-blue
最近来源活动: 2026年7月25日 14:38
检测到的 SKILL.md 语言: 中文
星标: 0
分支: 0

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/ChenOneTo/gzh-design-purple-blue --skill gzh-design-purple-blue

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

SKILL.md

来源说明 · 只读预览

name	gzh-design-purple-blue
description	微信公众号文章排版引擎（紫色 / 蓝色双单色主题），将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。内置两个单色主题——「紫韵」紫罗兰

紫韵 · 蔚蓝 · 公众号文章排版 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 按其规则转成 Markdown 草稿并做结构确认（docx 用 scripts/extract_docx.py，PDF 用 Read 分页读取+清噪，纯文本按标题启发式推断结构）。什么都没给时，向用户索要。

用户说「直接排 / 自动排 / 一键 / 不用问」时进全自动模式：跳过结构确认，自动推断结构、按默认主题排版校验，交付时附决策说明（章节结构、自拟标题、选题理由、所选主题）。

1. 选主题（紫色 / 蓝色二选一）

读 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`
开头引言	文章最开头的 `> 引用` 块
章节标题	`## 标题`
子章节	`### 标题`
加粗 / 高亮 / 下划线	`文字` / `==文字==` / `<u>文字</u>` 或 `++文字++`
引用段落	非开头的 `> 文字`
图片 / GIF	`![说明](URL)`、`![](xxx.gif)`
代码 / 命令 / Prompt	``` 围栏代码块 ```、行内 `code`
分割线 / 列表	`---`、`***` / `- 项` 或 `1. 项`
表格	`\|` 分隔的 Markdown 表格

解析完结构后，判定文章类型（取主导类型，可复合）：教程/操作指南、盘点/工具清单、观点/深度分析、访谈/人物特稿、数据复盘/报告、生活/情感随笔、案例实战。

4. 按配方选组件组合 → 装配 HTML

先查所选主题文件的「文章类型 → 组件组合配方」表，按文章类型确定核心组件组合与点缀组件。然后依该主题库的**"完整文章模板骨架"章节**装配，把每个 Markdown 元素替换为对应组件：

骨架顺序以主题库为准：引言卡 → 前言正文 → 导读（3+ 章节）→ 渐变编号章节 → 结语（∞）→ 终 → 签名。
行内标记按语义到所选组件库里找对应组件：**加粗**→深靛加粗；==高亮==→浅底标签；<u>文字</u>/++文字++→主色下划线；~~文字~~→荧光笔/删除线；>引用→主色竖条引用。
来自通用增量库的组件：``` 代码块 ```→ 1a 深色 / 1b 浅色，行内 `code`→ 1c；![说明](url)→ 2a 图片（有说明才加说明组件）、.gif→ 2b GIF；小标题/强调→ 3a 左竖条 / 3b 渐变药丸，金句→ 3d、提示→ 3e。
一篇文章只用选定主题这一套组件 + 通用库，不跨主题混用、不两色并用。
强调与小标题用"小标签/左竖条"，不要用虚线框。

5. 校验合规（强制）

把生成的 HTML 写入目标文件后，必须运行校验脚本，ERROR 清零才算完成：

<SKILL_ROOT>/scripts/validate_gzh_html.py <生成的.html 的实际路径>

它确定性地检查平台禁用项和 <span leaf> 包裹。报 ERROR 就回到第 4 步修；半角标点 WARNING 同样要修复到 0 再交付（这是实际使用中最高频的返工点）。

6. 输出

产物格式：纯 <section>…</section> 正文片段，从全局容器开始，不要包 <!DOCTYPE>/<html>/<head>/<body>——公众号编辑器只接受正文片段，多余的文档外壳会被丢弃或干扰粘贴。

干净正文文件：HTML 保存到当前工作目录，文件名 {原文件名}_排版_{主题中文名}({标识}).html（紫：_排版_紫韵(purple).html；蓝：_排版_蔚蓝(blue).html）。这份用于校验和手动粘贴兜底。
带「复制」按钮的预览页（让用户一键复制，免去手动全选）：
```
<SKILL_ROOT>/scripts/wrap_preview.py <上面的干净正文.html>
```
产出 {...}_预览.html——浏览器打开后右上角有「复制到公众号」按钮，点一下即把渲染后的富文本复制到剪贴板，再到公众号编辑器 Ctrl/⌘+V 粘贴。按钮和脚本只在预览外壳里、不在被复制的 section 内。
告知用户：打开 {...}_预览.html → 点右上角「复制」→ 公众号编辑器粘贴；并给出干净正文文件路径作为兜底。附校验脚本结论（已通过 / 剩余 warning）。

生成时的智能处理（这些是本 skill 的特色，必须做）

章节自动编号：按 ## 出现顺序分配 01/02/03…；末章若为结语/总结类，用 ∞，类别标签用 结语。
正文关键词下划线（核心特色）：对每个正文段落主动找出 1–3 个最重要的短语，用所选主题主色下划线标记（紫：border-bottom:2px solid #6D5AE6；蓝：border-bottom:2px solid #2F6BFF）。优先标核心观点、结论、关键数据、专有名词；短语 4–15 字；整段无要点可不标。即使原文没有任何加粗也要主动加下划线。
引言关键词高亮：识别开头金句里的核心词，用高亮组件标记。
目录提取：从所有 ## 取前 3 个作为导读/目录要点（3+ 章节时）。
开头引言卡署名：按文章的作者或主题而定——文章有署名就写"—— 作者名"，没有明确作者就用与主题相关的简短落款或直接省略。不要固定写"甲木"。
尾部作者签名区（作者自填，仅末尾一处）：默认不写死任何人名，用占位署名让用户替换成自己的。
- 第一句：我是 {{作者名}}，{{一句话简介}}——用户在请求/偏好里给了署名或简介就直接填入；没给就保留 {{作者名}} / {{简介}} 占位，并在交付时提示用户替换。
- 第二句（通用可保留原样）：如果你觉得今天这篇有收获，欢迎**点赞、在看、转发**三连，我们下篇见
- 原文末尾已有作者签名段 → 直接沿用原文的署名，不替换成占位。
列表转换：按主题库映射规则处理；无专属列表组件时转为带缩进的正文段落。
中文全角标点：正文标点一律用全角（，。！？：；""''（）—— …），不要用半角 , . ! ? : 和英文直引号 " '。生成 HTML 时就直接写弯引号""''，不要先写直引号再事后替换。代码块、行内代码、英文专名/URL 内部保持原样。

视觉层级（3 层递进，单色系）

层级	作用	频率	手段（紫韵 / 蔚蓝）
锚点层	深紫 `#2E2154` / 深蓝 `#15357F` 加粗（用主色更深一档）	全文 ≤ 3 处（含引言卡）	最强锚点：关键金句/CTA/核心数据
标记层	正文关键词，每段 1–3 处	高频	主色下划线标记
容器层	引用块、提示块、数据卡	按需	浅底 + 渐变顶条/竖条

平台红线（核心，完整检查交给校验脚本）

禁止：<style>/<script>/<div>、class/id 属性、position:fixed/absolute/sticky、float、@media/@keyframes、display:grid、CSS 变量、外部字体/CSS。
必须：样式全部内联 style；所有文字节点用 <span leaf="">文字</span> 包裹（否则粘贴后样式丢失）。
可用：display:flex（有限）、linear-gradient、border-radius、box-shadow、position:relative、<section>/<p>/<span>/<strong>/<img>/<h3>。

Gotchas（真实排版踩过的坑）

漏 <span leaf> 包裹是最常见致命错——粘贴到公众号后样式整片丢失。靠第 5 步校验脚本兜底，别跳过。
下划线：逐段落实、每段 1–3 个短语。不要整段划线，也不要有的段标有的段漏；列表项里的关键描述同样要标。
章节编号错乱：严格按 ## 顺序，不要跳号；结语编号变体 ∞ 只用于末章。
签名区有且仅有末尾一个：用固定文案，不在中间或多处出现；原文末尾若已有作者签名/"点赞在看转发三连"类段落，识别并并入这唯一的签名区/CTA 卡片。
图片说明硬造：只有 ![说明](url) 里真有说明文字才生成说明组件；空 alt 不要编造说明。
图片自适应、不铺满：<img> 一律 max-width:100%;height:auto;display:block;margin:0 auto。不用 width:100%。
跨主题混用 / 两色并用：一篇文章只用选定主题 + 通用库的组件，紫、蓝两主题不混用、不合成渐变。
锚点层滥用：深紫/深蓝（主色更深一档）最强强调全文 ≤ 3 处，到处加粗等于没有重点。
原文内容遗漏：每个段落、每张图都要转换，不得漏；不要自行增删原文实质内容。
占位图残留：签名区/CTA 组件里若带名片图占位，没有真实图片 URL 时整行删掉。
目录是精选不是全量：导读组件展示精选的 3 个核心看点，不是完整章节列表。
不用虚线框：突出标题/强调用小标签或左竖条，不要用 border:…dashed 四周虚线框包标题。例外：通用库 2c 居中素材占位（表达"待补"语义）。
标点别混半角：正文的半角逗号句号、英文直引号都要改成全角；代码块/行内代码内保持原样。
代码/Prompt 必须用代码块：用通用库 1a/1b，不要塞进普通段落或引用块。
代码块要紧凑、忌大空白：用通用库 1a/1b 的"每行一个 <p style=\"margin:0\">"写法，绝不用 white-space:pre；缩进只用全角空格　，行距靠 line-height:1.6。
待补素材居中：【插入…】、待录屏 / GIF / 视频 / 成果图等占位，用通用库 2c 居中素材占位板块，不要用左对齐的提示块。

自定义主题生成（可选扩展）

用户想要紫韵/蔚蓝之外的新风格（说「生成一套新主题 / 自定义风格 / 按这张参考图做一套组件库」）时，读 references/theme-generator.md 并严格按其流程执行，生成并登记后再在 theme-index 同权选用。

添加新主题的规范

新主题以 references/theme-{英文标识}.md 命名，内容必须包含：

设计变量速查表（主色/浅底/深字/标题色/正文色/分割线色等）
各组件完整 HTML（内联样式 + <span leaf=""> 包裹，遵守上面"平台红线"）
完整文章模板骨架（组件装配顺序；若有目录/导航组件，明确其相对封面/引言的位置）
文章类型 → 组件组合配方表
Markdown → 组件映射规则表

添加后在 references/theme-index.md 登记一行，并跑 python3 scripts/component_lint.py . 确认组件库无反模式（0 ERROR）。

name	gzh-design-purple-blue
description	微信公众号文章排版引擎（紫色 / 蓝色双单色主题），将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。内置两个单色主题——「紫韵」紫罗兰

紫韵 · 蔚蓝 · 公众号文章排版 Skill

工作流

0. 输入与格式归一化

1. 选主题（紫色 / 蓝色二选一）

读 references/theme-index.md。本 skill 内置两套单色主题：

紫韵（紫色） references/theme-purple.md —— 适合深度思考、方法论、人文科技、设计、情感向。
蔚蓝（蓝色） references/theme-blue.md —— 适合 AI、产品、数据、效率、硬核技术。

2. 读组件库（两份）

后续生成完全依据这两份组件库，HTML 一律从中取、不要手写。

3. 解析 Markdown 结构

元素	识别规则
文章标题	`# 标题` 或 frontmatter `title`
开头引言	文章最开头的 `> 引用` 块
章节标题	`## 标题`
子章节	`### 标题`
加粗 / 高亮 / 下划线	`文字` / `==文字==` / `<u>文字</u>` 或 `++文字++`
引用段落	非开头的 `> 文字`
图片 / GIF	`![说明](URL)`、`![](xxx.gif)`
代码 / 命令 / Prompt	``` 围栏代码块 ```、行内 `code`
分割线 / 列表	`---`、`***` / `- 项` 或 `1. 项`
表格	`\|` 分隔的 Markdown 表格

4. 按配方选组件组合 → 装配 HTML

骨架顺序以主题库为准：引言卡 → 前言正文 → 导读（3+ 章节）→ 渐变编号章节 → 结语（∞）→ 终 → 签名。
行内标记按语义到所选组件库里找对应组件：**加粗**→深靛加粗；==高亮==→浅底标签；<u>文字</u>/++文字++→主色下划线；~~文字~~→荧光笔/删除线；>引用→主色竖条引用。
来自通用增量库的组件：``` 代码块 ```→ 1a 深色 / 1b 浅色，行内 `code`→ 1c；![说明](url)→ 2a 图片（有说明才加说明组件）、.gif→ 2b GIF；小标题/强调→ 3a 左竖条 / 3b 渐变药丸，金句→ 3d、提示→ 3e。
一篇文章只用选定主题这一套组件 + 通用库，不跨主题混用、不两色并用。
强调与小标题用"小标签/左竖条"，不要用虚线框。

5. 校验合规（强制）

把生成的 HTML 写入目标文件后，必须运行校验脚本，ERROR 清零才算完成：

<SKILL_ROOT>/scripts/validate_gzh_html.py <生成的.html 的实际路径>

6. 输出

干净正文文件：HTML 保存到当前工作目录，文件名 {原文件名}_排版_{主题中文名}({标识}).html（紫：_排版_紫韵(purple).html；蓝：_排版_蔚蓝(blue).html）。这份用于校验和手动粘贴兜底。
带「复制」按钮的预览页（让用户一键复制，免去手动全选）：
```
<SKILL_ROOT>/scripts/wrap_preview.py <上面的干净正文.html>
```
产出 {...}_预览.html——浏览器打开后右上角有「复制到公众号」按钮，点一下即把渲染后的富文本复制到剪贴板，再到公众号编辑器 Ctrl/⌘+V 粘贴。按钮和脚本只在预览外壳里、不在被复制的 section 内。
告知用户：打开 {...}_预览.html → 点右上角「复制」→ 公众号编辑器粘贴；并给出干净正文文件路径作为兜底。附校验脚本结论（已通过 / 剩余 warning）。

生成时的智能处理（这些是本 skill 的特色，必须做）

章节自动编号：按 ## 出现顺序分配 01/02/03…；末章若为结语/总结类，用 ∞，类别标签用 结语。
正文关键词下划线（核心特色）：对每个正文段落主动找出 1–3 个最重要的短语，用所选主题主色下划线标记（紫：border-bottom:2px solid #6D5AE6；蓝：border-bottom:2px solid #2F6BFF）。优先标核心观点、结论、关键数据、专有名词；短语 4–15 字；整段无要点可不标。即使原文没有任何加粗也要主动加下划线。
引言关键词高亮：识别开头金句里的核心词，用高亮组件标记。
目录提取：从所有 ## 取前 3 个作为导读/目录要点（3+ 章节时）。
开头引言卡署名：按文章的作者或主题而定——文章有署名就写"—— 作者名"，没有明确作者就用与主题相关的简短落款或直接省略。不要固定写"甲木"。
尾部作者签名区（作者自填，仅末尾一处）：默认不写死任何人名，用占位署名让用户替换成自己的。
- 第一句：我是 {{作者名}}，{{一句话简介}}——用户在请求/偏好里给了署名或简介就直接填入；没给就保留 {{作者名}} / {{简介}} 占位，并在交付时提示用户替换。
- 第二句（通用可保留原样）：如果你觉得今天这篇有收获，欢迎**点赞、在看、转发**三连，我们下篇见
- 原文末尾已有作者签名段 → 直接沿用原文的署名，不替换成占位。
列表转换：按主题库映射规则处理；无专属列表组件时转为带缩进的正文段落。
中文全角标点：正文标点一律用全角（，。！？：；""''（）—— …），不要用半角 , . ! ? : 和英文直引号 " '。生成 HTML 时就直接写弯引号""''，不要先写直引号再事后替换。代码块、行内代码、英文专名/URL 内部保持原样。

视觉层级（3 层递进，单色系）

层级	作用	频率	手段（紫韵 / 蔚蓝）
锚点层	深紫 `#2E2154` / 深蓝 `#15357F` 加粗（用主色更深一档）	全文 ≤ 3 处（含引言卡）	最强锚点：关键金句/CTA/核心数据
标记层	正文关键词，每段 1–3 处	高频	主色下划线标记
容器层	引用块、提示块、数据卡	按需	浅底 + 渐变顶条/竖条

平台红线（核心，完整检查交给校验脚本）

禁止：<style>/<script>/<div>、class/id 属性、position:fixed/absolute/sticky、float、@media/@keyframes、display:grid、CSS 变量、外部字体/CSS。
必须：样式全部内联 style；所有文字节点用 <span leaf="">文字</span> 包裹（否则粘贴后样式丢失）。
可用：display:flex（有限）、linear-gradient、border-radius、box-shadow、position:relative、<section>/<p>/<span>/<strong>/<img>/<h3>。

Gotchas（真实排版踩过的坑）

漏 <span leaf> 包裹是最常见致命错——粘贴到公众号后样式整片丢失。靠第 5 步校验脚本兜底，别跳过。
下划线：逐段落实、每段 1–3 个短语。不要整段划线，也不要有的段标有的段漏；列表项里的关键描述同样要标。
章节编号错乱：严格按 ## 顺序，不要跳号；结语编号变体 ∞ 只用于末章。
签名区有且仅有末尾一个：用固定文案，不在中间或多处出现；原文末尾若已有作者签名/"点赞在看转发三连"类段落，识别并并入这唯一的签名区/CTA 卡片。
图片说明硬造：只有 ![说明](url) 里真有说明文字才生成说明组件；空 alt 不要编造说明。
图片自适应、不铺满：<img> 一律 max-width:100%;height:auto;display:block;margin:0 auto。不用 width:100%。
跨主题混用 / 两色并用：一篇文章只用选定主题 + 通用库的组件，紫、蓝两主题不混用、不合成渐变。
锚点层滥用：深紫/深蓝（主色更深一档）最强强调全文 ≤ 3 处，到处加粗等于没有重点。
原文内容遗漏：每个段落、每张图都要转换，不得漏；不要自行增删原文实质内容。
占位图残留：签名区/CTA 组件里若带名片图占位，没有真实图片 URL 时整行删掉。
目录是精选不是全量：导读组件展示精选的 3 个核心看点，不是完整章节列表。
不用虚线框：突出标题/强调用小标签或左竖条，不要用 border:…dashed 四周虚线框包标题。例外：通用库 2c 居中素材占位（表达"待补"语义）。
标点别混半角：正文的半角逗号句号、英文直引号都要改成全角；代码块/行内代码内保持原样。
代码/Prompt 必须用代码块：用通用库 1a/1b，不要塞进普通段落或引用块。
代码块要紧凑、忌大空白：用通用库 1a/1b 的"每行一个 <p style=\"margin:0\">"写法，绝不用 white-space:pre；缩进只用全角空格　，行距靠 line-height:1.6。
待补素材居中：【插入…】、待录屏 / GIF / 视频 / 成果图等占位，用通用库 2c 居中素材占位板块，不要用左对齐的提示块。

自定义主题生成（可选扩展）

添加新主题的规范

新主题以 references/theme-{英文标识}.md 命名，内容必须包含：

设计变量速查表（主色/浅底/深字/标题色/正文色/分割线色等）
各组件完整 HTML（内联样式 + <span leaf=""> 包裹，遵守上面"平台红线"）
完整文章模板骨架（组件装配顺序；若有目录/导航组件，明确其相对封面/引言的位置）
文章类型 → 组件组合配方表
Markdown → 组件映射规则表

添加后在 references/theme-index.md 登记一行，并跑 python3 scripts/component_lint.py . 确认组件库无反模式（0 ERROR）。

gzh-design-purple-blue

来源信息

安装方式

检查来源文件

紫韵 · 蔚蓝 · 公众号文章排版 Skill

工作流

0. 输入与格式归一化

1. 选主题（紫色 / 蓝色 二选一）

2. 读组件库（两份）

3. 解析 Markdown 结构

4. 按配方选组件组合 → 装配 HTML

5. 校验合规（强制）

6. 输出

生成时的智能处理（这些是本 skill 的特色，必须做）

视觉层级（3 层递进，单色系）

平台红线（核心，完整检查交给校验脚本）

Gotchas（真实排版踩过的坑）

自定义主题生成（可选扩展）

添加新主题的规范

紫韵 · 蔚蓝 · 公众号文章排版 Skill

工作流

0. 输入与格式归一化

1. 选主题（紫色 / 蓝色 二选一）

2. 读组件库（两份）

3. 解析 Markdown 结构

4. 按配方选组件组合 → 装配 HTML

5. 校验合规（强制）

6. 输出

生成时的智能处理（这些是本 skill 的特色，必须做）

视觉层级（3 层递进，单色系）

平台红线（核心，完整检查交给校验脚本）

Gotchas（真实排版踩过的坑）

自定义主题生成（可选扩展）

添加新主题的规范

1. 选主题（紫色 / 蓝色二选一）

1. 选主题（紫色 / 蓝色二选一）