提示词-转换桥-粘贴发布
本文即用该工具生成排版
朋友发来一个文件,说用AI生成的排版看起来挺完整,但复制到公众号后台后样式全乱了。
我打开一看,是个HTML文件。问题就清楚了:这不是公众号正文,而是网页。要想正常发布,还需要把它变成公众号能接受的富文本。
先看问题在哪
浏览器里
HTML、CSS、布局规则都能被完整解析,卡片、背景色、双栏、表格看起来都正常。
公众号后台里
样式可能被过滤或改写,复制进去后出现背景丢失、边框消失、模块错位、手机端溢出。
公众号后台无法稳定读取原始HTML的完整格式,所以第一步不是复制,而是改写。
把样式写进元素里
关键背景、边框、字号、间距尽量改成内联 style,减少被后台吞掉的概率。
把复杂布局改简单
去掉脚本、外链样式、复杂布局,把多栏、表格、横向模块改成更适合手机阅读的结构。
给文字加换行保护
所有文字容器都加上 max-width、word-break、overflow-wrap,避免手机端撑出边框。
适配前后对比
原始网页排版
· 双栏或多栏
· 表格直接展示
· 依赖 style/class
公众号适配排版
· 多栏改卡片
· 表格改信息卡
· 关键样式内联
适配HTML解决的是结构问题,但公众号后台直接粘HTML,格式仍然可能丢。真正更稳的方式,是先把它渲染成富文本。
个人工作演进
借助135编辑器,把适配后的HTML排版内容渲染成公众号后台更容易接受的富文本。
识别出135真正承担的是“HTML到富文本”的中转,而不是必须依赖它的全部模板能力。
直接通过AI制作了一个工具,他自己起名“富文本桥”,来替代这一步,更简单易用:左侧粘适配HTML,右侧渲染,点击复制富文本,再粘贴到公众号后台。
不是再找一个编辑器,而是把“中转复制”单独做出来
135b当看机器时真正帮我完成的,不是模板设计,而是把适配后的HTML渲染成公众号后台可以承接的富文本。于是这一步被拆成了一个更轻的富文本桥。
富文本桥只做三件事
01 读取
放入已经处理好的公众号适配 HTML,包括内联样式、手机单列和换行保护。
02 渲染
把代码变成可视化排版,先确认样式、间距、模块层次在页面里是正常的。
03 复制
直接复制渲染后的富文本,再粘贴到公众号后台,而不是把原始 HTML 粘进去。
现在的操作链路
适配 HTML→富文本桥→公众号后台
所以,AI 生成的排版不是不能用。问题在于,它生成的是网页,而公众号后台需要的是稳定的富文本。
现在的完整流程是:AI 生成排版 → 转成公众号适配 HTML → 富文本桥渲染 → 复制富文本 → 公众号后台发布。
如果你是通过openclaw、codex或者其他能制作skill的工具来完成的,可以把“公众号排版要求”和“生成富文本格式”让他记到skill当中。
再简单些,也可以把我的这个工具直接给到你的AI,让他集成到公众号排版工作流中~
夜雨聆风