从“抽卡”到“规范驱动”：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 结构：

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

核心提升： 在这一阶段，我们开始有意识地控制 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 并没有把逻辑散落在各个页面，而是封装了一个健壮的存储类。

javascript 复制代码

// 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 实现了一个非常惊艳的功能：

javascript 复制代码

// 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 生成代码后，你发现某个按钮太小，你应该说：

"把 input 页面的 save 按钮改为悬浮式设计，增加 box-shadow。" 而不是自己去改 CSS。让 AI 始终保持对全局样式的感知。

总结：Vibe Coding 的未来是 SDD

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

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

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

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