gzh-design-skill 是一个将 Markdown 一键转换为可直接粘贴到微信公众号编辑器中的精致 HTML 的工具，内置 6 套精选主题与主题生成器，并配备双关卡校验机制。

一、背景与痛点

微信公众号后台的编辑器长期被诟病为“反人类”——不支持 Markdown、样式混乱、代码块渲染糟糕、图片对齐困难、行间距与段间距难以统一。内容创作者往往需要花费大量时间在排版上：手动调整字号、颜色、边距，甚至为了一个代码高亮而截图插入。更糟糕的是，不同浏览器、不同设备下最终呈现效果往往不一致。

对于技术类公众号作者、知识付费博主、企业新媒体运营人员而言，排版时间常常占据内容生产总时长的 30% 以上。这种低效不仅影响创作热情，也降低了内容发布的频率与质量。

二、项目简介

gzh-design-skill 是一个轻量级的 AI Agent 技能（Skill），核心功能是：将 Markdown 文本转换为适配微信公众号的精致 HTML 代码。用户只需粘贴 Markdown 内容，选择主题，即可一键生成带有完整样式的 HTML，然后直接复制到公众号编辑器中进行发布。

项目基于 HTML/CSS/JavaScript 构建，无需服务器，无需安装任何依赖，打开浏览器即可使用。目前已在 GitHub 上获得 887 颗 Star，属于公众号排版工具中的热门项目。

三、安装与使用

3.1 环境要求

• 任何现代浏览器（Chrome、Edge、Firefox、Safari 均可）
• 无需 Node.js、Python 或任何后端环境

3.2 安装步骤

方式一：直接使用在线版（推荐）

访问项目主页提供的在线 Demo 链接（通常位于 README 或 GitHub Pages 中），即可直接使用。

方式二：本地运行

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

直接用浏览器打开 index.html 即可

无需任何构建步骤，零配置。

3.3 使用示例

假设你有一段 Markdown 内容：

markdown

标题一

这是一段加粗文字，以及一段 行内代码。

引用内容：技术文章排版很重要。

• 列表项 1
• 列表项 2

python
print("Hello, WeChat!")

操作步骤：

1. 打开工具页面，将上述 Markdown 粘贴到左侧输入框。
2. 从 6 套主题中选择一套（例如“极简蓝”）。
3. 点击“生成”按钮。
4. 右侧预览区立即显示渲染后的 HTML 效果。
5. 点击“复制 HTML”按钮，进入公众号编辑器，直接粘贴（Ctrl+V 或 Cmd+V）。

关键特性： 生成的 HTML 中所有样式均为内联样式（inline style），因此粘贴到公众号编辑器后不会丢失任何样式，且与微信客户端渲染完全兼容。

四、核心亮点

4.1 6 套精选主题

项目内置了 6 套经过精心设计的主题，覆盖不同场景：

• 极简白：适合技术文档、纯文字内容
• 深邃黑：适合代码分享、极客风格
• 清新蓝：适合教程、知识科普
• 暖阳橙：适合资讯、新闻类内容
• 莫兰迪灰：适合高端、品牌类内容
• 复古黄：适合人文、历史类内容

每套主题都针对公众号的阅读场景优化了：

• 正文字号（通常 15-16px）
• 行高（1.6-1.8）
• 段间距
• 引用块背景色与左边框
• 代码块字体与背景
• 链接颜色
• 标题层级字体权重

4.2 主题生成器

除了预设主题，项目还提供主题生成器，允许用户自定义：

• 主色调
• 背景色
• 文字颜色
• 代码块样式
• 引用块样式
• 边框与阴影

生成后的主题可以导出为 JSON 配置，方便复用或分享。

4.3 双关卡校验

这是该项目区别于多数同类工具的最大亮点。双关卡校验机制包括：

• 第一关：Markdown 语法校验。在转换前自动检测 Markdown 中是否存在未闭合的代码块、未配对的标记、错误的表格格式等常见语法错误，并给出高亮提示。
• 第二关：HTML 输出校验。在生成 HTML 后，自动扫描是否存在微信编辑器不兼容的标签或属性（例如某些 CSS 属性会被微信过滤），并给出警告或自动修正。

这大大降低了“生成后复制过去发现样式错乱”的概率，提升了工具的实际可用性。

4.4 代码高亮

代码块支持超过 20 种编程语言的语法高亮，包括 Python、JavaScript、Java、C++、Go、Rust、SQL、HTML、CSS 等。高亮配色与所选主题风格一致，确保代码在手机端阅读依然清晰。

4.5 图片与表格处理

• 图片：自动识别 Markdown 图片语法，生成带 max-width: 100% 的响应式图片标签，确保图片在手机端不溢出。
• 表格：生成整洁的表格样式，带交替行背景色，方便阅读。

五、适用场景

场景	说明
技术公众号运营	经常发布代码、技术教程，需要代码高亮与清晰排版
知识付费创作者	需要将课程笔记、文档快速转为公众号文章
企业新媒体团队	多人协作，需要统一排版风格，避免样式混乱
个人博客作者	将博客文章同步到公众号，保持排版一致性
内容迁移	从 Notion、Typora 等工具导出 Markdown 后迁移到公众号

六、同类项目对比

目前市面上有多个 Markdown 转微信公众号 HTML 的工具，但 gzh-design-skill 在以下几个维度上表现出明显优势：

特性	gzh-design-skill	Md2All	WeChat Format	秀米
开源	✅ 完全开源	❌ 部分开源	❌ 闭源	❌ 闭源
本地运行	✅ 零依赖	❌ 需在线	❌ 需在线	❌ 需在线
主题数量	6 套 + 自定义生成器	3 套	2 套	大量模板但需付费
语法校验	✅ 双关卡校验	❌ 无	❌ 无	❌ 无
代码高亮	✅ 20+ 语言	✅ 基础支持	❌ 简陋	❌ 不支持
主题生成器	✅ 可自定义并导出	❌ 无	❌ 无	❌ 无
内联样式	✅ 全部内联	✅ 部分内联	❌ 依赖外部 CSS	❌ 依赖模板
商业化	❌ 完全免费	⚠️ 部分功能收费	⚠️ 有广告	⚠️ 大量付费功能

综合评价： gzh-design-skill 在开源免费、主题丰富度、校验机制、自定义能力上均优于主流竞品，尤其适合对排版质量有较高要求且希望保持工具可控性的用户。

七、技术实现简析

项目核心依赖一个轻量级的 Markdown 解析器（marked.js 或类似库），将 Markdown 转换为 AST（抽象语法树），再通过自定义渲染器输出带有内联样式的 HTML。

主题系统基于 CSS 变量实现，每个主题定义一组颜色、字体、间距变量，渲染时直接注入到 HTML 标签的 style 属性中。

双关卡校验模块采用正则匹配与 DOM 解析结合的方式：第一关检查 Markdown 原文的语法结构，第二关遍历生成的 HTML 节点，检测微信编辑器可能过滤的 CSS 属性（如 position、flex、grid 等），并给出替换建议。

八、总结与推荐

gzh-design-skill 是一个小而精的实用工具，它精准地解决了微信公众号排版这一长期痛点。对于技术作者和新媒体运营者而言，它不仅能节省大量排版时间，还能确保最终呈现效果的专业性与一致性。

如果你正在为公众号排版而烦恼，或者希望团队拥有统一的文章样式规范，这个项目值得一试。它完全免费、开源、可本地部署，且社区活跃（887 Stars 且持续增长），未来有望增加更多主题与功能。

项目地址：https://github.com/isjiamu/gzh-design-skill