从“抽卡”到“规范驱动”：Vibe Coding 的进化史与计分小程序实战

前言：Vibe Coding 是偷懒吗？不，它是生产力的降维打击！

最近，“Vibe Coding”（氛围编程）这个词在开发者圈子里火得一塌糊涂。很多人初听觉得这不过是“Prompt 抽卡”的另一种好听说法，但如果你真的深入其中，你会发现它正在经历一场从“玄学”到“科学”的惊人进化。

今天，我们就以一款实战项目——“手搓我要计分”微信小程序为例，深度拆解 Vibe Coding 的三个进化阶段。无论你是刚接触 AI 编程的新手，还是追求极致效率的老司机，这篇文章都将刷新你对“写代码”的认知。

第一阶段：抽卡时代（The Gacha Phase）

“一句话需求，全靠 AI 脑补”

在这个阶段，我们对 AI 的使用极其朴素。

典型 Prompt：

现状分析： 这时候的开发者更像是在“抽卡”。运气好时，AI 给出的代码勉强能跑；运气不好时，代码里全是过时的 API 或者逻辑漏洞。

实战复盘： 在开发“计分小程序”时，如果只给出一句话需求，AI 可能会生成一个简单的列表，但它不知道你需要：

• 撤销功能（打错了怎么办？）
• 自动补全（总分必须为 0 的逻辑）
• 屏幕常亮（打牌时手机黑屏真的很烦！）

结论： 第一阶段的 Vibe Coding 只能产出“玩具”，无法交付“产品”。

第二阶段：工程时代（Prompt Engineering）

“给 AI 一个身份，给代码一个规矩”

随着我们被 AI 坑过几次后，大家开始意识到：上下文（Context）和约束（Constraint）才是灵魂。

进化后的 Prompt 结构：

1. 赋予角色： “你是一个资深的微信小程序专家，擅长原生开发。”
2. 定义技术栈： “使用原生 WXML/WXSS/JS，禁止使用 Uni-app 或 Vue，遵循 ES6 规范。”
3. 结构化需求：
   • 首页：管理对局（新建、继续、历史）。
   • 计分页：展示每个玩家的总分和每局明细。
   • 输入页：支持负分录入。

核心提升： 在这一阶段，我们开始有意识地控制 AI 的输出格式。比如我们会要求 AI 使用 tailwindcss（如果支持）或者特定的设计规范。

知识硬核点 ： 在第二阶段，我们需要通过 Context Injection（上下文注入） 告诉 AI 现有的文件结构。比如在 Trae 中，AI 能感知到整个项目的目录树，这让它生成的代码不再是孤岛，而是能与 app.json 完美融合的组件。

第三阶段：规范驱动时代（Spec-Driven Development）

“多 Agent 协作，合同式交付”

这是目前 Vibe Coding 的最高境界，也是我们“计分小程序”真正落地的方案：SDD（规范驱动开发）。

1. 什么是 SDD？

简单来说：先写“说明书”（Spec），再按说明书写代码。 这里的 Spec 不是废话文档，而是“代码合同”。

2. 虚拟团队的诞生

在开发这款小程序时，我们不再是单打独斗，而是调度了一个“虚拟团队”：

• 虚拟 PM（Gemini 3）： 生成极其详尽的需求文档（PRD）。
• 虚拟设计师： 规划 UI 交互逻辑（如：深色背景、绿色高亮按钮）。
• 虚拟架构师： 定义数据结构。

3. 计分小程序的硬核代码拆解 ️

让我们看看在 SDD 模式下，AI 生成的代码是如何体现“专业性”的。

【数据合同：StorageManager】 在 storage.js 中，AI 并没有把逻辑散落在各个页面，而是封装了一个健壮的存储类。

// storage.js 核心片段
static undoLastRound() {
  const session = this.getCurrentSession();
  if (session && session.rounds.length > 0) {
    const lastRound = session.rounds.shift(); // 弹出最新一局
    // 严谨的重新计算逻辑
    session.totals = session.totals.map((total, idx) => total - lastRound.scores[idx]);
    this.saveCurrentSession(session);
    return true;
  }
  return false;
}

硬核解析： AI 自动考虑到了 totals 数组的同步更新，而不是简单的删除记录。这就是规范驱动下，AI 对业务逻辑的深刻理解。

【交互黑科技：自动补全逻辑】 在打牌计分场景中，通常所有人的得分总和应为 0。在 input.js 中，AI 实现了一个非常惊艳的功能：

// input.js 自动补全
if (filledCount === this.data.players.length - 1) {
  const emptyIndex = scores.findIndex(s => s === '' || s === '-');
  if (emptyIndex !== -1) {
    const currentSum = numScores.reduce((a, b) => a + b, 0);
    suggestions[emptyIndex] = -currentSum; // 自动计算最后一个人应得的分数
  }
}

硬核解析： 当你填完前三个人的分数时，AI 会自动帮你算出第四个人的分数并给出提示。这种“懂人心”的交互，不是靠“氛围”出来的，而是靠详尽的需求规范引导出来的。

UI/UX 的 vibe：不仅仅是好看

在 SDD 阶段，AI 对 UI 的把控也上升到了专业层面。打开 app.json，你会发现它使用了最新的 skyline 渲染引擎。

• 配色方案： #1a1a1a 的深色背景，搭配微信绿 #07C160。
• 用户体验： 在 scoreboard.js 中，AI 自动加入了 wx.setKeepScreenOn({ keepScreenOn: true })。
  • 知识点： 这行代码能确保你在打牌过程中，计分板永远亮着，不需要频繁去解锁手机。这就是 Vibe Coding 第三阶段带来的“生产级”细节。

️ 实战指南：如何复刻这种进化？

如果你也想用 Vibe Coding 的方式手搓一个属于自己的小程序，请记住以下“三步走”战略：

第一步：编写 Spec 文档 ️

不要急着写代码！先打开一个 spec.md 文件，告诉 AI：

• 目标： “我要做一个计分工具。”
• 规则： “必须满足总分为 0。”
• 异常处理： “支持误操作撤销。”

第二步：利用 Trae/Cursor 的上下文能力

将你的 spec.md 喂给 AI。你会发现，这时候生成的代码，逻辑一致性极高。它会主动为你创建 utils/storage.js 这种工具类，而不是把几百行代码塞进一个 index.js。

第三步：调试与调优（Refine）

Vibe Coding 不代表“零代码修改”，而是“零代码硬编码”。 当 AI 生成代码后，你发现某个按钮太小，你应该说：

总结：Vibe Coding 的未来是 SDD

从最初的“抽卡”碰运气，到“提示词工程”的技巧沉淀，再到“规范驱动”的系统化生产，Vibe Coding 已经不再是玄学。

AI 编程的公式已经明确： AI 编程 = 高质量提示词 + 强大的 AI 编辑器(Trae/Cursor) + 顶尖大模型(Gemini 3/Claude 3.5) + SDD 规范

在这个时代，你的思维深度决定了代码的高度。不再需要纠结于一个闭包怎么写，一个 API 怎么调用，你需要关注的是：产品逻辑是否自洽？用户体验是否丝滑？规范文档是否严谨？

如果你还在为写代码头秃，不妨换个姿势，加入 Vibe Coding 的进化行列吧！