一、基本概述
Claude Code 是Anthropic公司推出的终端AI编程助手，基于针对编程场景深度优化的Claude Opus 4模型构建，支持macOS、Ubuntu/Debian系统和Windows WSL环境，采用 终端交互模式 实现自然语言编程，可通过npm全局安装并集成VS Code、JetBrains等主流IDE。
（1）基本概述
随着大模型的技术发展，编程助手主要分为三类产品形态，AI-IDE类型、插件类型、CLI类型
| 编程助手产品形态 | 典型产品代表 | 适用场景 | 产品截图 | ||
|---|---|---|---|---|---|
| AI-IDE | Cursor、Trea | 对历史IDE类型依赖较少的开发场景，如前端开发 | |||
| 插件 | iFlyCode、GitHub copilot | 对历史IDE类型依赖较重的开发场景，如：后端开发 | |||
| CLI(命令行) | Claude Code | • 极客开发者，对AI编程有着较高的要求，追求较流畅的性能体验• 对系统兼容性有要求，比如Linux开发环境， Claude Code适配更友好 |
（2）适用群体：Claude Code因其终端交互方式的特殊性，更适合极客开发者
下面是我整理出的关于各类编程工具的测评，对技术有较高要求的同学，可使用Claude Code
二、基本操作+实用技巧集锦
2.1 安装指南
（1）前提条件
• 确保已安装 Node.js（版本 >= 20.0.0）
• 具备 npm 包管理工具（通常随 Node.js 一同安装）
安装指引可参考： nodejs.org/en/download
• Git环境
（2）安装步骤
使用 npm 全局安装 Claude Code：
npm install -g @anthropic-ai/claude-code
（3）验证安装
安装完成后，可通过以下命令验证是否安装成功：
claude --version
若成功安装，将显示Claude Code的版本信息，如下图：
（4）常用指令
下面这些是Claude Code日常使用中最重要的命令，建议全部掌握：
| 命令 | 功能 | 示例 |
|---|---|---|
| claude | 启动交互模式 | claude |
| claude "task" | 运行一次性任务 | claude "fix the build error" |
| claude -p "query" | 运行一次性查询，然后退出 | claude -p "解释下main.js文件有哪些组件" |
| claude -c | 继续最近的对话 | claude -c |
| claude -r | 恢复之前的对话 | claude -r |
| claude commit | 根据代码变更创建 Git 提交信息 | claude commit |
| /clear | 清除对话历史 | > /clear |
| /help | 显示可用命令 | > /help |
| exit 或 Ctrl+C | 退出 Claude Code | > exit |
| /model | 查看/切换当前模型 | 确认/切换模型版本 |
| @ | 直接引用文件 / 目录 | 用来添加上下文 |
键盘快捷键（终端）
| 快捷键 | 作用 | 系统 |
|---|---|---|
| Ctrl + C | 中断当前命令 | 全部 |
| Ctrl + D | 退出/EOF | 全部 |
| Ctrl + L | 清屏 | 全部 |
| ↑ / ↓ | 浏览命令历史 | 全部 |
| Tab | 自动补全 | 全部 |
| Ctrl + A | 光标到行首 | 全部 |
| Ctrl + E | 光标到行尾 | 全部 |
开始使用
清除聊天上下文
使用 /clear 清除聊天上下文，避免累积过多历史信息影响效率。
中断操作
输错指令时，按 ESC 键立即停止 AI 当前任务。
恢复历史会话
在启动的时候，执行claude -c，可以继续上次对话
执行claude -r，可以选择历史对话继续。如果你已经打开了某个对话，你也可以输入 /resume 来切换到其他会话中。
上下文压缩
Claude Code提供了/compact ，它的作用是压缩对话历史，只保留上下文摘要，从而减少 token 占用，这样 Claude 就不会因为上下文太杂而卡壳或跑偏。
自定义命令
• 用户级命令：~/.claude/commands/，前缀 /user:。
• 项目级命令：.claude/commands/，前缀 /project:。
• 示例：创建 pp.md 文件后，输入 /project:pp 自动执行“分析性能并提出优化建议”。
如果有一些经常用到的工作流程，你可以将流程设置为自定义指令。自定义指令分为两种：
• 用户级命令：放在 ~/.claude/commands/ 目录下，适合所有项目通用的命令。触发方式是输入 /user:命令名。
• 项目级命令：放在项目根目录下的 .claude/commands/ 目录中，适合这个项目专用的命令。触发方式是 /project:命令名。
举个例子：
假设在 .claude/commands/ 文件夹里新建了一个 pp.md 文件，里面写上：
1. 使用`gh issue view`命令查看Issue <issue_number> 详情
2. 理解Issue描述
3. 在代码库中搜索相关文件
4. 实施必要的修改来解决Issue
5. 编写并运行测试来验证修复
6. 确保代码通过代码风格检查和类型检查
7. 创建描述性的提交信息
8. 推送代码并创建PR
保存后，你就可以在 Claude Code 中执行 /project:pp 1234 ，让 Claude 自动修复指定的 GitHub issue。其中1234是Issue的ID，而指令中的ARGUMENTS会被自动替换成1234
你还可以把其他需求封装成命令，比如：
• /user:write-tests → 生成测试用例
• /project:lint → 按团队规范格式化代码
• /user:explain → 把复杂代码解释成人话
切换/查看当前模型
添加上下文
• 关联文件上下文
把相关文件（如历史对话记录、依赖代码文件）作为上下文，让 Claude 基于文件内容响应：
# 示例：让 Claude 基于当前代码（app.js）优化逻辑
claude -p "优化这段代码的性能：$(cat D:\workspace\case1\mall\mall-mbg\src\main\java\com\macro\mall\Generator.java -Raw)"
• 管道传递上下文（结合其他命令）
通过 | 管道将前序命令的输出（如 Git 代码变更、历史对话）作为上下文：
# 示例：让 Claude 基于 Git 最近的代码变更（上下文）写提交说明
git diff HEAD~1 HEAD | claude -p "基于这些代码变更，生成规范的 Git Commit 信息"
• 交互式模式（默认 -i 或直接 claude）：用 @ 引用文件（支持绝对路径 / 相对路径）：
@mall-portall\src\main\java\com\macro\malllportallservicelimpl\HomeserviceImpl.java 这个类有哪些方法
Safe YOLO 模式
为了安全起见， Claude Code执行一些命令时默认请求你的同意。为了实现更方便的自动化，你可以设置Safe YOLO模式。
在启动Claude的时候，执行下面的指令即可：
claude --dangerously-skip-permissions
执行这个之后，Claude 会自动跳过所有权限确认，不需要你手动点允许。这对于一些重复性任务十分方便。
快捷键操作
• / 查看命令
• 方向键翻历史
• Tab 补全
• Option/shift+Enter 换行
• Ctrl+C 退出等。
2.2 基本功能操作体验
2.2.1 文件操作命令
查看文件
你：显示 index.html 的内容
你：读取 style.css 文件
你：看一下 README.md
创建文件
你：创建一个名为 config.js 的配置文件
你：新建一个 about.html 页面
你：生成一个 .gitignore 文件
编辑文件
你：修改 index.html 的第 10 行，把标题改成"欢迎"
你：在 style.css 中添加一个新的类 .button
你：删除 script.js 中的 console.log 语句
删除文件
你：删除 test.html
你：移除不需要的 backup.js 文件
2.2.2 项目管理技巧
初始化项目结构
你：帮我创建一个标准的网站项目结构
Claude 会创建：
my-project/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
├── images/
└── README.md
查看项目结构
你：显示当前项目的文件结构
你：列出所有 HTML 文件
你：有哪些 JavaScript 文件？
组织文件
你：把所有 CSS 文件移到 styles 文件夹
你：创建一个 components 文件夹存放组件
你：重命名 main.js 为 app.js
2.2.3 代码搜索和导航
搜索代码
你：找出所有包含 "button" 的代码
你：搜索哪里使用了 getUserData 函数
你：查找所有的 TODO 注释
定位代码
你：找到 login 函数的定义位置
你：显示 User 类在哪个文件
你：定位 API_URL 常量
2.2.4 批量操作
批量修改
你：把所有文件中的 var 改成 let
你：将所有 console.log 替换为自定义日志函数
你：更新所有文件的版权信息为 2024
批量添加
你：给所有 JavaScript 函数添加 JSDoc 注释
你：为每个 HTML 文件添加 meta 标签
你：给所有 CSS 类添加注释说明
2.2.5 Git 操作（版本控制）
初始化 Git
你：初始化 git 仓库
Claude：我会运行 git init 命令...
查看状态
你：检查 git 状态
你：有哪些文件被修改了？
你：显示当前分支
提交代码
你：提交所有更改，提交信息是"添加首页功能"
Claude：我会执行：
git add .
git commit -m "添加首页功能"
查看历史
你：显示最近 5 次提交记录
你：查看上次提交改了什么
2.2.6 调试技巧
检查语法错误
你：检查代码是否有语法错误
你：这段代码有问题吗？
解释错误信息
你：这个错误是什么意思？
TypeError: Cannot read property 'name' of undefined
Claude：这个错误表示你试图访问一个未定义对象的 'name' 属性...
调试建议
你：如何调试这个登录功能？
Claude：建议按以下步骤调试：
1. 检查表单数据是否正确获取
2. 验证 API 请求是否发送成功
3. 查看响应数据格式
...
2.2.7 代码优化
请求代码审查
你：帮我审查这段代码，看看有什么可以改进的
Claude：我注意到以下几点：
1. 可以使用更简洁的语法
2. 建议添加错误处理
3. 变量命名可以更清晰
...
性能优化
你：这段代码运行很慢，能优化吗？
Claude：我发现了几个性能问题：
1. 循环中有重复计算
2. 可以使用缓存减少计算
...
代码重构
你：把这个函数拆分成更小的函数
你：用更现代的 JavaScript 语法重写这段代码
你：简化这个 if-else 逻辑
2.2.8 文档生成
生成 README
你：为这个项目生成一个 README 文件
Claude 会包含：
- 项目介绍
- 安装说明
- 使用方法
- 文件结构
生成注释
你：为这个函数添加详细注释
你：给这个类生成 JavaDocs 文档
你：解释这段复杂的算法
生成 API 文档
你：基于这些接口生成 API 文档
你：列出所有可用的函数和它们的参数
2.2.9 快捷操作技巧
连续操作
你：
1. 创建一个 dashboard.html 页面
2. 添加导航栏
3. 添加统计卡片
4. 应用蓝色主题
Claude：好的，我会按顺序完成这些任务...
条件操作
你：如果存在 config.js 就更新它，否则创建新的
Claude：我检查了，文件不存在，我会创建一个新的...
引用之前的内容
你：创建一个登录页面
[Claude 创建了登录页面]
你：用同样的风格创建一个注册页面
Claude：好的，我会使用和登录页面相同的设计风格...
2.2.10 进阶技巧
使用上下文
你：记住这个设计规范：
- 主色：#3498db
- 字体：Roboto
- 圆角：8px
Claude：好的，我记住了这些设计规范
你：用这个规范创建一个按钮组件
Claude：[使用指定的设计规范创建按钮]
多文件协作
你：创建一个用户管理模块，需要：
- user.html 展示页面
- user.js 业务逻辑
- user.css 样式
- 它们要互相配合工作
Claude：我会创建这三个文件，并确保它们正确关联...
模板和脚手架
你：创建一个 React 组件模板，以后我可以复用
Claude：[创建可复用的组件模板]
你：基于这个模板创建一个 Header 组件
Claude：[使用模板生成新组件]
2.2.11 避免常见错误
错误 1：操作太快
❌ 不好的做法：
你：创建 index.html
你：添加导航栏
你：添加页脚
你：修改颜色
[不等 Claude 完成就继续提要求]
✅ 好的做法：
你：创建 index.html
[等待 Claude 完成]
你：添加导航栏
[等待完成并检查]
你：添加页脚
...
错误 2：不检查结果
❌ 不好的做法：
Claude：已创建文件
你：[立即提下一个要求]
✅ 好的做法：
Claude：已创建文件
你：看一下 index.html 的内容
[检查确认]
你：很好，继续...
错误 3：描述模糊
❌ 不好的做法：
你：改一下样式
✅ 好的做法：
你：把按钮的背景色改成蓝色，字体大小改成 16px
2.2.12 高效协作模式
教学模式
你：能教我这段代码是怎么工作的吗？一步步解释
Claude：当然，让我详细解释：
第 1 行：定义函数...
第 2 行：检查参数...
...
探索模式
你：有哪些方式可以实现图片懒加载？
Claude：有几种常见方法：
1. Intersection Observer API
2. scroll 事件监听
3. 第三方库如 lazysizes
每种方法的优缺点是...
决策辅助
你：我应该用 Vue 还是 React 来做这个项目？
Claude：让我分析一下你的需求...
基于 [项目特点]，我建议...
因为...
2.3 实用技巧集锦
2.3.1 命令行 (CLI) 技巧
（1）将其视为 CLI 工具
从根本上理解 Claude Code 是一个命令行工具，具备所有 CLI 基本特性。
实践应用：
# 直接在终端运行
claude "帮我创建一个React组件"
# 在项目目录中运行
cd my-project
claude "分析项目结构并给出优化建议"
（2）一次性命令行工具参数
使用 -p 参数在命令行模式下运行。
示例：
# 使用 -p 参数传递提示
claude -p "重构 src/utils.js 文件"
什么时候用 -p ？
• 当你只想快速问一个问题，不需要连续对话时使用
• 当你想用脚本自动化处理代码时
注意什么？
• 必须手动把文件内容通过 cat 或管道 | 传给它，否则它看不到代码。
（3）与其他工具联接
将其他命令行工具bash/CLI工具连接到工作流。
实战示例：
# 与 git 结合
git diff | claude -p "分析这些代码变更"
# 与 npm 结合
npm test 2>&1 | claude -p "分析测试失败原因"
# 与 grep 结合
grep -r "TODO" . | claude -p "整理所有待办事项"
（4）使用管道输入
通过管道|将数据输入到 Claude Code 中。
管道操作示例：
# 处理命令输出
tree /f | claude -p "分析目录结构是否合理"
# 分析日志
cat error.log | claude -p "找出错误模式并给出解决方案"
# 多级管道
cat package.json | jq '.dependencies' | claude -p "检查依赖版本"
（5）运行多实例
可以同时运行多个 Claude Code 实例处理不同任务。
多实例应用：
# 终端1：处理前端
cd frontend && claude
# 终端2：处理后端
cd backend && claude
# 终端3：运行测试
claude -p "持续监控测试结果"
2.3.2 图像处理技巧
（1）拖拽粘贴图像
将图像文件直接拖入终端使用。
操作步骤：
1. 准备好图像文件（设计稿、截图等）
2. 直接拖拽到 Claude Code 终端
3. 描述你的需求
应用场景：
• 从 UI 设计稿生成代码
• 分析界面布局
• 复制现有界面设计
（2）从设计稿生成代码
粘贴设计稿图片，让 Claude Code 构建界面。
实践示例：
你：[粘贴设计稿截图]
请根据这个设计稿生成 React 组件代码
Claude：
我看到这是一个登录表单设计，包含：
- 邮箱输入框
- 密码输入框
- 记住我复选框
- 登录按钮
我将创建对应的 React 组件...
[生成代码]
（3）反馈并修改
根据当前状态，将其反馈给 Claude Code 进行迭代修改。
对话示例：
你：[粘贴当前界面截图]
按钮太小了，文字间距不够，整体需要更现代化
Claude：
我看到了当前界面，我将进行以下调整：
1. 增大按钮尺寸到 48px 高度
2. 增加行高到 1.6
3. 使用现代化的阴影效果
[修改代码]
2.3.3 集成与外部数据技巧
（1）集成MCP
方式一：修改配置文件
找到.claude.json文件，在文件中所需要添加项目，在mcpServers中添加mcp配置
配置示例：
{
"mcpServers": {
"mysql": {
"disabled": true,
"timeout": 60,
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"@f4ww4z/mcp-mysql-server"
],
"env": {
"MYSQL_HOST": "127.0.0.1",
"MYSQL_USER": "root",
"MYSQL_PASSWORD": "123456",
"MYSQL_DATABASE": "mall"
},
"type": "stdio"
}
}
}
方式二：通过命令增加mcp
claude mcp add pg-server /path/to/postgres-mcp "postgresql://user:pass@localhost:5432/mydb"
通过命令查看mcp服务
claude mcp list
管理MCP：
claude mcp list # 查看已配置的服务
claude mcp get <name> # 查看服务详情
claude mcp remove <name> # 删除服务
（2）连接数据库
使用示例：
你：查询ums_member_level表前三条数据
Claude：
[通过 MCP 连接数据库]
query (MCP)(sql: "SELECT * FROM ums_member_level LIMIT 3")
[返回查询结果]
2.3.4 CLAUDE.md 配置文件技巧
（1）理解其核心作用
CLAUDE.md 是一个在每次请求时都会加载的系统提示文件。
claude.md 的作用：
• 定义项目的上下文和约定
• 设置代码风格偏好
• 提供项目特定的知识
• 自动加载到每次对话中
（2）使用 /init 自动生成
在项目目录中运行 /init 命令，自动生成一份基于项目结构的 CLAUDE.md。
操作步骤：
cd my-project
claude
# 在 Claude Code 中执行
/init
自动生成的内容包括：
• 项目结构分析
• 技术栈识别
• 代码风格检测
• 常见约定
（3）用 # 动态更新
在对话中，使用 # 符号可以将指令直接添加到 CLAUDE.md。
动态更新示例：
你：# 所有 API 调用都要包含错误处理和重试逻辑
Claude：
已添加到 CLAUDE.md，我会在后续所有 API 相关的代码中遵循这个规则。
（4）设置全局配置
在用户主目录 ~/.CLAUDE/ 中创建 CLAUDE.md 以应用于所有项目。
全局配置示例：
# ~/.claude/CLAUDE.md
# 个人编码偏好
- 使用 TypeScript 严格模式
- 组件使用函数式风格
- 优先使用 async/await 而非 Promise.then()
- 所有函数都要有 JSDoc 注释
# 代码风格
- 使用 2 空格缩进
- 单引号优先
- 末尾加分号
（5）使用子目录配置
在子目录中添加 CLAUDE.md 应用于特定模块。
目录结构示例：
my-project/
├── claude.md # 项目全局配置
├── frontend/
│ └── claude.md # 前端特定配置
└── backend/
└── claude.md # 后端特定配置
前端 claude.md：
# Frontend Module
## 技术栈
- React 18
- Tailwind CSS
- React Router v6
## 组件约定
- 所有组件使用 TypeScript
- Props 定义为 interface
- 使用 React.FC 类型
后端 claude.md：
## 1. 业务逻辑规范
- 所有业务逻辑必须封装在 **Service 层**，Controller 不得写复杂逻辑。
- 公共逻辑提取到 `common` 模块或工具类，避免重复代码。
- 异常必须抛出自定义异常类，并通过全局异常处理器统一处理。
---
## 2. 代码风格
- 严格遵循 **Java 开发手册**（简化版即可）。
- 类、接口使用**帕斯卡命名**（例如，UserController、ProductService）。
- 变量、方法名使用 **驼峰命名法**
- 常量使用大写+下划线（例如 MAX_RETRIES、DEFAULT_TIMEOUT）。
- Controller 命名以 `*Controller` 结尾，Service 以 `*Service` 结尾，Mapper 以 `*Mapper` 结尾。
- DTO/VO 与 Entity 严格分离，不得在 Controller 中直接返回 Entity。
- 所有公共方法必须有 **Javadoc 注释**。
- 严禁使用 System.out.println 进行日志记录：要使用合适的日志记录框架。
---
## 3. 安全与合规
- 禁止在代码中硬编码密码、密钥等敏感信息，统一存放在配置中心。
- SQL 必须使用 **参数绑定**，禁止拼接 SQL 防止注入。
- 日志中严禁输出用户隐私信息（如手机号、身份证号、邮箱等）。
- 金额计算使用 BigDecimal，禁止 float / double。
-
---
## 4. 测试与质量
- 每个 Service 必须有单元测试，覆盖率不得低于 **80%**。
- 所有新增功能必须有对应的集成测试。
- 严格遵循 **代码 Review 流程**，不符合规则的代码不得合并。
（6）定期重载优化
经常性地优化和精炼你的 CLAUDE.md 文件，保持其具体性和高效性。
优化建议：
• 每月审查一次
• 删除过时的规则
• 添加新的最佳实践
• 保持简洁明了
2.3.5 定义斜杠命令技巧
（1）在指定文件夹中定义
在 .claude/commands 文件夹中创建文件来自定义自己的斜杠命令。
目录结构：
my-project/
└── .claude/
└── commands/
├── solve_issue.md
├── refactor.md
├── lint.md
└── review_pr.md
（2）为解决 GitHub 问题创建命令
创建一个 /solve_github_issue 类似的命令。
创建文件： .claude/commands/solve_issue.md
# Solve GitHub Issue
## 指令
分析 GitHub issue #{issue_number}，并提供解决方案：
1. 读取 issue 描述和讨论
2. 分析问题根源
3. 提出解决方案
4. 实现代码修复
5. 编写测试
6. 准备 PR 描述
## 参数
- {issue_number}: GitHub issue 编号
使用：
/solve_issue 123
（3）为重构创建命令
创建一个 /refactor 命令。
创建文件： .claude/commands/refactor.md
# Refactor Code
## 指令
对 {file_path} 进行代码重构：
1. 分析当前代码结构
2. 识别代码异味
3. 提出重构建议
4. 实施重构
5. 确保测试通过
6. 更新文档
## 重构原则
- 保持功能不变
- 提高可读性
- 减少重复
- 遵循 SOLID 原则
## 参数
- {file_path}: 要重构的文件路径
（4）为代码检查创建命令
创建一个 /lint命令。
创建文件： .claude/commands/lint.md
# Code Lint
## 指令
对 {target} 进行代码检查：
1. 运行 ESLint/Prettier
2. 检查类型错误
3. 识别潜在问题
4. 自动修复可修复的问题
5. 报告无法自动修复的问题
## 检查项
- 代码风格
- 类型安全
- 最佳实践
- 性能问题
## 参数
- {target}: 文件路径或目录（默认: .）
（5）为 PR 审查创建命令
创建一个 /review_pr 命令。
创建文件： .claude/commands/review_pr.md
# Review Pull Request
## 指令
审查 Pull Request #{pr_number}：
1. 读取 PR 描述和变更
2. 分析代码质量
3. 检查测试覆盖率
4. 识别潜在问题
5. 提供改进建议
6. 生成审查评论
## 审查重点
- 代码质量
- 安全性
- 性能影响
- 向后兼容性
- 文档完整性
## 参数
- {pr_number}: Pull Request 编号
（6）向命令传递参数
你的自定义斜杠命令是提示模板，可以接收命令行参数。
参数语法：
/command_name arg1 arg2 arg3
示例：
/refactor src/components/Header.tsx
/solve_issue 456
/review_pr 789
/lint src/
2.3.6、UI 与工作流技巧
（1）使用 Tab 补全
用 Tab 键自动补全文件和目录名，以提供更精准的上下文。
Tab 补全示例：
你：请优化 @src/com[TAB]
→ src/main/resources/com/
好处：
• 避免路径错误
• 提供精确上下文
• 加快输入速度
（2）果断按 Esc 中断
当你看到 Claude Code 的输出偏离预期时，立即按 Esc 键打断它。
使用场景：
• Claude code有非常强的自主修复能力。它会运行命令 -> 发现失败 -> 读取源码 -> 修改代码 -> 再次运行命令。需要监控这个循环，它陷入死胡同时使用
• 生成的代码方向错误
• 误解了你的意图
• 开始生成不需要的内容
操作流程：
1. 发现输出偏离预期
2. 立即按 Esc
3. 重新澄清需求
4. 继续正确的方向
三、实战应用
案例一：原始需求生成需求设计文档类型
场景：由原始需求，生成更规范的需求文档
初始交互prompt：
原始需求：开发一个用户管理后台系统，核心功能包含用户的增删改查，
分析需求要点以及识别缺失的必要信息，生成一份规范的需求文档
选择技术栈交互prompt:
前端vue后端java，需要权限管理，逻辑删除
回答待解决问题交互prompt:
1、唯一 2、启用 3、规则自定 4、需要 5、日志保留一周 6、暂不对接 7、访问量100
确认生成需求文档交互prompt:
没有模板，可以按照当前生成的文档，帮我在当前目录写入md文件
案例二：前端开发类型
场景：根据原型图，完成城市驾驶舱前端界面开发
方式一：直接使用导出的原型图
Prompt：
参考image.png驾驶舱原型图，帮我在当前目录新建vue前端项目，组件数据可以先使用模拟数据，生成页面的全部组件
原型图：
生成网页前端：
视频：
方式二：使用mastergo原型图链接
首先在mastergo设计好原型图，配置好mastergo的mcp信息 prompt：
https://mastergo.com/prototyping/178574195114196?fileOpenFrom=project&page_id=M&layer_id=1%3A0 还原选中的UI设计稿，要样式正确
前端链接mastergo使用claude Code_哔哩哔哩_bilibili
案例三：前后端分离开发类型
场景：开发或搭建一个初始的用户管理系统
Prompt:
开发一个用户管理系统，后端使用flask+sqllite,前端使用vue，需要实现用户的增加、删除、修改用户名，重置密码能力，并具备分页功能
追加prompt：
新增一个“按用户名搜索”的条件查询功能；
截图：
视频：
使用 Claude Code 实现用户管理系统_哔哩哔哩_bilibili
案例四：代码审核并修复类型
场景：审核商城后端服务代码存在数据计算问题，并自主修改为正确规范的代码
prompt：
审核当前项目中商品相关代码是否符合数据计算规范，给出审核报告并修改为正确代码
截图：
视频：
