写好Vibe的提示词

Vibe Coding 的本质是用自然语言驱动 AI 写代码。会写提示词的人，效率比不会写的人高 5-10 倍。本篇是 Vibe 场景下的提示词专题。

1. Vibe 的提示词和普通提示词有什么不同

普通提示词： - 输入是确定的（一段文字、一个问题） - 输出是确定的（翻译、JSON、答案） - 一次到位

Vibe 提示词： - 输入是项目状态（代码库、之前的修改） - 输出是修改（多文件 diff） - 多轮迭代

所以 Vibe 提示词更注重： - 方向而非细节（"做成 Notion 那种感觉"） - 约束而非全描述（"用 Tailwind"，不写 CSS） - 反馈而非一次性（"哪里不好？我看了再说"）

2. 第一句话的力量

进入 Cursor / Claude Code 后，第一句话决定了整个对话的"调性"。

❌ 弱开场

帮我做一个 todo 应用

AI 会问一堆问题，或者用最常见的实现做出来——大概率不是你想要的。

✅ 强开场

做一个 todo 应用：

【栈】Vite + React + TS + Tailwind + Dexie.js
【风格】参考 Things 3，主色白+黑，强调蓝
【MVP 功能】添加、删除、勾选、按"待办/已完成"过滤
【加分项】拖拽排序、标签、键盘快捷键
【约束】不要后端，全部本地存储
【范围】先把 MVP 做完，加分项后续再说

AI 知道：用什么技术、什么风格、做哪些先做哪些后做。直接进入执行模式。

3. 给 AI 一个"项目宪法"

长期项目里，每次都重复约束很累。Cursor/Claude Code 都支持项目级规则文件：

Cursor：`.cursorrules`

你是这个项目的工程师。

【技术栈】
- React 18 + TypeScript + Tailwind
- Zustand 状态管理
- React Query 数据获取
- pnpm 包管理

【代码风格】
- 函数组件 + Hooks，不要 Class
- 文件名 kebab-case，组件名 PascalCase
- 路径用 @/ 别名（非相对路径）
- 显式类型，少用 any
- 优先 immutability（spread、map、filter）

【禁止】
- 不要引入新的 UI 库（已有 shadcn/ui）
- 不要写注释（除非真的非显然）
- 不要写 console.log（除非临时调试）
- 不要"以防万一"的 try-catch

Claude Code：`CLAUDE.md`

放在项目根目录，Claude 启动时自动读取。内容类似 .cursorrules。

效果

每次提示都附带这些约束，AI 不会再写出违背规范的代码。等于把团队规约固化下来。

4. 描述视觉的技巧

UI 是 Vibe Coding 最常被调整的部分。描述视觉感受比写 CSS 有效十倍。

用产品做参照

导航栏要有 Linear 那种"轻飘飘"的感觉，
hover 时图标淡淡地变色，不要明显的 background

模型见过 Linear，知道什么是"轻飘飘"。

用情绪词

情绪词	对应实现
干净	留白多、无装饰、字体细
精致	细节克制、阴影微妙、动效
现代	圆角、玻璃拟态、渐变
复古	衬线字体、棕黄配色、像素感
赛博	深色 + 霓虹 + 毛玻璃
极简	黑白灰、几何、大留白

首页要有那种"刚开机的 macOS"般的精致感，
克制、留白、淡淡的层次感

直接给图

Cursor / Claude.ai 都支持上传截图。截一张你想要的产品的图，扔给 AI："做成这种风格"。比写一千字描述都有效。

5. 描述功能的技巧

用流程描述

用户点击"上传"按钮，弹出文件选择对话框。
选完文件后，
- 立刻显示一个进度条占位
- 后台开始上传
- 上传完成换成预览图
- 失败显示重试按钮

按"用户操作 → 系统反应"的顺序写，AI 容易理解。

明确边界情况

功能：用户登录

正常路径：邮箱密码 → 接口 → 存 token → 跳转首页

边界情况：
- 网络失败：显示重试按钮，不要白屏
- 密码错误：toast 提示，不跳转
- token 过期：刷新失败的请求自动重发
- 多端登录：第二个端登录顶掉第一个

错误情况：
- 接口 500：toast "服务繁忙，请稍后重试"
- 接口 429：toast "操作太快，请稍候"

新手最容易省略边界情况，写着写着发现各种漏洞。前置写清楚，省返工。

用反例

做一个搜索框：

我要：
- 实时搜索
- 防抖 300ms
- 空状态显示"开始搜索吧"

我不要：
- 不要搜索建议（先做基础）
- 不要历史记录（先做基础）
- 不要语音输入（永远不要）

明确"不要什么"和"要什么"同样重要，避免 AI 过度发挥。

6. 描述设计的技巧

设计感是 Vibe 提示词最难的部分。两种思路：

思路 A：风格关键词

风格：
- 主色调：白 + 黑 + 一抹暖橙 (#ff6b35)
- 字体：Inter (UI) + JetBrains Mono (code)
- 圆角：12px
- 阴影：微妙，仅在卡片上 (shadow-sm)
- 动效：scale + opacity，duration 150ms
- 图标：lucide-react，stroke 1.5
- 间距：以 4px 为基础（4/8/12/16/24/40）

适合：你已经有清晰审美的人。

思路 B：参考产品

整体风格参考 Linear：
- 极简但不空洞
- 字号克制，层级清晰
- hover 反馈微妙
- 动画快但不抢眼

具体细节参考：
- 卡片：Notion 风格
- 按钮：Vercel Dashboard
- 图标：lucide
- 配色：Tailwind 默认 + 一点 brand 色

适合：知道自己喜欢什么但说不清的人。

7. 让 AI"先想再做"

复杂任务直接让 AI 改代码，常常改得乱七八糟。让它先列计划：

我要做一个评论系统。

先不要写代码，先做以下事情：
1. 列出需要哪些组件和文件
2. 数据流是什么样的
3. 哪些已有代码会被影响
4. 列出 3 个我没想到但应该考虑的细节

我看完计划，确认后再让你写代码。

这一步可以发现 80% 的需求模糊。比直接写代码再返工高效得多。

8. 让 AI"承认不知道"

AI 喜欢硬答。明确允许它"承认不知道"，质量会高：

任何不确定的地方，
- 直接问我，不要硬猜
- 给出多个方案让我选，不要替我做决定
- 引用 API 时如果不确定参数，先去看 docs，别瞎写

宁可慢，不要瞎跑。

特别是接入第三方 API 时，这条防止 AI 编造不存在的接口。

9. 让 AI 解释"为什么"

接收 AI 改的代码前，让它解释意图：

在改代码前，请用 3 句话告诉我：
1. 你打算怎么改？
2. 为什么这么改？
3. 这次改动会影响哪些已有功能？

如果你看不懂解释，说明改动太复杂或思路不对。立刻打断重来。

10. 防止 AI 过度发挥

AI 经常"顺手"做一堆你没要求的事： - 你让它修个 bug，它顺便重命名了 5 个变量 - 你让它加个按钮，它顺便重写了状态管理 - 你让它优化函数，它顺便引入了一个新依赖

应对：

你的任务：{具体任务}

约束：
- 只改我说的部分
- 不要顺手"重构"或"优化"其他代码
- 不要引入新依赖（除非确实必要，需要先告诉我）
- 不要重命名已有变量
- 改动尽量小，只解决问题，不做美化

用一次后效果立竿见影。

11. 接收输出后的反馈

AI 给了一版，你不满意。反馈也是技巧。

❌ 模糊反馈

不太对，再来一次

AI 不知道哪里不对。

✅ 结构化反馈

对的部分：
- 整体布局符合预期
- 配色是我想要的

不对的部分：
1. 按钮太大，希望小一号（h-10 → h-8）
2. 图标位置不对，应该左侧不是右侧
3. 没有 hover 状态

不动的部分：
- 不要改卡片
- 不要改字体

明确"对/不对/不动"三段式，AI 改得快又准。

12. 长对话的衰减

聊久了 AI 会"忘掉"早期约束。两个应对：

方法 1：定期重置

每完成一个里程碑，开新对话： - 把项目状态总结成 3-5 句话 - 说"接下来要做 X" - 继续

避免上下文过长导致质量下降。

方法 2：项目规则

把核心约束写进 .cursorrules / CLAUDE.md，每次都自动加载。

13. Vibe 提示词模板库

实战中沉淀几个常用模板：

模板：起新项目

做一个 {项目类型}。

【技术栈】{...}
【MVP 功能】{...}
【加分项】{...}
【设计风格】{风格参考}
【约束】{硬限制}

请先列出计划：
1. 文件结构
2. 关键依赖
3. 实现顺序
确认后再写代码。

模板：加功能

在已有项目上加一个 {功能}。

【需求】{流程描述}
【边界情况】{清单}
【影响范围】{已有哪些代码会被改}
【范围】只做这个功能，不要顺手改其他

如果有疑问先问我。

模板：修 bug

有一个 bug：{描述}。

【复现步骤】{...}
【期望行为】{...}
【实际行为】{...}
【已尝试】{...}

先分析可能的原因（不要改代码），
等我确认根因再修。

模板：重构

重构 {模块}。

【现状问题】{...}
【目标】{...}
【约束】
- 行为完全不变（已有测试要全过）
- 不要改 API 签名
- 改动控制在 X 行以内

先给我重构方案，再动手。

14. 自我提升路径

变成 Vibe 提示词高手的步骤：

复制别人的好提示词：看别人怎么写
存自己的提示词模板：每次效果好的存下来
反复改一个提示词：同样需求改 10 次，看哪种最稳定
写"项目宪法"：每个长期项目都有 .cursorrules
开始教别人：能解释清楚才是真懂了

总结

Vibe 提示词的精髓：给方向、给约束、给反馈
第一句话决定调性，开场就要写清栈、风格、范围
用 .cursorrules / CLAUDE.md 沉淀项目级规则
描述视觉用"风格关键词 + 参考产品 + 截图"，比写 CSS 有效
明确"不要什么"和"要什么"同样重要
让 AI 先列计划再写代码，能省 80% 返工
让 AI 承认不知道，避免硬编 API
给 AI 反馈用"对的 / 不对的 / 不动的"三段式
防止过度发挥：明确"只改我说的部分"
长对话定期重置 + 项目规则 = 稳定输出