科技编辑风排版：正文我只用留白和层级
排版不靠堆装饰。白底大留白、17px 正文、蓝竖线小标题，产出可直接粘贴的 HTML。
写稿我很少焦虑，排稿经常焦虑。同样一篇内容，换一套排法，读起来的感受差出一大截。
有一阵子我迷上「热闹」的排法：标题加渐变底，段落塞进圆角卡片，小标题配彩色编号，重点用色块顶出来。排完自己看着挺满意，发出去数据很诚实——读者翻两屏就走了。
后来我把那套全拆了，换成白底、大留白，只用字号和字重分层次，读完率反而稳住了。
我把这半年攒下来的技能陆续上架到了 WorkBuddy，一共 11 个，这是第 6 篇。这一篇讲「科技编辑风公众号排版」，就是把上面那条路做成了一套可执行的参数。
一、两种路线
公众号正文的排版，我试下来大致就两条路线。
一条是装饰路线。它的逻辑是「怕读者划走，所以每一屏都要热闹」：渐变标题、卡片边框、彩色编号、表情符号强调，一屏能塞进四五种视觉元素。
另一条是编辑路线。白底，正文 17px，章节标题纯黑加粗，小节标题用一条蓝色竖线带出来，剩下的全是留白。它的逻辑是「读者是来看字的」——装饰每多一分，注意力就被分走一分。
我现在基本只走第二条。科技资讯、产品发布、研究解读、企业动态这类正文，信息密度本来就高，再叠装饰，读起来只会更累。
怎么选，我给自己定了一条很土的标准：读者是来读完的，还是来扫一眼的。资讯、解读、发布这类要读进去的内容，走编辑路线；促销、活动、报名这类只要一眼看到按钮的内容，走装饰路线。我之前的毛病是两条路线用反了——该读的内容排得太花，该扫的内容又排得太素。
有一点得写在前面：这套技能的观感参数，来自对公开科技媒体公众号的逆向分析，是拿 1080px 的手机截图反推出来的，不是任何一家的页面源码。它复刻的只是视觉语言，不含原品牌资产、Logo 或 CSS。
二、它能做什么
给它一段 Markdown、一段纯文本，或者一篇你已经写好的公众号正文，它输出一段可以直接粘进微信编辑器的正文 HTML。
拆开说是五件事。
结构映射。# 只留给公众号后台的文章标题，正文里不重复输出；## 变成 22px 的黑色章节标题；### 变成 19px、带 5px 蓝色左竖线的小节标题。同一层级不会混用两套样式，也不会出现「这一节是蓝线、下一节变成色块」的漂移。
组件按需生成。引用、提示、步骤、数据表、代码块、图注都有对应样式。技能包里带了一张整页预览 assets/theme-preview.html，浏览器直接打开就能看到 49 个组件的实际效果；还有一张 393px 手机宽度的渲染检查图 assets/theme-preview-mobile.png，用来确认正文没有横向溢出。
骨架也给了。文档里推荐的结构是：开场正文或头图 → 黑色章节标题 → 正文段落 → 图片 → 小节标题 → 数据或图表 → 总结章节 → 轻量的互动提示。章节之间靠 42～46px 的留白切换，一屏通常只保留一个强视觉锚点。
保留原文。它只调整结构、样式和必要的全角标点，不扩写事实、不改图片顺序。图注更是只在原文本来就有说明，或者确实需要交代来源和口径时才生成，不允许编。
输出干净。成品里没有 <html>、<head>、<body>、<style>、<script>，也没有 class 和 id，所有样式写在 inline style 里；文字节点用 <span leaf=""> 包住，图片保持原比例居中。整个产物就是一个 <section> 片段。
三、参数与规则
我把关键参数抄在下面，你大概能看出它的克制程度。
| 元素 | 字号 | 行高 | 字重 | 间距 |
|---|---|---|---|---|
| 正文 | 17px | 1.62 | 400 | 段后 30px |
| 章节标题 | 22px | 1.4 | 800 | 上 46px，下 30px |
| 小节标题 | 19px | 1.45 | 800 | 上 42px，下 28px |
| 图注 | 15px | 2 | 400 | 图上 18px，下 32px |
全局内容宽度限制在 677px 居中，手机端左右各 24px 边距，正文字距 0.2px，正文颜色是 #222222，章节标题是纯黑 #111111。字体栈是 -apple-system、BlinkMacSystemFont、PingFang SC、Hiragino Sans GB、微软雅黑这一组系统字体，英文和数字沿用系统字形，不额外拉大字符间距。
强调方式特别简单：关键能力、结论、数据用黑色 800 粗体，每段最多两处；蓝色每段最多一处，只给品牌词、链接语义或者跟标题体系直接相关的地方，正文不大面积变蓝。
列表用蓝色圆点，有序列表用蓝色 01、02、03 编号，项与项之间留 10px；行内代码 14px，内边距 2px 6px；次要说明和实验口径用 15px 灰色 #999999、行高 2；标签和步骤号 13 到 14px；章节之间的分隔线是 1px 的 #EDEDED。
提示类信息可以换成浅蓝底 #F7FAFF 加 4px 蓝色左线，警示换橙色、成功换绿色，颜色只承担状态含义。真实数据用 <table>，其它布局不用表格模拟。
引用用 3px 浅蓝细线，不用四周虚线框；代码块用深色纯底，或者浅灰底加一条蓝色左线。图片居中、按原比例自适应，不统一加圆角和阴影；方形或竖图最多缩到 72% 宽，信息密集的图表默认占满。正文不两端对齐、不做首行缩进，中文段落一律左对齐。
为什么坚持 inline style
这一点我单独说，因为它是整套方案里最容易踩坑的地方。
公众号编辑器在粘贴富文本时，会把 <style> 标签、class 和相关选择器过滤掉，只保留行内样式。很多模板在浏览器里好看，一粘进后台就塌了，问题就出在这——它的层级是 class 撑起来的，class 没了，层级也就没了。
这套输出把关键样式全部写进 inline style，粘进去就是最终效果，不需要你在后台再手动调一遍。代价是 HTML 啰嗦一点，但那是给机器看的，不影响你。
四、怎么调用
技能市场里安装之后，在对话里直接说人话就行。它没有脚本、没有依赖、不需要任何 Key，是纯规则型技能。
可以这么触发：
「把这篇 Markdown 排成科技编辑风公众号正文」
「用科技编辑风排版，输出可以直接粘进公众号编辑器的 HTML」
「这份稿子帮我排一下，白底大留白那种，别加卡片」
技能内部的执行路径是：先读 references/style-guide.md，按里面的设计变量、标题体系、组件映射和文章骨架来排；需要对照组件时再读 assets/theme-preview.html。
排出来的骨架大致长这样，这是 style-guide 里的真实片段，可以直接复制：
<section style="max-width:677px;margin:0 auto;padding:0 24px;background:#FFFFFF;color:#222222;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;box-sizing:border-box;"> <section style="margin:46px 0 30px;"> <h2 style="margin:0;font-size:22px;line-height:1.4;font-weight:800;color:#111111;letter-spacing:.2px;"> <span leaf="">章节标题</span> </h2> </section> <p style="margin:0 0 30px;font-size:17px;line-height:1.62;letter-spacing:.2px;color:#222222;text-align:left;"> <span leaf="">正文段落</span> </p> </section>
最省事的用法就三步：
1. 在 WorkBuddy 技能市场安装「科技编辑风公众号排版」 2. 对话里说：把这篇 Markdown 排成科技编辑风公众号正文 3. 复制输出的 HTML，粘贴进公众号后台编辑器
五、边界与注意
这一节我说直白一点。
它只管排版，不管内容。不替你写稿、不改事实、不编图注、不判断观点。排版里的取舍——哪里配图、哪里拆小标题——仍然是你的事，它按你给的结构排。它能顺手把标点规范成全角，但内容对不对，是你自己的责任。
它不是花哨营销风。技能文档里写得很清楚：避免卡片堆叠、渐变、阴影、花哨编号和大面积色块。如果你的场景是促销海报、活动裂变那种，它不合适，你要找的是另一种模板。
它不负责微信阅读页自带的标题、作者和时间区域。那些是平台自己渲染的，正文模板改不了，也不该改。
图片要你自己准备。它只保证图片居中、按比例自适应、不加多余装饰，图注也不会替你编。
输出是正文片段，不是完整网页。里面没有 <html>、<head>、<body>，不能当独立页面打开，只能粘进编辑器或者正文容器。
字体靠系统字体栈。用 -apple-system、PingFang SC、微软雅黑这些系统字体，不同设备上会有细微差别，这是正常的。交付前在手机宽度下看一眼，主要是确认没有横向溢出。
最后一条经验：Markdown 结构越规范，映射越准。如果原文是一堆手动换行和空格拼出来的，先清一遍再喂给它，效果会好很多。
另外这套参数不是死的。技能现在是 v1.0.0，数值都写在 references/style-guide.md 里；哪天你觉得正文 17px 偏大、或者想要更紧的段距，直接改那份文档里的数字就行，不用动输出的结构。
排版这件事，我现在的判断很朴素：读者记得住的永远是内容，排版的任务是别挡路。
我是文茂，热衷于分享 AI 工具与开发者生态观察。觉得有用欢迎点赞、在看、转发三连。