Vibe Coding：当编程变成聊天，程序员该何去何从

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

# 手动实现一个用户登录功能
def login(username: str, password: str) -> dict:
    # 验证输入
    if not username or not password:
        raise ValueError("用户名和密码不能为空")
    
    # 查询数据库
    user = db.query(User).filter(User.username == username).first()
    if not user:
        raise AuthError("用户不存在")
    
    # 验证密码
    if not verify_password(password, user.hashed_password):
        raise AuthError("密码错误")
    
    # 生成token
    token = create_access_token(user.id)
    
    return {"token": token, "user": user.to_dict()}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

You: 实现用户登录功能，要验证输入、查数据库、验密码、返回JWT token

AI: [生成完整代码]

You: 跑一下

AI: [执行测试] 测试通过

You: 加个登录失败次数限制，超过5次锁定账号

AI: [修改代码] 已添加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

第1轮对话：

You: 我要做一个个人博客系统，技术栈用 Next.js 14 + Prisma + PostgreSQL。
功能需要：
- Markdown 文章编辑
- 文章分类和标签
- 评论系统
- 暗黑模式
帮我搭建项目框架。

AI: 好的，我来创建项目...
[执行 npx create-next-app@14 ...]
[创建 prisma/schema.prisma]
[创建数据库模型]
[创建基础组件]
...
框架搭建完成，运行 npm run dev 查看效果。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

第2轮对话：

You: 首页看起来太丑了，参考 Vercel 官网的设计风格美化一下

AI: 明白，我来调整样式...
[修改 globals.css]
[修改 components/Header.tsx]
[添加渐变背景和动画效果]
...
已更新，刷新页面查看。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

第3轮对话：

You: 文章编辑器需要支持实时预览，左边写 Markdown 右边显示效果

AI: 
[安装 react-markdown]
[创建 SplitEditor 组件]
[添加语法高亮支持]
...
编辑器已完成。

1
2
3
4

传统：需求 → 设计 → 编码 → 测试 → 部署

Vibe：需求 → 描述 → AI编码 → 审查 → 迭代 → 部署
          ↑_________←_________|

1
2
3
4
5
6
7

❌ 不好的描述：
"写一个函数处理用户数据"

✅ 好的描述：
"写一个函数，接收用户注册表单数据（name, email, password），
验证邮箱格式和密码强度（至少8位，包含大小写和数字），
验证通过返回处理后的数据，失败抛出具体错误信息"

1
2
3
4
5

第1步：搭建基础框架
第2步：实现核心功能
第3步：添加边界处理
第4步：优化性能
第5步：完善样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# 项目规范

## 技术栈
- Next.js 14 (App Router)
- TypeScript 严格模式
- Tailwind CSS
- Prisma ORM

## 代码风格
- 使用函数式组件
- 所有函数必须有 JSDoc 注释
- 错误处理使用自定义 Error 类

## 禁止
- 使用 any 类型
- 直接操作 DOM
- 在组件中写内联样式