学习如何编写高质量的提示词，让 AI 更好地理解你的需求并生成优质代码
提示词工程（Prompt Engineering）是与 AI 交互的核心技能。好的提示词能让 AI 准确理解你的需求，生成高质量的代码；而模糊的提示词则可能导致 AI 产出不符合预期的结果。
一个高质量的提示词通常包含以下几个部分：
告诉 AI 它应该扮演什么角色：
你是一个经验丰富的 React 开发者，精通 TypeScript 和 Next.js。提供必要的背景信息：
我正在开发一个电商网站，使用 Next.js 15 + TypeScript + Tailwind CSS。
项目使用 App Router 和 Server Components。清晰描述你想要的结果：
创建一个商品列表页面，要求：
- 使用 Server Component 获取数据
- 支持分页，每页显示 12 个商品
- 商品卡片包含图片、名称、价格和评分
- 响应式布局，移动端单列，桌面端三列说明限制和偏好：
注意事项：
- 不要使用 any 类型
- 图片使用 next/image 组件
- 价格显示人民币格式
- 评分使用星级组件CRISP 是一种结构化的提示词编写方法：
Context（上下文）：项目背景和技术栈
Role（角色）：AI 应扮演的角色
Instruction（指令）：具体要做什么
Specification（规格）：输出格式和要求
Parameters（参数）：约束和偏好
示例：
[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. 错误处理是否充分
[粘贴代码]以下代码在点击按钮时出现 "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'，请修复并解释原因"
❌ "创建一个完整的电商系统"
✅ 分步骤：
"先设计数据库模型"
"基于模型创建 API 路由"
"创建前端页面"
提示词工程是一项需要不断练习的技能。记住以下核心原则：
具体：描述越具体，结果越好
结构化：使用清晰的格式组织提示词
迭代：不要期望一次就完美，持续优化
上下文：提供足够的背景信息
约束：明确说明限制和偏好
评论 (0)
暂无评论，来发表第一条评论吧