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智能排版技术彻底解决了这些问题一键粘贴不掉格式所有样式内联文字用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结构自动识别标题、章节、加粗、高亮、引用、图片、代码块智能提取关键信息智能组件装配使用主题组件库中的真实组件拼装自动添加章节编号、关键词下划线全角标点自动规范双关卡质量校验源头检查scripts/component_lint.py产物校验scripts/validate_gzh_html.py一键复制粘贴生成带「复制」按钮的预览页点击复制直接粘贴到公众号编辑器主题生成器打造专属风格不满足现有的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文章选择或生成适合的主题一键生成精美排版复制粘贴到公众号编辑器告别繁琐的手动排版拥抱智能高效的公众号内容创作新时代想要更多主题风格尝试使用主题生成器一句话创造属于你的专属排版风格【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考