第五章 学会和 AI 对话（提示词与上下文）

一、为什么提示词这么重要

来看一个对比实验。

提示词 A

做一个登录页

AI 输出：一个粗糙的 HTML 表单，没有验证、没有错误处理、没有响应式、视觉一般。

提示词 B

做一个登录页面，要求：

1. 风格：参考 Stripe 的登录页（白底、左侧 logo + 一句话品牌词、右侧表单卡片）。
2. 字段：邮箱 + 密码。
3. 验证：邮箱格式校验 + 密码 6 位以上 + 表单提交按钮在不满足时禁用。
4. 错误处理：API 报错时表单上方红色提示，不要 alert 弹窗。
5. 加载状态：提交时按钮变灰，文字变成"登录中…"。
6. 响应式：手机屏幕表单卡片占满宽度。
7. 技术：纯 React + TailwindCSS，不引入新依赖。

参考已有文件 @src/components/Card.tsx 的卡片样式。
不要写 README，不要写注释，不要解释，直接给我 LoginPage.tsx 一个文件。

AI 输出：一个几乎可以直接上线的、风格统一、考虑周全的登录组件。

两段提示词的差异不在于"长度"，在于"是不是把决策点都给了 AI"。

如果你不告诉 AI"是要 PC 还是手机"、"用什么颜色"、"用什么框架"、"参考什么风格"、"错误怎么处理"——AI 就要"猜"。它的"猜"不一定符合你的预期。

记住一句话：好提示词 = 你把所有决策点都告诉 AI。

二、提示词五要素（最实用的模板）

下面这五要素是写好提示词的"骨架"。每次写之前在脑子里过一遍：

要素 1：角色（Role）

告诉 AI 你希望它扮演什么角色。

你是一个有 10 年经验的前端架构师，注重可读性和性能。

省略也行，但加上后输出会更专业。

要素 2：目标（Goal）

你想要的最终结果是什么。

我要做一个用户登录页面。

要素 3：上下文（Context）

背景信息：项目是什么样、已有的代码、相关文档、现状。

项目是一个 SaaS 工具，用 Next.js 15 + TailwindCSS。已经有 @src/components/Card.tsx 这个卡片组件可以复用。

要素 4：约束（Constraints）

不能做什么、必须做什么。

不要引入新的 npm 依赖。文件名必须是 LoginPage.tsx。中文界面。

要素 5：输出（Output Format）

你希望的输出形式。

直接给我 LoginPage.tsx 一个文件，不要解释，不要 README。

一个完整模板

[角色]    你是一位 10 年经验的前端架构师。
[目标]    我想做一个登录页。
[上下文]  这个项目用 Next.js 15 + TailwindCSS。
          已有组件可参考：@src/components/Card.tsx
[约束]    1. 不引入新依赖
          2. 中文界面
          3. 必须支持手机响应式
          4. 表单字段：邮箱 + 密码
[输出]    直接生成 src/pages/login.tsx，不要解释。

不必每次都写得这么齐全，但至少要把"目标 + 约束"写明，这是底线。

三、提示词的 8 个常见错误

错误 1：太短

改一下

改什么？怎么改？AI 只能瞎猜。

错误 2：太长但没重点

一段长达 500 字的需求，但是真正"决策点"散在各处，AI 反而抓不住重点。 对策：用列表，让重点一目了然。

错误 3：用代词太多

把这个改成那个，按我之前说的那种风格

哪个？哪个？哪种？

对策：永远用具体的"文件名 / 函数名 / 行号"。

错误 4：不给上下文

写一个发邮件的函数

AI 不知道你用 Node.js 还是 Python、用 SMTP 还是 SendGrid、有没有现成模板…… 对策：写清楚环境 + 当前已有什么。

错误 5：要求太多但不分优先级

做一个登录、注册、忘记密码、邮箱验证、Google 登录、微信登录、支付集成…

AI 要么挑一个做，要么做出来质量都不行。 对策：分阶段。先做最重要的 3 个，做完再加下一批。

错误 6：含糊的形容词

让它好看一点 / 优雅一点 / 现代一点

什么叫"好看"？AI 的"好看"不一定是你的"好看"。 对策：给具体参考——"参考 Linear 的设计风格"，比"好看"清楚 10 倍。

错误 7：自相矛盾

不要引入新依赖，但是用 React Query 来管理数据

React Query 就是个新依赖。AI 看到矛盾要么挑一个执行要么报错。 对策：写完检查一下逻辑。

错误 8：不说"不要做什么"

AI 不知道你的"边界"在哪。它可能"自作主张"装个新库、删个旧文件。 对策：明确写"不要做 X、不要碰 Y、保持 Z 不变"。

四、Plan → Act 心法

这是 2026 年最重要的提示词心法之一。

4.1 什么是 Plan→Act

简单：让 AI 先列方案，等你确认了再动手。

老式做法：你说"做 X" → AI 直接动手 → 跑了 5 分钟 → 你发现方向错了 → 全部回滚。

Plan→Act：你说"做 X，先给方案" → AI 给一份 todo 列表 → 你看一眼，没问题说"开始" → AI 才动手。

后者节省的时间，平均是前者的 3-5 倍。

4.2 怎么触发 Plan

在提示词里加一句：

在动手前，请先列出你的方案（5 个步骤以内），等我说"开始"再动手。

或者用 Cursor 3 的 Plan 模式（输入框上方开关）。

4.3 Plan 阶段你要看什么

AI 给的方案，你重点看：

1. 它是不是理解了你的目标——有时候它会"误解"，比如你说"做一个 todo list"它做成"团队任务管理系统"。
2. 它的拆解是不是合理——5 步以内最佳，超过 7 步说明任务太大需要再拆。
3. 它打算改哪些文件——如果文件名你看着眼熟（比如它要动你的 package.json 或 tsconfig.json），警惕。
4. 它打算装什么依赖——突然冒出来的新库要警惕。
5. 它的执行顺序对不对——比如它说"先改 UI 再改 API"，但你心里想的是"先改 API 再改 UI"，提出来。

4.4 Plan→Act 的 4 步流程

1. 给目标 + 约束 + "先列方案"
   ↓
2. 看方案，提反馈
   ↓
3. 让 AI 修方案，再确认
   ↓
4. 说"开始"，进入 Act

中间可能反复 1-3 次。这是最值得的反复。

4.5 一个完整例子

第一轮：

我要做一个会议纪要的 web 工具：

- 用户上传一个 .txt 或 .docx 文件（会议转写文本）。
- 工具自动识别"决议"、"待办"、"问题"三类，分块显示。
- 每个待办可以分配责任人（前端表单）。
- 一键导出成 markdown。

技术栈：纯前端，React + Vite + TailwindCSS。

请先列出方案（5 步以内），等我说"开始"再动手。

AI 回复方案：

方案：
1. 项目脚手架（Vite + React + Tailwind）。
2. 上传组件（支持拖拽 + 解析 .txt 和 .docx）。
3. 内容分类（用 GPT API 把会议文本切成"决议 / 待办 / 问题"）。
4. 表单（每个待办可分配责任人）。
5. 导出 markdown。

第二轮：你提反馈：

方案大致 OK，但有 2 处要改：

1. 第 3 步不要调用 GPT API，我希望完全离线。请用启发式规则（关键词识别 + 标点符号断句）做分类，不需要太聪明。
2. 第 5 步的导出不要单独 markdown，请改成"复制到剪贴板（带格式）"。

调整后再给我看一次方案，不用动手。

第三轮：AI 给修订方案，你确认后说"开始"。

你看：你只在前 3 分钟"动嘴"，AI 在后面 10 分钟"动手"。整个过程你不需要会编程，只需要会"判断"。

五、模型选型矩阵

不同模型有不同长处。同样的提示词给不同模型，输出可能天差地别。

5.1 主流模型一览

5.2 按场景选模型

5.3 一个对比小试验

打开你的番茄钟项目，分别让三个模型做同一件事：

@File app.js 把这个文件重构得更优雅。

• claude-4.6-sonnet：会拆模块、加注释、保留功能。
• gpt-5.3-codex：偏好引入函数式风格、链式调用。
• deepseek-v3：保守稳健，少改动。

哪个适合你看场景。

5.4 用 Cursor 3 的 /best-of-n 一次比较

Cursor 3 提供 /best-of-n 命令：在 Composer 输入：

/best-of-n 重构 @File app.js

它会同时跑 3 个模型，用 3 个不同的"工作树"（worktree），完成后让你对比挑一个。

第九章 会详讲。

六、何时让 AI 反问 vs 何时直接执行

6.1 反问模式

你想让 AI"先确认细节再动手"，加一句：

在动手前，如果你有任何不确定的地方，请先问我；不要假设。

或者更主动：

请像一个新加入项目的工程师，提 3-5 个问题确认需求，然后再说方案。

适合：

• 需求模糊。
• 涉及商业逻辑你需要双确认。
• 你不确定 AI 是否理解。

6.2 直接执行模式

不要问我，按你的最佳判断动手。出错了我们再改。

适合：

• 简单任务。
• 你对 AI 自由发挥结果好奇。
• 个人玩具项目。

6.3 选择标准

七、打断 / 回滚 / 重试 的姿势

7.1 打断

发现 AI 跑偏了，立刻：

• 暂停：点输入框右侧暂停按钮，让它把当前步骤跑完后停。
• Stop：点 Stop 按钮，立刻硬停。
• 关掉对话：开新对话，从头开始。

7.2 回滚

AI 改坏了，回滚：

• Cmd+Z：在编辑器里多按几次。
• Cursor Restore Checkpoint：在 Composer 历史里找到那一刻，点"Restore"。
• Git 回退：git reset --hard HEAD（前提是你提前 commit 了）。

7.3 重试

AI 给的方案不满意，不必从头：

• 在那条消息上鼠标悬停，点"重试"，AI 重新生成。
• 或者点"在这里分支"，从这一条开新分支。

八、提示词的 6 个高阶技巧

下面这 6 个技巧不是必须，但用上后体验会有质的飞跃。

技巧 1：给 AI"少数派意见"

请给我 3 个不同的方案：A 保守、B 中庸、C 激进。
然后告诉我每个方案的优缺点。

适合：架构决策、UI 设计选型。

技巧 2：让 AI"挑战自己"

你刚才给的方案，请你扮演一个挑剔的资深工程师，列出至少 3 个潜在问题。

AI 会主动找自己刚写的代码 / 方案的毛病。质量瞬间提升。

技巧 3：让 AI"假装是用户"

请扮演一个完全不懂技术的用户，使用我们刚做的这个登录页 5 分钟。
告诉我你遇到了什么困惑、什么按钮你看不懂、什么交互让你不爽。

适合：UX 自检。

技巧 4：要求"先 / 然后 / 最后"结构

请按"先 X、然后 Y、最后 Z"的顺序回答。

让 AI 输出更有结构、更好读。

技巧 5：明确告知"语气"

回答用大白话，不要术语堆砌。
对一个完全不会编程的家庭主妇解释。

回答会立刻变得人话。

技巧 6：用"我希望 / 我不希望"双向约束

我希望：颜色温暖、字体大、按钮显眼。
我不希望：渐变、阴影过重、动效花哨。

比单向描述清楚得多。

九、上下文窗口的"三种容器"

AI 有"短期记忆"（上下文窗口），不同模型不一样。理解这个，能帮你避免"AI 突然忘了之前说的"。

9.1 三种容器

• 当前对话窗口：你和 AI 这一次对话的全部消息。
• 当前文件 / @ 引用：你主动喂的文件内容。
• 项目索引：Cursor 帮你做的语义索引（第四章 讲过）。

9.2 容器满了会发生什么

• 早期消息会被"截断"或"压缩"，AI 就"忘了"前面说过什么。
• 表现：AI 突然不记得你前面说的偏好、突然把项目情况理解错了。

9.3 怎么应对

• 新任务开新对话：永远不要在一个对话里聊太多事。
• 总结后清空：聊到一半，让 AI 把"我们到现在为止的关键决策"总结成 markdown，复制到一个 Notepad 里（第六章），开新对话时贴回去。
• 用 @Past Chats：如果非要让 AI 接着上次聊，用 @Past Chats。
• 用规则文件 .cursor/rules/：把"不变的偏好"写成规则文件（第六章），从此每次对话自动带上。

十、综合案例：一句话需求 → 完整提示词

下面拿一个真实需求做对比，让你看清楚"普通人写的提示词"和"提示词高手写的提示词"差距在哪。

10.1 原始需求

我想做一个网页帮我管理订阅服务（Netflix、Spotify、Apple One 这种），看看每月花多少钱、什么时候续费。

10.2 普通人版提示词

做一个订阅管理网页

预期 AI 输出：粗糙、功能不全、风格随机。

10.3 提示词高手版

[角色]
你是一位有 10 年经验的产品工程师，擅长用最少的代码做最完整的小工具。

[目标]
做一个个人订阅管理 web app，帮我跟踪所有订阅服务（如 Netflix、Spotify）。

[上下文]
- 我是单用户使用，不需要登录系统。
- 数据存浏览器 localStorage 即可。
- 我希望能直接放到 Vercel 上，纯静态。
- 国内用户，部分服务用人民币，部分用美元。

[功能需求]
1. 添加订阅：名称、价格、币种、续费周期（月 / 年）、下次续费日。
2. 列表展示：按下次续费日排序，距今 7 天内的标黄、3 天内标红。
3. 月费 + 年费汇总：自动按当前汇率换算到人民币（汇率手动填，不调 API）。
4. 编辑 / 删除：每行有按钮。
5. 提醒：浏览器 Notification API，续费前 3 天自动弹通知。
6. 导出：JSON 文件下载，方便备份。
7. 导入：上传 JSON 文件，覆盖当前数据。

[约束]
- 只用 vanilla HTML + CSS + JS，三个文件，不引入框架。
- 不引入 npm 依赖。
- 中文界面。
- 整体风格参考 Linear 的极简感（白底、深灰字、轻微圆角、克制的色彩）。
- 响应式，手机用也方便。

[输出]
- 在动手前先给我列出方案（5 步以内），等我说"开始"再动手。
- 如果方案没问题，最终生成：index.html / style.css / app.js 三个文件。
- 不要 README，不要解释。

预期 AI 输出：几乎可以直接上线的工具，符合所有约束，风格干净，功能完整。

差距不在于"模型不同"，在于"你给了 AI 多少决策点"。

十一、5 个我个人最爱用的"万能提示词片段"

下面 5 段你可以"按需粘贴"到任何提示词里，立刻提升输出质量。

片段 1：让 AI 自检

写完后，请扮演一个挑剔的代码审查者，列出至少 3 个你觉得可以改进的点，然后自己改。

片段 2：限制范围

只改我点选的文件 / @ 引用的文件，不要扫描其他文件，不要碰 package.json。

片段 3：禁止依赖

不要新增任何 npm / pip 依赖。如果必须，先告诉我并征求同意。

片段 4：先 plan 再 act

在动手前先列出 3-5 步方案，等我说"开始"再动手。

片段 5：风格一致

参考 @existing-file.tsx 的风格、命名、注释习惯。

把这 5 段存进你的剪贴板工具或者 Notepad 里，随时贴。

本章一图回顾

五要素提示词
═══════════════
  角色 → 目标 → 上下文 → 约束 → 输出格式

8 个常见错误
─────────────
  太短 / 太长无重点 / 代词太多 / 没上下文
  优先级混乱 / 形容词含糊 / 自相矛盾 / 不说不要做什么

Plan → Act 心法
─────────────
  给目标 → 让 AI 列方案 → 反馈 → 修方案 → 说"开始"

模型选型速记
─────────────
  Agent 长链      composer-2 / gpt-5.3-codex
  UI / 设计       claude-4.6-sonnet
  难题            claude-opus-4-7-thinking-max
  长文档 / PDF    gemini-2.5-pro
  中文 / 便宜     deepseek-v3
  本地            qwen3-coder

5 个万能片段
─────────────
  自检 / 限范围 / 禁依赖 / 先 plan / 参考风格

下章预告

提示词写得再好，每次都重写也太累。下一章 第六章 给 Cursor 配置规则与记忆 我们把"不变的偏好"沉淀成 .cursor/rules/ 规则文件，再加上 AGENTS.md 和 Notepads，让 Cursor 真正"记住你"。