gzh-design-skill组件库完全指南：打造专业公众号文章
项目地址: https://gitcode.com/gh_mirrors/gz/gzh-design-skill 想要快速将Markdown文章一键排版成可直接粘贴到微信公众号编辑器的精致HTML吗？gzh-design-skill组件库正是你需要的终极解决方案！这个AI智能排版工具提供6套精选主题+主题生成器+双关卡校验，让公众号排版变得简单高效。无论你是新手还是专业编辑，都能在几分钟内完成专业级排版。😊
为什么选择gzh-design-skill组件库？
在公众号运营中，排版是影响阅读体验的关键因素。传统的排版方式需要手动调整样式、担心样式丢失、反复调试兼容性，耗时耗力。gzh-design-skill组件库通过AI智能排版技术，彻底解决了这些问题：
- 一键粘贴不掉格式：所有样式内联，文字用
<span leaf="">包裹，完美规避公众号编辑器过滤 - 6套专业主题：摸鱼绿、红白色系、石墨极简风、留白禅意风、摸鱼票据风、橄榄手记
- 智能组件装配：自动章节编号、关键词下划线标记、引言卡片、目录导航
- 双关卡质量校验：确保每次输出都符合公众号平台规范
6套精选主题深度解析
gzh-design-skill组件库提供了6套精心设计的主题，每套都针对特定文章类型优化：
摸鱼绿主题（默认）
适用场景：教程、测评、清单、工具盘点 特点：信息密度高，卡片丰富，适合知识整理类内容 主色调：#059669 翡翠绿 组件文件：references/theme-moyu-green.md
红白色系主题
适用场景：深度分析、观点文章、力量感话题 特点：经典编辑风格，红色克制点睛，适合严肃内容 主色调：#DC2626 正红色 组件文件：references/theme-red-white.md
石墨极简风
适用场景：设计评论、科技分析、专业观点、高端品牌 特点：极简克制，留白理性，全灰阶设计 主色调：#52525B 石墨灰 组件文件：references/theme-graphite-minimal.md
快速安装与使用教程
一键安装方法
npx skills add https://github.com/isjiamu/gzh-design-skill
或者手动克隆到本地：
git clone https://gitcode.com/gh_mirrors/gz/gzh-design-skill.git ~/.claude/skills/gzh-design
使用流程详解
-
选择合适主题
- 根据文章类型从references/theme-index.md选择主题
- 或让AI自动推荐最契合的主题
-
解析Markdown结构
- 自动识别标题、章节、加粗、高亮、引用、图片、代码块
- 智能提取关键信息
-
智能组件装配
- 使用主题组件库中的真实组件拼装
- 自动添加章节编号、关键词下划线
- 全角标点自动规范
-
双关卡质量校验
-
一键复制粘贴
- 生成带「复制」按钮的预览页
- 点击复制，直接粘贴到公众号编辑器
主题生成器：打造专属风格
不满足现有的6套主题？gzh-design-skill组件库还提供了强大的主题生成器功能！
一句话生成新主题
只需一句话描述你想要的风格，AI就能生成全新的主题组件库：
"按「黑白杂志、克莱因蓝点睛、衬线字体」的气质，给公众号排版生成一套新主题"
图片参考生成主题
上传一张参考图，系统会自动分析风格并生成匹配的主题：
"按这张参考图（附图）做一套公众号排版组件库"
生成的新主题会保存在assets/theme-previews/目录，确认后自动转换为标准主题库，与内置主题完全同权使用！
核心组件库结构解析
了解gzh-design-skill组件库的内部结构，能帮助你更好地使用和定制：
主题组件库
每个主题都包含完整的组件体系：
- 设计变量表：主色、浅底、边框色、高亮色等
- 完整组件集：45-75个精心设计的HTML组件
- 骨架模板：文章整体结构框架
- 配方表：不同文章类型的组件组合方案
- 映射规则表：Markdown元素到组件的映射关系
通用增量库
references/common-components.md包含所有主题共用的基础组件：
- 代码块（深色/浅色）
- 图片/GIF处理组件
- 小标签标题系统
- 行内代码样式
公众号平台兼容性保障
gzh-design-skill组件库专门针对微信公众号编辑器的限制进行了优化：
平台限制规避
- 禁用标签：无
<style>、<script>、<div>标签 - 禁用属性：无
class、id属性 - 禁用CSS：无
position:fixed/absolute/sticky、float、@media、@keyframes、display:grid - 样式全内联：所有样式直接写在标签的style属性中
- 文字包裹：每个文字节点都用
<span leaf="">包裹
质量校验脚本
双关卡校验确保万无一失：
- 源头关：scripts/component_lint.py检查组件库合规性
- 产物关：scripts/validate_gzh_html.py检查最终HTML合规性
实际应用场景示例
教程类文章排版
推荐主题：摸鱼绿 适用组件：
- 步骤标签（step-label）
- 代码块组件
- 编号列表
- 工具标签
深度分析文章
推荐主题：橄榄手记 适用组件：
- 编者按区块
- 分节标题
- 暗色摘要框
- 数据卡片
禅意随笔
推荐主题：留白禅意风 适用组件：
- 大留白设计
- 居中衬线引用
- 极简分割线
- 柔和阴影
高级技巧与最佳实践
关键词标记策略
每段文字智能标记1-3个关键词下划线，使用主题特定的下划线颜色：
- 摸鱼绿：
#A7F3D0 - 红白色系：
#FECACA - 石墨极简：
#52525B - 留白禅意：
#B5C8BC
图片处理规范
- 使用标准
img标签，提供明确宽度语义 - 图片标签使用
max-width:100%;height:auto;display:block;margin:0 auto; - GIF动图自动添加角标标识
- 所有图片都有合适的
alt属性
颜色搭配原则
gzh-design-skill遵循严格的配色原则：
- 主色克制：全文主色出现不超过5处
- 灰阶承重：90%文字使用中性灰阶
- 彩色点缀：彩色仅作为视觉锚点使用
- 对比度保障：所有颜色组合确保可读性
常见问题解答
Q：粘贴到公众号后样式会丢失吗？
A：不会！所有样式都是内联的，文字都用<span leaf="">包裹，这是校验脚本强制的重点。
Q：支持哪些AI模型？
A：不挑模型！国内外模型都能跑出一致效果——Claude、GPT、Gemini，以及DeepSeek、Kimi、通义千问、智谱GLM等国产模型都可以。
Q：能一次生成多套主题对比吗？
A：当然可以！只需说「用这几套主题各排一遍这篇」，就能批量生成多套供你挑选。
Q：如何更新到最新版本？
A：重新运行npx skills add https://github.com/isjiamu/gzh-design-skill，或到安装目录执行git pull。
Q：生成的HTML不合规怎么办？
A：运行scripts/validate_gzh_html.py检查，根据报错回到装配步骤修复。双关卡全绿才交付，仍有问题欢迎提交Issue。
设计理念与未来规划
核心设计原则
- 约束优于自由：预设主题色板和固定组件保证输出质量
- 确定性下沉脚本：平台限制这类死规则交给校验脚本
- 小标签，不用虚线框：强调用左竖条/药丸标签
- 每处经验都可复现：踩过的坑写进gotchas和校验脚本
项目路线图
- 主题生成器：按描述/参考图生成自定义主题
- 更多精选内置主题
- 主题静态截图预览
- GitHub Pages在线画廊
- 一键打包导出功能
开始你的专业排版之旅
gzh-design-skill组件库将复杂的公众号排版简化为几个简单步骤。无论你是个人创作者、企业新媒体运营，还是内容营销团队，这个工具都能显著提升你的内容生产效率。
立即体验：
- 安装gzh-design-skill组件库
- 准备你的Markdown文章
- 选择或生成适合的主题
- 一键生成精美排版
- 复制粘贴到公众号编辑器
告别繁琐的手动排版，拥抱智能高效的公众号内容创作新时代！🚀
想要更多主题风格？尝试使用主题生成器，一句话创造属于你的专属排版风格！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
