Skip to Content
Handbook第 2 章：🤖 AI 编程工具实战2.5 Prompt工程技巧(进阶)

2.5 Prompt 工程技巧

掌握高级 Prompt 技巧，让你和 AI 的协作更加高效。就像学习一门新的编程语言，需要理解语法、掌握模式、大量练习。

核心理念：Prompt 工程是「与 AI 沟通的艺术」，目标是让 AI 准确理解你的意图，生成高质量的代码。

Prompt 设计的核心原则

原则 1：明确性（Clarity）

模糊的 Prompt：

帮我做个网站

明确的 Prompt：

帮我创建一个在线教育平台的首页，包含：
- 顶部导航栏（logo、课程分类、登录按钮）
- Hero 区域（主标题、副标题、CTA按钮）
- 热门课程展示（4个课程卡片）
- 讲师介绍区域
- 页脚（链接、社交媒体、版权信息）

技术栈：Next.js + TypeScript + Tailwind CSS

原则 2：具体性（Specificity）

笼统的要求：

优化性能

具体的要求：

优化这个 React 组件的性能：
1. 使用 React.memo 包装组件
2. 将大型函数提取到组件外部
3. 实现虚拟滚动减少 DOM 节点
4. 使用 useMemo 缓存计算结果
5. 添加加载状态和错误边界

原则 3：上下文完整性（Context）

缺少上下文：

修复这个 bug

提供完整上下文：

我正在开发一个电商平台的购物车功能，使用 React + Redux。
当前的问题是：当用户快速点击"添加到购物车"按钮时，商品数量会被重复计算。

相关代码：
[粘贴组件代码]

错误表现：
- 点击一次按钮，数量增加 2-3
- 控制台没有报错信息
- Redux 状态更新延迟

请帮我分析问题原因并提供解决方案。

原则 4：约束条件（Constraints）

无约束的请求：

生成一些 API 接口

带约束的请求：

为我生成用户管理相关的 RESTful API 接口：

功能要求：
- 用户注册（邮箱验证）
- 用户登录（JWT 认证）
- 获取用户信息
- 更新用户资料
- 删除用户账户

技术约束：
- 使用 Express.js + TypeScript
- 数据库：MongoDB + Mongoose
- 认证：JWT Token
- 输入验证：Joi
- 错误处理：统一的错误响应格式

性能约束：
- 响应时间 < 200ms
- 支持 1000 QPS
- 数据库查询不超过 2 次
- 必须有适当的缓存策略

高级 Prompt 模式

模式 1：Few-Shot Learning（少样本学习）

提供几个示例，让 AI 学习模式并生成类似的内容。

请帮我生成几个 React 组件，参考以下示例：

示例 1 - 按钮组件：
```tsx
interface ButtonProps {
  variant: 'primary' | 'secondary';
  size: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({
  variant, size, children, onClick
}) => {
  const baseClasses = 'font-semibold rounded-lg transition-colors';
  const variantClasses = variant === 'primary'
    ? 'bg-blue-500 text-white hover:bg-blue-600'
    : 'bg-gray-200 text-gray-800 hover:bg-gray-300';
  const sizeClasses = size === 'sm' ? 'px-3 py-1 text-sm'
    : size === 'lg' ? 'px-6 py-3 text-lg'
    : 'px-4 py-2';

  return (
    <button
      className={`${baseClasses} ${variantClasses} ${sizeClasses}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

现在请按照相同的模式生成：

  1. 输入框组件（Input）
  2. 卡片组件（Card）
  3. 模态框组件（Modal）

要求：

  • 使用 TypeScript
  • 支持多种变体和尺寸
  • 包含完整的 props 类型定义
  • 添加适当的样式类

### 模式 2：Chain of Thought（思维链）

引导 AI 逐步思考，展示推理过程。

我需要设计一个用户权限系统，请帮我按以下步骤思考：

步骤 1：分析业务需求

  • 系统有哪些用户角色？
  • 每个角色需要什么权限？
  • 权限之间有什么关系？

步骤 2：设计数据模型

  • 如何存储用户、角色、权限的关系？
  • 数据库表结构如何设计？

步骤 3：实现权限检查逻辑

  • 如何在 API 层检查权限？
  • 如何在前端控制组件显示？

步骤 4：提供具体代码实现

请详细说明每一步的思考过程，最终给出完整的代码实现。


### 模式 3：Role-Based Prompting（角色扮演）

为 AI 分配特定角色，获得更专业的回答。

你是一位有 15 年经验的前端性能优化专家，专门处理大型电商网站的性能问题。

现在需要你优化一个产品详情页的性能，该页面有以下问题：

  • 首屏加载时间 8 秒
  • 图片加载缓慢
  • 用户滚动时页面卡顿
  • 内存占用持续增长

请从以下几个角度分析和提供解决方案：

  1. 代码层面优化
  2. 资源加载优化
  3. 渲染性能优化
  4. 内存管理优化
  5. 监控和测量方案

请给出具体的优化策略和代码实现。


### 模式 4：Template-Based Prompting（模板化）

使用结构化的模板，确保不遗漏重要信息。

代码重构请求

当前代码

[粘贴需要重构的代码]

问题描述

  • [问题 1]
  • [问题 2]
  • [问题 3]

重构目标

  • [目标 1]
  • [目标 2]
  • [目标 3]

技术约束

  • 框架：React 18 + TypeScript
  • 样式：Tailwind CSS
  • 状态管理：Zustand
  • 不允许使用外部库

输出要求

  1. 重构后的代码
  2. 重构说明（为什么这样改）
  3. 性能改进点
  4. 向后兼容性分析

请按照以上要求进行代码重构。


## 特定场景的 Prompt 技巧

### 场景 1：复杂算法实现

请帮我实现一个高性能的搜索算法：

需求背景：

  • 用户输入：搜索关键词
  • 数据源：10万条商品记录
  • 搜索要求：支持模糊匹配、拼音搜索、同义词替换
  • 性能要求：搜索响应时间 < 100ms

算法要求：

  1. 构建倒排索引
  2. 支持多关键词组合搜索
  3. 结果按相关性排序
  4. 支持搜索建议和自动完成

请提供：

  1. 完整的算法实现代码
  2. 时间复杂度和空间复杂度分析
  3. 性能优化建议
  4. 单元测试用例

技术栈：JavaScript/TypeScript


### 场景 2：API 设计和实现

请帮我设计一个完整的微服务 API：

业务场景：在线文档协作平台 服务职责：文档版本管理

功能需求：

  • 创建文档版本
  • 获取版本历史
  • 版本对比
  • 版本回滚
  • 协作冲突解决

技术要求：

  • 语言：Node.js + TypeScript
  • 框架：Express.js
  • 数据库：PostgreSQL
  • 缓存：Redis
  • 消息队列：RabbitMQ

非功能性需求：

  • 高可用性（99.9%）
  • 最终一致性
  • 事件溯源架构
  • 幂等性保证

请提供：

  1. API 设计文档
  2. 数据库设计
  3. 核心代码实现
  4. 错误处理和重试机制
  5. 监控和日志方案

### 场景 3：前端组件库开发

请帮我设计一个企业级 React 组件库：

设计目标：

  • 提供统一的 UI 规范
  • 支持主题定制
  • 良好的 TypeScript 支持
  • 详细的文档和示例

核心组件列表：

  1. Button（按钮）
  2. Input（输入框）
  3. Select（选择器）
  4. Table（表格）
  5. Modal（模态框）
  6. Form（表单）
  7. DatePicker（日期选择器）
  8. Upload（上传组件）

技术要求：

  • React 18 + TypeScript
  • 样式方案：CSS-in-JS (Emotion)
  • 构建工具：Vite + Rollup
  • 测试框架：Jest + Testing Library
  • 文档工具：Storybook

设计规范：

  • 遵循 WAI-ARIA 无障碍标准
  • 支持键盘导航
  • 响应式设计
  • 暗色主题支持

请提供：

  1. 组件库架构设计
  2. 核心组件实现示例
  3. 主题系统设计
  4. 构建和发布流程
  5. 使用文档模板

## Prompt 优化技巧

### 技巧 1：渐进式细化

从一个简单的需求开始，逐步添加细节和约束。

第一轮（基础需求）： 帮我创建一个待办事项应用

第二轮（添加技术栈）： 使用 React + TypeScript + Tailwind CSS 创建待办事项应用

第三轮（详细功能）： 创建待办事项应用，包含增删改查、优先级设置、分类管理

第四轮（高级功能）： 添加拖拽排序、搜索过滤、数据持久化、多用户支持


### 技巧 2：负面约束

明确告诉 AI 不要做什么。

请帮我优化这个 React 组件，但是：

  • 不要使用 useRef，改用 forwardRef
  • 不要使用 useEffect 的依赖数组为空的情况
  • 不要忽略 TypeScript 的严格模式警告
  • 不要使用内联样式
  • 不要忽略可访问性（a11y）要求

### 技巧 3：输出格式控制

明确指定 AI 的输出格式。

请帮我分析这段代码的性能问题，并按以下格式回答：

问题分析

[列出发现的问题]

解决方案

方案1：[方案名称]

  • 优点：[优点描述]
  • 缺点：[缺点描述]
  • 实现难度：[简单/中等/困难]

方案2：[方案名称]

  • 优点：[优点描述]
  • 缺点：[缺点描述]
  • 实现难度：[简单/中等/困难]

推荐方案

我推荐使用方案[X]，因为[推荐理由]

代码实现

[提供具体的代码实现]


### 技巧 4：多轮对话优化

在连续对话中保持上下文，逐步完善需求。

用户：帮我创建一个登录页面 AI：[生成基础登录页面]

用户：很好，现在添加记住密码功能 AI：[在现有代码基础上添加记住密码功能]

用户：还需要添加第三方登录（Google、GitHub） AI：[继续扩展现有功能]

用户：最后添加表单验证和错误提示 AI：[完成最终版本]


## 常见 Prompt 错误和修正

### 错误 1：需求过于宽泛

**错误示例**：

做一个现代化的网站


**修正方法**：

创建一个 SaaS 产品的官网，包含产品介绍、价格方案、客户案例、博客等模块


### 错误 2：缺少技术约束

**错误示例**：

实现用户认证


**修正方法**：

使用 Next.js + Prisma + PostgreSQL 实现 JWT 认证系统


### 错误 3：期望不明确

**错误示例**：

优化这段代码


**修正方法**：

优化这段 React 组件，目标是减少渲染次数和提高性能


## Prompt 效果评估

### 评估标准

1. **准确性**：AI 理解需求的准确程度
2. **完整性**：生成代码是否覆盖所有需求点
3. **质量**：代码的可读性、可维护性
4. **效率**：解决问题的方法是否高效
5. **创新性**：是否提供了有价值的建议

### 持续改进

<Callout type="info">
**改进循环**：
1. 分析 Prompt 效果
2. 识别问题所在
3. 调整 Prompt 策略
4. 验证改进效果
</Callout>

**改进清单**：
- [ ] 需求描述是否足够清晰？
- [ ] 上下文信息是否充分？
- [ ] 技术约束是否明确？
- [ ] 输出格式是否指定？
- [ ] 是否考虑了边缘情况？

---

**下一步**：掌握 Prompt 工程技巧后，开始 [实战小项目](/handbook/2-ai-tools/2.6-practice-project)，在实践中应用和提升这些技能。
Last updated on
2.4 对话式编程工作流(进阶)2.6 实战小项目(必做)