Menu
微信公众号文章排版引擎（紫色 / 蓝色 双单色主题），将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。内置两个单色主题——「紫韵」紫罗兰
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/ChenOneTo/gzh-design-purple-blue --skill gzh-design-purple-blueThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
| name | gzh-design-purple-blue |
| description | 微信公众号文章排版引擎（紫色 / 蓝色 双单色主题），将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。内置两个单色主题——「紫韵」紫罗兰 |
把一篇 Markdown 文章转换为可直接复制粘贴进微信公众号编辑器、且粘贴后样式不丢失的 HTML。内置两个单色主题：「紫韵」（紫罗兰 #6D5AE6，优雅克制、理性神秘）与「蔚蓝」（科技蓝 #2F6BFF，科技清爽、理性开阔），均由同色系深浅 135° 渐变构成，结构完全一致、仅配色不同。
核心资产是 references/ 下的主题组件库（设计变量 + 各组件完整 HTML + 模板骨架 + 映射规则）外加 1 套通用增量库（代码块 / 图片·GIF / 小标签标题，所有主题共用）。主题清单以 references/theme-index.md 为单一来源。本 SKILL.md 只负责流程与决策，具体 HTML 代码一律从组件库取，不要凭记忆手写。
用户可能给：Markdown 文本或 .md 路径（直接进第 1 步）、.docx、.pdf、.txt/无标记纯文本、网页富文本。非 Markdown 输入必须先读 references/format-normalize.md 按其规则转成 Markdown 草稿并做结构确认（docx 用 scripts/extract_docx.py，PDF 用 Read 分页读取+清噪，纯文本按标题启发式推断结构）。什么都没给时，向用户索要。
用户说「直接排 / 自动排 / 一键 / 不用问」时进全自动模式：跳过结构确认，自动推断结构、按默认主题排版校验，交付时附决策说明（章节结构、自拟标题、选题理由、所选主题）。
读 references/theme-index.md。本 skill 内置两套单色主题：
references/theme-purple.md —— 适合深度思考、方法论、人文科技、设计、情感向。references/theme-blue.md —— 适合 AI、产品、数据、效率、硬核技术。选择规则：用户明确指定颜色 → 直接选用；未指定 → 按内容气质推荐（温度/思想/设计用紫，技术/数据/效率用蓝），或简短询问一句。选定后全文只用该主题一套组件，不跨主题混用、不两色合并。
(1) 读上一步选定的主题文件（紫 → references/theme-purple.md；蓝 → references/theme-blue.md），含该主题全部专属组件：引言卡、章节标题、正文标记、签名等。
(2) 同时读通用增量库 references/common-components.md——代码块、图片/GIF、小标签标题这三类所有主题共用，套用所选主题主色即可。
后续生成完全依据这两份组件库，HTML 一律从中取、不要手写。
| 元素 | 识别规则 |
|---|---|
| 文章标题 | # 标题 或 frontmatter title |
| 开头引言 | 文章最开头的 > 引用 块 |
| 章节标题 | ## 标题 |
| 子章节 | ### 标题 |
| 加粗 / 高亮 / 下划线 | **文字** / ==文字== / <u>文字</u> 或 ++文字++ |
| 引用段落 | 非开头的 > 文字 |
| 图片 / GIF | 、 |
| 代码 / 命令 / Prompt | ``` 围栏代码块 ```、行内 `code` |
| 分割线 / 列表 | ---、*** / - 项 或 1. 项 |
| 表格 | | 分隔的 Markdown 表格 |
解析完结构后，判定文章类型（取主导类型，可复合）：教程/操作指南、盘点/工具清单、观点/深度分析、访谈/人物特稿、数据复盘/报告、生活/情感随笔、案例实战。
先查所选主题文件的「文章类型 → 组件组合配方」表，按文章类型确定核心组件组合与点缀组件。然后依该主题库的**"完整文章模板骨架"章节**装配，把每个 Markdown 元素替换为对应组件：
**加粗**→深靛加粗；==高亮==→浅底标签；<u>文字</u>/++文字++→主色下划线；~~文字~~→荧光笔/删除线；>引用→主色竖条引用。``` 代码块 ```→ 1a 深色 / 1b 浅色，行内 `code`→ 1c；→ 2a 图片（有说明才加说明组件）、.gif→ 2b GIF；小标题/强调→ 3a 左竖条 / 3b 渐变药丸，金句→ 3d、提示→ 3e。把生成的 HTML 写入目标文件后，必须运行校验脚本，ERROR 清零才算完成：
<SKILL_ROOT>/scripts/validate_gzh_html.py <生成的.html 的实际路径>
它确定性地检查平台禁用项和 <span leaf> 包裹。报 ERROR 就回到第 4 步修；半角标点 WARNING 同样要修复到 0 再交付（这是实际使用中最高频的返工点）。
产物格式：纯 <section>…</section> 正文片段，从全局容器开始，不要包 <!DOCTYPE>/<html>/<head>/<body>——公众号编辑器只接受正文片段，多余的文档外壳会被丢弃或干扰粘贴。
{原文件名}_排版_{主题中文名}({标识}).html（紫：_排版_紫韵(purple).html；蓝：_排版_蔚蓝(blue).html）。这份用于校验和手动粘贴兜底。<SKILL_ROOT>/scripts/wrap_preview.py <上面的干净正文.html>
{...}_预览.html——浏览器打开后右上角有「复制到公众号」按钮，点一下即把渲染后的富文本复制到剪贴板，再到公众号编辑器 Ctrl/⌘+V 粘贴。按钮和脚本只在预览外壳里、不在被复制的 section 内。{...}_预览.html → 点右上角「复制」→ 公众号编辑器粘贴；并给出干净正文文件路径作为兜底。附校验脚本结论（已通过 / 剩余 warning）。## 出现顺序分配 01/02/03…；末章若为结语/总结类，用 ∞，类别标签用 结语。border-bottom:2px solid #6D5AE6；蓝：border-bottom:2px solid #2F6BFF）。优先标核心观点、结论、关键数据、专有名词；短语 4–15 字；整段无要点可不标。即使原文没有任何加粗也要主动加下划线。## 取前 3 个作为导读/目录要点（3+ 章节时）。我是 {{作者名}}，{{一句话简介}}——用户在请求/偏好里给了署名或简介就直接填入；没给就保留 {{作者名}} / {{简介}} 占位，并在交付时提示用户替换。如果你觉得今天这篇有收获，欢迎**点赞、在看、转发**三连，我们下篇见, . ! ? : 和英文直引号 " '。生成 HTML 时就直接写弯引号""''，不要先写直引号再事后替换。代码块、行内代码、英文专名/URL 内部保持原样。| 层级 | 作用 | 频率 | 手段（紫韵 / 蔚蓝） |
|---|---|---|---|
| 锚点层 | 深紫 #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>。<span leaf> 包裹是最常见致命错——粘贴到公众号后样式整片丢失。靠第 5 步校验脚本兜底，别跳过。## 顺序，不要跳号；结语编号变体 ∞ 只用于末章。 里真有说明文字才生成说明组件；空 alt 不要编造说明。<img> 一律 max-width:100%;height:auto;display:block;margin:0 auto。不用 width:100%。border:…dashed 四周虚线框包标题。例外：通用库 2c 居中素材占位（表达"待补"语义）。<p style=\"margin:0\">"写法，绝不用 white-space:pre；缩进只用全角空格 ，行距靠 line-height:1.6。【插入…】、待录屏 / GIF / 视频 / 成果图等占位，用通用库 2c 居中素材占位板块，不要用左对齐的提示块。用户想要紫韵/蔚蓝之外的新风格（说「生成一套新主题 / 自定义风格 / 按这张参考图做一套组件库」）时，读 references/theme-generator.md 并严格按其流程执行，生成并登记后再在 theme-index 同权选用。
新主题以 references/theme-{英文标识}.md 命名，内容必须包含：
<span leaf=""> 包裹，遵守上面"平台红线"）添加后在 references/theme-index.md 登记一行，并跑 python3 scripts/component_lint.py . 确认组件库无反模式（0 ERROR）。
Based on SOC occupation classification