Vibe编程，前提是你能描述出来...

我经常听到大公司说"如果你能描述出来，你就能构建出来"。

然而……大多数人并不知道如何描述它。这才是真正的问题。

在这篇文章中，我分享了我们在Vibe编程中观察和测试到的有效方法，以及在用AI构建时需要注意的事项。这里没有任何东西是一成不变的。我们仍处于早期阶段，我们对未来充满期待！

这就是为什么我们在 Pretty Prompt上加倍投入。并推出了与Lovable的新集成。为了帮助你在Vibe编程中获得你想要的结果，无论你是否知道如何描述它。

希望你享受这篇关于如何为Vibe编程写提示词的指南 。

1、我们看到的现象以及为什么它很重要

在花了数百小时为代码、Vibe编程、文本生成、图片、视频等编写提示词之后，我们发现每种媒介都有不同的需求。

要求生成一张图片和要求写一封邮件是不同的。为Vibe编程写提示词和为视频创建场景也是不同的。

我们认为随着这些模型不断演进，模型之间的差异会越来越小，但对输出类型的需求将仍然因媒介而异。

我们研究了什么有效、什么无效。但最重要的是，我们不仅仅依赖别人的说法；我们的发现基于对我们有效的方法。我们还进一步探究了幕后的实际情况。

"如果完全用代码来做这个任务会是什么样？如果没有'Vibe'选项，工程师（也就是Charlie Day 🙃）需要采取哪些步骤？"*

我认为这是一个非常有力的问题，也是更多的"Vibe大师"应该经常问自己的问题。

2、构建 ≠ 交付

我最大的心得：人人都能构建，但不是人人都能交付。

是的。每个人都能构建一些东西。但大多数人无法真正交付它。

这里有很多因素，我认为主要的一个是我们大多数人没有学会像工程师一样思考。而且不想去处理构建新事物时出现的难题。优秀的工程师为难题找到解决方案。

不仅仅是关于编程……而是关于解决难题。

在本文中，我将专注于提示词部分，因为大多数人都卡在"很难把我脑子里的想法翻译出来"。

那么，接下来会怎样？

人们默认使用通用的、懒惰的提示词，得到通用的结果。

像"不能用。修好它！"这样的提示词（可能更像是"修好它！"全大写 🤦）或者"我要一个公司的着陆页"（甚至没有加上公司名称、网站风格、配色方案、目标受众等）会产生糟糕的结果。

听起来很简单。但我们大多数人都忽略了它，因为很难解释我们想要什么，而且我们天生就懒。

注意：写更多并不总是意味着更好的结果。不是关于长度，而是关于质量 🤨。是关于清晰度和上下文。

有时你可能需要更长的提示词，有时可能需要更短的。但我鼓励你停止思考提示词的长度，开始思考你生成的提示词的内容，以及你真正想从AI那里得到什么。

3、为什么将模糊转化为清晰是一种超能力

能够将模糊的指令转化为清晰的文本确实是一种非常强大的技能。这已经不是什么新鲜事了。一直以来都是如此。

现在它变得更加重要了，因为我们不得不使用纯文字与计算机（不仅仅是人类）进行交互。

如果你在写作方面很懒（或者就是不知道如何向计算机解释你想达到什么效果），那么你只是在依赖运气。而运气不会凭空降临……

*顺便说一句，Pretty Prompt在将简单的、缺乏上下文的提示词转化为适合AI的正式提示词方面做得相当不错。

到目前为止我们的发现：

• 好的提示词和一般的提示词往往产生相似的结果
• 优秀的提示词产生出色的结果
• 我们称这些为前1%的提示词

4、那么如何写出前1%的提示词？

我对Vibe编程（在 Lovable、Base44等工具中）最有效的做法是减少模糊性和增加上下文。

4.1 模糊性

说"给我做一个酷炫的网站"和说"一个受苹果启发的网站，采用单色风格，柔和的边框和浅灰色点缀"是不一样的。虽然还算不上前1%，但肯定没有那么模糊。

AI在模式匹配方面表现出色。所以通过给出例子、参考、具体的颜色（例如"深哑光黑 #111111"），甚至是你的意思的截图，它确实有助于引导模型朝着你心中的方向走。

4.2 上下文

通过提供更多关于你正在构建什么的上下文，你增加了AI预测"正确"的下一个token并朝着你心中的方向前进的机会。

AI只能预测下一个token。这是它唯一的目的。所以更多上下文 = 更大的正确几率 = 更大的让运气降临的机会。

"我的教训是：优秀的AI始于优秀的上下文。模型反而是简单的部分。" - Avishai Abrahami，Wix CEO兼联合创始人。

（感谢Ofer Shayo分享这篇帖子*中的上面这段话！ ⬆️）

5、Vibe编程的提示词"工作"

我喜欢在Vibe编程时将不同类型的提示词视为"工作"。例如：

• 设计东西 → 工作：设计
• 构建x、y、z → 工作：构建
• 调试这个问题 → 工作：调试

这些"工作"每一种都需要不同类型的提示词。

5.1 设计

1. AI的一个大问题是大多数产品或网站最终看起来都一样。它们遵循相同的模式，使用相同的图标，有相同的字体，而且到处都有一个看不见的牌子写着 "我是AI做的"。
2. 解释你想要如何展示信息也很困难。如果你在构建一个着陆页，你可能想要一种特定的风格、页面的外观和感觉、独特的纹理，或基于你受众的文案。这就是使用"大词"来解释事物有帮助的地方。
3. 不要害羞。不要只说"极简主义"。要具体，要大胆（或小心），使用"氛围"词来描述它。有些人称之为使用"流行语"。
4. 使用对美学的具体参考，如"新粗犷主义"或"单色"等。同样，AI擅长模式匹配，所以通过给出参考，你就成为了"AI交响乐团"的指挥。我们需要提供参数和约束，这样AI才能在那个空间内发挥创意。

例如：

A SaaS dashboard for a new tool called 'Payflowly' using a Bento Grid layout to organize the data charts. Use a Minimal Brutalism aesthetic with straight borders and cards, no curved corners, and a retro look using a color palette of blue (#1B73E8), red (#FF5B60), and yellow (#FFFDD4). Start with the main page of the dashboard and work your way from there, step by step.

5.2 功能性

1. 在这里清晰是必须的，而不仅仅是锦上添花。功能性与你正在构建的东西的外观一样重要，甚至更重要。
2. 与 Stripe 的错误集成可能会阻止你向客户收费。
3. 在前端添加API密钥可能会暴露你业务的重要信息并在未来造成麻烦。
4. 错误的后端会影响用户体验产品的方式，并可能导致用户流失。构建产品很难。当你远离代码、仅仅依赖文字时，这就更难了。这就是为什么提示词很重要。

模型变得越来越聪明。公司正在筹集大量资金来构建下一个编码工具，但你的请求也在变得越来越复杂。所以把提示词写好会对你有很大帮助。

注意： 当涉及到让东西功能化时，我喜欢先在一个单独的文档中用要点列出我想要实现的东西。一旦有了这个简报，我就把它交给Pretty Prompt来帮我以最佳方式组织它（甚至填补我遗漏的空白）。然后，我才会把它交给AI来构建。

根据我的经验，跳过规划阶段会在后来反噬你。

如果你不知道从哪里开始，或者在提示词上卡住了，我们整理了一份针对所有类型Vibe用例的实战测试过的提示词列表。这些在Pretty Prompt的Library中。最棒的部分？ 它们就在你输入提示词的地方直接可用。

Pretty Prompt在Lovable中的公共库的快照。

5.3 修改或添加功能 + 前端变更

• 请记住，当你添加新功能时，这可能会影响或更改你项目中的其他代码。因此，在整合新功能时，澄清你不想修改什么，或者在应用任何新东西之前应该测试什么，是一个好习惯。
• 在进行视觉更改时，要具体说明你正在处理的组件。不要只说"顶部按钮"。明确说出你想处理哪个按钮、它应该在哪里、它应该说什么等等。→ 不要留下任何模糊之处。
• 例如："在footer中的**'联系我们'链接元素上使用CSS过渡实现一个悬停状态交互。悬停时，对元素应用红色下划线**。过渡时间应该短暂（150ms），以感觉响应迅速。"
• 把你的Vibe产品想象成一个"生命体"。一切都是相互关联的。
• 请记住，使用markdown在你为AI编写提示词时可能也有帮助。

例如：

Add a dark/light mode toggle to my app.

**Requirements**:
* UI toggle button in the navbar.
* Persist preference across all pages.
* Apply dark classes globally with Tailwind.
* Make sure you do not modify any of the current app functionality apart from the dark/light mode.

5.4 调试

这是我们大多数人使用Vibe编程工具时最容易卡住的地方……根据我的经验，这是我看到的Pretty Prompt的最佳用例之一。它真的帮助我走出了无休止的bug循环。继续阅读下面的真实用例。

当涉及到Vibe编程时，调试的主要领域是：

1. 有些东西感觉不对劲
2. 我陷入了某个东西不工作的循环中
3. 需要重新开始

在调试时，遵循你与真正的软件工程师沟通时使用的相同结构：

• 解释目前发生了什么
• 解释应该发生什么
• 解释任何需要考虑的问题或规格

通过将这些信息整合在一起，你最大化了AI"理解"并修复错误的机会。

5.5 像在跟一个工程师朋友说话一样思考

糟糕的调试提示词：

The button doesn't work. Fix it so people sign up.

更好的调试提示词：

The 'sign up' button in the hero section is not working as expected. 

Right now when I click the button, nothing happens. 

**How it should work**:

Users should be able to click the button, and this should trigger a modal appearing in the center of the screen. The modal will contain a form to sign up with the following fields:

* Field 1:___
* Field 2:___
* Field 3:___

Do not show the form until the users have clicked on the "sign up" button. Do not touch any other functionality of the website.

Make sure the form follows the same style and identity from the rest of the website. Once we implement this, we will work on saving the form details on the backend.

注意：有时你最终会陷入一个无法解决的bug循环中。在这些情况下，通常最好退一步，从头开始，或者甚至让AI帮你理解幕后发生了什么。这将帮助解决真正的问题，而不是仅仅在伤口上贴膏药。

6、结构

我从网上收集了一些最好的资源，并试图让它们变得合理。

太长不看版：如果你是通用的，就别指望不无聊的结果。

用AI开始可能很容易，但要构建出脱颖而出且真正有用的东西仍然很难。

要获得前1%的提示词，以下是对我们有效的方法（请去试试！）：

6.1 设计提示词 → 多米诺效应框架

1. 你想构建什么："你正在构建的'东西'是什么？" → 一个SaaS着陆页、一个设计作品集、一个类似Airbnb的办公空间市场、一个精品葡萄酒电商网站等。
2. 你想构建的东西的风格（氛围）："它看起来怎么样？感觉或个性是什么？" → 大胆明亮的Duolingo风格、受开发者启发的命令行美学、玻璃拟态风格等。
3. 该风格的布局："信息和风格如何展示和组织？" → 便当盒网格格式、单滚动流程、分屏、杂志或编辑布局等。

就像一个"多米诺效应" → 一个部分倒向下一个：

• 功能/产品是什么？
• 产品看起来怎么样？
• 风格如何展示？

例如：

• 什么：一个叫Stemlingo的数学学习应用
• 风格：Claymorphism，蓬松的按钮，柔和的边缘，受Duolingo启发的颜色（主色：黄色代替绿色）
• 布局：便当盒网格，清晰地展示不同的练习作为用户完成的选项菜单，明确编号，每个练习逐步解锁。

Create a mobile application interface for a maths learning app called "Stemlingo." Use a Bento Grid layout to organize the learning modules as distinct, numbered missions that unlock progressively.

Apply a Claymorphism aesthetic with puffy, soft-edged 3D elements, using a color palette inspired by Duolingo but with a dominant, bright Yellow.

注意：在前端做更改时，要以"块"为单位思考。这意味着AI会以一种更容易后续修改的方式构建东西。整个前端不过是一堆盒子（box）和组件拼在一起，然后以特定的方式添加样式。

以块为单位构建意味着你以后将拥有对这些组件施展魔法的力量。

例如：

Design a **minimalist footer** component for a web application. The aesthetic must be **playful and friendly**, strongly inspired by the visual style of Notion (e.g., clean lines, ample whitespace, subtle interactivity). Add all links on the left side, and include the tagline on the right side of the footer. 

The footer must include the following elements:

1.  **Tagline**: A small, friendly sentence.

2.  **Navigation Links**: Explicit links for 'Contact' and 'Privacy Policy'.

3.  **Social Media Icons**: Placeholder links for: Twitter, GitHub, LinkedIn.

Implement the following specific design requirements:
*   **Background**: Pure white (`#FFFFFF`).
*   **Iconography**: Use icons that mimic a **hand-drawn or pencil-sketch style**. Ensure they are simple outlines.
*   **Layout**: Maintain generous spacing and simplicity; avoid heavy borders or complex structures.

这些只是例子。在一个所有人都能使用AI的世界中脱颖而出，做你自己就好。带来你自己的个性，你的氛围。敢于带来你想要的风格或设计格式，即使它是出乎意料的。做那只黑羊。

6.2 从零开始 → What、Who、Why框架

从零开始构建时，最好给AI一些关于你正在构建什么的背景信息。解释它是什么、给谁用、能帮他们做什么，以及它为什么存在。

• What：这个产品做什么？→ 在南美洲找到精品酒店
• Who：这个产品给谁用？→ 背包客/旅行者和精品酒店
• Why：为什么重要？→ 帮助找到最好的本地体验（旅行者）+ 推动销售（酒店）

谈论用户的流程，他们将如何使用产品，以及在每一步应该发生什么：

The site should be optimized for travellers inspired by Airbnb's UI/UX. Travellers should be able to search for boutique hotels by location and date through a search bar at the top, and once they click "Search", they should be able to select from a series of filters (that work like tags), to better narrow their search. 

In addition they will have an AI option to chat with an "AI assistant", and in return it will find the available hotels based on their queries. Either way (search + filters or AI chat), users should be able to see the display of available options based on their preferences, or start again if needed.

不要只关注"外观和感觉"，要思考功能性。别忘了计算机读不懂你的心思，所以列出产品应该做什么的步骤，并从用户的角度来解释，会有很大帮助。

例如：

I need a **marketplace** desktop app for **boutique hotels**. It helps them **find new customers**, while helping travellers **find the most suitable local hotel** wherever they travel in South America, so that they can **have the best local experience** and hotels can *drive more sales* online.

**Product Description**: 
* *Hotelbnb*

It should have:
* Tech stack: [TECHSTACK REQUIRED]
* Including Frontend, styling, Authorization and Database.

Core features include:
* Listing of hotels by location
* Filters to search for location, number of stars, amenities, availability.
* Log in functionality for both hotel managers and travelers. Each of them with their own view...

**Design Requirements**:
* [Any specific requierements such as colors, scheme, styling, font, type of buttons, similar websites/products as examples]

* [Any specific flow the user needs to follow, that will give context to the Agent on how to build it]

7、来自Pretty Prompt网站的真实案例

两周前，我在和AI较劲帮我们修复导航栏。我尝试了两个多小时，但毫无进展。它没有按预期工作，我给 Cursor 的每一个提示词都让情况变得更糟……

所以我回到画板前，写下了我想要达到什么效果、什么不工作以及为什么。然后我把笔记交给Pretty Prompt……砰！10分钟内修复了。

从现在起，我不会再犯同样的错误。我的新工作流程是：

1. 在Notion中写下我的笔记
2. 用Pretty Prompt改进它们为一个连贯的提示词
3. 只有在那之后才把它交给Cursor（或者我那时正在使用的任何AI）

这真的有效。

我关于导航栏的规划笔记：

The navbar menu is not working as expected.

The dropdown options from the items in the navbar should only open when the user hovers over the actual word. And the dropdowns should close when the user moves out of it, and not require to click out for it to close.

In addition, we need to make sure that the dropdowns do not open unless the cursor of the user is actually on top of the item of the navbar, not below or besides. Otherwise they don't work as expected. 

Revise how it is now, to find the best way to make this working as expected.

经过Pretty Prompt的魔法处理：

Refactor the navbar dropdown functionality to meet the following requirements:

Interaction:
- Dropdowns should open on hover over the specific navbar item text.
- Dropdowns should close automatically when the cursor moves out of the navbar item or the dropdown itself.
- Ensure dropdowns only trigger when the cursor is directly over the navbar item text, not adjacent areas.

Objective:
Achieve a seamless and intuitive hover based interaction for the navbar menu.

现在 它按预期工作了 ！

8、回顾

所以不要像其他人一样。成为那写出优秀提示词、获得前1%结果的前1%。

• 专注于上下文、模糊性和清晰度。

上下文 ⬆️ + 模糊性 ⬇️ = 更多清晰度

• 专注于结构

更好的提示词结构不仅会帮助你为AI澄清你的请求，还会帮助你理解你在要求什么，并更好地组织你的想法。这甚至可能帮助你发现你最初可能遗漏的东西。

所以更好的提示词 = 更好的思维结构。

• 把构建想象成打电子游戏。

构建一个产品不会在一个提示词内发生，就像你不会在一个关卡内赢得一场游戏一样。你在构建产品的过程中更多地了解你正在构建的产品。虽然你当然可以走得更远，并通过更好的提示词来省钱。

10个快速提示词技巧：

1. 指定你正在谈论的组件/产品类型
2. 解释它是给谁用的以及为什么有帮助
3. 在提示词早期定义视觉风格或美学
4. 给出参考和例子
5. 添加你想看到的布局
6. 结合极端元素来脱颖而出
7. 像在跟一个工程师伙伴交流一样写
8. 使用"氛围"词或"流行语"来进行视觉规格说明
9. 把你的网站/产品想象成一系列的块（就像用乐高积木搭建一样）
10. 把你的想法分解成清晰的任务，明确你在要求什么

原文链接: "Everyone is a builder now". Only if you can describe it...

汇智网翻译整理，转载请标明出处