第 3 章：提示词基础
🪢
🎯 本章目标：
揭开 AI "听不懂人话" 的真相，掌握提示词（Prompt）的黄金四要素结构
学会写出让 AI 一次性精准执行的高质量指令
3.1 什么是好的提示词？
在 Vibe Coding 中，提示词是你与 AI 沟通的桥梁。很多初学者觉得 AI 笨，写出来的代码总是差点意思，通常不是 AI 的问题，而是提示词含糊不清。
所有的 AI 都是"直男"
大模型虽然聪明，但它们非常"字面意思"。如果你说话模棱两可，它们就会开始猜。而 AI 的猜测，往往不是你想要的。
❌ 糟糕的提示词（Vague Prompts）：
"帮我优化一下这个函数。" （AI 内心OS：优化什么？性能？可读性？还是缩短行数？）
✅ 优秀的提示词（Specific Prompts）：
"请重构 processData 函数，使其运行速度更快。目前处理 1000 条数据需要 5 秒，请尝试通过优化循环逻辑或使用更高效的数据结构，将耗时降低到 1 秒以内。"
好提示词的三个特征
具体（Specific）：消灭歧义。
完整（Contextual）：提供足够的前因后果。
可验证（Measurable）：有明确的成功标准。
3.2 提示词的万能公式：CRCO
为了写出完美的提示词，我们推荐使用 CRCO 框架。只要套用这个公式，你的成功率将从 50% 提升到 95%。
C - Context（背景）
告诉 AI 你在做什么，或者它是谁。
"我正在开发一个基于 React 的电商后台管理系统..." "你是一个资深的 Python 数据分析师..."
R - Requirement（需求）
明确你想要它做什么，使用动词开头。
"请实现一个用户登录组件..." "请分析这段代码的内存泄漏原因..."
C - Constraints（约束）
列出不能做的事情，或者必须遵守的规则（技术栈、库、风格）。
"必须使用 Tailwind CSS 进行样式设计..." "不要使用 any 类型，必须定义完整的 Interface..." (负面约束往往更有效！) "不要省略代码，严禁使用 // ... rest of code 这种占位符..."
O - Output（输出格式）
告诉 AI 你希望看到什么样的结果。
"直接给出修改后的完整代码，不要解释..." "请先分步骤分析你的思路，确认并在代码块中给出实现..." (激活 AI 的推理能力) "以 Markdown 表格形式列出优缺点..."
💡 偷懒小技巧（Meta-Prompting） 如果你觉得写 CRCO 太累，可以反过来命令 AI： "我想做一个图片上传功能，但不知道怎么描述清楚。请帮我写一个符合 CRCO 框架的标准提示词，以便我发给 Cursor。" —— 没错，用魔法打败魔法！
💡 组合示例
让我们把这些拼起来，看一个 Vibe Coding 的标准提示词：
代码块
Plain Text
[Context]
我正在构建一个个人博客系统，使用 Next.js 14 和 Supabase。
[Requirement]
请帮我写一个"文章卡片"组件 (PostCard.tsx)。它可以展示文章的封面图、标题、摘要、作者头像和发布日期。
[Constraints]
1. 使用 Tailwind CSS 进行美化，风格要极简、现代。
2. 图片使用 Next.js 的
3. 发布日期需要使用 date-fns 库格式化为 "YYYY-MM-DD"。
4. 整个卡片是可以点击的，点击跳转到 `/posts/[slug]`。
[Output]
请提供完整的组件代码，并简要说明如何调用它。
3.3 常见错误：模糊指令的后果
让我们看看几个典型的"翻车现场"，以及如何挽救。
错误 1：省略上下文
•
❌ 用户说："报错了，帮我修一下。"
•
🤖 AI 答："请提供报错信息和相关代码..."（浪费了一轮对话）
•
✅ 修正："运行这段代码时，控制台报错 TypeError: undefined is not an object，发生在第 45 行。这是相关代码片段..."
错误 2：过于简略
•
❌ 用户说："写个贪吃蛇游戏。"
•
🤖 AI 答：(写了一个简陋的黑白控制台版本，或者一个过时的 DOM 操作版本)
•
✅ 修正："请用 HTML5 Canvas 和原生 JavaScript 写一个贪吃蛇游戏。要有开始/暂停按钮，蛇吃苹果会变长，碰到墙壁会游戏结束。背景深色，蛇是绿色的。"
错误 3：互相矛盾
•
❌ 用户说："要代码非常简短，但是功能要极其复杂。"
•
🤖 AI 答：(崩溃，或者写出难以维护的压缩代码)
•
✅ 修正："请优先保证代码的可读性，如果有复杂的逻辑，请拆分成辅助函数。"
3.4 练习：用不同方式描述同一个功能
最重要的练习是**"重写"**。试着把一个烂提示词变成好提示词。
练习题
假设你想给网页加一个"回到顶部"的按钮。
原始提示词（Level 1）：
"加个回到顶部的按钮。"
进阶提示词（Level 2 - 添加技术栈）：
"用 React 和 CSS 实现一个回到顶部的按钮，要在页面右下角。"
大师级提示词（Level 3 - CRCO 结构）：
[Context] 我的页面很长，用户在移动端浏览时很难回到头部。 [Requirement] 请创建一个 BackToTop 组件。当用户向下滚动超过 300px 时，按钮淡入显示；小于 300px 时淡出隐藏。点击按钮时，平滑滚动回顶部。 [Constraints]
使用 framer-motion 实现淡入淡出动画。
按钮是一个圆形的图标（使用 lucide-react 的 ArrowUp 图标）。
悬浮时要有轻微的缩放效果。 [Output] 给我组件代码，不用解释原理。
📝 本章小结
#fdgZaEfZargG text{white-space:pre}.fb0{stroke:var(--N900-FG, 0.15)}.fx0{stroke-miterlimit:10}.fa1{fill:#bbbfc4}.fx1{font:normal 400 12px MonospacedNumber,LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,Helvetica Neue,Tahoma,PingFang SC,Microsoft Yahei,Arial,Hiragino Sans GB,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.fx2{text-anchor:middle}.fx3{dominant-baseline:central}.fx4{stroke:none}.fc0{fill:var(--text-caption)}.fa2{fill:var(--text-link-disabled)}.fx5{font:400 normal 13px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.fx6{text-anchor:start}.fx7{dominant-baseline:alphabetic}.fc1{fill:rgb(0, 0, 0)}.fb1{fill:var(--N900-FG, 0.15)}.fb2{fill:rgb(209, 217, 224)}.fa3{fill:var(--bg-body)}ABC12345缩写CRCO含义Context (背景)Requirement (需求)Constraints (约束)Output (输出)作用让 AI 懂你，避免瞎猜明确指令，直达目标设定边界，符合规范规范格式，拿来即用
记住，Vibe Coding 是一门语言艺术。你对 AI 说话越清晰，AI 给你的代码就越漂亮。