氛围编程的10个提示规则
我已经用氛围编程（vibe coding）好几个月了。不是一行一行地写代码，而是描述我想要什么，让AI来构建。这最初是一个实验。现在它成了我在我的网站上构建一切的方式。
以下是我的经验总结：你构建的东西的质量直接取决于你的提示词水平。不取决于你对React或CSS了解多少，而取决于你如何传达意图。
这些是我每天使用的10条提示词规则。它们来自构建113个交互演示、数十个组件，以及在此过程中犯的许多错误。
1. 先给上下文，再提任务。始终如此。
我看到最大的错误是：直接跳到你想要构建的东西。"给我做一个卡片组件。"这样你只会得到一个千篇一律的东西。
相反，先把上下文前置：
- 你是谁 — "我是一名产品设计师，正在构建一个模式库"
- 现有条件 — "我使用React、Tailwind、暗色模式、Inter字体"
- 你想要什么 — "在即时购买演示中添加一个产品卡片"
- 它应该给人什么感觉 — "极简风格、zinc色系、细微边框、无阴影"
顺序很重要。先上下文再任务，会彻底改变AI生成的内容。
2. 先把你的设计语言交给AI
这是你能做的收益最高的一件事。在构建任何东西之前，把你的设计系统交给AI：颜色、字体、间距、圆角、组件规范。
我为此写了一个设计系统转AI提示词模板。你运行一次，就能得到一个格式化的系统提示词，然后粘贴到你的AI工具的自定义指令中。从那以后，AI生成的每个组件都会与你的系统匹配。
没有它，你会花一半时间说"不对，用zinc-800而不是gray-700"和"把圆角再大一点"。有了它，AI就能一次做对。
更好的做法是：使用Agent Skills将你的设计语言永久性地融入AI。像前端设计和品牌指南这样的技能，让AI只需接收一次你的规范，之后就会在每次自动应用。
3. 每次提示词只做一件事
这是我最容易违反的规则，而且每次都后悔。
错误："给我做一个电商结账页面，包含购物车、支付、配送、订单确认和收据。"
正确："添加一个带图片、标题、价格和立即购买按钮的产品卡片。"
然后："现在在点击立即购买时添加一个结账步骤。"
然后："在结账后添加一个收据视图。"
这正是我在这个网站上构建即时购买演示的方式。每个提示词都是一个清晰的变更。我审查、调整、继续推进。对话本身就成为了版本历史。
4. 指向例子，不要从头描述
与其写一段话描述你想要什么，不如引用已经存在的东西：
- "让卡片看起来像首页上的那些"
- "匹配TopBar组件的按钮样式"
- "使用和流式传输演示相同的动画模式"
AI非常擅长匹配现有代码的模式。指向例子每次都胜过写规格说明。而且作为设计师，你已经在用参考来思考了。用好这一点。
5. 描述交互，而不是实现方式
你不需要懂React才能氛围编程。你需要知道用户应该体验到什么。
错误："添加一个onClick处理器，将状态设置为'confirm'，并有条件地渲染一个不同的div。"
正确："当用户点击立即购买时，显示一个包含支付和配送地址的确认步骤。"
让AI去搞定实现方式。你拥有的是用户体验。这就是设计师在氛围编程中的优势。你思考的是用户流程，而不是函数调用。
6. 像写设计简报一样使用约束
设计师习惯用约束来思考。在提示词中也用上它们：
- "保持在100行以内"
- "不使用外部依赖"
- "必须在手机上可用"
- "只使用现有组件，不要创建新文件"
- "与这个文件中的内边距和字体大小保持完全一致"
开放式的提示词产生通用的输出。约束产生聚焦的、有态度的输出。就像一个好的设计简报。
7. 微调，不要重新生成
当某个地方不对时，克制住从头开始的冲动。小规模的精准编辑比全面重新生成更快、更可预测。
- "把字体变大"（而不是"用更大的字体重建"）
- "把按钮上的图标去掉"（而不是"重新设计按钮"）
- "把供应商从亚马逊改成通用名称"（而不是"更新产品卡片"）
- "用灰色背景，绿色不好读"（而不是"修复收据卡片"）
这些都是我在构建这个网站时使用的真实提示词。具体、精准、一次只改一件事。AI会保持其他所有内容不变。
8. 用截图作为提示词
这是设计师的秘密武器。与其描述你想要什么，不如直接展示：
- "用React + Tailwind重建这个"（附上截图）
- "间距和这个参考相比感觉不太对"（附上两个）
- "让我的看起来更像这个"（附上灵感图片）
你花了多年培养了视觉审美。截图让你能在提示词中直接运用这项技能。一张图确实抵得上千言万语。
9. 先丑后精
把结构、样式和交互分开处理：
- "构建布局和数据结构"
- "现在用深色背景、细微边框、Inter字体来美化它"
- "添加悬停状态和过渡效果"
- "添加加载和空状态"
当你一次要求所有东西时，AI会做出你没有要求的取舍。它可能会为了控制复杂度而跳过悬停状态，或者为了适应动画而简化布局。分开处理意味着你来掌控优先级。
10. 告诉AI什么不要做
否定提示词在避免"AI味"方面出奇地有效：
- "不要用蓝色。用zinc色系"
- "UI中不要有emoji"
- "不要在代码中添加注释"
- "不要创建新文件，编辑现有的"
- "去掉AI生成的破折号"
每个AI都有默认倾向。ChatGPT喜欢蓝色按钮。Claude喜欢em破折号。Cursor喜欢创建新文件。了解这些默认行为，并明确地说"不要那个"，你就能得到感觉像是你的输出，而不是它们的。
11、反模式
既然说到这里，以下是要避免的：
"做得更好" — 太模糊了。AI猜测"更好"的含义，你会得到随机的改动。应该是："提高对比度，在卡片之间增加留白。"
一个巨大的提示词 — AI会在中途失去焦点。应该：拆分为3-5个连续的提示词。
过度指定代码 — 你最终会与AI在实现细节上打架。应该：描述结果，而不是实现方式。
从不检查输出 — 错误会累积。一个漏掉的bug变成五个。应该：在下一个提示词之前审查每一次变更。
卡住时重新开始 — 你会丢失AI建立的所有上下文。应该是："撤销最后一次更改"或"还原按钮"。
12、真正的技能
氛围编程不是关于知道如何写代码。而是关于知道如何清晰地把设计意图传达给AI，让它能执行。而作为设计师，这恰恰就是我们所训练的内容。我们每天都在编写设计规范、创建交接文档、标注Figma文件、向工程师解释交互方式。
提示词只是面向不同受众的设计沟通。
那些在这方面变厉害的设计师不是在学习编程。他们是在学习如何指导。这是一项值得投入的技能。
原文链接: 10 Prompting Rules I Learned After Vibe Coding 100+ Interactive Demos
汇智网翻译整理，转载请标明出处