1
2
3
4
5
6

用户："帮我重构用户认证模块"
Claude Code（Plan Mode）：
→ 先研究现有代码结构
→ 制定详细的修改计划
→ 展示给你确认
→ 确认后才执行修改

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

# 项目偏好

## 技术栈
- 前端：React + TypeScript
- 后端：Node.js + Express
- 样式：Tailwind CSS

## 代码风格
- 组件使用Functional Component
- 优先使用Hooks而非Class
- 异步操作使用async/await

## 偏好示例
Good: 简单的淡入动画效果
Bad: 复杂的旋转和弹跳效果

1
2
3
4
5
6
7
8

# 安装Claude Code
npm install -g @anthropic-ai/claude-code

# 进入项目目录
cd my-project

# 启动Claude Code
claude

1
2
3
4
5

用户：创建一个显示"Hello, Vibe Coding!"的React组件
Claude Code：
→ 生成组件代码
→ 询问是否保存到文件
→ 确认后写入src/components/Hello.tsx

1
2
3
4
5
6
7
8

用户（按Shift+Tab两次进入Plan Mode）：帮我把所有class组件改成函数组件
Claude Code：
1. 扫描项目中的所有React组件
2. 识别class组件列表
3. 为每个组件生成转换计划
4. 展示转换策略（保留生命周期方法对应关系）
5. 等待你确认或修改
6. 确认后逐个转换

1
2
3
4
5
6
7

# 在对话中启用并行模式
/parallel

用户：同时完成这三件事：
1. 创建用户登录页面
2. 创建用户注册页面
3. 创建密码重置页面

1
2
3
4
5
6
7

# 安装MCP服务器
claude mcp add filesystem
claude mcp add github
claude mcp add database

# 然后就可以：
用户：从数据库读取用户表结构，然后用它来生成API文档

1
2
3
4
5
6

用户：帮我创建一个新的React + TypeScript项目，使用Vite构建
Claude Code：
→ 检查是否已安装Node.js
→ 运行npm create vite@latest todo-app -- --template react-ts
→ 安装依赖
→ 创建项目结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

用户：在src目录下创建以下结构：
- components/
  - TodoList.tsx      # 待办列表
  - TodoItem.tsx      # 单个待办
  - AddTodo.tsx       # 添加表单
- App.tsx             # 主组件
用户：先创建TodoList.tsx，它需要：
- 显示所有待办事项
- 支持标记完成
- 支持删除
- 支持筛选（全部/进行中/已完成）

1
2
3
4
5

用户：现在创建AddTodo.tsx表单组件，需要：
- 输入框和提交按钮
- 按回车也可以提交
- 添加loading状态
用户：帮我添加本地存储功能，刷新后数据不丢失

1
2
3
4
5

用户：用Tailwind CSS美化一下界面：
- 卡片式布局
- 渐变背景
- 动画效果
- 移动端适配

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

todo-app/
├── src/
│   ├── components/
│   │   ├── TodoList.tsx
│   │   ├── TodoItem.tsx
│   │   └── AddTodo.tsx
│   ├── App.tsx
│   ├── App.css
│   └── main.tsx
├── package.json
└── vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 项目说明

## 目标
一个帮助用户管理个人财务的Web应用

## 技术栈
- React 18 + TypeScript
- Vite构建
- Tailwind CSS
- LocalStorage存储

## 架构偏好
- 组件文件以.tsx为后缀
- Hooks放在hooks/目录
- 工具函数放在utils/目录
- API调用统一管理

## 代码风格
- 变量使用camelCase
- 常量使用UPPER_SNAKE_CASE
- 组件使用函数式+Hooks
- 样式使用Tailwind类名

## 不希望出现
- console.log调试代码
- any类型（除非绝对必要）
- 超过100行的组件

1
2
3
4
5
6
7
8

用户：创建用户类型定义
Claude Code：创建types/User.ts

用户：基于这个类型，创建用户服务类
Claude Code：（还记得User类型）创建services/UserService.ts

用户：添加CRUD方法
Claude Code：（记得UserService）添加create、read、update、delete方法

1
2
3
4
5
6

# 创建新分支进行实验
claude: git checkout -b feature/new-ui

# 实验完成后
claude: git add . && git commit -m "feat: 添加新UI"
claude: git push && 发起PR

1
2
3
4
5
6
7
8

# 更新记录

## 2026-02-01
- 添加TypeScript严格模式要求
- 新增API错误处理规范

## 2026-01-15
- 初始版本

1
2
3
4
5
6
7

用户：页面显示白屏，控制台报错"Cannot read property 'map' of undefined"
Claude Code：
→ 分析错误堆栈
→ 检查是哪个组件
→ 发现是数据未加载时渲染了.map
→ 添加空状态判断
→ 重写代码并测试

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

开始Vibe Coding
    │
    ├─ 我是程序员，想要保留完整控制权
    │     │
    │     ├─ 重视安全确认 → Claude Code
    │     ├─ 喜欢VSCode → Cursor
    │     └─ 需要深度上下文 → Windsurf
    │
    ├─ 我不是程序员，想要最快做出产品
    │     │
    │     ├─ 想要最好看的UI → Lovable / V0
    │     ├─ 想要一站式托管 → Bolt.new
    │     └─ 想要做SaaS产品 → Base44
    │
    └─ 我是学生/学习者
          └─ Replit（在线协作+学习）

1
2
3

用户：帮我设计一个支持百万并发的分布式系统
→ Claude Code可以生成代码框架
→ 但系统设计、性能调优、容灾方案需要专业人士

1
2
3

用户：帮我加个用户认证功能
→ AI可能生成有安全漏洞的代码
→ 建议：关键安全功能要人工审查或使用成熟库

1
2
3
4
5
6
7
8
9

# 1. 安装
npm install -g @anthropic-ai/claude-code

# 2. 启动
cd your-project
claude

# 3. 开始对话
用户：帮我创建一个...