OPEN SOURCE · 排版 SKILL 2026.07
发布前最烦的那一个小时?
把审美写成 规则
排版交给 AI Agent
组件库装配 · 主题生成 · 双重校验 · 开源复用
gzh-design-skill ·
甲木 × 摸鱼小李
OPEN SOURCE AGENT SKILL
6 Parts + Conclusion
滑动
PART 01
为什么做排版
注意力变了
PART 02
解决什么问题
工作流问题
PART 03
六套主题
组件库装配
PART 04
主题生成器
专属风格
PART 05
Skill 即产品
可商业化
PART 06
怎么用
安装即触发
PART ///
规则交给 Agent
现在,公众号排版这件事,可以放心交给 AI Agent 了。
大家好啊,我是甲木,
这几天趁着还能用「天才程序员」,跟小李一起把 公众号排版 Skill 打磨了一下。
之前我们每次发布内容,都会有朋友问文章怎么进行排版的,今天直接把 方法论和代码库开源出来 供大家使用~
AI 排版要保证既有阅读路径,又不影响复制粘贴。 既有审美判断,又能稳定复用 。试了几轮之后,效果比我们预期好很多。
而且在 国产 Agent 上统统适用 !WorkBuddy、TraeWork、QoderWork、Dumate、KimiWork 等等,都能直接加载!国产模型通通适用!
先来看看效果,小李的经典 摸鱼绿 。
![]()
— 摸鱼绿
我之前常用的 红白风格 ,
![]()
— 红白风
还有 橄榄手记 风格等等。
![]()
— 橄榄手记
我们看了觉得效果不错,于是把这套东西整理成了一个 Skill,叫gzh-design-skill。
今天把它开源出来。
GitHub 开源地址(欢迎 star ⭐️)
isjiamu/gzh-design-skill
![]()
— GitHub 首页
下面聊聊它解决什么问题、个人如何 搭建自己的排版体系 ,以及 Skill 这件事后面可能怎么商业化。
01
PART
为什么要做排版?
WHY · ATTENTION SHIFT
为什么做排版,很简单,内容的 呈现形式,已经变了很多轮 。
从纯文字到图文,再到小红书、朋友圈、公众号头图,开始变成 「图片是主载体,文字只是配合」 ,再到之后的短视频。
用户的注意力一直在被 更强的视觉形式 训练。
纯文字当然能传达知识。但学习本身是一件 反人性的事情 。
你让一个人面对一整屏黑色正文,他需要主动调动注意力,主动建立结构,主动判断重点。
这对读者要求太高了。如果我们能用更舒服的排版、更清晰的层级、更好的图文组织,把 AI 新知识呈现出来,读者读起来会 轻松很多 。
![]()
公众号尤其如此。
所以我们一直觉得, 排版也是内容的一部分 。于是跟小李一拍即可,把这个做了并且开源!
我们希望大家在吸收 AI 新知识的时候, 内容本身是清楚的,形式也是舒服的 。
让人 愿意读下去 ,这件事很重要。
02
PART
它解决什么问题?
PROBLEM · WORKFLOW
很多人一听公众号排版,第一反应是:找个模板不就行了?
其实不够。
模板只能解决一次性的样式问题,解决不了每天写文章的 工作流问题 。
公众号排版最麻烦的地方,不在于你不知道哪个颜色好看。
![]()
摸鱼绿主题演示 GIF
而在于 每篇文章都要重新做一遍 这些细节:
章节标题怎么编号,开头金句怎么做成引言卡
正文关键句怎么标下划线
图片和 GIF 怎么不乱
代码块、Prompt、命令行怎么保留格式
这些东西单独看都不大。堆在一起,就是一篇文章 发布前最烦的那一个小时 。
gzh-design 做的事很直接,利用 AI 的能力:
你给它一篇 Markdown,它给你一份可以直接粘进微信公众号编辑器的 HTML。
注意,不是普通网页 HTML。
公众号编辑器大家应该也都清楚,有非常多的坑… style 标签不行, script 不行,外部字体这些东西也很容易被过滤。
很多 AI 生成的 HTML,在浏览器里看着很好。一粘进公众号后台, 直接散架 。
所以 gzh-design 的目标是:
生成公众号能吃下去、粘进去不掉格式的正文片段。
所有样式内联。
![]()
— 示例文章排版,格式保持不变
你全选,复制,粘贴。
格式不掉。这才是它的 核心价值 。
03
PART
它现在长什么样
THEMES · SIX PRESETS
目前 gzh-design 里有6 套精选主题。
其实最开始我堆了 20 套模板,结果都被小李否定了…(把 选择权和自主性给到用户 )
因为排版这件事, 主题多不等于好用 。
真正重要的是: 每一套都能稳定覆盖一类内容 。
![]()
— 六套主题,按需选择
这 6 套,每一套背后都有自己的 组件库、色值、标题骨架、正文标记方式 、引用块、图片样式和文章类型配方。
AI 在按组件库装配。这点很重要。
gzh-design 先把 主题、组件、映射规则 写清楚,再让 Agent 按规则执行。
约束不是束缚。约束是输出下限。
04
PART
真正的核心:Theme Generator
CORE · THEME GENERATOR
但说实话,gzh-design 最值得看的,不只是这 6 套主题。
真正的核心模块,是Theme Generator。
简单说,它解决的问题是:
每个人都能把自己的颜色、比例、审美偏好,生成一套专属公众号排版风格。
你可以给它一句话:
prompt
按「黑白杂志、克莱因蓝点睛、衬线字体」的气质,给公众号排版生成一套新主题。
跑完之后,直接给生成一套新主题。
![]()
— 关键在于组件化
也可以给它一张参考图:
prompt
按这张参考图,做一套公众号排版组件库。
它会先抽取你的 视觉偏好 。
比如主色、背景色、正文色、强调色、装饰色,字体倾向,圆角,阴影,信息密度,标题结构,卡片形式,分割方式。
然后生成一整页 Block 区块库预览 。
![]()
— 留白禅意风
你确认风格之后,再把它转成标准主题库,登记到 theme-index.md ,跑一遍 component_lint.py 。
从那以后,这套主题就和内置主题一样,可以 反复调用 。
除了配色,关键是组件化。
一套主题不是一张封面图。
它至少要包含封面、章节标题、小标题、正文段落、引用块、提示卡、图片、GIF、代码块、表格、FAQ、作者信息、结尾互动区。
它是在给一个账号做 一套排版系统 。
![]()
— 红白风格
这件事对个人创作者有用,对 企业内容团队 更有用。
Theme Generator 的价值就在这里:
把「审美偏好」变成「主题变量」
把「设计经验」变成「组件库」
把「品牌规范」变成「Agent 可以执行的规则」
排版设计的组件化很重要!
比如,每段 关键词下划线 需要给到,代码块和命令行都做了自己的 组件兼容 。
![]()
图片、GIF、视频当然要支持。
但这里有一个现实限制要说清楚。
公众号平台对图片有自己的机制,所以如果文章里要放真实图片, 图床问题还是要自己解决 。
gzh-design 不会凭空帮你生成一个可长期使用的公众号图床链接。
后续考虑做一层中转,然后复制的时候自动上传到公众号后台。
但它可以帮你先把 位置留好 。
比如你在原文里写:
【插入:文章开头视频截图】
它会把这里转成一个 「待补素材」占位板块 。
![]()
— 如图所示,留出占位板块
图片、视频、GIF、成果图,都可以这样 先留接口 。你后面拿到素材之后,再替换进去。
还有一点是从藏师傅的 Skills 中学来的思路,做 AI 工作流,最怕一件事: 看起来能跑,实际上不稳 。
![]()
你不知道它这次会不会漏。不知道复制到公众号会不会掉格式。这种不确定会让人 不敢把工作交给 AI 。
所以 gzh-design 里有 两道关 。
第一道叫 源头关 。
component_lint.py 扫组件库,检查有没有平台禁用写法,有没有容易导致代码块大空白的 white-space:pre ,有没有笨重的正文虚线框。
第二道叫 产物关 。
validate_gzh_html.py 扫最终生成的 HTML,检查禁用标签、文字包裹、半角标点等问题。
组件库干净,产物再检查一次。这套循环不复杂。但很有用。
它把「我觉得没问题」,变成了 「脚本跑过没问题」 。对 AI Agent 来说,这一步特别关键。
因为 模型负责理解内容,脚本负责执行红线 。
能确定的事, 不要交给模型猜 。这个也是 Harness 里面的含义。
05
PART
Skill 即产品,可商业化
BUSINESS · SKILL AS PRODUCT
Skill 这种东西, 本质上是一个产品 。
既然是一个产品,就应该有一个系统。
![]()
— 项目目录结构
它是一个可以 被维护、被扩展、被验证 的小系统。
这也是我们愿意把它开源的原因。
一个排版 Prompt,开源价值有限。
一个 可维护的排版 Skill ,才有机会让更多人一起改。
写到这里,我想顺便聊一个更大的话题: Skill 这东西,是可以商业化的。
早期,大家都知道 Prompt 可以商业化。我身边就有朋友,一条几百字的 Prompt,结合模型能力,解决某个非常具体的业务场景,能卖到几万块钱。买方买的是:这个 Prompt 背后的 场景理解、经验压缩、试错成本 ,以及它能不能真的解决问题。
现在 Skill 的商业化逻辑,其实是类似的。
只是 载体升级了 。
随着不同 Agent 平台、Agent 本身的能力、模型的执行能力都在提升,一个问题会变得越来越重要:
你能不能把自己的经验封装成 Skill,对外提供,并让别人稳定复用?
这件事 大有可为 。
我也专门跟藏师傅聊过这件事。
一个共同判断是:只要你的 Skill 足够具体,而且真的能解决用户的实际需求场景 ,就一定会有人愿意来合作。
即使 Skill 在 AI 发展过程中可能只是一个「中间态」,但现阶段 各大厂商的动作也说明了它的价值 。
06
PART
这个 Skill 怎么用?
USAGE · HOW TO USE
最简单的方式,是直接让你的 Agent 安装。
在设计这个 skill 的过程里面,也考虑了很多因素,最主要的就是 适配国内的 Agent,方便大家使用 。
README 里有一段「给 AI 的安装 prompt」,复制粘贴给你的任意 AI Agent,它会 自动完成安装 。
装好之后,对它说下面这句就会触发:
PROMPT 用摸鱼绿把这篇文章进行公众号排版:article.md
![]()
— 比如我在 workbuddy 中,直接用藏师傅文章为例
如果你给的是 Markdown,效果最稳,如果是其它格式,它也会先做 格式归一化 ,再进入排版流程。
当然,我还是建议正式写作时尽量用 Markdown。生成的这个页面,右上角我也准备了 「一键复制」的按钮 ,大家打开直接去公众号后台编辑即可。
![]()
操作路径 GIF
结构清楚,AI 也更容易理解。
当然也有不少缺点,比如 非秒出 ,排版时间需要几分钟; 图床问题需要自己解决 ,后续也会针对性优化。
LAST
结语
LAST · THE END
做完 gzh-design,我对排版这件事又确认了一遍。
好看不是玄学 。
叠加上小李的设计审美,它是 字体、颜色、层级、间距、标记、组件、规则和边界 共同作用的结果。
以前这些东西在设计师和编辑的脑子里。
现在我把它拆成组件库、主题索引、映射规则和校验脚本,让 AI 可以 一条条执行 。
它可以把一个人的经验,压成一个 可复用的小系统 。
如果你平时也写公众号、写教程、写产品评测、写自媒体长文,可以把gzh-design装起来试试。
isjiamu/gzh-design-skill
如果觉得有用,欢迎顺手给个 star ⭐️
也欢迎提 issue、提 PR,尤其是 新的主题风格和真实场景反馈 。
把常识写成规则,把规则交给 Agent,人去做更值得做的判断。
以上。
我是甲木,热衷于分享一些 AI 干货内容,同时也会分享 AI 在各行业的落地应用。
![]()
如果你觉得今天这篇有收获,欢迎点赞、在看、转发三连,我们下期再见
转发
THANKS FOR READING
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.