AI 开发效率提升指南

本文档总结了使用 Claude Code 进行高效开发的最佳实践，包括 Skills 使用和提示词技巧。

Claude Code Skills 使用

什么是 Skills？

Skills 是 Claude Code 的可复用提示词模块，类似于函数封装。通过 /skill-name 语法快速调用预设的最佳实践指南。

查看可用 Skills

bash

# 查看所有可用的 skills
/skills

常用 Skills 列表

Vue 开发相关

Skill 名称	用途	何时使用
`vue-best-practices`	Vue 3 最佳实践	所有 Vue/JS/TS/Vite/Nuxt 相关工作
`vue-development-guides`	Vue 开发指南	开发、重构或审查 Vue.js 项目
`vue-testing-best-practices`	Vue 测试最佳实践	编写 Vue 测试用例
`vue-router-best-practices`	Vue Router 4 模式	使用 Vue Router 开发
`vue-pinia-best-practices`	Pinia 状态管理	使用 Pinia 进行状态管理
`create-adaptable-composable`	创建可适配 Composable	创建可复用的 Vue 组合式函数

Git 工作流相关

Skill 名称	用途	何时使用
`zcf:git-commit`	自动生成 commit 消息	提交代码
`zcf:git-rollback`	交互式回滚到历史版本	需要回退代码
`zcf:git-cleanBranches`	清理已合并/过期分支	清理 Git 分支
`zcf:git-worktree`	管理 Git Worktree	并行开发多个分支

项目初始化相关

Skill 名称	用途	何时使用
`zcf:init-project`	初始化项目 AI 上下文	新项目首次使用 Claude
`zcf:feat`	功能开发完整流程	开发新功能
`zcf:workflow`	六阶段开发工作流	复杂项目规划

使用示例

bash

# 1. Vue 开发时自动应用最佳实践
/vue-best-practices
帮我创建一个用户列表组件

# 2. 提交代码时自动生成规范的 commit 消息
/zcf:git-commit

# 3. 新项目初始化
/zcf:init-project

# 4. 开发新功能
/zcf:feat
实现一个带搜索和分页的数据表格

技巧：自动加载 Skills

某些 Skills 会自动加载，无需手动调用：

Vue 文件 (.vue) → 自动加载 vue-best-practices
路由文件 → 自动加载 vue-router-best-practices
Store 文件 → 自动加载 vue-pinia-best-practices
测试文件 → 自动加载 vue-testing-best-practices

高效提示词原则

核心 P.A.C.T 原则

P - Precise (精确)：明确指定你要什么，不要模糊
A - Actionable (可执行)：提供足够上下文让 AI 能执行
C - Contextual (有上下文)：提供代码、错误信息、环境信息
T - Testable (可验证)：结果可验证，有明确的验收标准

好的提示词特征

markdown

## 背景
项目使用 Vue 3 + Vite + Element Plus，需要创建用户管理页面

## 需求
1. 用户列表展示（表格）
2. 支持分页（每页10条）
3. 支持搜索（用户名、邮箱）
4. 支持删除操作

## 技术要求
- 使用 <script setup> 语法
- 使用 Composition API
- 复用 src/components/Table.vue 和 Pagination.vue
- 遵循项目现有代码风格

## 注意事项
- 不要修改无关文件
- 添加必要的代码注释
- 处理加载状态和错误提示

差的提示词特征

markdown

帮我写个用户列表  # 太模糊，缺少上下文
写个页面  # 没有具体需求
修复这个bug  # 没有代码和错误信息

场景化提示词模板

场景 1：创建新组件

markdown

## 任务
创建一个 [组件名称] 组件

## 组件功能
1. 功能点1
2. 功能点2
3. 功能点3

## 技术要求
- 框架：Vue 3 + Composition API
- 语法：<script setup>
- 样式：SCSS + TailwindCSS
- 类型：TypeScript

## 交互需求
- Props: 列出需要的属性和类型
- Emits: 列出需要触发的事件
- Slots: 列出插槽（如果有）

## 代码规范
- 遵循项目现有代码风格
- 添加必要的注释
- 组件命名使用 PascalCase
- 文件位置：src/components/ 或 src/views/[目录名]/

## 参考
- 参考组件：[相关组件路径]
- UI设计图：[如果有]

使用示例：

markdown

## 任务
创建一个用户卡片组件

## 组件功能
1. 展示用户头像、姓名、职位
2. 显示关注按钮
3. 点击卡片跳转到用户详情

## 技术要求
- 框架：Vue 3 + Composition API
- 语法：<script setup>
- 样式：SCSS，使用 scoped

## 交互需求
- Props:
  - user: Object (必填，用户信息)
  - size: String (可选，卡片尺寸: small/medium/large，默认 medium)
- Emits:
  - click: 点击卡片时触发
  - follow: 点击关注按钮时触发

## 代码规范
- 遵循项目现有代码风格
- 添加必要的注释
- 组件命名使用 PascalCase
- 文件位置：src/components/UserCard.vue

场景 2：修复 Bug

markdown

## 问题描述
[简要描述遇到的问题]

## 错误信息

[粘贴完整的错误堆栈信息]


## 相关代码
\`\`\`[语言]
[粘贴出问题的代码片段，包含足够的上下文]
\`\`\`

## 文件路径
- 出错文件：[文件路径:行号]
- 相关文件：[相关文件路径]

## 期望行为
[描述你期望的正确行为]

## 复现步骤
1. 步骤1
2. 步骤2
3. 步骤3

## 环境信息
- Node版本：
- 包管理器：
- 浏览器（如果是前端问题）：

## 注意事项
1. 仅修复此问题，不做其他改动
2. 如果需要修改多个文件，请先说明改动范围
3. 保持代码风格一致
4. 添加必要的错误处理

使用示例：

markdown

## 问题描述
用户列表页面在快速切换分页时会报错

## 错误信息
\`\`\`
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
  at UserList.vue:45:18
\`\`\`

## 相关代码
\`\`\`vue
<template>
  <div v-for="user in userList" :key="user.id">
    {{ user.name }}
  </div>
</template>

<script setup>
const userList = ref([]);
// ... 代码省略
\`\`\`

## 文件路径
- 出错文件：src/views/user/index.vue:45

## 期望行为
分页切换时不应该报错，应该显示加载状态或保持当前数据

## 复现步骤
1. 打开用户列表页面
2. 快速连续点击下一页3次
3. 观察控制台报错

## 注意事项
1. 仅修复此问题，不做其他改动
2. 添加加载状态处理
3. 保持代码风格一致

场景 3：代码重构

markdown

## 重构目标
[说明要重构什么，为什么]

## 当前代码
\`\`\`[语言]
[粘贴需要重构的代码]
\`\`\`

## 存在的问题
1. 问题1
2. 问题2
3. 问题3

## 重构要求
1. 提取可复用逻辑到 composables/utils
2. 遵循 SOLID 原则
3. 添加类型定义
4. 优化性能（如果适用）
5. 保持功能不变

## 优先级
- [ ] 高优先级（必须）
- [ ] 中优先级（建议）
- [ ] 低优先级（可选）

## 注意事项
1. 保持向后兼容
2. 不影响其他功能
3. 添加必要的注释
4. 更新相关类型定义

使用示例：

markdown

## 重构目标
重构用户列表页面的数据获取逻辑，提取可复用的分页逻辑

## 当前代码
\`\`\`vue
<script setup>
const userList = ref([]);
const loading = ref(false);
const pagination = reactive({ page: 1, pageSize: 10, total: 0 });

async function loadUserList() {
  loading.value = true;
  const res = await getUserList({
    page: pagination.page,
    pageSize: pagination.pageSize
  });
  userList.value = res.list;
  pagination.total = res.total;
  loading.value = false;
}
</script>
\`\`\`

## 存在的问题
1. 分页逻辑在多个页面重复
2. 加载状态管理分散
3. 错误处理不统一

## 重构要求
1. 提取分页逻辑到 composable (usePagination)
2. 支持自定义 API 函数
3. 统一加载状态和错误处理
4. 支持自动加载和手动加载
5. 保持功能不变

## 注意事项
1. 保持向后兼容
2. TypeScript 类型安全
3. 添加使用示例注释

场景 4：代码审查

markdown

## 审查范围
- 文件：[文件路径或目录]
- 重点：[性能/安全/可维护性/最佳实践]

## 审查维度
1. **代码质量**：可读性、可维护性
2. **性能**：是否有性能问题
3. **安全**：是否有安全隐患
4. **最佳实践**：是否符合框架/语言最佳实践
5. **类型安全**：TypeScript 类型是否正确

## 输出要求
1. 列出发现的问题（按优先级排序）
2. 每个问题说明：
   - 问题描述
   - 影响范围
   - 改进建议
   - 示例代码（如果适用）
3. 总结建议

## 代码
\`\`\`[语言]
[粘贴需要审查的代码]
\`\`\`

使用示例：

markdown

## 审查范围
- 文件：src/views/user/index.vue
- 重点：性能和可维护性

## 审查维度
1. **代码质量**：可读性、可维护性
2. **性能**：渲染性能、内存使用
3. **最佳实践**：Vue 3 最佳实践

## 代码
\`\`\`vue
<!-- 粘贴代码 -->
\`\`\`

场景 5：编写测试

markdown

## 测试任务
为 [组件/功能] 编写单元测试

## 待测代码
\`\`\`[语言]
[粘贴待测代码]
\`\`\`

## 测试框架
- 测试库：Vitest / Jest / others
- 组件测试：Vue Test Utils
- E2E：Playwright / Cypress

## 测试覆盖要求
1. **正常场景**：
   - 场景1
   - 场景2

2. **边界情况**：
   - 空值处理
   - 极值处理
   - 异常处理

3. **用户交互**：
   - 点击事件
   - 表单提交
   - 其他交互

## 输出要求
1. 完整的测试代码
2. 测试文件路径
3. 覆盖率目标（如果适用）
4. Mock 数据示例

## 注意事项
1. 遵循测试最佳实践
2. 使用描述性的测试名称
3. 保持测试独立和可重复
4. 适当的 Mock 和 Stub

场景 6：性能优化

markdown

## 优化目标
[描述要优化的性能问题]

## 当前问题
1. 问题表现：
2. 性能指标（如果有）：
3. 影响范围：

## 相关代码
\`\`\`[语言]
[粘贴相关代码]
\`\`\`

## 优化要求
1. 识别性能瓶颈
2. 提供优化方案
3. 实施优化代码
4. 验证优化效果

## 技术方向
- [ ] 代码分割
- [ ] 懒加载
- [ ] 虚拟滚动
- [ ] 缓存优化
- [ ] 算法优化
- [ ] 其他

## 注意事项
1. 保持功能不变
2. 不过早优化
3. 有性能数据支持
4. 添加优化说明注释

场景 7：学习新技术

markdown

## 学习主题
[要学习的技术/概念]

## 当前水平
- [ ] 完全不了解
- [ ] 有基本概念
- [ ] 有使用经验
- [ ] 想深入了解

## 学习目标
1. 理解核心概念
2. 了解使用场景
3. 掌握最佳实践
4. 看到实际案例

## 输出要求
1. 概念解释（通俗易懂）
2. 使用场景（何时使用）
3. 代码示例（可以直接运行）
4. 最佳实践（注意事项）
5. 常见问题（FAQ）
6. 进阶资源（推荐阅读）

## 项目上下文
- 框架：Vue/React/其他
- 使用场景：[具体场景]
- 相关代码：[如果有]

使用示例：

markdown

## 学习主题
Vue 3 的 Teleport 组件

## 当前水平
- [x] 有基本概念
- [ ] 想深入了解

## 学习目标
1. 理解 Teleport 的作用
2. 了解适用场景
3. 掌握使用方法
4. 看到实际案例

## 项目上下文
- 框架：Vue 3
- 使用场景：需要实现一个全局的模态框组件

常见问题与技巧

Q1: 如何让 AI 更好理解项目？

技巧 1：使用 CLAUDE.md 在项目根目录创建 CLAUDE.md 文件，描述：

项目架构和技术栈
常用命令
代码规范
特殊约定

技巧 2：提供上下文

markdown

## 项目背景
这是一个 Vue 3 + Vite 的后台管理系统

## 相关文件
- 用户API: src/api/user.js
- 表格组件: src/components/Table.vue
- 路由配置: src/router/index.js

## 代码规范
- 使用 Composition API + <script setup>
- TypeScript 严格模式
- SCSS + TailwindCSS

Q2: 如何避免 AI 修改无关代码？

markdown

## 明确约束
1. 仅修改指定的文件/函数
2. 不要修改其他文件
3. 不要重构无关代码
4. 保持现有功能不变

## 修改范围
- 只修改：[具体文件和位置]
- 不要动：[列出不要改的部分]

Q3: 如何获得更准确的代码？

技巧 1：提供示例代码

markdown

## 参考代码
这是我期望的代码风格：
\`\`\`vue
<script setup>
// 示例代码
</script>
\`\`\`

技巧 2：指定框架版本

markdown

## 技术栈
- Vue: 3.5.x
- Vite: 6.x
- Element Plus: 2.x

技巧 3：明确技术要求

markdown

## 技术约束
1. 必须使用 TypeScript
2. 不使用第三方库（纯原生实现）
3. 兼容性要求：Chrome 90+

Q4: 如何处理复杂任务？

技巧：拆解任务

markdown

## 任务拆解
这是一个复杂任务，请按以下步骤执行：

### 阶段 1：分析
1. 分析需求
2. 识别技术难点
3. 提出实现方案

### 阶段 2：设计
1. 设计数据结构
2. 设计组件结构
3. 设计接口定义

### 阶段 3：实现
1. 先实现核心功能
2. 再实现辅助功能
3. 最后添加细节优化

### 阶段 4：验证
1. 功能测试
2. 边界测试
3. 性能检查

每个阶段完成后，等待我确认再继续下一阶段。

Q5: 如何提高代码质量？

提示词模板：

markdown

## 代码质量要求

### 可读性
- 使用有意义的变量命名
- 添加必要的注释
- 函数职责单一
- 避免深层嵌套

### 可维护性
- 遵循 DRY 原则
- 遵循 SOLID 原则
- 模块化设计
- 易于测试

### 性能
- 避免不必要的渲染
- 合理使用缓存
- 懒加载资源
- 优化列表渲染

### 安全
- 输入验证
- XSS 防护
- CSRF 防护
- 敏感信息保护

高级技巧

技巧 1：渐进式提示

对于复杂任务，使用多轮对话逐步深化：

markdown

# 第 1 轮：理解需求
请帮我理解这个需求，分析技术要点

# 第 2 轮：设计方案
基于分析结果，设计实现方案

# 第 3 轮：编码实现
按方案编写代码

# 第 4 轮：代码优化
审查并优化代码

技巧 2：思维链提示

要求 AI 展示思考过程：

markdown

## 要求
请使用思维链方式回答：
1. 先分析问题
2. 提出多种解决方案
3. 比较方案优劣
4. 给出推荐方案
5. 实现代码

技巧 3：角色扮演

markdown

## 角色
你是一位有 10 年经验的 Vue.js 架构师

## 任务
帮我审查这段代码，从架构角度给出建议

## 代码
\`\`\`vue
[代码]
\`\`\`

技巧 4：少样本学习

提供多个示例来引导 AI：

markdown

## 参考示例

### 示例 1：用户列表组件
\`\`\`vue
<!-- 优秀的示例代码 -->
\`\`\`

### 示例 2：商品列表组件
\`\`\`vue
<!-- 另一个示例 -->
\`\`\`

## 任务
参照以上示例，创建订单列表组件

附录：通用提示词前缀

可以在任何提示词前加上这些前缀：

markdown

# 开发模式
你是一位资深的 [技术栈] 开发工程师，帮助我完成以下任务：

# 审查模式
你是一位代码审查专家，请审查以下代码：

# 学习模式
你是一位技术导师，请用通俗的语言解释：

# 调试模式
你是一位调试专家，帮我分析和修复以下问题：

# 重构模式
你是一位重构专家，帮我优化以下代码：

总结

高效提示词检查清单

[ ] 明确任务：清楚说明要做什么
[ ] 提供上下文：项目背景、技术栈、相关代码
[ ] 具体要求：技术要求、代码规范、注意事项
[ ] 输出格式：期望的输出格式和结构
[ ] 约束条件：不要做什么、限制条件
[ ] 验收标准：如何判断结果是否正确

最佳实践

使用 Skills：优先调用相关 Skill 获得最佳实践
结构化提示：使用标题、列表、代码块组织提示词
提供上下文：让 AI 了解项目背景和代码风格
明确约束：清晰说明不要做什么
分阶段执行：复杂任务拆解为多个阶段
迭代优化：根据结果调整提示词

AI 开发效率提升指南 ​

目录 ​

Claude Code Skills 使用 ​

什么是 Skills？ ​

查看可用 Skills ​

常用 Skills 列表 ​

Vue 开发相关 ​

Git 工作流相关 ​

项目初始化相关 ​

使用示例 ​

技巧：自动加载 Skills ​

高效提示词原则 ​

核心 P.A.C.T 原则 ​

好的提示词特征 ​

差的提示词特征 ​

场景化提示词模板 ​

场景 1：创建新组件 ​

场景 2：修复 Bug ​

场景 3：代码重构 ​

场景 4：代码审查 ​

场景 5：编写测试 ​

场景 6：性能优化 ​

场景 7：学习新技术 ​

常见问题与技巧 ​

Q1: 如何让 AI 更好理解项目？ ​

Q2: 如何避免 AI 修改无关代码？ ​

Q3: 如何获得更准确的代码？ ​

Q4: 如何处理复杂任务？ ​

Q5: 如何提高代码质量？ ​

高级技巧 ​

技巧 1：渐进式提示 ​

技巧 2：思维链提示 ​

技巧 3：角色扮演 ​

技巧 4：少样本学习 ​

附录：通用提示词前缀 ​

总结 ​

高效提示词检查清单 ​

最佳实践 ​

AI 开发效率提升指南

目录

Claude Code Skills 使用

什么是 Skills？

查看可用 Skills

常用 Skills 列表

Vue 开发相关

Git 工作流相关

项目初始化相关

使用示例

技巧：自动加载 Skills

高效提示词原则

核心 P.A.C.T 原则

好的提示词特征

差的提示词特征

场景化提示词模板

场景 1：创建新组件

场景 2：修复 Bug

场景 3：代码重构

场景 4：代码审查

场景 5：编写测试

场景 6：性能优化

场景 7：学习新技术

常见问题与技巧

Q1: 如何让 AI 更好理解项目？

Q2: 如何避免 AI 修改无关代码？

Q3: 如何获得更准确的代码？

Q4: 如何处理复杂任务？

Q5: 如何提高代码质量？

高级技巧

技巧 1：渐进式提示

技巧 2：思维链提示

技巧 3：角色扮演

技巧 4：少样本学习

附录：通用提示词前缀

总结

高效提示词检查清单

最佳实践