GZH Design Studio

一套面向微信公众号文章的开源排版 Skill。它把 Markdown、纯文本或文档草稿整理为可粘贴到公众号编辑器的内联 HTML，并把“视觉主题”和“内容版式”拆成两个可自由组合的维度。

项目由「少年听潮」维护，采用独立原创实现，不包含来源许可不明的第三方主题代码。

能做什么

• 3 套原创视觉主题：潮汐绿、赤潮编辑、墨岸极简
• 5 种内容版式：轻量观点、杂志资讯、数据报告、叙事随笔、教程清单
• 自动章节编号、关键词标记、引言、目录、数据卡和作者签名
• 生成可直接复制的浏览器预览页
• 生成多方案对比页，正文直接嵌入，不依赖 iframe
• 检查公众号禁用标签、危险样式和缺失的 span[leaf]
• 对照原始 Markdown 检查正文与图片是否遗漏
• 仅依赖 Python 标准库

快速开始

克隆仓库：

git clone https://github.com/Chang788/gzh-design-studio.git

把整个仓库放入支持 Skill 的客户端，然后对助手说：

请用 GZH Design Studio，把这篇文章排成“潮汐绿 × 轻量观点版”，并生成可复制预览页。

Skill 会按 SKILL.md 的流程选择组件、生成正文片段并执行校验。

本地运行工具

python3 scripts/validate_gzh_html.py examples/sample-output.html
python3 scripts/validate_content_integrity.py examples/sample-article.md examples/sample-output.html
python3 scripts/wrap_preview.py examples/sample-output.html
python3 scripts/build_variant_gallery.py \
  --output examples/sample-gallery.html \
  --title "排版方案对比" \
  examples/sample-output.html examples/sample-output.html

运行测试

python3 -m unittest discover -s tests -v

设计方式

主题负责颜色、边框、字体气质和组件外观；版式负责信息密度、组件取舍和阅读节奏。比如，同一套“潮汐绿”可以呈现为留白充足的观点文章，也可以呈现为卡片密集的教程清单。

主题与版式索引分别位于：

• references/theme-index.md
• references/layout-index.md

公众号 HTML 约束

输出正文是一个纯 <section>…</section> 片段，不包含完整网页外壳。样式全部内联，不使用脚本、类名、CSS 变量、网格布局或定位；文字节点统一放在 <span leaf=""> 中，提高粘贴后的样式保留率。

预览页可以包含浏览器交互脚本，但复制按钮只复制正文片段，不会把预览工具栏带入公众号。

扩展

新增主题时：

1. 在 references/ 新建 theme-{id}.md。
2. 提供设计变量、语义组件、文章骨架、内容配方和 Markdown 映射。
3. 登记到 references/theme-index.md。
4. 用示例文章生成 HTML，并运行两项校验与测试。

新增版式时，在 references/ 新建 layout-{id}.md，然后登记到 references/layout-index.md。

开源与署名

代码和项目文档采用 MIT License。示例文章同样可在 MIT 条款下使用。欢迎提交 Issue 与 Pull Request；请勿提交未经授权复制的主题、字体、图片或文章内容。