公众号稿子写完，排版往往还要再花半小时：标题层级、导语、数据卡片、引用出处、图片位、文末署名，一样都不能少。
这个案例把「Markdown 进、公众号样式出」做成一个单文件小工具：左边贴稿，右边实时看到手机里的样子；换模板、切宽度、一键复制，粘进公众号编辑器主要样式保持完整。
第一步：先把排版规范写成需求
这类工具最难的不是界面，而是把「公众号应该长什么样」讲清楚。本次把字号、行高、颜色、间距、每个组件的形态，连同模板切换、预览宽度、复制、自动保存这些交互，一次性写进需求，交付才有明确的落地标准。
本次案例实际提交的完整提示词：
做一个公众号排版工具，单个 HTML 文件，双击打开即用，不依赖网络。
输入 左侧粘贴 Markdown 或纯文本稿件，右侧按手机宽度实时渲染。预览支持 375px 和 677px 两种宽度。
排版风格 专业克制，中文科技媒体的阅读体验。正文 16px、行高 1.75、颜色 #33383D；标题 #0F172A；强调色 #1D4ED8；段间距 20px；左右留白 20px；系统字体 PingFang SC / 微软雅黑。
版式
- 大标题、副标题、作者与日期行
- 导语段：浅灰底、左侧主色竖线
- 一至三级小标题，二级带 01/02 序号
- 正文段落、加粗强调、行内代码
- 引用块，带出处
- 数据卡片：一个大数字加一行说明
- 图片位：虚线框加说明文字，图片后续在公众号后台替换
- 代码块：等宽字体、浅灰底、保留缩进
- 有序与无序列表，换行后与文字对齐
- 文末署名与参考资料
交互 顶部有模板切换、预览宽度切换、「复制到公众号」按钮。复制后粘贴进公众号编辑器，样式完整保留。草稿自动保存，刷新不丢。
预填 打开时预填一篇示例文章用于演示，内容见附件 demo-article.md。顶部提供「清空」与「恢复示例」。
Markdown 约定：# 大标题、## 小标题、> 引用、- 列表、三个反引号包裹的代码块、![说明] 图片位、[数据] 数值｜说明。第二步：一屏两栏，贴进去就看到手机里的样子
工具交付的是单个 HTML，双击打开、不依赖网络。左栏是原始 Markdown（底部带一份语法速查），右栏是 375 宽的手机预览；中间的分隔条可以拖动，改左右比例。
标题后第一段自动成为导语，换成浅灰底加主色竖线的卡片；正文两端对齐、段间距 20px，读起来接近常见的科技媒体长文。
第三步：三套模板与两个预览宽度
配色不做成一堆开关，而是三套成品模板：经典蓝按需求里给的颜色走，墨黑是黑白灰的编辑风，青碧换一支主色。前两屏都是同一篇稿子，换模板时结构和间距不动，只换气质。
预览宽度另一组开关：375 是手机上的真实宽度，677 用来检查宽屏阅读时的行长和图片占位是否站得住。
第四步：Markdown 约定逐条落到样式
工具支持的语法不多，但每条都有对应样式：# 是大标题加主色短线；## 自动编号 01/02（源文里已经有编号会剥掉重编，数字开头的标题不受影响）；### 带主色竖标；> 引用识别句末的「—— 出处」；[数据] 数值｜说明 渲染成大数字卡片；![图片位] 说明｜建议尺寸 渲染成虚线占位框，图片到公众号后台再替换。
代码块等宽字体、浅灰底、保留缩进；有序和无序列表换行后与正文对齐；文末「文｜姓名」自动变成居中署名，「## 参考资料」自动生成带 [1] [2] 编号的文献列表。
交付前逐项检查：三套模板都能完整渲染、677 宽下没有错位、复制到公众号后标题与数据卡样式保留、刷新页面草稿还在。底栏常驻字数、阅读时长和最近保存时间，写稿时对篇幅心里有数。
用 AutoClaw 做 AI 公众号排版
把排版规范写进需求，设计专家就能把它做成一个顺手的小工具：不用每次重新调格式，稿子贴进去，选模板、复制、粘贴，结束。
常见问题
需要联网或安装吗？
不需要。交付是单个 HTML 文件，双击用浏览器打开即可，所有样式和脚本都在文件里。
想换成自己的品牌色怎么办？
三套模板的主色、字号和间距都写在文件顶部的 CSS 变量里，改一处就能全局生效；也可以把「青碧」那套换成自己常用的主色。
复制到公众号会丢样式吗？
复制采用的是带内联样式的富文本方案，粘进公众号编辑器后标题、导语、数据卡、引用和图片位都保留；个别编辑器版本对间距的处理不同，粘完扫一眼即可。
