金句：工欲善其事，必先利其器。一个配置完善的 AI 开发环境，是把 Vibe Coding 效率落地的基础设施。
一、为什么环境配置如此重要？
很多人学了 Vibe Coding 的理念，却发现实际使用中处处碰壁：
- AI 提示词写得很好，但生成的代码风格和项目不一致
- 每次开始新功能都要重新向 AI 解释项目背景
- 团队成员的 AI 使用方式各不相同，代码差异巨大
根本原因：没有系统化的环境配置。
本讲给你一套完整的 AI 辅助全栈开发环境配置方案。
二、全栈 AI 开发环境架构图
┌─────────────────────────────────────────────────────────────────┐
│ AI 开发环境总览 │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ 编码层 │ │ 工具链层 │ │
│ │ • Cursor IDE │ │ • ESLint + AI │ │
│ │ • .cursorrules │ │ • Prettier │ │
│ │ • Cursor Rules │ │ • Husky (Git钩) │ │
│ └──────────────────┘ └──────────────────┘ │
│ ↓ ↓ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ AI 上下文层 │ │
│ │ • 项目规范文档 • 架构决策记录 • 提示词模板库 │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ↓ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ CI/CD 层 │ │ 质量守护层 │ │
│ │ • AI PR 审查 │ │ • AI 测试生成 │ │
│ │ • 自动化部署 │ │ • 覆盖率检查 │ │
│ └──────────────────┘ └──────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
三、项目脚手架：AI-Ready 的项目模板
目录结构设计
my-fullstack-app/
├── .github/
│ ├── copilot-instructions.md # GitHub Copilot 规则
│ ├── workflows/
│ │ ├── ai-review.yml # AI 代码审查
│ │ └── test.yml # 自动化测试
│ └── PULL_REQUEST_TEMPLATE.md # PR 模板
├── .cursor/
│ └── rules/ # Cursor Rules 目录
│ ├── general.md # 通用规则
│ ├── frontend.md # 前端规则
│ └── backend.md # 后端规则
├── docs/
│ ├── architecture.md # 架构文档
│ ├── adr/ # 架构决策记录
│ │ └── 001-use-postgresql.md
│ └── api-spec.md # API 规范
├── prompts/ # 提示词模板库
│ ├── new-feature.md
│ ├── bug-fix.md
│ ├── refactor.md
│ └── test-generation.md
├── frontend/
│ ├── src/
│ └── ...
├── backend/
│ ├── src/
│ └── ...
└── README.md
四、.cursor/rules/ 完整配置
general.md（通用规则）
# 通用代码规范
## 项目背景
这是一个企业级 SaaS 应用，主要功能包括：
- 用户管理和权限控制
- 数据分析看板
- 报表导出
## 通用原则
1. 所有代码使用 TypeScript，禁止 any 类型
2. 错误处理必须完整，不允许吞掉异常
3. 日志使用项目封装的 logger，不用 console.log
4. 所有字符串常量抽取为 enum 或 const
5. 函数长度不超过 50 行，超过则拆分
## 命名规范
- 文件名：kebab-case（user-profile.ts）
- 类名：PascalCase（UserProfile）
- 函数/变量：camelCase（getUserById）
- 常量：UPPER_SNAKE_CASE（MAX_RETRY_COUNT）
- 接口：I前缀（IUserService）或无前缀，保持统一
## 注释规范
- 公共 API 必须有 JSDoc 注释
- 复杂业务逻辑必须有行内注释
- 禁止过时的注释（TODO/FIXME 必须有 issue 编号）
backend.md（后端规则）
# 后端代码规范
## 技术栈
- 框架：NestJS v10
- ORM：Prisma
- 数据库：PostgreSQL 15
- 认证：JWT + Passport
- 测试：Jest + Supertest
## 架构规范
- 遵循 Controller → Service → Repository 三层架构
- Service 层禁止直接使用 Prisma（通过 Repository 层）
- Controller 层只做参数验证和响应格式化
- 业务逻辑全部在 Service 层
## DTO 规范
所有输入必须通过 DTO 验证：
\`\`\`typescript
export class CreateUserDto {
@IsEmail()
@IsNotEmpty()
email: string;
@IsString()
@MinLength(8)
@MaxLength(50)
password: string;
}
\`\`\`
## 响应格式
统一使用以下响应格式：
\`\`\`typescript
interface ApiResponse<T> {
success: boolean;
data: T;
message?: string;
timestamp: string;
}
\`\`\`
## 错误处理
使用全局异常过滤器，Service 层抛出业务异常：
\`\`\`typescript
throw new BusinessException('用户不存在', 'USER_NOT_FOUND', 404);
\`\`\`
frontend.md（前端规则）
# 前端代码规范
## 技术栈
- 框架：React 18 + Next.js 14（App Router）
- 状态管理：Zustand
- 样式：Tailwind CSS
- 组件库：shadcn/ui
- 表单：React Hook Form + Zod
- 数据请求：TanStack Query v5
## 组件规范
1. 优先使用函数式组件 + Hooks
2. 页面级组件放在 app/ 目录，可复用组件放在 components/
3. 自定义 Hooks 放在 hooks/ 目录，以 use 开头命名
4. 组件 Props 必须有 TypeScript 接口定义
## 状态管理规范
- 服务端数据：TanStack Query（不放入 Zustand）
- 全局 UI 状态：Zustand
- 表单状态：React Hook Form
- 局部状态：useState
## 样式规范
- 只使用 Tailwind CSS，禁止内联 style
- 复杂样式组合使用 cn() 工具函数
- 响应式断点从移动端优先（mobile-first）
## 禁止事项
- 禁止直接调用 fetch/axios，必须通过 API 层封装
- 禁止在组件中写业务逻辑，抽取到 Hooks
- 禁止使用 useEffect 处理数据获取，用 TanStack Query
五、提示词模板库
prompts/new-feature.md
# 新功能实现提示词模板
## 使用方式
复制以下模板，填写 [] 中的内容，然后发给 Cursor/Copilot
---
## 任务描述
实现 [功能名称] 功能。
## 需求背景
[描述这个功能的业务价值和用户需求，1-3句话]
## 技术要求
[列出具体的技术要求，如接口规范、数据结构、性能要求]
## 需要创建/修改的文件
- [文件路径1]（新建/修改）
- [文件路径2]（新建/修改）
## 约束条件
- 遵循 @.cursor/rules/backend.md 中的架构规范
- [其他特殊约束]
## 验收标准
- [ ] [可验证的功能点1]
- [ ] [可验证的功能点2]
- [ ] 单元测试覆盖率 > 80%
- [ ] TypeScript 编译无错误
六、架构决策记录（ADR）模板
# ADR-001: 使用 PostgreSQL 而非 MongoDB
## 状态
已决策（2024-01-15）
## 背景
我们需要选择主数据库，候选方案：PostgreSQL vs MongoDB。
## 决策
选择 PostgreSQL。
## 理由
1. 我们的数据有明显的关联结构（用户-订单-商品）
2. 需要事务支持确保数据一致性
3. 团队更熟悉 SQL
## 后果
- 好处：强事务、关联查询方便、类型安全
- 代价：Schema 变更需要迁移脚本，不如 MongoDB 灵活
## AI 提示词影响
在 Cursor Rules 中已注明使用 Prisma + PostgreSQL，
AI 生成代码时会自动遵循此技术栈。
七、一键初始化脚本
#!/bin/bash
# setup-ai-env.sh - AI 开发环境初始化脚本
echo "🚀 初始化 AI 辅助开发环境..."
# 创建目录结构
mkdir -p .github/workflows
mkdir -p .cursor/rules
mkdir -p docs/adr
mkdir -p prompts
# 复制规则模板（实际使用时替换为你的模板路径）
echo "📝 创建 Cursor Rules..."
# 此处写入你的规则文件
# 安装代码质量工具
echo "🔧 安装代码质量工具..."
npm install -D eslint prettier husky lint-staged
# 配置 Husky Git 钩子
echo "🪝 配置 Git 钩子..."
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"
npx husky add .husky/commit-msg "npx commitlint --edit $1"
echo "✅ AI 开发环境初始化完成！"
echo "📚 请查阅 docs/architecture.md 了解项目架构"
echo "💡 提示词模板在 prompts/ 目录下"
章节小结：AI 开发环境配置的核心是"上下文工程"——让 AI 在每次交互时都能访问到正确的项目规范、架构文档和提示词模板。这些文件一次配置，长期生效，是提升团队 Vibe Coding 效率的基础设施投资。
