【AI学习路线 13】Vibe Coding - AI辅助编程实践指南

Vibe Coding概述
- 什么是Vibe Coding
- 核心理念
第一部分：Vibe Coding工具
第二部分：Vibe Coding方法论
第三部分：最佳实践
第四部分：实战案例
- 4.1 从零构建Web应用
- 4.2 代码重构案例
学习资源

学习顺序说明：本文是AI学习路线的第13篇，可作为独立参考文档，也可在完成前面学习后阅读：

… → 11 AI Agent → 12 项目实战 → 13 Vibe Coding（本文）

Vibe Coding（氛围编程/感觉编程）是一种新兴的编程范式，指开发者通过与AI对话的方式，让AI生成、修改和优化代码，自己则专注于架构设计和问题思考。

Vibe Coding概述

什么是Vibe Coding

传统编程：
开发者 → 编写代码 → 调试 → 完成

Vibe Coding：
开发者 → 描述需求 → AI生成代码 → 审查/调整 → 完成
          ↓
      架构设计、问题分解、代码审查

核心理念

原则	说明
描述而非编写	用自然语言描述需求，让AI生成代码
迭代而非一次性	通过多轮对话逐步完善代码
审查而非实现	专注于代码审查和架构设计
上下文为王	提供充分的上下文信息

参考资源：Andrej Karpathy - Vibe Coding

第一部分：Vibe Coding工具

1.1 Cursor

Cursor是目前最流行的Vibe Coding工具，基于VS Code构建。

核心功能

Cursor功能
├── Tab补全 - 智能代码补全
├── Chat - 侧边栏对话
├── Cmd+K - 行内编辑
├── Composer - 多文件编辑
└── Agent Mode - 自主执行模式

使用技巧

# 1. 使用 @ 符号引用上下文
@file:src/main.py  # 引用文件
@folder:src/       # 引用文件夹
@code:函数名        # 引用代码块
@docs:库名          # 引用文档

# 2. 使用 / 命令
/fix      # 修复代码
/explain  # 解释代码
/doc      # 生成文档
/test     # 生成测试

# 3. 自然语言编辑
"把这段代码改成异步的"
"添加错误处理"
"重构这个函数，使其更简洁"

Composer多文件编辑

使用场景：
- 重构多个文件
- 添加新功能涉及多文件修改
- 代码迁移

操作步骤：
1. 打开 Composer (Cmd+I)
2. 描述需求
3. 审查AI的修改计划
4. 确认执行

参考资源：Cursor官方文档

1.2 GitHub Copilot

GitHub Copilot是GitHub推出的AI编程助手。

Copilot模式
├── 代码补全 - 实时建议
├── Copilot Chat - 对话交互
├── Copilot Workspace - 工作空间级编辑
└── Copilot CLI - 命令行助手

使用技巧

# 1. 通过注释引导
# 创建一个函数，接收用户列表，返回按年龄排序的结果
def sort_users_by_age(users):
    # Copilot会自动补全实现
    return sorted(users, key=lambda x: x['age'])

# 2. 函数签名引导
def calculate_fibonacci(n: int) -> int:
    """计算斐波那契数列第n项"""
    # 按Tab接受建议，或继续描述
    pass

1.3 Claude Code

Claude Code是Anthropic推出的命令行AI编程工具。

# 安装
npm install -g @anthropics/claude-code

# 启动
claude

# 常用命令
/ls          # 列出文件
/grep        # 搜索代码
/edit        # 编辑文件
/bash        # 执行命令

特点

强大的上下文理解能力
支持大型代码库分析
可以执行终端命令
适合复杂重构任务

1.4 其他工具

工具	特点	适用场景
Windsurf	Cascade工作流	复杂多步骤任务
Aider	终端集成	命令行爱好者
Cline	VS Code插件	开源免费
Continue	开源可定制	隐私敏感场景

第二部分：Vibe Coding方法论

2.1 提示工程技巧

清晰描述需求

❌ 不好的提示：
"帮我写个登录功能"

✅ 好的提示：
"创建一个用户登录API端点，要求：
- 使用JWT进行身份验证
- 支持邮箱和密码登录
- 密码使用bcrypt加密
- 返回token和用户信息
- 添加输入验证和错误处理
- 使用FastAPI框架"

提供上下文

提示模板：

【背景】
我正在开发一个电商系统，使用Python + FastAPI

【当前代码】
@file:src/auth.py

【目标】
添加用户注册功能

【要求】
1. 验证邮箱格式
2. 密码至少8位
3. 检查邮箱是否已存在
4. 返回201状态码

【约束】
- 使用SQLAlchemy ORM
- 遵循现有代码风格"

迭代优化

第一轮：生成基础代码
"创建一个用户管理模块"

第二轮：添加功能
"添加密码重置功能"

第三轮：优化
"优化数据库查询，添加索引"

第四轮：完善
"添加单元测试和文档"

2.2 代码审查要点

安全性检查

# ❌ AI可能生成的有问题的代码
def login(username, password):
    query = f"SELECT * FROM users WHERE username='{username}' AND password='{password}'"
    # SQL注入风险！

# ✅ 应该要求改为
from sqlalchemy import text

def login(username: str, password: str):
    query = text("SELECT * FROM users WHERE username=:username")
    # 使用参数化查询

性能检查

# ❌ 低效代码
def get_user_orders(user_id):
    orders = []
    for order in db.query(Order).all():  # 全表扫描
        if order.user_id == user_id:
            orders.append(order)
    return orders

# ✅ 优化后
def get_user_orders(user_id: int):
    return db.query(Order).filter(Order.user_id == user_id).all()

可维护性检查

代码是否遵循项目规范
是否有适当的注释和文档
错误处理是否完善
是否有过度的复杂度

2.3 工作流模式

探索式开发

适用场景：技术调研、原型开发

流程：
1. 描述需求和约束
2. 让AI生成多个方案
3. 评估各方案优缺点
4. 选择并迭代

提示示例：
"我想实现一个实时聊天功能，请提供3种技术方案：
1. WebSocket方案
2. Server-Sent Events方案
3. 轮询方案

每种方案列出优缺点和适用场景"

测试驱动开发

流程：
1. 先写测试用例
2. 让AI实现通过测试的代码
3. 审查并优化

提示示例：
"我已经写了以下测试，请实现能通过这些测试的代码：

@test
async def test_create_user():
    response = await client.post("/users", json={
        "email": "test@example.com",
        "password": "password123"
    })
    assert response.status_code == 201
    assert response.json()["email"] == "test@example.com"
"

代码重构

流程：
1. 描述当前代码问题
2. 说明重构目标
3. 让AI生成重构方案
4. 审查并执行

提示示例：
"请重构以下代码，使其更符合SOLID原则：

@file:src/payment.py

目标：
1. 将支付方式抽成策略模式
2. 添加日志记录
3. 统一错误处理
"

第三部分：最佳实践

3.1 项目初始化

使用AI生成项目结构

提示：
"创建一个Python FastAPI项目，包含：
- 项目结构（遵循最佳实践）
- 依赖管理（pyproject.toml）
- 配置管理（pydantic-settings）
- 日志配置
- Docker支持
- 基本的CI/CD配置
- README模板

项目名：my-api-service"

3.2 日常开发流程

1. 需求分析
   - 用自然语言描述功能
   - 分解为可执行的任务

2. 代码生成
   - 提供上下文和约束
   - 让AI生成代码

3. 代码审查
   - 检查逻辑正确性
   - 检查安全性
   - 检查性能

4. 测试验证
   - 生成测试用例
   - 运行验证

5. 迭代优化
   - 根据反馈调整
   - 重构和优化

3.3 常见陷阱与避免

陷阱	说明	解决方案
过度依赖	完全让AI写代码，自己不思考	保持架构设计能力
上下文丢失	多轮对话后AI忘记之前的要求	定期总结和重置上下文
幻觉代码	AI生成不存在的API或库	验证所有依赖和API
安全漏洞	AI生成的代码可能有安全问题	强制安全审查
性能问题	生成的代码可能效率低下	性能测试和优化

3.4 提升Vibe Coding效率

建立个人提示库

# prompts/common_patterns.py

FASTAPI_CRUD = """
创建一个FastAPI CRUD端点，包含：
- Pydantic模型（Create/Update/Response）
- 依赖注入（数据库会话）
- 异常处理
- 分页支持
- 搜索过滤

资源名：{resource_name}
字段：{fields}
"""

REACT_COMPONENT = """
创建一个React函数组件，包含：
- TypeScript类型定义
- Props接口
- 状态管理（useState/useReducer）
- 副作用处理（useEffect）
- 样式（Tailwind CSS）
- 错误边界

组件名：{component_name}
功能：{description}
"""

使用Rules文件

# .cursorrules

## 代码风格
- 使用TypeScript严格模式
- 优先使用函数组件
- 使用Tailwind CSS进行样式

## 命名规范
- 组件名：PascalCase
- 函数名：camelCase
- 常量：UPPER_SNAKE_CASE

## 项目结构
- 组件放在 components/ 目录
- 工具函数放在 utils/ 目录
- 类型定义放在 types/ 目录

第四部分：实战案例

4.1 从零构建Web应用

步骤1：项目初始化
"创建一个全栈应用，包含：
- 后端：FastAPI + SQLAlchemy + PostgreSQL
- 前端：React + TypeScript + Tailwind
- 功能：用户认证 + CRUD操作

生成完整的项目结构和基础代码"

步骤2：实现后端API
"实现用户注册和登录API：
- /auth/register - 用户注册
- /auth/login - 用户登录
- /auth/me - 获取当前用户

要求JWT认证，密码bcrypt加密"

步骤3：实现前端页面
"创建登录和注册页面：
- 表单验证
- 错误提示
- 加载状态
- 路由跳转

使用React Hook Form和Zod验证"

步骤4：集成和测试
"添加端到端测试：
- 用户注册流程
- 登录流程
- 受保护路由访问

使用Playwright"

4.2 代码重构案例

重构前代码：
（一个200行的复杂函数）

提示：
"请重构以上代码：

问题：
1. 函数过长，职责过多
2. 嵌套层级太深
3. 错误处理不完善

目标：
1. 拆分为多个小函数
2. 使用早期返回减少嵌套
3. 添加统一的错误处理
4. 添加类型注解

保持原有功能不变"

学习资源

官方资源

社区资源

视频教程

上一篇：12 AI项目实战 - 从零构建完整应用

最后更新: 2026年4月10日

本文综合了 Cursor、Copilot、Claude Code 等工具的最佳实践整理