graph TD
    A[你在终端输入需求] --> B[Claude Code 分析项目上下文]
    B --> C{需要什么操作?}
    C -->|读代码| D[Read/Grep/Glob 工具]
    C -->|写代码| E[Edit/Write 工具]
    C -->|跑命令| F[Bash 工具]
    C -->|搜索信息| G[WebSearch 工具]
    D --> H[综合分析并生成方案]
    E --> H
    F --> H
    G --> H
    H --> I[呈现结果 + 等待你的反馈]
    I -->|继续指令| A
    I -->|确认完成| J[任务结束]

brew install node@20

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# 在 WSL2 Ubuntu 终端中执行同样的 Linux 命令
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

node --version   # 应输出 v20.x.x 或更高
npm --version    # 应输出 10.x.x 或更高

npm install -g @anthropic-ai/claude-code

claude --version
# 应输出类似: 1.0.x

npx @anthropic-ai/claude-code

claude

Welcome to Claude Code!

Please choose an authentication method:
  1. Anthropic API Key
  2. Claude App (claude.ai subscription)
  3. Amazon Bedrock
  4. Google Vertex AI

Select (1-4):

Enter your API key: sk-ant-xxxxx...
✓ Authentication successful!

claude "say hello"

Hello! I'm Claude Code, your AI coding assistant. How can I help you today?

graph TB
    A[~/.claude/CLAUDE.md<br/>全局指令] --> B[项目根目录/CLAUDE.md<br/>项目指令]
    B --> C[子目录/CLAUDE.md<br/>模块指令]

    D[~/.claude/settings.json<br/>全局配置] --> E[项目/.claude/settings.json<br/>项目配置]

    style A fill:#e1f5fe
    style B fill:#fff3e0
    style C fill:#e8f5e9

Claude wants to edit src/app.js:
  + const greeting = "Hello World";
  - const greeting = "Hi";

Allow? (y/n/e=edit)

mkdir ~/my-first-claude-project
cd ~/my-first-claude-project

cat > CLAUDE.md << 'EOF'
# Project: Todo App

## Tech Stack
- Pure HTML/CSS/JavaScript (no frameworks)
- Node.js for serving static files

## Code Style
- Use Chinese comments
- Use ES6+ syntax
- Prefer const over let, never use var

## File Structure
- index.html - main page
- style.css - styles
- app.js - application logic
- server.js - development server

## Rules
- All UI text must be in Chinese
- Use semantic HTML5 elements
- Mobile-responsive design
EOF

claude

╭──────────────────────────────────────────╮
│  Claude Code                              │
│  Model: claude-sonnet-4-20250514          │
│  Working: ~/my-first-claude-project       │
╰──────────────────────────────────────────╯
>

> 帮我创建一个待办事项 Web 应用。功能包括：添加任务、标记完成、删除任务、本地存储持久化。UI 要简洁美观，支持移动端。

Claude wants to create index.html:
  [full file content preview]

Allow? (y/n/e) y

✓ Created index.html

Claude wants to create style.css:
  [full file content preview]

Allow? (y/n/e) y

✓ Created style.css

Claude wants to create app.js:
  [full file content preview]

Allow? (y/n/e) y

✓ Created app.js

Claude wants to create server.js:
  [full file content preview]

Allow? (y/n/e) y

✓ Created server.js

> 启动开发服务器

node server.js
# 输出: Server running at http://localhost:3000

> 给完成的任务加上删除线效果，并且加一个统计栏显示"已完成/总数"

> 添加一个"清除已完成"按钮，点击时弹出确认对话框，确认后删除所有已完成的任务

> 审查 app.js 的代码质量，看看有没有性能问题或可以改进的地方

my-first-claude-project/
├── CLAUDE.md          # 项目规范文件
├── index.html         # 主页面
├── style.css          # 样式表
├── app.js             # 应用逻辑
└── server.js          # 开发服务器

claude "解释 app.js 中 localStorage 的使用方式"

claude "我的待办事项刷新页面后数据丢失了，帮我排查修复"

claude "把 app.js 重构为 ES6 Class 风格"

claude "用 Jest 为 app.js 中的核心函数编写单元测试"

claude "这个项目用了哪些设计模式？画出架构图"

claude "帮我创建 git 仓库并提交初始代码，commit message 要描述清楚"

flowchart LR
    A[输入需求] --> B{分析类型}
    B -->|问答| C[读文件 → 解释]
    B -->|修 Bug| D[定位 → 修复 → 验证]
    B -->|新功能| E[规划 → 编码 → 测试]
    B -->|重构| F[分析 → 重写 → 对比]
    C --> G[输出结果]
    D --> G
    E --> G
    F --> G

cat > ~/.claude/CLAUDE.md << 'EOF'
# Global Preferences

## 语言
- 默认使用中文回复
- 代码注释可用英文

## 代码风格
- 使用 2 空格缩进
- 优先使用 TypeScript
- 组件使用函数式写法

## 工作流
- 不要自动 commit
- 修改代码后主动运行测试
- 始终先读取文件再编辑
EOF

# 在项目根目录
cat > CLAUDE.md << 'EOF'
# Project: My E-commerce App

## Architecture
- Frontend: React 19 + Vite
- Backend: Express.js + PostgreSQL
- State: Zustand

## Conventions
- API 路由以 /api/v1/ 开头
- 组件文件用 PascalCase 命名
- CSS 使用 CSS Modules
- 测试文件放在 __tests__/ 目录

## Database
- 迁移文件在 /migrations
- 使用 Knex.js 作为查询构建器
- 连接信息在 .env 中（不要读取）

## 重要规则
- 不要修改 .env 文件
- 不要删除 migration 文件
- API 返回统一格式 { code, data, message }
EOF

> /memory
# Claude Code 会显示当前记忆内容，你可以手动编辑或让 AI 自动添加

# 1. 在大型项目中，让 Claude 专注于特定目录
claude "只分析 src/components/ 目录下的代码质量"

# 2. 使用 Plan 模式先规划再执行，避免浪费 Token
claude --plan "重构整个认证模块"

# 3. 用 .claudeignore 排除不相关文件
cat > .claudeignore << 'EOF'
node_modules/
dist/
.git/
*.min.js
*.map
EOF

flowchart TD
    A[安装 Node.js] --> B[npm install -g @anthropic-ai/claude-code]
    B --> C[获取 API Key]
    C --> D[claude 启动首次认证]
    D --> E[创建项目目录]
    E --> F[编写 CLAUDE.md]
    F --> G[启动 Claude Code]
    G --> H[描述需求]
    H --> I[审查 Claude 的代码]
    I --> J{满意?}
    J -->|是| K[确认修改]
    J -->|否| L[提供反馈]
    L --> H
    K --> M[运行测试]
    M --> N[继续迭代]

    style A fill:#e3f2fd
    style F fill:#fff3e0
    style K fill:#e8f5e9
    style N fill:#fce4ec