MDCard 小程序：不写一行代码，用 AI 从想法到上线
全程没看过一行代码，用 TRAE + Vibe Coding 做了一个微信小程序
为什么做这个
我在跟 AI 协同做内容创作，发现一个断层：AI 输出最友好的格式是 Markdown，但小红书、朋友圈这些平台认的是图片，不认 Markdown。现有的排版工具对 Markdown 分页支持很差，改一处全得重来。创作端和发布端之间缺了一步。
我之前做过 Web 版的 demo（mdcard.fengx404.com），这次想直接做成微信小程序，顺便试试全程不写代码的开发方式。一句话跟 TRAE 说「帮我做一个微信小程序，Markdown 转卡片图片，参考 MDCard 的源码」，项目就开始了。
用了什么工具
| 工具 | 用途 |
|---|---|
| TRAE | 主力，全程 Vibe Coding |
| Claude Code | TRAE 修不好的问题换着试 |
| CodeBuddy / OpenCode | 同上，换 Agent 角度 |
| OpenCode Review | 代码审查，兜底扫漏 |
重点不是换模型，是换 Agent。同一个问题换个 Agent，有时候就过了。
开发过程
两天跑通核心功能（6/16 — 6/17）
6 月 16 号凌晨初始化项目，TRAE 一次生成了整套项目代码，编辑器、渲染引擎、分页器、配置系统全有了。到 17 号晚上核心功能跑通。
跨了两天，实际投入大概 4-5 小时，分了几个小片段，每次坐下告诉 AI 做什么，它写，我看结果纠偏。剩下的时间 AI 自己在跑测试和验证。
全程我没看过一行代码。AI 写完我直接跑起来看效果，不对就让它改。
打磨、重构、发版（6/18 — 7/22）
「能跑」和「能用」之间隔着一大段路。花时间最多的是分页渲染——一堆分散的问题，改完这个影响到那个，在耦合的代码上反复修，越修越乱。最后被逼着花了一天重构，把分页相关逻辑拆开，再上调试手段才整体解决。
除了分页，这一个多月还断断续续做了：快捷工具栏、相册权限、错误捕获、手势适配、性能优化、无障碍支持、深色模式图标。
两个关键卡点
卡点一：微信小程序的键盘地狱
一开始以为最难的是渲染引擎，结果最先遇到的是键盘问题。光提交记录里就修了至少 6 次：键盘弹出遮挡面板、工具栏操作后键盘收起、底部留白跟着键盘高度调、光标位置跳飞、键盘收起后光标被挡。花了一整天才修干净。
如果重来，我会在项目一开始就先搜一遍微信小程序键盘的已知坑，而不是等撞上了再补。
卡点二：分页渲染的连环坑
卡片内容超一页要自动分页，听起来简单，做起来一堆坑，而且改完一个会引发另一个。
- 列表项假换行：加粗文字跟普通文字挨着，AI 拆成两段分别画，本该连着的句子断成两行。
- 多余列表符号：长列表项被分页切开，下半部分跑到第二页带了个新圆点，看起来像新的列表项。
- 中英文混排换行：「API 接口」这种中英混排，AI 有时候把「API」从中间拆开。判断要不要拆不能只看当前字符，还得看前一个字符。
这些问题单独修都不难，难的是它们互相影响。改了换行逻辑，列表分页又崩了；改了列表分页，真机渲染又不对。在耦合的代码上反复修，越修越乱。
最后两条路一起走才解决：一是花了一天重构，把分页相关逻辑拆开，各管各的；二是上调试手段，让 AI 在关键位置加打印日志，真机跑完把日志拷出来丢回给 AI 分析。本地改 → 真机跑 → 看日志 → 本地再改 → 真机再跑，反复 6 轮才修干净。
如果重来，我会早点重构，把分页逻辑拆开，而不是在耦合的代码上硬磨。
怎么突破卡点的
- 版本管理是救命稻草。每次对话前 commit，搞砸了一键回退，不心疼。
- 多轮对话修不好就回退。AI 钻牛角尖了，果断回退，换提问方式、换 Agent、换模型。
- 自己去查资料喂给 AI。键盘那个卡点，AI 不知道微信的坑，我自己搜文档和 issue，摘关键信息丢给它。
- 让 AI 埋点，真机日志丢回去。分页那个卡点，让 AI 在关键位置加打印日志，真机跑完把日志拷出来原样丢回给 AI，它自己就能分析出问题。6 轮真机循环，每轮都这么跑的。
三条收获
1. 写代码是做产品最容易的部分。 2 天跑通核心功能，剩下一个多月全是键盘、分页、权限、兼容这些「代码之外」的事。Vibe Coding 的真相是，AI 负责 80%，你负责剩下那个要命的 20%，那 20% 决定产品到底能不能用。
2. 测试和重构不是可选项。 AI 改一处渲染逻辑可能把十处搞崩，没有测试根本不知道。我建了自动截图对比，每次改完跑一遍，肉眼扫有没有变化。开发中花了一天重构，之前模板和渲染器写在一个类里，改模板的把分页搞崩了。拆开之后各管各的，而且代码精简后 AI 的理解准确度明显提高，一样的 Prompt 结果质量不一样。
3. 善用工具兜底。 改完觉得自己看不出问题了，就用代码审查工具跑一遍，扫内存泄露、边界条件这些容易漏的。不是主力，是兜底。
回过头看，用 AI 做产品的门槛不在代码，在你愿不愿意跟那 80% 的细节磨。我全程没看过一行代码，靠的就是前面那套方法。我的建议是从小项目开始，先熟悉 AI Coding 的全流程，在使用中迭代自己的方法。
MDCard 小程序完全用 TRAE 加 Vibe Coding 完成。Web 版：mdcard.fengx404.com