前端项目如何做 vibe coding

Vue 项目 Vibe Coding 指南

Vibe Coding 指以自然语言与 AI（如 Cursor Agent）协作完成软件开发的模式：你描述意图，AI 读代码、改代码、跑命令；你负责方向、验收与关键决策。

本文档面向 Vue 3 项目，给出一条可重复、可落地的 Vibe Coding 流程——从业务需求澄清，到技术选型、架构设计、Skill/Rule 定义，再到日常开发与质量把关。不绑定某一具体业务，可作为任意 Vue 项目的启动模板。

1. 核心观念：Vibe Coding ≠ 无规矩地生成代码

很多失败案例来自：需求一句话带过 → AI 直接改代码 → 风格漂移、架构混乱、难以维护。

正确的 Vibe Coding 是 「人定方向 + AI 执行 + 机器校验」 的三段式：

人：业务目标、边界、验收标准
AI：调研、选型建议、实现、重构、补测试
机器：ESLint / vue-tsc / Vitest / CI / Git Hook

规矩越前置，AI 越像「带规范的 pair programmer」，而不是「碰运气的代码生成器」。

2. 完整流程总览

flowchart LR
  A[① 澄清业务需求] --> B[② AI 辅助技术选型]
  B --> C[③ AI 辅助架构设计]
  C --> D[④ 查询 / 定义 Skill]
  D --> E[⑤ 定义 Rules + Lint]
  E --> F[⑥ 迭代开发]
  F --> G[⑦ 验证与 Review]
  G --> F

阶段	人的职责	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、后端已是 Java、部署在阿里云]
偏好：[TypeScript、倾向开源、可接受 WASM 体积]
请给出 2～3 套前端技术方案，对比：开发效率、维护成本、包体积、生态、风险。
最后给出推荐方案与「若不选推荐方案的后果」。
不要直接生成项目代码。

4.2 Vue 项目常见选型维度

维度	典型选项	选型考量
框架	Vue 3	团队主栈；默认 Composition API +