Vue 项目中的 Vibe Coding 实战指南
Vibe Coding 这个词，通俗来说就是——你提需求，AI 动手实现。你描述目标，AI 阅读代码、修改代码、执行命令；你负责方向把控、成果验收与关键决策。简单讲，就是用自然语言与 AI（比如 Cursor Agent）协作完成软件开发。
本指南专门面向 Vue 3 项目，旨在提供一套可重复、可落地、不空谈的 Vibe Coding 工作流程——从如何明确业务需求，到技术如何选型、架构怎样设计、Skill 和 Rule 如何制定，再到日常开发与质量保障。它不限定于特定业务，但可以作为任何 Vue 项目的启动模板来使用。
1. 核心理念：Vibe Coding ≠ 无约束地生成代码
许多 Vibe Coding 项目最后都出了问题。究其原因，套路几乎一样：需求草草带过 → AI 直接修改代码 → 风格不一致、架构走形、后续维护困难。
正确的做法是 “人定方向 + AI 执行 + 机器校验” 三段式：
人：业务目标、边界、验收标准
AI：调研、选型建议、实现、重构、补充测试
机器：ESLint / vue-tsc / Vitest / CI / Git Hook
规矩越前置，AI 就越像一位“带规范的结对程序员”，而非“碰运气的代码生成器”。规矩就是那道“软约束”，先把框架立好，再让 AI 动手。
2. 完整流程总览
| 阶段 | 人的职责 | AI 的职责 | 产出物 |
|---|---|---|---|
| ① 需求澄清 | 明确用户、场景、约束、验收标准 | 追问遗漏点、整理 PRD 草稿 | 需求说明 / 用户故事 |
| ② 技术选型 | 最终拍板方案 | 对比方案、列出 trade-off | ADR / 技术栈文档 |
| ③ 架构设计 | 确认分层与边界 | 目录结构、模块图、数据流 | docs/architecture.md |
| ④ Skill | 决定安装哪些、是否自研 | 检索社区 Skill、起草 SKILL.md | .cursor/skills/ |
| ⑤ Rules + Lint | 确认团队规范 | 生成 .mdc、补充 ESLint 规则 | .cursor/rules/、lint 配置 |
| ⑥ 迭代开发 | 拆分任务、验收 | 读取上下文、小步修改代码 | 功能代码 |
| ⑦ 验证 | 关键路径人工测试 | 运行 lint/test、修复报错 | 可合并的 PR |
原则：先文档与规矩，再写功能；先架构与边界，再让 AI 操作。
3. 阶段 ①：澄清业务需求（一切起点）
在让 AI 写任何一行代码之前，先要把需求讲清楚，达到 AI 和人都能准确执行 的程度。模糊的需求是翻车的首要原因。
3.1 需求应包含的要素
| 要素 | 说明 | 示例 |
|---|---|---|
| 用户与场景 | 谁在使用、在什么设备/环境下使用 | iPad 横屏排练、后台运营人员 |
| 核心用户旅程 | 从开始到完成目标的步骤 | 登录 → 选择项目 → 编辑 → 导出 |
| 功能边界 | 做什么、不做什么 | 本期不做离线同步、不做多租户 |
| 非功能需求 | 性能、兼容性、安全性、合规性 | 首屏 < 3s、支持 Chrome/Safari、数据不出境 |
| 验收标准 | 可测试的完成定义 | “导出的文件可被 X 软件打开且无乱码” |
| 现有约束 | 必须沿用的技术栈、设计系统、API | 已有 REST 后端、必须使用 Element Plus |
3.2 用 AI 帮忙“补全需求”
很多时候，需求初稿都不够完整。你可以先让 AI 扮演 需求分析师，而不是程序员：
我是一个 Vue 3 前端开发者，需要实现 [一句话描述]。
请列出：① 可能遗漏的用户场景 ② 边界情况 ③ 非功能风险 ④ 需要我确认的问题清单。
不要写代码，只输出结构化的需求追问。
AI 应输出一个 问题清单，你逐条回答后，才能进入下一阶段。要避免 AI 在假设尚未验证的情况下，直接替你选型或开始编码。
3.3 需求文档最小模板
建议在 docs/ 或 Issue 中保留一份短 PRD，一页以内即可：
# [功能名]## 背景
## 用户与场景
## 用户故事（As a … I want … So that …）
## 范围（In / Out）
## 验收标准（Given / When / Then 或 checklist）
## 依赖与风险
后续所有的 Architecture、Skill、Rule、Prompt，都应能够 回溯到这份 PRD。这是根基，根基稳固，上层才不会歪斜。
4. 阶段 ②：AI 辅助技术选型
需求明确后，再讨论“用什么技术实现”。这一步需牢记：AI 提供建议，人做决策。选型不能拍脑袋，也不能依赖代码生成。
4.1 选型时要提供给 AI 的上下文
业务需求：[粘贴 PRD 摘要]
团队能力：[熟悉 Vue，不熟悉 React Native]
硬性约束：[必须 Web + 可选 App、后端已是 Ja va、部署在阿里云]
偏好：[TypeScript、倾向开源、可接受 WASM 体积]
请给出 2～3 套前端技术方案，对比：开发效率、维护成本、包体积、生态、风险。
最后给出推荐方案与“若不选推荐方案的后果”。
不要直接生成项目代码。
4.2 Vue 项目常见选型维度
| 维度 | 典型选项 | 选型考量 |
|---|---|---|
| 框架 | Vue 3 | 团队主栈；默认使用 Composition API +
|