3分钟掌握公众号排版终极方案：从Markdown到精美HTML的完整流程

【免费下载链接】gzh-design-skill把 Markdown 一键排成可直接粘进公众号编辑器的精致 HTML —— 6 套精选主题 + 主题生成器 + 双关卡校验。An AI-agent skill that turns Markdown into paste-ready WeChat article HTML.项目地址: https://gitcode.com/gh_mirrors/gz/gzh-design-skill

还在为公众号排版头疼吗？每次复制粘贴都担心格式丢失？今天我要为你介绍一个彻底改变公众号排版体验的工具——gzh-design-skill。这个开源项目让你用最简单的方式，把Markdown一键转换成可直接粘贴到微信公众号编辑器的精致HTML，完全告别排版烦恼。

🌈 为什么你需要这个排版神器

作为公众号创作者，你一定遇到过这些问题：编辑器功能有限、样式复制后丢失、每次都要重新调整格式……gzh-design-skill就是为了解决这些痛点而生的。它不仅仅是一个工具，更是一套完整的公众号排版解决方案。

核心优势一：6套专业主题任选

项目内置了6套精心设计的主题，每套都有独特的视觉风格：

• 摸鱼绿：清新自然的绿色系，适合教程、工具盘点类内容
• 红白色系：强烈的视觉冲击力，适合深度分析和观点文章
• 石墨极简风：专业简约的设计，适合科技评论和高端品牌内容
• 留白禅意风：极简主义风格，适合生活随笔和深度思考
• 摸鱼票据风：创意票据设计，适合工具对比和创意评测
• 橄榄手记：沉稳内敛的深色调，适合案例复盘和内刊手记

核心优势二：智能排版自动化

gzh-design-skill会自动为你处理各种排版细节：

• 章节自动编号，让文章结构一目了然
• 关键词下划线标记，突出重点内容
• 自动提取引言卡和目录，提升阅读体验
• 智能处理代码块、图片和GIF动画
• 作者签名自动合并去重

🚀 快速上手：3分钟开始排版

安装方式（选择一种即可）

方法一：一键安装（最简单）

npx skills add https://gitcode.com/gh_mirrors/gz/gzh-design-skill

方法二：手动安装（适合开发者）

git clone https://gitcode.com/gh_mirrors/gz/gzh-design-skill.git ~/.claude/skills/gzh-design

开始你的第一次排版

安装完成后，你只需要对AI Agent说一句话：

用摸鱼绿把这篇文章排成公众号HTML：`我的文章.md`

系统会自动完成所有排版工作，并生成两个文件：

1. 干净的HTML正文文件
2. 带"复制"按钮的预览页面

打开预览页面，点击右上角的"复制到公众号"按钮，然后直接粘贴到微信公众号编辑器——整个过程不到30秒！

📁 项目结构深度解析

了解项目的组织结构，能帮助你更好地使用和定制：

gzh-design-skill/ ├── SKILL.md # 核心工作流文档 ├── references/ # 主题库和组件库 │ ├── theme-index.md # 6套主题索引 │ ├── theme-*.md # 各主题详细组件库 │ ├── theme-generator.md # 主题生成器 │ └── common-components.md # 通用组件库 ├── scripts/ # 校验脚本 │ ├── validate_gzh_html.py # 最终产物合规校验 │ └── component_lint.py # 组件库源头检查 ├── docs/gallery/ # 主题效果预览 └── archive/ # 历史版本和主题

🎨 主题选择指南：为你的文章找到最佳搭配

选择主题不仅仅是看颜色，更是要考虑文章的内容属性和读者体验。这里为你提供详细的选型建议：

技术教程类文章 → 摸鱼绿

• 清新自然的绿色让代码块更突出
• 清晰的层次结构方便读者跟随步骤
• 适合：编程教程、软件使用指南、技术操作手册

深度分析类文章 → 红白色系

• 强烈的视觉对比吸引注意力
• 红色调传递专业和权威感
• 适合：行业分析、市场报告、观点评论

设计艺术类内容 → 石墨极简风

• 简约的设计风格不喧宾夺主
• 灰色调营造专业和高端感
• 适合：设计分享、艺术评论、品牌故事

生活随笔类文章 → 留白禅意风

• 大量留白营造思考空间
• 自然色调让阅读更舒适
• 适合：个人感悟、生活记录、读书笔记

创意评测类内容 → 摸鱼票据风

• 票据设计增加趣味性
• 适合对比和评测类内容
• 适合：产品对比、创意评测、清单盘点

专业报告类文章 → 橄榄手记

• 深色调营造正式和专业感
• 适合长篇内容和详细分析
• 适合：案例研究、年度报告、深度评测

🔧 高级功能：定制你的专属主题

如果内置主题不能满足你的需求，gzh-design-skill还提供了强大的主题生成器。你可以：

1. 描述生成：用一句话描述你想要的风格，AI会自动生成完整的主题组件库
2. 参考图生成：上传一张参考图片，系统会提取配色和风格生成对应主题
3. 保存复用：生成的主题会保存到本地，以后可以随时调用

主题生成器文档：references/theme-generator.md

✅ 质量保障：双关卡校验系统

gzh-design-skill最值得称道的是它的质量保障体系：

第一关：组件库源头检查

component_lint.py脚本会在生成HTML之前检查组件库的合规性，确保所有组件都符合微信公众号的要求。

第二关：最终产物校验

validate_gzh_html.py脚本会对生成的HTML进行最终检查，确保：

• 没有禁用标签（如div、class、style等）
• 所有文字都被<span leaf="">正确包裹
• 标点符号符合全角要求
• 样式完全内联，不会在粘贴时丢失

这种双关卡设计确保了每次生成的HTML都能100%兼容微信公众号编辑器。

💡 实用技巧和小贴士

技巧1：批量生成对比

如果你不确定哪个主题最适合，可以一次性生成多个版本进行对比：

用这几套主题各排一遍这篇文章：`我的文章.md`

技巧2：处理不同格式的输入

gzh-design-skill不仅支持Markdown，还支持：

• Word文档（.docx）
• PDF文件
• 纯文本文件

系统会自动将这些格式转换为Markdown，然后进行排版。

技巧3：智能内容识别

系统会自动识别文章中的各种元素：

• 文章标题（支持frontmatter格式）
• 开头引言块
• 章节和子章节
• 加粗、高亮、下划线文本
• 图片和GIF动画
• 代码块和行内代码

❓ 常见问题解答

Q：生成的HTML粘贴到公众号后样式会丢失吗？A：绝对不会。所有样式都是内联的，文字用<span leaf="">包裹，这是专门针对微信公众号编辑器的优化设计。

Q：只能在Claude Code中使用吗？A：不是的。任何支持Skill的AI Agent都可以使用，包括Codex、Cursor等。核心工作流在SKILL.md文件中定义。

Q：如何更新到最新版本？A：重新运行安装命令即可：npx skills add https://gitcode.com/gh_mirrors/gz/gzh-design-skill

Q：可以自定义主题的颜色吗？A：当然可以。使用主题生成器功能，你可以创建完全自定义的主题，包括颜色、字体、间距等所有细节。

Q：支持团队协作吗？A：支持。你可以将生成的主题库分享给团队成员，确保整个团队的文章风格统一。

🎯 适用人群分析

个人创作者

• 节省排版时间，专注于内容创作
• 专业的设计效果提升文章质感
• 一键操作，无需学习复杂工具

内容团队

• 统一团队文章风格
• 提高内容生产效率
• 确保所有文章都符合品牌规范

技术博主

• 完美支持代码块展示
• 技术内容排版更专业
• 读者阅读体验更好

企业自媒体

• 提升品牌形象
• 专业的设计增强信任感
• 批量处理内容更高效

📈 从新手到专家的成长路径

第一阶段：基础使用（第1周）

1. 安装gzh-design-skill
2. 尝试用默认主题排版第一篇文章
3. 熟悉基本的操作流程

第二阶段：主题探索（第2-3周）

1. 尝试所有6套内置主题
2. 了解每套主题的适用场景
3. 建立自己的主题选择标准

第三阶段：高级定制（第4周起）

1. 学习使用主题生成器
2. 创建自己的品牌主题
3. 优化组件库满足特定需求

第四阶段：流程优化（长期）

1. 将gzh-design-skill集成到工作流中
2. 建立团队使用规范
3. 持续优化排版质量

🌟 开始你的高效排版之旅

gzh-design-skill不仅仅是一个工具，它代表了一种全新的公众号内容创作理念：让创作者回归内容本身，让技术服务于创作。无论你是个人博主还是专业团队，这个工具都能显著提升你的内容生产效率和质量。

记住，好的排版不是炫耀技巧，而是让读者更好地专注于你的内容。gzh-design-skill正是为此而生——它默默地在后台为你处理所有技术细节，让你可以全身心投入到最重要的内容创作中。

现在就尝试一下吧，你会发现公众号排版原来可以如此简单、高效、专业！

【免费下载链接】gzh-design-skill把 Markdown 一键排成可直接粘进公众号编辑器的精致 HTML —— 6 套精选主题 + 主题生成器 + 双关卡校验。An AI-agent skill that turns Markdown into paste-ready WeChat article HTML.项目地址: https://gitcode.com/gh_mirrors/gz/gzh-design-skill