公众号排版与写作
Overview
核心是产出能直接粘贴进公众号后台、且不掉格式的成品。微信编辑器是白名单机制,会清除 <style>、class、id、flex、百分比单位——普通 HTML 粘进去必然掉格式。因此所有排版必须写成内联样式,这是本技能区别于普通写作模板的关键。
产出物优先级:可直接用的内联 HTML > 排版参数建议 > 内容结构建议。不要只给「建议用 15px 字号」这类空话,要给出能粘进去的代码。
何时使用
- 用户要求排版 / 美化一篇公众号文章
- 用户要求写一篇公众号文章,或给出主题要求产出可发布图文
- 用户已有草稿,要求改标题、改结构、提升完读率
- 用户询问某个选题该用什么结构、什么排版风格
工作流
Step 1 — 定排版规范(先做,别等写完再排)
排版规则没定就动笔,等于写完再返工。先读 references/typesetting.md,明确三条铁律:
- 样式全内联——写进每个标签的
style="",禁止<style>块和class - 容器用
<section>——比<div>兼容更好,底色圆角不容易掉;<p>只管文字 - 单位用
px——不用%、不用 flex、不用position
参数基准:正文 15px / 行高 1.75 / 字间距 0.5px / 段后距 20px / 两端缩进 16px(在后台用按钮统一设,不写进 HTML)。
Step 2 — 选排版风格
排版的风格感来自「配色 + 组件组合」的整体选择,不是单独挑样式。读 references/style-presets.md,八套风格按内容场景对号入座:
| 风格 | 主色 | 浅底 | 适用 |
|---|---|---|---|
| 沉浸杂志风 | #1A1A18 |
#FAF8F3 |
访谈、品牌故事、人物特稿 |
| 高能干货清单 | #1D6FD0 |
#EEF4FB |
工具推荐、方法论、清单 |
| 科技未来感 | #0B6E99 |
#EAF3F7 |
AI、产品发布、趋势 |
| 治愈生活美学 | #B08968 |
#FAF4EC |
游记、食谱、日常 |
| 政务商务 | #9E2B25 |
#F7F5F4 |
政策、年报、通报 |
| 新中式国潮 | #A4342B |
#F5F1E8 |
传统文化、节庆 |
| 极简素墨 | #2C2C2A |
#F5F4F1 |
观点、职场、通用默认 |
| 柔和亲和 | #5E9E82 |
#F1F7F4 |
育儿、教育、科普 |
按场景对号入座,不要凭喜好硬套——访谈稿套政务风会僵,政策解读套国潮风会轻佻。每套风格同时指定了配套的标题、卡片、分隔组件,整套用才成立。
正文统一 #3F3F3F(深灰,不用纯黑,纯黑在手机屏上刺眼),辅助文字 #8A8A85,全文主色不超过 3 种。
Step 3 — 选内容类型与骨架
类型判断错了,排版再好看也救不回来 —— 观点文套干货骨架会写成说明书,干货文套故事骨架会写得矫情。
| 内容类型 | 骨架三步 | 主打指标 | 适用 |
|---|---|---|---|
| 干货型 | 痛点场景 → 3 个方法 → 清单总结 | 收藏、转发 | 教程、方法论、技能提升 |
| 观点型 | 热点切入 → 反常识观点 → 论证+金句 | 涨粉、转发 | 热点评论、认知、人设 |
| 故事型 | 冲突开场 → 起承转合 → 点到为止 | 完读、在看 | 人物稿、情感、品牌叙事 |
| 盘点型 | 为什么盘点 → N 个条目 → 综合推荐 | 收藏 | 工具、书单、资源合集 |
| 翻车型 | 我搞砸了 → 复盘原因 → 现在怎么做 | 信任、关注 | 个人经历、复盘 |
用户未指定时按主题主动推荐,不要反问一堆问题。读 references/templates.md 拿完整填空模板与正反例。
Step 4 — 起标题
标题约占流量权重 70%,且 24 字以内(超长会在订阅号列表里被折叠)。读 references/headlines.md,用六大公式产出 3-5 个候选供挑选。先过「选题三问」:与我有关 / 有获得感 / 有社交货币,至少两问为是才值得写。
Step 5 — 成稿与排版
按骨架填充,同时套排版组件。硬性要求:
- 开头:前三行必须有钩子。禁止「在当今这个时代」「随着 XX 的不断发展」「大家好,今天给大家分享」
- 有画面:抽象观点必须配具体场景或数字。「很努力」不如「凌晨一点的办公室」
- 有节奏:每 300-500 字安排一个小标题或金句,给读者喘气点
- 字数:1500-2500 最易读完
排版时从 references/components.md 的 38 个组件里取件,按 Step 2 选定的风格配组合。标题有 8 种形态可选(竖线 / 序号徽章 / 浓墨底色 / 极细线框 / 大数字 / 双线杂志 / 居中色块 / 左色块),按场景选,不要全篇用一种。卡片类包括引用块、金句卡、提示卡、问答卡、数据三宫格、人物卡、清单条目卡。图片位置留占位符,尺寸 900×500。
Step 6 — 交付
默认交付 HTML 文件(.html),而不是 markdown 或纯文本:
- 用
assets/preview.html的结构生成成品页:外层 375px 手机模拟容器 + 内联样式正文 - 页面顶部说明用法:选中手机屏内正文 → 复制 → 粘贴进公众号后台
- 调用
present_files打开预览,让用户肉眼确认 - 附一段纯内联 HTML 源码,便于用户直接取用
图片占位提醒用户替换:微信只认 mmbiz.qpic.cn 域名,需先在后台素材库上传。
粘进去掉格式时,按此顺序排查:① 有 <style> 或 class → 改内联 ② 从代码里复制的 → 必须从浏览器渲染后的页面选中复制 ③ 用了 position / % / flex → 换 px 和 inline-block ④ 仍掉 → 用 135 编辑器中转。
铁律
以下几条在任何情况下都不违反:
- 所有样式必须内联。写
<style>块或class等于让用户粘进去得到一堆裸文本 - 容器用
<section>,文本用<p>,单位只用px - 标题承诺必须在正文兑现。兑现不了是掉粉最快的方式
- 故事型结尾不总结。一总结就俗了,力量在留白
- 干货型只给 3 条。给 5 条读者一条都记不住,收藏率反而下降
- 盘点型必须写「不适合谁」。只夸不踩的盘点没人信
- 翻车型必须带具体损失数字。「我踩过坑」一眼假,「亏了 37 万」才有人信
- 不写 AI 味的工整小标题(如「一、背景 二、现状 三、展望」)
- 标题和正文禁用极限词:最 / 最佳 / 第一 / 唯一 / 顶级 / 全网最低 / 百分之百
Resources
references/
references/typesetting.md— 排版规则:白名单清单、三条铁律、参数基准、配色通则、工作流、掉格式排查references/components.md— 组件图鉴:38 个可直接复制的内联组件,分标题 / 正文 / 强调 / 卡片 / 列表 / 图文 / 分隔 / 引导八类,附常见失误表references/style-presets.md— 八套风格方案:每套含配色、适用内容、配套组件组合、气质要点、快速选型表references/templates.md— 五套骨架的完整填空模板、字数建议、写作要点与正反例references/headlines.md— 六大标题公式、选题三问、禁用开头清单、金句制造法references/selfcheck.md— 交付前 7 条自检、极限词红线、敏感领域、发布时间
按需读取,不要一次性全部加载。排版类任务优先读 components.md 和 style-presets.md。
assets/
assets/components.html— 组件图鉴可视化:38 个组件的真实渲染效果,支持 9 套配色切换,每个组件可一键复制 HTMLassets/preview.html— 整套文章的排版预览页,9 套配色切换,含复制按钮。生成成品时照此结构