分享一个 Vibe Coding 的双仓库 UI 提速技巧

两个仓库

第一个仓库只负责 UI ，技术栈 Vue + Tailwind 这个仓库不管业务逻辑，只做界面和简单交互，数据全部是 mock 的。

第二个仓库是正式产品，UI 跟第一个仓库完全一致 我给每个页面都配了 1:1 的对比测试。自动化脚本会同时对两个仓库截图，只要有 1px 的偏差，测试就挂。

具体做法

所有新功能全放在第一个仓库里先做设计。因为不需要考虑逻辑，AI 可以吃进全部代码，之前的页面风格也能一并理解，改起来特别快。再加上是基于 HTML 的，随手就能部署到手机、电脑上实际操作。新功能的验证迭代都能飞一样地跑通。

第一个仓库的 UI 定稿之后，再让 AI 照着这个仓库把实际功能做进正式产品里。有现成参考兜底，AI 写出来的页面高度精准，不会跑偏。

因为有 1:1 截图测试卡着，后续再怎么迭代也不用担心 AI 手滑改坏之前的 UI 元素。

内容完全由人类构思与实践，文本经过 deepseek 润色。