Vibe Coding 就是用自然语言跟 AI Zuo事。你说你想Zuo什么AI kan代码改、跑命令，咱们负责方向、验收和关键决策。

别一口气就让 AI 写代码。先把业务目标写成 PRD 草稿，再让 AI 当需求分析师。举个例子：

我是 Vue 前端，要Zuo 。请列出：① 可Neng遗漏的用户场景 ② 边界情况 ③ 非功Neng风险 ④ 需要我确认的问题清单。不要写代码，只输出结构化需求追问。

AI 给你一个问题清单，你逐条回答后再往下走。这样就Neng避免 AI 在没有验证的假设下直接选型或编码。

哈哈，问这个嘛！百度之所以不收录有几个常见原因：内容过度动态渲染，搜索引擎抓取不到；页面权重低，没有足够外链；或者内容与现有大量相似页面重复度太高。对前端项目来说Ru果你用 SSR 或 SSG Zuo同构渲染，记得加上适合搜索引擎的 meta 标签和结构化数据，让爬虫Neng读到。

技术栈决定后续开发节奏和维护成本。给 AI 一段约束说明，让它给出方案对比：

业务需求：团队Neng力：硬性约束：偏好：请给出 ～ 套前端技术方案，对比：开发效率、维护成本、包体积、生态、风险。Zui后给出推荐方案与「若不选推荐方案的后果」。不要直接生成项目代码。

得到一个 ADR后把它放进 docs/adr/ 并在 .cursor/rules/ 加一条 alwaysApply 的规则，防止 AI 随意切换到 React 或 Options API。

先画好目录树，然后再写页面。典型的中大型 Vue 项目目录如下：

src/
├── views/
│   └── feature/
│       ├── IndexPage.vue
│       └── components/
├── components/
├── composables/
├── stores/
├── api/
├── lib/
├── router/
├── assets/
└── types/

每层职责一句话：views 编排页面；components 跨 feature 的 UI；composables 封装业务逻辑；stores Pinia 全局状态；api HTTP 客户端；lib 纯 TS 领域逻辑。

AIGenerated 架构草案先修订，再写 docs/architecture.md。

每次开发 Prompt dou加上「遵循 docs/architecture.md」标签，减少随意改目录。

上线前用阅读器检查是否违反分层或重复逻辑，输出重构清单而不是直接改代码。

Skill 是教 AI 如何完成某类任务的手册。例如要新建一个功Neng模块，你Ke以让 AI 起草 .cursor/skills/xxx/SKILL.md：

---
name: vue-feature-moduledescription:>-
 Add a new feature module to this Vue app:
 views, composable, api, and tests.
 Use when creating routes or feature folders.
---

Linter 是机器门禁。Vue + TS 基线大概是：

{  
"scripts": {  
"lint": "eslint src tests",  
"typecheck": "vue-tsc --noEmit",  
"test:unit": "vitest run"  
},  
"lint-staged": {  
"*.{vue,ts,js}": "eslint --max-warnings"  
} 
}

.husky/pre-commit：

npm run typecheck
npx lint-staged

Cue demands & constraints → confirm scope.

Tune into architecture & rules.

Create file list first.

Edit lib/composable before UI.

L1 test must pass automatically.

AIGenerated 再犯同样错误？那就升级规则吧！比如针对某功Neng列出必须确认的问题列表，而不是直接写代码。

KPI: - 开发效率高 - 包体积控制在10MB以内 - 可维护性强 - SEO友好 AIRDR: 1️⃣ 前端框架：Vue 3 + TypeScript 2️⃣ 构建工具：Vite 3️⃣ UI 库：Naive UI 4️⃣ 状态管理：Pinia 5️⃣ 路由：Vue Router 6️⃣ SSR/SSG：Nuxt 3 7️⃣ 测试套件：Vitest + Playwright

"Vibe Coding 的价值不在于少写代码，而在于明确边界后Neng快速迭代。" 别忘了先文档化，再编码；先架构再落地；先规则再让 AI 执行。边界越细，AI 越可靠；规矩越薄，你翻车的概率也越高。不过翻车也是成长机会——每一次错误douNeng让规则geng强大。

"说实话，我经常把项目从头到尾dou留一份 PRD，然后只交给 AI 写代码。但Ru果没Zuo好边界设置，就会出现风格漂移和难以维护。这就是 Vibe Coding 的真谛——人定方向+AI执行+机器校验。"

— 老友式 Vibe Coding 指南完 🎉