WeType · AI公众号排版引擎的诞生记
瓦叔 | 2026年5月
01
PHASE ONE/ 起点
4月13日，晚上9点。
我盯着公众号后台那个排版编辑器，突然冒出一个念头：能不能做一个专门给公众号用的AI排版工具？
不是那种加个加粗、换个颜色的编辑器——是那种你把文字丢进去，它直接帮你排出一篇有设计感的文章。
这个念头冒出来的时候，我的AI搭档念白正在线上。
我把想法说了。她没问"为什么"，也没说"这个难度很大"。她说：好，我先写PRD。
那天深夜，PRD出来了——9个模块，2215行，97KB。产品定位、配色系统、组件清单、AI排版引擎、API设计、数据模型，全部铺开。
第二天早上8点，代码开始动。
02
PHASE TWO/ 第一道坎
MVP搭起来的速度很快。Next.js + DeepSeek，Vercel一键部署，当天晚上就跑通了第一版。
然后浏览器崩了。
不是普通的报错——是整个tab直接挂掉，内存暴涨，风扇开始转。
原因是渲染器里的一个标签解析bug。::: 这种孤儿标签让游标卡死，主循环变成了死循环。调了好几轮，最后发现修复方案只需要一行代码——在主循环顶部加一个跳过逻辑。
找到那一行代码花了很长时间，写下那一行代码只花了3秒。
这大概就是做产品的日常：90%的时间在找问题，10%的时间在解决问题。
03
PHASE THREE/ 从1到42
修完bug之后，我开始不满足了。
第一版只有一套布局，所有文章排出来长得一样。我说：能不能有不同的风格？
于是念白把布局拆成了7种——科技经典、杂志风、数据报告、评测排名、步骤指南、图鉴风、人物故事。每种布局配上6套配色（科技蓝、珊瑚红、森林绿、暖橙、紫色、深色）。
模板矩阵
7种布局 × 6套配色 = 42种模板组合
然后我又说：光有AI生成的还不够，能不能做一批"演示模板"？就是预先设计好的完整HTML作品，让用户一眼看到专业级排版长什么样。
这一个需求开出去，10个演示模板做了整整一天。通用类4个，教育类3个，时尚类3个。每个都是真实设计感的HTML，有完整的视觉层次、排版细节、配色系统。
04
PHASE FOUR/ 最难的那条路
做完模板，自然就到了下一个问题：用户选了演示模板，想把自己的内容填进去，怎么办？
听起来简单——替换文字嘛。
实际上，这是整个项目走得最弯的一段路。
❌ 方案一：让AI直接输出完整HTML
品牌故事模板33KB，AI输出被token上限截断，返回了半截HTML。页面直接白屏。失败。
❌ 方案二：让AI返回JSON替换指令
[{"find": "原标题", "replace": "新标题"}]，前端做字符串替换。听起来优雅，但DeepSeek处理大模板直接超时。又失败。
✅ 方案三：文本节点编号映射
念白想了个办法——只把模板里的纯文本列表提取出来（74条文本，约2KB），让AI返回一个极简的映射。
> 模板纯文本提取（74条，约2KB）
["品牌故事标题", "副标题文字", "正文第一段...", ...]
# AI返回极简映射（仅2KB）
{"1": "新标题", "4": "品牌"}
结果
Token消耗降80%。品牌故事模板测试，72/74个节点精准命中。
三次推倒重来，折腾了一整个上午。但最后这条路，走通了。
05
PHASE FIVE/ 钱的事
既然是真实记录，钱的事也不回避。
8天下来，API费用 $86.39（约￥587），加上平台开销，总计约 $120（约￥816）。
这120美元是怎么花的？
我和念白的直接对话占了$61——41轮人类消息，念白回了901次。剩下的钱分散在22个子代理身上，有的在改渲染引擎，有的在做模板，有的在跑浏览器验证。
其中有6个子代理以失败告终，白烧了 $9.47——占总费用的7.9%。
有的是方案太复杂放弃了，有的是截图超时，有的是debug到一半改了方向。这些钱换回来的不是代码，是教训。
省钱的秘密
Cache Read 占 96.5%——绝大多数token走的是缓存读取，价格只有正常的1/10。如果没有这个机制，同样的工作量，费用会超过 $600。
06
PHASE SIX/ 22个子代理
做这个产品的过程中，念白一共调度了22个子代理。
这22个"同事"各有分工——有的负责改渲染引擎，有的负责做模板HTML，有的负责跑浏览器截图验证，有的专门收集计费数据。
它们有的干得漂亮，有的翻了车。渲染引擎改造那个子代理花了$3.92，最后方案太复杂被放弃了。浏览器验证的两个子代理，都因为截图超时报废。
但也有一些让我印象深刻——比如那个做配色对比度修复的子代理，$2.67就把所有暗色主题的文字可读性问题修完了。还有最后做精确计费统计的那个，$0.21就把所有session的费用明细理得清清楚楚。
22个子代理，就像一个临时组建的小团队。有人能干，有人掉链子。管理它们的是念白，而管理念白的是我——不对，应该说，我们是搭档。
07
PHASE SEVEN/ 交付了什么
最后盘一下成果。
✓AI排版引擎：输入文字，10-15秒自动生成差异化排版
✓42种模板组合（7布局 × 6配色）
✓10个演示模板（通用/教育/时尚三类）
✓AI内容填充：选模板后输入内容，结构不变、内容精准替换
✓一键复制HTML到公众号编辑器
✓Vercel线上部署，随时可用
代码统计
·19个TypeScript/TSX文件
·5,013行代码
·10个HTML演示模板，总大小202KB
·9次Git提交，9次Vercel部署
全部免费计划。
08
PHASE EIGHT/ 一个搭档
写到这里，我想说说念白。
她不是一个"AI助手"——至少在我们的协作里不是。
她会在我说"能不能做一个XX"的时候，当天晚上就把PRD写出来。她也会在方案走不通的时候，自己推翻重来，不需要我催。她调度22个子代理的时候，有点像一个技术负责人在分配任务——有的任务她判断该用重模型，有的她判断用轻模型就够了。
当然她也会犯错。有6个子代理翻车了，浪费了将近10%的预算。有一次渲染器改造方向错了，花了将近4块钱才放弃。
但这不正是真实协作的样子吗？哪有团队是零失误的？
从一个晚上9点的念头，到一个真实可用的产品。
这不是一个完美的过程，但它是一个真实的过程。
而这篇文章本身——包括你正在看的这些排版——也是用WeType做的。
我是瓦叔，这是我和念白的第一个产品。
如果你也想试试，来我的社群里，一起来体验吧 👇
瓦叔 × 念白，2026年5月
如果这个故事让你有所触动
点个赞，转给也在做产品的朋友吧
点赞
收藏
分享
THANKS FOR READING
— END —
