• AI 技能

gzh-design-skill 是一个把 Markdown 一键排成公众号 HTML 的开源技能，内置 6 套精选主题；它的主题生成器还能让你用一句话描述或一张参考图，生成一套专属的公众号排版主题，并永久保存复用。内置的摸鱼绿、红白、石墨极简等 6 套主题不够用时，不必等官方更新——直接让 AI 现造一套。

🎨 主题生成器是什么

主题生成器是 gzh-design-skill 的「第二条工作流」，完整流程定义在 references/theme-generator.md 中。它解决的问题很简单：

现有 6 套精选主题没有你想要的气质，怎么办？

答案：描述你的风格（或丢一张参考图），AI 会生成一整套可直接粘贴进公众号编辑器的排版组件库，转换、校验、登记后，它就成为你的常驻可选主题，与内置主题完全同权。

三种常见触发方式：

• 「生成一套新主题 / 自定义风格 / 我想要 XX 风的组件库」
• 上传参考图，说「按这个风格做一套公众号排版主题」
• 对现有主题都不满意，描述想要的气质、配色、场景

🧭 完整流程一览

📝 第一步：收集偏好（只需一句话）

按下表收集，只有「主题描述」是必填项（或提供参考图），其余留空时由 AI 按提示词规则自动补全，且只问一轮、不逐字段追问：

一句典型触发语：

按「黑白杂志、克莱因蓝点睛、衬线字体」的气质，给公众号排版生成一套新主题

🖼️ 用一张参考图造主题

没有文案能力也能造主题：直接把喜欢的版式截图、杂志扫描页或网页设计稿丢给 AI，说「按这张参考图做一套公众号排版组件库」。

生成器会先从图中提取视觉特征（主色/辅助色、留白比例、边框与圆角、阴影强度、信息密度、整体情绪），再转译为公众号可用的组件语言。注意：参考图只作「风格参考」，不会复刻图中的文字、Logo 或具体画面；若参考图与你的文字偏好冲突，以文字偏好为准。

⚙️ 第二步：生成 45~75 个区块的预览页

偏好收集后，AI 按 theme-generator.md 末尾内置的【生成提示词】执行，产出一份完整区块库 HTML，保存为：

assets/theme-previews/{主题ID}.html

这份预览页是「风格的单一预览源」：封面刊头、章节标题、正文、引用、提示卡、CTA、步骤条、代码块、数据表格、FAQ、结尾签名区等全部区块连续排布在同一页面。浏览器打开后整页一次浏览、整体确认风格，不逐块问、不逐块确认。

生成过程有几条硬约束，保证成品能贴进公众号：

• 全部 inline style，禁<style>/class/grid/ 交互组件
• 字号一律 ≤ 24px
• 默认白底或近白底，深色只用于局部点缀
• 占位文案抽象化，只展示结构不假装真实产品页

仓库里就有一套现成样例：assets/theme-previews/theme-mono-blue-editorial.html——「墨蓝刊读风」，黑白杂志风 + 克莱因蓝点睛，浏览器直接打开即可看完整效果。

📚 第三步：转标准主题库 + 登记

整体确认风格后，进入转换阶段（规则见 theme-generator.md「第三步」）：

1. 补<span leaf="">包裹——这是粘贴后样式不丢失的前提，生成器输出不含 leaf 标记，必须逐个补齐
2. 补齐五个必备章节（同 SKILL.md「添加新主题的规范」）：设计变量速查表、各组件完整 HTML、完整文章模板骨架、文章类型 → 组件组合配方表、Markdown → 组件映射规则表
3. 平台红线复查：去掉预览用id，剔除禁用标签与>24px字号
4. 登记索引：在 references/theme-index.md 新增一行（主题名 / 主色 / 适用场景 / 组件库文件 / 正文下划线 CSS）

✅ 第四步：跑校验，0 ERROR 才算完成

python3 scripts/component_lint.py .

scripts/component_lint.py 会扫描组件库中的反模式（大空白、虚线框、平台禁用项），ERROR 清零再交付。之后每次用这个主题排版，最终产物还会再过一遍 scripts/validate_gzh_html.py 产物关卡，双关卡确保样式粘进公众号不丢失。

🚀 交付后怎么用

交付汇报会包含：主题名 + ID + 预览文件路径 + 已可启用提示。之后使用方式和内置主题完全一样：

用墨蓝刊读风把这篇文章排成公众号 HTML：article.md

它会自动进入正常的排版工作流：读组件库 → 解析 Markdown → 按配方装配 → 校验 → 输出带「复制」按钮的预览页，一键复制进公众号编辑器。

❓ 常见问题

Q：改主意了能改已生成的主题吗？A：能。直接说「把 XX 主题的主色改成……」，AI 会同步改主题库和预览 HTML，并重跑 component_lint。

Q：新主题质量有保证吗？A：质量靠脚本不靠自觉——新主题必须走 component_lint 源头关 + validate_gzh_html 产物关，与内置 6 套主题执行同一套标准。

Q：想手工贡献一套主题呢？A：照着 CONTRIBUTING.md 的「新增一套主题风格」走，参考 references/theme-moyu-green.md 等现有组件库的结构，跑通可验证循环即可。

📦 关键文件速查

• 生成流程全文：references/theme-generator.md
• 主题索引（新主题登记处）：references/theme-index.md
• 主题预览样例（墨蓝刊读风）：assets/theme-previews/theme-mono-blue-editorial.html
• 组件库源头校验：scripts/component_lint.py
• 排版工作流主文档：SKILL.md

• AI 技能