高效 AI 对话：如何写出更好的 Prompt

如何写出更好的Prompt：从入门到精通的实战指南

最近在工作中越来越频繁地使用各种大模型，从 ChatGPT 到 Claude，再到国内的豆包、通义千问、文心一言等等。用得多了就发现，同样的需求，有些人能让 AI 给出完美的答案，而有些人得到的回复却差强人意。

这其中的关键就在于 Prompt的写法。今天就来分享一下我这段时间摸索出来的一些经验，希望能帮大家少走弯路。

为什么 Prompt 这么重要？

说个真实的例子。前几天我想让 AI 帮我写一个产品介绍，最开始我是这样问的：

Bad Case：

复制代码

帮我写个产品介绍

结果 AI 回了一堆模板化的废话，完全没用。后来我改成了这样：

Good Case：

swift 复制代码

我需要为一款前端UI组件库写产品介绍。
目标用户：2-8年经验的前端开发者
核心功能：提供 React/Vue 双版本组件、ts 支持、响应式设计
竞争优势：比 antd 体积小40%，支持自定义主题，兼容移动端
要求：语言简洁有力，突出开发效率，字数控制在200字以内

这次得到的结果就完全不同了，直接可以用。

五个让 Prompt 效果翻倍的技巧

1. 给 AI 一个明确的角色

人都有角色扮演的本能，AI 也不例外。给它一个明确的身份，它就能更好地理解你的需求。

普通写法：

复制代码

帮我分析这段代码的问题

角色化写法：

css 复制代码

你是一个有8年经验的资深前端工程师，请帮我 review 以下 React 组件代码，
重点关注性能优化、状态管理和组件复用性问题：
[代码块]

我试过让 AI 扮演产品经理、UI 设计师、前端架构师等不同角色，效果真的会因为角色的不同而有很大差异。

2. 提供具体的上下文信息

AI 不是你肚子里的蛔虫，它需要足够的背景信息才能给出准确的答案。

模糊的询问：

复制代码

这个接口该怎么优化？

提供上下文：

diff 复制代码

我们有一个用户列表页面，目前的情况是：
- 框架：React 18 + ts
- 数据量：需要展示1万条用户记录
- 当前性能：首次渲染需要3秒，滚动时有卡顿
- 功能需求：支持搜索过滤 + 分页 + 排序
- 设备要求：需要兼容移动端

请问该如何优化这个页面的渲染性能？

3. 用例子来说明你的期望

有时候用语言描述需求很困难，直接给个例子更直观。

需求： 我想让 AI 帮我写单元测试

不够清晰：

复制代码

帮我为登录组件写测试用例

提供示例：

scss 复制代码

帮我为登录组件写 Jest 测试用例，参考以下格式：

test('用户名和密码都正确时应该调用登录接口', () => {
  // 渲染组件
  render(<LoginForm />);
  // 输入用户名密码
  fireEvent.change(screen.getByPlaceholderText('用户名'), { target: { value: 'test@example.com' } });
  // 点击登录按钮
  fireEvent.click(screen.getByText('登录'));
  // 验证接口调用
  expect(mockLoginApi).toHaveBeenCalledWith(...);
});

请按这个格式继续写出其他测试场景

4. 分步骤拆解复杂任务

复杂的任务一次性处理往往效果不好，不如拆成几个步骤。

一次性处理（效果差）：

复制代码

帮我设计一个完整的电商前端项目

分步处理（效果好）：

复制代码

我需要开发一个电商前端项目，我们先从页面结构开始。
项目需要包含：首页、商品列表、商品详情、购物车、用户中心。
请先帮我设计整体的路由结构和页面布局。

然后基于第一步的结果，再继续下一步：组件设计、状态管理等等。

5. 告诉 AI 什么不要做

有时候告诉 AI 不要做什么，比告诉它要做什么更有效。

示例：

diff 复制代码

帮我写一个封装 axios 的 HTTP 请求工具类，要求：
- 使用 ts 编写,禁止使用 any
- 支持请求拦截器和响应拦截器
- 不要使用第三方状态管理库
- 不要写单元测试代码
- 代码要有详细注释，但不要在每行都写注释

实战案例：从糟糕到优秀的 Prompt 进化

让我用一个真实的案例来展示Prompt的进化过程。

场景： 我需要写一个组件文档

第一版（效果很差）：

复制代码

写个组件文档

第二版（有所改善）：

css 复制代码

帮我写一个Button组件的文档

第三版（效果不错）：

markdown 复制代码

请为React Button组件写使用文档，包含以下内容：
1. 组件介绍和基本用法
2. Props属性说明（type、size、disabled等）
3. 代码示例（至少3个不同场景）
4. 样式定制说明

文档格式参考Ant Design的组件文档风格。

第四版（完美）：

typescript 复制代码

你是一个资深的前端工程师，需要为团队的组件库写使用文档。

项目背景：
- 基于React 18 + TypeScript开发
- 目标读者：团队内的前端开发者
- 文档用途：组件库的使用指南

请为Button组件写使用文档，组件支持以下props：
- type: 'primary' | 'secondary' | 'danger' | 'ghost'
- size: 'small' | 'medium' | 'large'  
- disabled: boolean
- loading: boolean
- onClick: (event) => void

文档要求：
✅ 包含组件介绍、API说明、代码示例
✅ 至少提供5个使用场景的示例
✅ 每个示例都要有代码和效果说明
✅ 使用ts语法。禁止使用any
❌ 不需要写实现原理
❌ 不要包含设计规范部分

请先写基础用法部分，我确认格式没问题后再继续其他内容。

可以看到，第四版的 Prompt 包含了角色定位、项目背景、具体要求、输出格式，以及明确的边界。这样的 Prompt 得到的结果基本上可以直接使用。

常见的 Prompt 误区

基于我的实践经验，总结几个容易踩的坑：

误区1：指令过于简单

❌ "优化这个 React 组件"

✅ "这个列表组件在数据量大时渲染很慢，请从虚拟滚动和 memo 优化两个角度给出改进建议"

误区2：一次性要求太多

❌ "开发一个完整的前端项目，包括用户系统、商品管理、订单流程、支付集成..."

✅ "我们先从用户登录模块开始，设计登录表单的组件结构和状态管理"

误区3：没有验证机制

很多人写完 Prompt 就直接用 AI 的结果，但其实应该加上验证环节：

复制代码

请写一个防抖 Hook 的实现，然后提供一个使用示例来验证功能正确性

误区4：忽略输出格式

❌ "分析一下组件性能"

✅ "请用表格形式分析组件性能，包含：组件名称、渲染耗时、重渲染次数、优化建议四列"

写在最后

写好 Prompt 其实就像写好代码一样，需要清晰的逻辑、明确的边界、充分的信息。多练习、多总结，你也能成为"调教" AI 的高手。

记住核心原则：把 AI 当作一个聪明但不了解你具体项目的前端同事，你需要给它足够的技术背景和明确的需求，它才能帮你写出可用的代码。

最后分享一个我常用的万能模板：

css 复制代码

【角色】你是一个[具体角色]
【背景】我现在遇到的情况是[详细背景]
【任务】请帮我[具体任务]
【要求】
✅ [要做的事情1]
✅ [要做的事情2]  
❌ [不要做的事情1]
❌ [不要做的事情2]
【格式】请按照[具体格式要求]输出