gzh-design-skill：把 Markdown 一键排成公众号精致 HTML 的 AI Skill

每天写完稿，最让人头疼的不是内容本身，而是「复制到公众号编辑器的那一刻」——标题字号不对、行间距忽大忽小、配图被压缩成模糊的色块、代码块没高亮、引用样式全靠手调。一篇 1500 字的文章，光排版就要再花 15 分钟。这正是 isjiamu/gzh-design-skill 想解决的问题：把 Markdown 直接渲染成「粘进公众号编辑器就能用」的精致 HTML。

背景：公众号排版为什么一直这么难

微信公众号的富文本编辑器是出了名的「反 Markdown」：不支持自定义 CSS、不支持外链样式表、粘贴 Word 会带上一堆垃圾格式、代码块没有语法高亮、表格样式要靠手动调整列宽。对每天都要发稿的内容创作者来说，痛点非常具体：

- 样式不可控：字号、行距、配色全靠「选中 → 改 → 预览」三连击。
- 代码高亮缺失：技术文章里贴一段代码，原样粘进去就是黑底白字。
- 配图压缩：超过 1080px 的图被微信服务器二次压缩，糊成一片。
- 跨平台迁移痛：在 Obsidian/Typora 写好的稿，粘到公众号就「散了」。

gzh-design-skill 就是一个专门解决这套问题的 AI Skill，主打「一键把 Markdown 排成可直接粘进公众号编辑器的精致 HTML」，内置 6 套精选主题 + 主题生成器 + 双关卡校验。

能做什么

打开仓库 README，最核心的几个能力一目了然：

1. 6 套精选主题：覆盖技术、读书、生活、财经等不同调性，标题、正文、引用、代码块、表格各有样式。
2. 主题生成器：不喜欢内置主题？描述一下风格（颜色、字号、留白），AI 自动生成一套新主题。
3. 双关卡校验：渲染完成后会做两次校验——第一次看 HTML 结构是否完整，第二次模拟粘贴进公众号编辑器的效果，截屏对比。
4. 公众号兼容性优化：图片宽度锁死 1080px、表格列宽自适应、代码块字号调大到适合手机阅读。
5. 作为 AI Skill 使用：本身就是给 AI Agent 用的 Skill，可以被 Claude/Cursor/OpenClaw 等 Agent 调用，作为「写公众号」工作流的一环。

简单说：你写 Markdown，它帮你「翻译」成微信公众号能正确渲染的 HTML，零手动调样式。

为什么值得

跟同类工具（比如 mdnice、markdown here、墨滴）相比，gzh-design-skill 的差异化点有几个：

- 以「AI Skill」形态提供：不是单纯的本地工具，而是一个标准化的 Skill 文件，可以被任何支持 Skill 的 Agent 直接加载。这意味着你可以把它接入自己的写作 Agent，让 Agent 在生成内容后自动调它排版。
- 主题可生成：内置主题够用，但当你有特定品牌色/版式需求时，让 AI 生成一套新主题比手动写 CSS 快得多。
- 双关卡校验：很多同类工具渲染出来「好看」，但粘进公众号就「崩」。双关卡校验能提前发现兼容性问题。
- 完全开源：MIT 协议，可以魔改主题、加校验规则、接入自己的图床。

对内容创作者来说，省下的不只是 15 分钟排版时间，更是「粘进去发现样式不对 → 删了重来 → 再粘」的反复折腾。

快速上手

安装

git clone https://github.com/isjiamu/gzh-design-skill.git
cd gzh-design-skill
npm install

命令行使用

# 用默认主题排版
npx gzh-design render article.md

指定主题
npx gzh-design render article.md --theme tech-dark

生成新主题
npx gzh-design generate-theme --style "复古、暖色、宋体、宽松行距"

校验渲染结果
npx gzh-design validate output.html

作为 AI Skill 调用

把仓库里的 SKILL.md 放到你的 Agent skills 目录（如 OpenClaw 的 skills/gzh-design/），Agent 在收到「写公众号文章」的指令时就会自动调用它。

Docker 一键跑

如果不想装 Node，也可以直接用 Docker：

docker run -it --rm \
  -v $(pwd):/workspace \
  ghcr.io/isjiamu/gzh-design-skill:latest \
  render /workspace/article.md

适合谁

- 公众号日更的内容创作者：省下的 15 分钟 × 365 天 = 90 小时/年。
- 技术博客作者：代码高亮、表格、公式都能正确渲染，不用手动调 CSS。
- AI Agent 开发者：把它作为 Skill 集成到自己的写作 Agent 工作流里。
- 企业新媒体团队：统一全团队的公众号排版风格，不再每篇都「设计师来调一下」。

如果只是偶尔发一篇，用 mdnice 在线版就够了；如果每天都要发，或者要把排版流程接入 AI 工作流，gzh-design-skill 是更系统化的选择。

链接

- GitHub 仓库：https://github.com/isjiamu/gzh-design-skill
- 主题列表与预览：https://github.com/isjiamu/gzh-design-skill/tree/main/themes
- 主题生成器说明：https://github.com/isjiamu/gzh-design-skill/blob/main/docs/theme-generator.md
- 公众号兼容性测试报告：https://github.com/isjiamu/gzh-design-skill/blob/main/docs/wechat-compat.md

写完稿，直接让 AI 帮你排版，剩下的时间留给思考下一篇要写什么。