一篇文章好不好看，不在它加了多少东西，而在它敢于留多少空白。——留白禅意 · 组件库随笔
公众号编辑器至今不支持外部样式表，所有颜色字体边距都必须内联；\<div> 会被改写，class 会被剥离，文字节点不带 \<span leaf> 包裹就会样式全失。这些限制把无数人逼到复制粘贴试错里。
我曾以为排版是手感活。直到在 \~/.openclaw/workspace/skills/ 下装上 gzh-design-skill 这套组件库，才慢慢意识到：好的排版，是一种被工程化了的克制。
本文脉络
01
技能是什么
02
留白禅意的气质
03
平台红线与工程化
01 · CHAPTER ONE
缘起：把排版这件事，从灵感变成工程
写公众号最累的不是内容本身，是排完版粘到编辑器之后发现样式又丢了的那一瞬间。
公众号编辑器至今不支持外部样式表，所有颜色字体边距都必须内联；\<div> 会被改写，class 会被剥离，文字节点不带 \<span leaf> 包裹就会样式全失。这些限制把无数人逼到复制粘贴试错里。
我曾以为排版是手感活。直到在 \~/.openclaw/workspace/skills/ 下装上 gzh-design-skill 这套组件库，才慢慢意识到：好的排版，是一种被工程化了的克制。
02 · CHAPTER TWO
它是什么：主题索引 + 组件库 + 校验脚本
技能目录只有三层资产，干净到让人舒服：
01
references/theme-index.md——主题单一来源，记录主色、适用场景、下划线 CSS
02
references/theme-{标识}.md——每套主题的完整组件库：引言卡、章节标题、引用块、图片容器、签名区
03
scripts/validate_gzh_html.py——合规校验器，把平台红线从自觉变成确定性兜底
除此之外还有一份 references/common-components.md，是所有主题共享的代码块、图片、标签小标题。主题库负责气质，通用库负责基础。 这个分工，就是这套技能最聪明的地方。
03 · CHAPTER THREE
六套主题：每一种内容都有自己的视觉语言
主题不是装饰，是文章与读者之间的呼吸节奏。当前六套已注册：
01
摸鱼绿 #059669——教程、测评、清单、工具盘点。卡片丰富、节奏快、信息密度高
02
红白色系 #DC2626——深度分析、观点文章、力量感话题。红色克制点睛
03
石墨极简风 #52525B——设计、科技评论、高端品牌。全灰阶、理性冷峻
04
留白禅意风 #4A5D52——禅意冥想、深度随笔、艺术留白。本文所用，呼吸感最强
05
摸鱼票据风——工具对比、创意评测，票据视觉隐喻，星级评分 + 硬阴影卡片
06
橄榄手记 #1e1f23——内刊手记、深度评测、案例复盘。编辑部内刊质感
气质对了，文章就对了大半。
04 · CHAPTER FOUR
留白禅意风：克制到几乎无色块
本篇所用。先看它敢删掉什么——没有色块底色、没有渐变装饰、没有圆角药丸。它用 1px 细线和 64px 大留白来分层。
再看它保留什么：墨绿主色 #4A5D52 全文出现频率极低——仅用于编号小字、章节短线、竖条、加粗锚点、CTA。所有强调，靠低饱和墨绿下划线 #B5C8BC，1.5px 实线，温柔地划过每段关键词。
视觉层级只三层：
01
锚点层——墨绿加粗，全文 ≤5 处
02
标记层——低饱和墨绿下划线，每段 1-3 处
03
容器层——细线 + 大留白 / 左竖条，按需
三个数字读完，你已经懂了这套主题的气质。
05 · CHAPTER FIVE
工作流：六步成稿
技能 SKILL.md 把一篇 Markdown 转成公众号 HTML 的过程拆成六步，每一步都有明确的判定标准：
01
输入归一化
02
选主题
03
读组件库
第一，输入归一化：Markdown 直接进；docx/pdf/纯文本先按 format-normalize.md 转草稿。
第二，选主题：题材契合推荐、单步确认；用户说"直接排"则全自动。
第三，读组件库：主题库 + 通用库两份同时读，绝不手写 HTML。
第四，结构解析：标题、引言、## 章节、加粗高亮、引用、图片、代码，按映射规则替换。
第五，合规校验：跑 validate_gzh_html.py，ERROR 清零才算完成。
第六，输出：\<section> 正文片段 + 预览页（带"复制到公众号"按钮）。
「第五步是关键。我亲眼见过因为漏写一个 \<span leaf>，整篇文章粘到公众号后变成一屏光秃秃的黑字。」
校验脚本就是为了让这种事故不再发生。
06 · CHAPTER SIX
智能处理：机器比人更懂"哪里该强调"
技能内置了几条默认行为，模仿了一个老编辑的下意识：
第一，章节自动编号：## 出现就分配 01/02/03...，末章结语用 ∞。
第二，关键词下划线：每段主动找 1-3 个最重要的短语标记，即使原文没有任何加粗。
第三，英文标签：实测→TEST、教程→TUTORIAL、总结→SUMMARY。
第四，目录精选：从所有 ## 取前 3 个作为导读，不硬塞全量。
第五，签名占位：默认不写死任何人名，用 {{作者名}} 让用户替换。
"哪里该强调"这件事，交给机器之后，省下来的心力就够你把内容本身写好三倍。
07 · CHAPTER SEVEN
平台红线：从自觉到兜底
公众号编辑器有几条铁律，违反任何一条都会导致样式丢失或被过滤：
禁止几类标签和属性——样式表、脚本、div 容器，以及 class 和 id；禁止 CSS 里的固定定位、浮动、媒体查询、动画、网格布局、变量、外部字体；样式必须内联；每个中文文字节点必须用 span leaf 包裹。
SKILL.md 把这些写在"平台红线"一节。validate_gzh_html.py 把它们从"自觉"变成"确定性检查"——生成 HTML 之后必跑一次，ERROR 必须清零。
∞ · POSTSCRIPT
写在最后
排版的最高境界，不是加法，是减法。
gzh-design-skill 教会我的事很简单：克制是有结构的，留白是有工程的。 当你把"哪里该有"和"哪里不该有"都拆成可复用的组件，你就不再需要灵感——你只需要选择。
如果你也在为公众号排版熬夜，欢迎把这套组件库装进自己的工作流。让机器替你记住所有禁令和间距，把你的注意力还给你的内容。
「后记：一篇文章好不好看，不在于它堆了多少色块和图标，而在于它敢于把多少东西删掉。这套技能最打动我的，是它默认的留白尺度——64px 章节间距、26px 段落间距、1.9 倍行高——每一个数字都在告诉你：呼吸，比填满更重要。」
END
我是 LeisureLinux，专注分享 Linux 底层架构与开源工具的实战心得。
如果你觉得今天这篇有收获，欢迎 点赞、在看、转发 三连，我们下篇见。
小龙女与公众号的异地恋：SSH 隧道 + autossh + goproxy 搞定动态 IP 发布，无需每次修改公众号后台配置 IP 白名单 Claude 技能库全线刷屏！GitHub 今日热帖：数据分析、本地 LLM 与 AI 代理实战 零算力做同款「时事点评Skill」全套教程 【译】上下文工程是新的提示工程：拉开 5 万与 50 万美金年薪差距的关键技能
