Vibe Coding 基础教程¶

什么是Vibe Coding¶

Vibe Coding（氛围编程）是一种新兴的编程方式，由Andrej Karpathy提出。它指的是完全通过自然语言与AI对话来编写程序，程序员只需描述想要实现的功能，AI负责生成代码。

Vibe Coding的核心理念¶

# 传统编程 vs Vibe Coding

传统编程：
程序员 → 编写代码 → 调试 → 测试 → 部署

Vibe Coding：
程序员 → 描述需求 → AI生成代码 → 验证 → 部署

关键转变¶

传统编程	Vibe Coding
关注语法细节	关注需求描述
手动编写代码	AI生成代码
调试错误	验证结果
记忆API	描述意图

Vibe Coding的工具¶

主流AI编程助手¶

工具	特点	适用场景
GitHub Copilot	代码补全	日常编码
Cursor	AI原生IDE	项目开发
Claude	对话式编程	复杂任务
DeepSeek	开源免费	预算有限
Windsurf	全栈开发	Web项目

Cursor使用指南¶

# Cursor设置

1. 下载安装Cursor
2. 配置AI模型（Claude Opus 4.7 / GPT-5.5）
3. 学习快捷键：
   - Cmd/Ctrl + K：生成代码
   - Cmd/Ctrl + L：打开聊天
   - Cmd/Ctrl + I：编辑代码

Vibe Coding的基本流程¶

流程图¶

┌─────────────────────────────────────────────────────────┐
│                    Vibe Coding 流程                      │
├─────────────────────────────────────────────────────────┤
│  1. 描述需求 → 2. AI生成代码 → 3. 测试验证 → 4. 迭代优化  │
└─────────────────────────────────────────────────────────┘

步骤详解¶

步骤1：清晰描述需求

# 好的需求描述

我想创建一个任务管理应用，功能包括：
1. 添加任务（标题、描述、截止日期）
2. 编辑任务
3. 删除任务
4. 标记完成状态
5. 按状态筛选任务

技术要求：
- 前端：React + TypeScript
- 后端：Node.js + Express
- 数据库：SQLite
- 样式：Tailwind CSS

步骤2：与AI协作生成代码

# 第一轮对话

请帮我设计数据库表结构，用于存储任务信息。

# 第二轮对话

现在请创建Express后端API，实现任务的CRUD操作。

# 第三轮对话

请创建React前端组件，实现任务列表和表单。

步骤3：测试验证

# 运行测试
npm test

# 启动开发服务器
npm run dev

# 验证功能是否正常

步骤4：迭代优化

# 优化请求

请优化以下方面：
1. 添加输入验证
2. 改进错误处理
3. 优化数据库查询
4. 添加日志记录

Vibe Coding的提示词技巧¶

1. 角色设定¶

# 角色提示

你是一位资深的全栈开发工程师，擅长：
- React/TypeScript前端开发
- Node.js后端开发
- 数据库设计
- API设计

请以这个身份帮我完成以下任务。

2. 上下文提供¶

# 上下文提示

项目背景：
- 这是一个电商网站的用户系统
- 预计用户量：10万+
- 需要支持高并发

当前进度：
- 已完成：用户注册、登录
- 进行中：用户资料管理
- 待开发：权限管理

请帮我继续开发用户资料管理功能。

3. 约束条件¶

# 约束提示

请满足以下要求：
1. 代码必须通过TypeScript严格模式
2. 所有API需要错误处理
3. 遵循RESTful设计规范
4. 添加必要的注释
5. 使用ESLint和Prettier格式化

4. 输出格式¶

# 输出格式要求

请按以下格式输出：

1. 项目结构（目录树）
2. 核心代码文件
3. 配置文件
4. 使用说明
5. 注意事项

Vibe Coding实战示例¶

示例1：构建博客系统¶

# 第一轮：项目初始化

请帮我创建一个个人博客系统，技术栈：
- 前端：Next.js + Tailwind CSS
- 后端：Next.js API Routes
- 数据库：PostgreSQL + Prisma
- 认证：NextAuth.js

请先创建项目结构和基础配置。

# 第二轮：数据库设计

请设计博客系统的数据库模型，包括：
- 用户表
- 文章表
- 评论表
- 分类表
- 标签表

# 第三轮：文章功能

请实现文章的CRUD功能，包括：
- 创建文章（支持Markdown）
- 编辑文章
- 删除文章
- 文章列表（分页）
- 文章详情

# 第四轮：评论功能

请实现评论系统，包括：
- 发表评论
- 评论列表
- 删除评论
- 评论通知

示例2：构建REST API¶

# 第一轮：基础设置

请帮我创建一个用户管理API，使用：
- 框架：Express + TypeScript
- 数据库：MongoDB + Mongoose
- 认证：JWT

# 第二轮：用户功能

请实现以下API：
- POST /api/auth/register - 注册
- POST /api/auth/login - 登录
- GET /api/users/profile - 获取用户信息
- PUT /api/users/profile - 更新用户信息
- DELETE /api/users/:id - 删除用户

# 第三轮：添加验证和错误处理

请添加：
- 输入验证（使用Joi）
- 错误处理中间件
- 请求日志
- API文档（使用Swagger）

Vibe Coding的注意事项¶

⚠️ 常见陷阱¶

# 1. 过度依赖AI

问题：完全不理解AI生成的代码
解决：花时间学习和理解生成的代码

# 2. 忽略测试

问题：AI生成的代码可能有bug
解决：始终编写和运行测试

# 3. 安全问题

问题：AI可能生成不安全的代码
解决：审查代码安全性

# 4. 性能问题

问题：AI可能生成低效代码
解决：性能测试和优化

✅ 最佳实践¶

# 1. 迭代式开发

不要一次性生成整个项目，而是：
- 先生成核心功能
- 测试验证
- 再添加新功能

# 2. 代码审查

对AI生成的代码：
- 理解每行代码的作用
- 检查潜在问题
- 确保符合规范

# 3. 版本控制

频繁提交代码：
- 每完成一个功能就提交
- 写清晰的commit message
- 便于回滚

# 4. 文档记录

记录AI的提示词和生成过程：
- 便于复现
- 便于分享
- 便于优化

Vibe Coding的能力边界¶

AI擅长的¶

✅ 标准化代码生成
✅ 重复性任务
✅ 模板代码
✅ 常见功能实现
✅ 代码解释

AI不擅长的¶

❌ 复杂架构设计
❌ 性能优化
❌ 安全审计
❌ 业务逻辑创新
❌ 需求分析

人类仍然需要¶

# 1. 需求理解
- 理解用户真正需要什么
- 分析业务逻辑

# 2. 架构设计
- 设计系统整体结构
- 技术选型

# 3. 质量保证
- 代码审查
- 测试设计
- 性能优化

# 4. 持续学习
- 学习新技术
- 理解AI的局限

学习路径¶

入门阶段¶

1. 了解Vibe Coding概念
2. 选择一个AI编程工具
3. 从小项目开始练习
4. 学习提示词技巧

进阶阶段¶

1. 复杂项目实战
2. 优化提示词
3. 多AI工具协作
4. 建立自己的工作流

高级阶段¶

1. 自定义AI助手
2. 代码质量控制
3. 团队协作
4. 贡献开源项目

实用资源¶

工具推荐¶

# AI编程工具
- Cursor：https://cursor.sh
- GitHub Copilot：https://copilot.github.com
- Windsurf：https://windsurf.com

# 学习资源
- Andrej Karpathy的Vibe Coding视频
- AI编程最佳实践指南
- Prompt Engineering教程

社区推荐¶

# GitHub
- Awesome AI Coding：AI编程工具集合
- 各大AI模型的官方文档

# 论坛
- Reddit r/programming
- Stack Overflow
- V2EX

总结¶

# Vibe Coding核心要点

1. 关注需求，而非语法
2. 与AI协作，而非对抗
3. 验证结果，而非盲目信任
4. 持续学习，保持进步

# 记住

Vibe Coding不是取代程序员，
而是让程序员更高效地工作。

下一步学习¶

选择一个AI编程工具开始实践
从简单项目开始，逐步挑战复杂项目
建立自己的提示词库
与其他开发者交流经验