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