🎯 项目背景
在日常生活中，玩扑克、麻将的时候，我们经常会打开一些微信小程序来计分。这个项目就是通过 Vibe Coding（氛围编程）的方式，从零开始打造一个属于自己的计分小程序。
💡 什么是 Vibe Coding
传统的 Coding 方式
传统的开发模式分工明确：
- 前端工程师负责写代码
- 根据设计稿硬编码实现
- 工资来自于代码能力
Vibe Coding 方式
Vibe Coding 是一种全新的开发范式：
- 使用提示词直接生成代码（提示词工程师）
- 基于 MCP 工具，将设计稿直接转成代码（如 Cursor Figma 插件）
- 不修改任何一行代码，专注于调试和调优
- 关注 vibe 能力的走势
📊 Vibe Coding 的三个阶段
第一个阶段：Prompt 抽卡
- 一两句话描述需求
- 不满足就重新做，抽卡式开发
- 基本不能用，需要大改特改，甚至不能运行，反而浪费时间
第二个阶段：Prompt 工程
- 设计结构化的提示词
- 给 AI 一个明确的角色
- 规定项目结构（生成的文件放哪里）
- 制定代码规范（ES6、Tailwind CSS 等）
- 清晰描述现在的需求
- 提供必要的上下文
- 规定输出格式
相比第一个阶段，提示词变多了、专业了、结构化了，形成了一定的系统方法论、任务拆解，用专业的术语去引导大模型，能精准地控制氛围编程生成的内容。虽然好很多，但也不能完全依赖它，还是要人工审核、调试。
第三个阶段：多 Agent + SDD
- 多 Agent 协作开发
- 在 Vibe Coding 之前，先让 AI 生成需求文档
- 再让 AI 根据需求生成设计稿（虚拟的设计师）
- 然后进行 Vibe Coding
- 再让 AI 生成前端代码（虚拟的前端开发）
- 懂规矩、更专业、按流程、可执行
- 生产级别的 Vibe Coding 标准做法
- 直接落地
📜 Spec-Driven Development（规范驱动开发）
Spec-Driven Development（规范驱动开发），简单说就是：先把"规则说明书"写清楚，再按说明书写代码。这里的"Spec"可以是接口文档、需求说明、行为描述，甚至是测试用例。
和传统开发的区别
和"先写代码再补文档"不同，Spec-Driven 强调代码必须严格满足规范，而不是靠口头理解或临时改。
好处
- 需求更清晰
- 沟通成本更低
- 返工更少
- 更容易做自动化测试
举个例子
你要开发一个"登录接口"。在写代码前，先写 Spec：
接口：POST /login
入参：username、password
成功返回：{ code: 0, token }
失败返回：{ code: 401, message }
然后你再写后端代码、前端调用、测试用例，所有人都以这份 Spec 为准。如果代码跑不通，就说明不符合 Spec，而不是"理解不一致"。
一句话总结：Spec 是合同，代码是履约结果。
🎮 计分小程序开发实战
开发思路
- 直接开干：简单 prompt 太随意，大概率不符合需求，抽卡
- 第二个阶段：准备提示词，设计结构
- 第三个阶段：SDD 规范驱动开发
SDD 规范驱动开发流程
- 生成产品需求文档（spec Markdown 格式）
- 旧方式：开始编写，效率低，专业性不足
- 新方式：借助 Gemini 3、Claude 等大模型的智能化能力提升
- 这些大模型拥有规划、分步、多 Agent、执行的能力
- 让 Gemini 帮我们生成产品的需求文档
使用 Gemini 生成产品需求文档
- 设定角色：你是一个大师级的微信小程序产品经理，我现在需要你帮我把想法变成需求文档，用于给到 AI 编程工具进行实现
- 需求讨论：我们需要先讨论一下需求，等确定了所有的需求，我们再进行第二步
- 核心需求：做一个微信小程序，用于麻将或扑克的计分
- 根据大模型的回答做出选择，最终生成需求文档
- 技术栈要求：不要使用 uniapp、vue、typescript，使用原生的小程序开发
🔧 AI 编程公式
AI 编程 = 提示词 + AI 编程工具 + AI 大模型 + SDD
这四个要素缺一不可，只有将它们有机结合，才能真正发挥 AI 编程的威力，实现高效、专业、可落地的开发体验。
🎉 总结
Vibe Coding 代表了未来编程的发展方向，从简单的抽卡式开发，到结构化的 Prompt 工程，再到多 Agent 协作的 SDD 规范驱动开发，每一个阶段都是一次质的飞跃。通过"我要计分"微信小程序这个实战项目，我们可以深刻体会到 AI 编程带来的效率革命和开发体验的提升。
