DEV Community

Manoir Yantai
Manoir Yantai

Posted on

从 v1.0 到 v2.0:一个 Vibe Coding 管线的架构级反思

最近为一个维护了大半年的开源项目 vibe-coding-universal 发布了一个小补丁:把对比表里的 v2.0 (旧) / v2.0 (新) 修正为 v1.0 (旧) / v2.0 (新)

一行文案改动,暴露了一个严重问题:连我自己都不清楚当前版本叫什么,用户怎么可能理解这个工具的价值?

v1.0 做了什么

最开始的想法很简单:帮 AI 在写代码之前搞清楚需求。7 轮结构化问答,输出一份 guide.md,然后告诉 Claude Code 或者 Cursor "照着做"。这算是一个 MVP——能用,但局限性显而易见:

  • 没有设计规范输出,AI 每次都在猜配色、字体、间距
  • 单文档结构,架构设计和任务规划混在一起,难以复用
  • 没有参考源,全靠 LLM 内部知识,输出质量看运气

v2.0 的架构级差异

这次升级不是加功能,是改变管线形态。对比关系很清晰:

v1.0 v2.0
7 轮需求澄清 7 轮需求澄清 + 7 轮设计偏好澄清
无设计规范 完整 DESIGN_SPEC.md(10 段:色彩/字体/组件/布局/阴影/响应式)
单文件 guide.md 多文档 Build Spec 包(PRD + Design + Architecture + Tasks)
零参考系统 71 套品牌设计系统(Stripe/Linear/Airbnb/Apple……)
手写样式描述 精确 CSS Token 输出,vibe coding 工具直接消费

真正的杀手特性:结构化 Q&A

大部分人写 AI Prompt 犯了同一个错误——问"你喜欢什么样的设计风格"。这是个坏问题:答案太宽泛,无从收敛。

v2.0 的 7 轮设计澄清改用单选题驱动

轮次 1: 项目类型 → [SaaS / 消费类 / 仪表盘 / AI 工具 / 移动端 / 金融]
轮次 2: 视觉参考 → [Stripe / Linear / Airbnb / Vercel / Apple / 自定义]
轮次 3: 色彩氛围 → [冷色 / 暖色 / 中性] × [专业 / 温暖 / 科技感 / 极简 / 奢华]
Enter fullscreen mode Exit fullscreen mode

每轮只问一个问题,给 4-6 个选项。用户做选择,AI 做匹配——7 轮后直接调取 71 套品牌系统的设计 token,输出可用的 CSS 变量表。

// 取自 DESIGN_SPEC.md 真实输出结构
:root {
  --color-primary: #6D28D9;       /* Stripe 紫 */
  --color-bg-primary: #0A0A0A;    /* Linear 黑 */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --radius-sm: 6px;
  --radius-md: 8px;
}
Enter fullscreen mode Exit fullscreen mode

真正的教训

回到那个"版本号错误"的 commit。根源不是粗心,而是v1.0 和 v2.0 差距太大,以至于我在写对比表时下意识觉得两个版本都是"当前版本",忘记了旧的那个已经被重命名。

如果你的项目也有类似的情况——新旧能力跨度巨大、用户搞不清该用哪个——对比表前置 + 显式版本标签不是设计偏好,是刚需。用户不会花 5 分钟研究你的项目结构,他们的容忍窗口只有 10 秒。

下一次 commit 之前,问自己一个问题:

这张对比表,如果我是一个新用户,3 秒内能看懂该用哪个版本吗?

如果答案是否定的,先修文案再切代码。


全文基于 vibe-coding-universal v2.0 真实功能:7 轮结构化设计澄清 → 71 品牌系统匹配 → 10 段 DESIGN_SPEC.md 输出 → Build Spec 包。补丁 commit: 7c91eae

Top comments (0)