Prompt 指南
提示（Prompt）是您输入给大模型（LLM）的文本信息，用于明确地告诉模型您想要解决的问题或完成的任务，也是大语言模型理解用户需求并生成相关、准确回答或内容的基础。为了帮助您更高效地使用 LLM，本教程为您提供一系列实用的技巧，帮助您设计和优化 Prompt。
提示词设计
编写高质量的提示词是获得理想结果的关键。以下原则将帮助您构建更有效的提示词。
1. 明确且具体
清楚地说明您希望 YouCode 完成什么任务，避免模糊不清的描述。
| ❌ 不好的示例 | ✅ 好的示例 |
|---|---|
| 修复代码。 | 修复 calculateTotal 函数中导致返回错误结果的 bug。 |
| 优化性能。 | 优化 ProductList 组件的渲染性能，减少不必要的重渲染。 |
| 添加功能。 | 在用户登录页面添加"记住我"功能，使用 localStorage 保存登录状态。 |
2. 提供上下文信息
使用 上下文引用 来指定相关的文件、文件夹或问题。提供充足的背景信息可以帮助模型更准确地理解您的需求。
| ❌ 不好的示例 | ✅ 好的示例 |
|---|---|
| 重构这个函数。 | @/src/utils.ts 重构 calculateTotal 函数，使用 async/await 替代 Promise 链式调用。 |
| 修复错误。 | @problems 修复当前文件中的所有类型错误。 |
| 创建新组件。 | 在 @/src/components/ 目录下创建一个新的 UserCard 组件，参考 @/src/components/ProductCard.tsx 的结构。 |
3. 指定输出格式
如果您需要特定格式的输出（例如 JSON、Markdown、代码注释等），请在提示词中明确说明。
示例：
列出五个提高代码质量的最佳实践，每个实践用 Markdown 列表格式呈现，并包含简要说明。
4. 分步骤拆解任务
将复杂的任务分解为更小的、定义明确的步骤。这样可以让模型更好地理解任务，并逐步完成。
示例：
我需要创建一个用户注册功能：
1. 首先，创建用户数据模型和数据库表
2. 然后，实现用户注册的后端 API 接口
3. 最后，创建前端注册表单组件
5. 提供示例
如果您有特定的编码风格或模式，提供示例可以帮助模型更好地理解您的期望。
示例：
创建一个新的 React 组件，遵循以下代码风格：
// 示例风格
export const ExampleComponent: React.FC<Props> = ({ title, onClose }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="example">
{/* 组件内容 */}
</div>
);
};
6. 使用结构化提示词框架
采用"角色-任务-约束-示例"的结构化框架可以显著提高提示词的有效性：
示例：
角色：你是一位资深的前端开发工程师
任务：优化这个 React 组件的性能
约束：
- 使用 React.memo 和 useMemo 进行优化
- 保持代码可读性
- 添加必要的注释说明优化点
示例输出格式：
// 优化前的问题：...
// 优化方案：...
提示词优化
1. 采用"思考-计划-执行"流程
引导 YouCode 通过有条理的流程完成任务，可以获得更好的结果：
第一步：分析
@/src/components/UserProfile.tsx 分析这个组件存在的性能问题和可优化的地方。
第二步：规划
基于上述分析，制定详细的优化方案和实施步骤。
第三步：执行
按照制定的方案逐步实现优化。
第四步：验证
检查优化后的代码，确保功能正常且性能有所提升。
2. 处理模糊需求
当您的需求不够明确时，YouCode 可能会：
- 做出假设：根据最佳猜测继续执行，这可能不是您想要的结果
- 询问跟进问题：使用
ask_followup_question工具来澄清您的请求
为了避免不必要的来回沟通，建议从一开始就提供清晰具体的指令。
对比示例：
| ❌ 模糊不清 | ✅ 清晰具体 |
|---|---|
| |
| |
| |
3. 使用自定义指令
您可以通过自定义指令来持久化地定制 YouCode 的行为。有两种类型的自定义指令：
- 全局自定义指令：适用于所有模式
- 模式专属自定义指令：仅适用于特定模式（如 Code、Architect、Ask、Debug 或自定义模式）
自定义指令会被添加到系统提示词中，为 AI 模型提供持久的指导。您可以使用它们来：
- 强制执行代码风格规范
- 指定首选的库或框架
- 定义项目特定的约定
- 调整 YouCode 的语气或个性
详见 自定义指令 部分。
4. 提供反馈和迭代
如果 YouCode 没有产生预期的结果，您可以通过以下方式提供反馈：
拒绝操作
当 YouCode 提议您不想要的操作时，点击"拒绝"按钮。
解释原因
拒绝时，解释为什么您要拒绝该操作。这有助于 YouCode 从错误中学习。
重新表述请求
尝试改写您的初始任务或提供更具体的说明。
手动修正
如果只有一些小问题，您也可以在接受更改之前直接修改代码。
不要害怕迭代优化您的提示词，通常需要几次尝试才能获得最佳结果。
提示词示例
示例 1：代码重构
提示词：
@/src/utils/dataProcessor.ts
重构 `processUserData` 函数：
1. 将函数拆分为更小的、单一职责的函数
2. 添加类型注解
3. 使用现代 ES6+ 语法
4. 添加错误处理
5. 保持向后兼容性
示例 2：Bug 修复
提示词：
@problems
修复当前文件中的所有错误和警告。对于每个问题：
1. 说明问题的根本原因
2. 实施修复方案
3. 如果可能，添加单元测试防止回归
示例 3：新功能开发
提示词：
创建一个新的 React 组件 `SearchBar.tsx`：
功能要求：
- 支持实时搜索（输入时触发搜索）
- 使用 debounce 优化性能（300ms 延迟）
- 显示搜索结果的加载状态
- 支持键盘导航（上下箭头选择，Enter 确认）
技术栈：
- TypeScript
- React Hooks
- 使用 lodash 的 debounce 函数
代码风格：
- 函数式组件
- 提取自定义 Hook 来处理搜索逻辑
- 添加必要的注释和类型定义
示例 4：代码解释
提示词：
@/src/algorithms/sorting.ts
解释 `quickSort` 函数的工作原理：
1. 用通俗易懂的语言说明算法思路
2. 逐行解释关键代码的作用
3. 说明时间和空间复杂度
4. 举一个简单的例子演示排序过程
示例 5：测试编写
提示词：
@/src/services/userService.ts
为 `UserService` 类编写全面的单元测试：
- 使用 Jest 测试框架
- 测试所有公共方法
- 包含正常情况和边界情况
- Mock 外部依赖（数据库、API 调用）
- 测试覆盖率目标 90% 以上
示例 6：代码审查
提示词：
@/src/components/Dashboard.tsx
对这个组件进行代码审查，关注以下方面：
1. 性能问题（不必要的重渲染、内存泄漏等）
2. 代码质量（可读性、可维护性）
3. 最佳实践遵循情况
4. 潜在的 bug 或安全问题
5. 可以改进的地方
对于每个发现的问题，提供：
- 问题描述
- 严重程度（高/中/低）
- 具体的改进建议
示例 7：文档生成
提示词：
@/src/utils/apiClient.ts
为这个文件生成详细的 API 文档：
- 使用 JSDoc 格式
- 为每个函数添加说明、参数、返回值和示例
- 说明可能抛出的异常
- 添加使用示例
文档应该清晰明了，适合团队其他成员阅读。
示例 8：性能优化
提示词：
@/src/pages/ProductList.tsx
这个页面加载和渲染很慢，需要进行性能优化：
当前问题：
- 首次加载时间 > 3 秒
- 滚动时有明显卡顿
- 列表有 1000+ 项
优化目标：
- 首次加载时间 < 1 秒
- 滚动流畅（60fps）
请实施以下优化：
1. 实现虚拟滚动（推荐使用 react-window）
2. 图片懒加载
3. 组件代码分割
4. 使用 React.memo 和 useMemo 优化重渲染
5. 优化状态管理，避免不必要的更新
常见提示词对比
以下是更多实际场景中的提示词对比，帮助您快速识别和避免常见错误：
代码修复类
| ❌ 不好的提示词 | ✅ 好的提示词 | 说明 |
|---|---|---|
| 这个有问题，帮我看看 | @/src/api/user.ts 修复第 45 行的类型错误：Promise<User> 应该是 Promise<User[]> | 明确指出问题位置和具体错误 |
| 代码跑不了 | @problems 解决运行时错误："Cannot read property 'map' of undefined"，发生在 UserList 组件中 | 提供具体的错误信息 |
| 修复所有 bug | 修复 @/src/components/Form.tsx 中的表单验证问题：1) 邮箱格式验证失效 2) 提交按钮重复点击 | 列出具体需要修复的问题 |
代码优化类
| ❌ 不好的提示词 | ✅ 好的提示词 | 说明 |
|---|---|---|
| 让代码更快 | 优化 @/src/utils/search.ts 中的搜索算法，当前处理 10000 条数据需要 5 秒，目标降低到 1 秒以内 | 提供性能基线和目标 |
| 重构代码 | 重构 @/src/services/payment.ts：使用设计模式改进可扩展性，支持添加新的支付方式 | 说明重构的具体目标 |
| 代码太乱了 | 清理 @/src/legacy/oldModule.ts：1) 移除未使用的代码 2) 统一命名规范 3) 拆分大函数 | 明确具体的清理任务 |
功能开发类
| ❌ 不好的提示词 | ✅ 好的提示词 | 说明 |
|---|---|---|
| 加个按钮 | 在 @/src/components/Header.tsx 中添加"导出 PDF"按钮，点击后调用 /api/export 接口，下载生成的 PDF 文件 | 说明按钮的位置和具体功能 |
| 实现用户功能 | 实现用户权限管理功能：1) 创建角色管理页面 2) 支持为用户分配角色 3) 实现基于角色的路由守卫 | 拆解功能为具体步骤 |
| 写个表单 | 创建订单编辑表单，包含：产品选择(下拉框)、数量(数字输入)、备注(文本域)，使用 React Hook Form + Yup 验证 | 详细说明表单字段和技术栈 |
代码理解类
| ❌ 不好的提示词 | ✅ 好的提示词 | 说明 |
|---|---|---|
| 这是干嘛的 | 解释 @/src/hooks/useDebounce.ts 的实现原理和使用场景 | 明确想了解的内容 |
| 帮我看看这段代码 | 分析 @/src/algorithms/recommend.ts 的推荐算法逻辑，说明输入输出和关键步骤 | 指定分析的重点 |
| 文档在哪 | 查看 @/src/services/apiClient.ts 的代码注释和类型定义，总结 API 客户端的使用方法 | 明确要查找的信息类型 |
测试相关类
| ❌ 不好的提示词 | ✅ 好的提示词 | 说明 |
|---|---|---|
| 写测试 | 为 @/src/utils/validator.ts 中的 validateEmail 函数编写单元测试，包含：有效邮箱、无效格式、空值、特殊字符等场景 | 明确测试范围和用例 |
| 测试不通过 | @/tests/user.test.ts 中的 "should create user" 测试失败，错误信息是 "Expected 201, received 400"，请分析原因并修复 | 提供具体的失败信息 |
| 加个测试 | 为 @/src/components/LoginForm.tsx 添加集成测试：模拟用户输入、点击登录、验证 API 调用和页面跳转 | 说明测试的完整流程 |
文档注释类
| ❌ 不好的提示词 | ✅ 好的提示词 | 说明 |
|---|---|---|
| 加注释 | 为 @/src/core/engine.ts 添加详细的 JSDoc 注释，包括类说明、方法参数、返回值、使用示例 | 指定注释的格式和内容 |
| 写文档 | 为 @/src/api/ 目录下的所有 API 接口生成 Markdown 文档，包含：端点、参数、响应格式、示例代码 | 明确文档的结构和范围 |
| 说明用法 | 在 @/src/components/DataTable.tsx 顶部添加使用说明：props 定义、基本用法、高级配置示例 | 指定说明的位置和内容 |
最佳实践总结
通过遵循这些提示词设计和优化技巧，您可以充分发挥 YouCode 的能力：
✅ 清晰明确：使用具体的语言描述任务
✅ 提供上下文：利用 @ 引用相关文件和资源
✅ 分步执行：将复杂任务拆解为小步骤
✅ 指定格式：明确输出的期望格式
✅ 提供示例：用例子展示期望的结果
✅ 结构化表达：使用"角色-任务-约束"框架
✅ 持续迭代：根据结果不断优化提示词
✅ 善用工具：利用自定义指令和模式特性
核心原则
从模糊到精确：将"修复代码"改为"修复
calculateTotal函数中的空指针异常"
从泛化到具体：将"优化性能"改为"使用虚拟滚动优化 1000+ 列表项的渲染性能"
从单一到结构：将"重构"改为"重构分为三步：1) 提取函数 2) 添加类型 3) 优化逻辑"
记住，编写好的提示词是一个需要实践和迭代的过程。随着您对 YouCode 的了解加深，您将能够更有效地与 AI 协作，提高开发效率。