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

如果你正在寻找一款一键将Markdown转换为可直接粘贴到微信公众号编辑器的HTML排版工具，gzh-design-skill可能是你的完美选择。这个AI助手技能专为公众号排版设计，提供6套精选主题和主题生成器，让排版变得简单高效。无论你是技术博主、内容创作者还是普通用户，这个工具都能帮你快速生成精美的公众号文章排版。

🤔 gzh-design-skill到底是什么？

gzh-design-skill是一个专门为AI助手（如Claude Code、Codex、Cursor等）设计的公众号排版技能。它的核心功能是将Markdown文档一键转换为可直接粘贴到微信公众号编辑器的HTML代码，同时确保粘贴后样式不丢失。

主要特点：

6套精选主题：摸鱼绿（默认）、红白色系、石墨极简风、留白禅意风、摸鱼票据风、橄榄手记
主题生成器：可自定义生成全新主题组件库
智能排版功能：自动章节编号、关键词下划线标记、引言卡片生成
双关卡质量校验：确保生成的HTML完全符合公众号平台限制

🚀 如何快速开始使用？

安装方法

方法一：一行命令安装（推荐）

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

方法二：让AI助手自动安装直接对AI助手说："请帮我查找并自动安装 https://gitcode.com/gh_mirrors/gz/gzh-design-skill 这个skill"

方法三：手动克隆

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

基本使用流程

选择主题：根据文章类型选择最合适的主题
准备Markdown：准备好要排版的Markdown文档
让AI助手排版：对AI助手说"用摸鱼绿把这篇文章排成公众号HTML"
复制粘贴：使用生成的预览页一键复制，粘贴到公众号编辑器

❓ 常见问题解答

1. 粘贴到公众号后样式会丢失吗？

不会！这是gzh-design-skill的核心优势之一。所有样式都采用内联方式，并且每个文字节点都用<span leaf="">包裹，专门规避了公众号编辑器会过滤的写法。项目还提供了scripts/validate_gzh_html.py脚本进行确定性检查，确保生成的HTML完全符合公众号平台要求。

2. 支持哪些输入格式？

直接支持：Markdown文件或文本
间接支持：Word文档(.docx)、PDF文件、纯文本
格式转换：非Markdown格式会先通过references/format-normalize.md进行格式归一化处理

3. 只能在Claude Code中使用吗？

不限制！任何能够读取Skill目录的AI助手都可以使用，包括：

Claude Code
Codex
Cursor
以及其他兼容的AI助手

工作流程定义在SKILL.md文件中，所有模型都能运行出一致的效果。

4. 如何选择适合的主题？

根据你的文章类型选择：

文章类型	推荐主题	特点
教程/操作指南	摸鱼绿	信息密度高，卡片丰富
深度分析/观点	红白色系	经典编辑风格
设计/科技评论	石墨极简风	极简克制，专业感强
禅意/随笔	留白禅意风	呼吸感最强
工具对比	摸鱼票据风	票据视觉隐喻
内刊/案例复盘	橄榄手记	编辑部质感

5. 如何自定义主题？

如果你对现有的6套主题不满意，有两种方式自定义：

方法一：让AI生成新主题告诉AI助手："按这个风格/这张图生成一套公众号主题"，AI会按照references/theme-generator.md中的流程生成全新的主题组件库。

方法二：手动创建主题按照CONTRIBUTING.md中的"新增一套主题风格"指引，创建自己的主题并提交PR。

6. 生成的HTML符合公众号平台限制吗？

完全符合！gzh-design-skill严格遵守公众号平台的所有限制：

禁止使用<style>、<script>、<div>标签
禁止使用class和id属性
禁止使用position: fixed/absolute/sticky
禁止使用float布局
禁止使用@media媒体查询
禁止使用CSS变量和外部字体

所有样式都采用内联方式，确保粘贴后样式不丢失。

7. 如何验证生成的HTML质量？

项目提供了双关卡质量校验：

第一关：组件库源头检查

python3 scripts/component_lint.py .

检查组件库中是否存在平台禁用项。

第二关：最终产物校验

python3 scripts/validate_gzh_html.py out.html

检查生成的HTML是否完全符合公众号要求。

8. 如何处理代码块和图片？

gzh-design-skill通过references/common-components.md中的通用增量库统一处理：

代码块：支持深色/浅色主题，等宽字体不折行
图片/GIF：自动添加说明，GIF带有动图角标
行内代码：特殊样式标记

9. 如何更新到最新版本？

方法一：重新安装

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

方法二：手动更新进入安装目录执行：

git pull

10. 遇到问题怎么办？

检查步骤：

运行scripts/validate_gzh_html.py检查HTML合规性
查看错误信息，返回装配步骤修复
确保两关校验都通过（0 ERROR，0 WARNING）

如果仍有问题，可以参考references/eval-cases.md中的触发用例，或查看官方文档。

💡 实用技巧

技巧一：全自动模式

如果你想让AI助手完全自动处理，可以说："直接排"、"自动排"或"一键排版"。AI会：

自动推断文章结构
根据题材选择最合适的主题
自动完成排版和校验
交付时附上决策说明

技巧二：批量生成多套主题

想要对比不同主题的效果？告诉AI："用这几套主题各排一遍这篇"，AI会批量生成多套HTML供你选择。

技巧三：智能章节编号

gzh-design-skill会自动为章节编号（01/02/03...），如果是结语或总结章节，会自动使用主题库指定的特殊编号（如∞）。

技巧四：关键词标记

每段文字会自动标记1-3个关键词，使用主题对应的下划线颜色，既突出重点又不影响阅读体验。

🎯 最佳实践

1. 选择合适的文章类型

在开始排版前，先确定文章类型：

观点/深度分析→ 红白色系或石墨极简风
教程/操作指南→ 摸鱼绿
产品测评/工具盘点→ 摸鱼绿或摸鱼票据风
数据复盘/年度报告→ 摸鱼绿或橄榄手记
禅意/极简随笔→ 留白禅意风

2. 准备干净的Markdown

确保你的Markdown文档：

使用标准的Markdown语法
标题层级清晰（#、##、###）
图片链接正确
代码块格式规范

3. 利用主题生成器

如果现有主题都不符合你的需求，不要勉强使用。直接让AI助手生成全新主题：

提供主题描述："按'黑白杂志、克莱因蓝点睛、衬线字体'的气质生成一套新主题"
提供参考图片："按这张参考图做一套公众号排版组件库"

4. 定期更新

关注项目更新，新版本可能包含：

新的主题风格
优化的组件库
更好的兼容性
修复的问题

📊 主题速查表

主题	主色	适用场景	英文标识
摸鱼绿	#059669	教程、测评、清单、工具盘点	moyu-green
红白色系	#DC2626	深度分析、观点、力量感话题	red-white
石墨极简风	#52525B	设计、科技评论、专业观点	graphite-minimal
留白禅意风	#4A5D52	禅意、极简生活、深度随笔	zen-whitespace
摸鱼票据风	#059669	工具对比、创意评测	moyu-ticket
橄榄手记	#1e1f23	内刊手记、深度评测、案例复盘	olive-journal

🔧 技术细节

项目结构

gzh-design-skill/ ├── SKILL.md # 排版工作流主文档 ├── references/ │ ├── theme-index.md # 6套主题索引 │ ├── theme-*.md # 主题组件库 │ ├── theme-generator.md # 主题生成器 │ ├── common-components.md # 通用增量组件 │ └── format-normalize.md # 格式归一化 ├── scripts/ │ ├── validate_gzh_html.py # 产物合规校验 │ └── component_lint.py # 组件库源头检查 └── docs/ # 文档和预览

核心设计原则

约束优于自由：预设主题色板和固定组件保证输出质量
样式粘贴不掉：全内联样式 + 文字节点包裹
质量靠脚本不靠自觉：双关卡确定性检查
换模型不走样：排版逻辑沉淀在组件库中
Agent友好：输入输出都是纯文本，适配各种AI助手

🚨 注意事项

不适合的场景

gzh-design-skill专注于公众号排版，不适合以下场景：

普通网页/落地页（使用前端skill）
PPT制作（使用PPT skill）
纯图片海报/社交卡片
非公众号平台的排版
代写文章（只排版，不写作）

平台限制已内置

所有公众号平台的限制都已内置到校验脚本中，包括：

禁用标签：<style>、<script>、<div>等
禁用属性：class、id
禁用样式：position: fixed/absolute/sticky、float等
禁用功能：@media、@keyframes、CSS变量等

📈 效果预览

项目提供了完整的主题预览，你可以在docs/gallery/目录中查看6套主题的实际效果。每个主题都展示了完整的排版组件，包括：

标题和章节编号
正文和关键词标记
引用块和引言卡片
代码块和图片
作者签名区域

🤝 获取帮助

如果你在使用过程中遇到问题：

先运行校验脚本检查错误
参考references/eval-cases.md中的示例
查看项目文档和FAQ
如果仍有问题，可以查看项目源码或提交Issue

gzh-design-skill的设计理念是让公众号排版变得简单可靠。通过预设的主题组件库和严格的校验机制，确保每次生成的HTML都能完美适配公众号平台。无论你是排版新手还是经验丰富的内容创作者，这个工具都能帮助你节省大量排版时间，专注于内容创作本身。

记住：好的排版不应该成为创作的负担，而应该是内容的加分项。让gzh-design-skill帮你处理技术细节，你只需要专注于写出精彩的内容！✨

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析