提示词工程基础

## 什么是提示词工程？ 提示词工程（Prompt Engineering）是与 AI 交互的核心技能。好的提示词能让 AI 准确理解你的需求，生成高质量的代码；而模糊的提示词则可能导致 AI 产出不符合预期的结果。 ## 提示词的基本结构 一个高质量的提示词通常包含以下几个部分： ### 1. 角色设定 告诉 AI 它应该扮演什么角色： ``` 你是一个经验丰富的 React 开发者，精通 TypeScript 和 Next.js。 ``` ### 2. 上下文描述 提供必要的背景信息： ``` 我正在开发一个电商网站，使用 Next.js 15 + TypeScript + Tailwind CSS。 项目使用 App Router 和 Server Components。 ``` ### 3. 具体任务 清晰描述你想要的结果： ``` 创建一个商品列表页面，要求： - 使用 Server Component 获取数据 - 支持分页，每页显示 12 个商品 - 商品卡片包含图片、名称、价格和评分 - 响应式布局，移动端单列，桌面端三列 ``` ### 4. 约束条件 说明限制和偏好： ``` 注意事项： - 不要使用 any 类型 - 图片使用 next/image 组件 - 价格显示人民币格式 - 评分使用星级组件 ``` ## 常用提示词模式 ### CRISP 模式 CRISP 是一种结构化的提示词编写方法： - **C**ontext（上下文）：项目背景和技术栈 - **R**ole（角色）：AI 应扮演的角色 - **I**nstruction（指令）：具体要做什么 - **S**pecification（规格）：输出格式和要求 - **P**arameters（参数）：约束和偏好 示例： ``` [Context] 这是一个 Next.js 15 博客项目 [Role] 你是一个 TypeScript 专家 [Instruction] 实现文章搜索功能 [Specification] 返回完整的组件代码，包含类型定义 [Parameters] 使用防抖处理，300ms 延迟 ``` ### 链式提示词 将复杂任务分解为多个步骤： ``` 第一步："分析这个项目的代码结构，列出所有 API 路由" 第二步："基于上面的分析，为每个 API 路由添加错误处理" 第三步："为所有 API 路由添加统一的响应格式" ``` ## 编程场景的提示词技巧 ### 代码生成 ``` 创建一个 React Hook，名为 useDebounce： - 接收一个值和延迟时间（毫秒） - 返回防抖后的值 - 使用 useEffect 和 useState - 在组件卸载时清理定时器 - 包含完整的 TypeScript 类型定义 ``` ### 代码审查 ``` 审查以下代码，关注以下方面： 1. 是否有安全漏洞 2. 是否有性能问题 3. 是否符合 React 最佳实践 4. 类型定义是否完善 5. 错误处理是否充分 [粘贴代码] ``` ### Bug 修复 ``` 以下代码在点击按钮时出现 "Cannot read property 'id' of undefined" 错误： 1. 分析错误原因 2. 提供修复方案 3. 解释为什么会出现这个错误 4. 建议如何避免类似问题 [粘贴代码和错误信息] ``` ### 代码重构 ``` 重构以下组件，使其更易维护： 1. 将大组件拆分为更小的子组件 2. 提取可复用的逻辑到自定义 Hook 3. 优化性能（避免不必要的重渲染） 4. 改善类型定义 5. 添加必要的注释 [粘贴代码] ``` ## 常见错误和改进 ### 错误：过于模糊 ❌ "帮我写一个页面" ✅ "创建一个用户个人资料页面，包含头像、用户名、邮箱和编辑按钮，使用 Card 组件包裹，响应式布局" ### 错误：缺少上下文 ❌ "修复这个 bug" ✅ "这是一个 Next.js 15 项目，使用 App Router。以下代码在 SSR 时报错 'window is not defined'，请修复并解释原因" ### 错误：一次要求太多 ❌ "创建一个完整的电商系统" ✅ 分步骤： 1. "先设计数据库模型" 2. "基于模型创建 API 路由" 3. "创建前端页面" ## 总结 提示词工程是一项需要不断练习的技能。记住以下核心原则： 1. **具体**：描述越具体，结果越好 2. **结构化**：使用清晰的格式组织提示词 3. **迭代**：不要期望一次就完美，持续优化 4. **上下文**：提供足够的背景信息 5. **约束**：明确说明限制和偏好