企业官网建设流程全解析

gzh-design-skill核心功能解析：6大主题+智能排版全揭秘

【免费下载链接】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是一款专为公众号排版设计的AI助手技能，它能将Markdown文档一键转换为可直接粘贴到微信公众号编辑器的精美HTML。这个项目解决了公众号编辑最头疼的问题：排版耗时、样式粘贴丢失、多平台兼容性差。无论你是公众号新手还是资深编辑，gzh-design-skill都能帮你节省大量排版时间，让内容创作更专注、更高效。

✨ 六大精选主题：满足各类内容风格需求

gzh-design-skill内置了6套精心打磨的排版主题，每套都针对不同的内容类型进行了优化设计：

1. 摸鱼绿（默认主题）

• 主色调：#059669翠绿色
• 适用场景：教程指南、产品测评、工具盘点、知识清单
• 特色：卡片丰富、信息密度高、适合结构化内容
• 组件库文件：theme-moyu-green.md

2. 红白色系

• 主色调：#DC2626正红色
• 适用场景：深度分析、观点文章、力量感话题
• 特色：经典编辑风格、红色克制点睛、适合严肃内容
• 组件库文件：theme-red-white.md

3. 石墨极简风

• 主色调：#52525B石墨灰色
• 适用场景：设计评论、科技分析、专业观点、高端品牌
• 特色：极简克制、留白理性、全灰阶设计
• 组件库文件：theme-graphite-minimal.md

4. 留白禅意风

• 主色调：#4A5D52墨绿色
• 适用场景：禅意随笔、极简生活、深度思考、艺术内容
• 特色：呼吸感最强、大留白设计、适合慢阅读内容
• 组件库文件：theme-zen-whitespace.md

5. 摸鱼票据风

• 主色调：#059669翠绿色
• 适用场景：工具对比、创意评测、产品对比
• 特色：票据视觉隐喻、星级评分、硬阴影卡片设计
• 组件库文件：theme-moyu-ticket.md

6. 橄榄手记

• 主色调：#1e1f23墨黑色（配橙色#ed7b2f）
• 适用场景：内刊手记、深度评测、案例复盘、系统说明
• 特色：编辑部内刊质感、分节形式多样、信息密度偏高
• 组件库文件：theme-olive-journal.md

🎯 智能排版引擎：五大核心功能详解

1. 自动章节编号系统

gzh-design-skill会自动识别文章结构，为每个章节添加优雅的编号。特别的是，最后一章如果是结语或总结，会使用特殊符号（如∞）代替数字编号，让文章结构更加清晰美观。

2. 关键词智能下划线标记

这是项目的核心特色之一！系统会为每个正文段落主动找出1-3个最重要的短语，并用主题色下划线进行标记。优先标记核心观点、关键数据、专有名词等，让读者一眼抓住重点。

3. 全平台兼容性保障

所有样式100%内联，每个文字节点都用<span leaf="">包裹，完美规避公众号编辑器会过滤的写法。系统严格遵守平台限制：禁止<style>、<div>、class属性、position:fixed等，确保粘贴后样式不丢失。

4. 内容格式智能转换

• 代码块处理：支持深色/浅色代码块，保持等宽字体不折行
• 图片/GIF支持：自动添加GIF动图角标，图片说明智能生成
• 引用块美化：开头引言自动提取并高亮核心关键词
• 目录自动生成：从文章标题中提取前3个核心看点作为导读

5. 中文标点自动规范化

正文标点一律转换为全角格式（，。！？：；""''（）—— …），避免半角标点影响美观。代码块和行内代码内的标点保持原样，不影响技术内容展示。

🔧 双关卡质量校验系统

gzh-design-skill采用独特的双关卡质量校验机制，确保每次排版都完美合规：

第一关：组件库源头检查

运行scripts/component_lint.py脚本，检查组件库是否存在反模式：

• 禁止使用white-space:pre（避免大空白问题）
• 检查正文四周虚线框
• 验证平台禁用项
• 必须达到0 ERROR才能通过

第二关：最终产物合规校验

运行scripts/validate_gzh_html.py脚本，检查生成的HTML：

• 禁用标签检查（<style>、<div>、class等）
• <span leaf>包裹验证
• 半角标点检查
• 必须达到0 ERROR、半角0 WARN才能交付

这种确定性检查机制不依赖AI模型的"自觉性"，从根本上保证了排版质量。

🎨 主题生成器：一键创建专属风格

如果内置的6套主题都不符合你的需求，gzh-design-skill还提供了强大的主题生成器功能。只需一句话描述或一张参考图，就能生成全新的排版主题！

生成流程四步走：

1. 收集偏好：描述想要的风格气质，或上传参考图
2. 生成区块库：AI产出45-75个区块的完整HTML组件库
3. 转换标准库：转换为标准主题文件，补全五个必备章节
4. 即刻使用：新主题立即加入可选列表，与内置主题完全同权

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

📋 使用场景匹配指南

🚀 快速上手指南

安装方式一：一行命令安装

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

安装方式二：AI自动安装

对任意AI助手（Claude Code / Codex / Cursor等）说：

请帮我查找并自动安装 https://gitcode.com/gh_mirrors/gz/gzh-design-skill 这个skill

基本使用流程

1. 准备Markdown文档：可以是.md文件，也支持.docx、.pdf、纯文本格式
2. 选择主题：根据内容类型选择最合适的主题
3. 智能排版：AI自动完成章节编号、关键词标记、格式转换
4. 质量校验：双关卡自动检查，确保合规
5. 一键复制：生成带"复制"按钮的预览页，点击即可粘贴到公众号

💡 设计理念与最佳实践

视觉层级三原则

1. 锚点层：最强强调，全文不超过5处（主色加粗、深色底白字引用）
2. 标记层：正文关键词，每段1-3处下划线标记
3. 容器层：引用块、概念标签、长句强调（浅底引用、荧光笔、徽章）

配色克制原则

• 主色只在锚点出现，全文不超过5处
• 大面积使用白底 + 灰阶，彩色只做点缀
• 一段内高亮不超过2种颜色
• 90%的文字使用中性灰阶，色彩不承担正文阅读

排版黄金法则

• 小标签优于虚线框：强调用小标签或左竖条，避免笨重的四周虚线框
• 代码块要紧凑：使用margin:0避免大空白，缩进用全角空格
• 图片自适应：使用max-width:100%，不拉伸小图
• 签名区唯一：作者签名只在文章末尾出现一次

🔄 可验证的开发循环

gzh-design-skill采用工程化的开发流程，确保每次修改都可靠：

# 修改组件库后 python3 scripts/component_lint.py . # 源头检查 python3 scripts/validate_gzh_html.py out.html # 产物检查

这种"改→验→修"的闭环机制，让排版质量有确定性保障，不依赖模型的随机性。

🌟 项目特色总结

1. 6套精选主题：覆盖主流内容类型，每套都经过精心打磨
2. 智能排版引擎：自动章节编号、关键词标记、格式转换
3. 100%平台兼容：样式全内联，粘贴不丢失
4. 双关卡质量校验：脚本确定性检查，质量有保障
5. 主题生成器：一句话创建专属风格，无限扩展
6. 多格式支持：Markdown、Word、PDF、纯文本全兼容
7. 多模型适配：不依赖特定AI模型，国内外主流模型都能用

无论你是公众号运营新手，还是需要批量处理内容的专业编辑，gzh-design-skill都能显著提升你的排版效率。6大主题+智能排版引擎+质量校验系统，三位一体打造完美的公众号排版体验。

立即体验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