Vibe Coding 时如何编写 Prompt

Source: Dev.to

为什么提示很重要

几年前，编码感觉像是一项单打独斗的运动：只有你、键盘，以及当事情出错时的 Stack Overflow。
现在，编辑器里有了助手、聊天标签，有时甚至有整套构建器，在你咖啡还没喝完时就能吐出 UI。

模型可以写代码，但现在的大部分痛点来自沟通，而不是语法。工作已经转向指挥：你说出需求，系统草拟出内容，你进行反馈，然后迭代。

在“氛围编码”（vibe coding）中，那位无聊且不性感的英雄就是 提示——一个写得明确、像是你真的很在意的请求。

有效提示的指南

要具体

用简洁的要素描述你要构建的内容：功能、粗略布局、界面氛围以及“完成”的标准。

“顶部三个关键指标，最近 30 天的折线图一条，下面的表格可排序列，间距像 Notion 那样平静，避免霓虹渐变。”

给出结构

将提示分成带标题或项目符号的块，这样我们双方都不必四处寻找。常见结构如下：

• 目标
• 必须具备
• 可选项
• 硬性限制（技术、性能、“不要做”）
• 完成定义

它看起来像一张小工单。

指向示例

如果你有截图、喜欢的产品，甚至是一句话——例如“像 Linear 那样紧凑”，“像 Stripe 文档那样简洁”——请一并提供。你并不是在要求克隆；而是给出一个目标，让模型停止自由发挥你会讨厌的排版和间距。

分步进行

不要一次性要求完整的城堡。

1. 骨架和主要用户路径。
2. 增删改查或过滤功能。
3. 打磨细节。

一次性的大提示在前一分钟可能看起来高效，但随后整个下午都会变得昂贵。

像认真对待一样精炼

把第一次输出当作草稿。像代码审查一样审阅：标记出错误、缺失或结构不当的地方。如果同样的错误出现两次，修正提示——而不是单行代码——因为规格可能本身就不够明确。

差 vs. 好的示例

登陆页面

差

为我的 SaaS 做一个好看的登陆页面。

好

Single-page site for a B2B analytics tool, audience = small ecommerce teams.
Sections:
- Hero with headline, subhead, primary CTA, screenshot placeholder
- Logo strip
- Three feature blocks
- One quote for social proof
- Pricing with two tiers
- FAQ accordion
- Simple footer
Look: lots of whitespace, neutral background, one accent color, Inter font, thin borders—no glassmorphism.
Must be responsive. Proper heading order, visible focus states on buttons.
Use placeholder copy; don’t invent fake customer names.
I’m happy when mobile scroll has zero horizontal junk.

仪表盘

差

创建一个带图表的仪表盘。

好

Admin shell:
- Sidebar (Dashboard / Users / Settings)
- Top bar with search + user menu

Dashboard body:
- Four KPI cards: Revenue, Orders, Conversion, Refunds
- 30‑day line chart
- Bar chart for top products
- Sortable orders table (id, customer, total, status, date)

Data from mocked JSON in a `data/` folder.
Show loading skeletons; empty state when the table has no rows.
No paid chart APIs.
Small components, semantic HTML.
This step is only layout + fake data + route placeholders—no real auth yet.

用户资料

差

添加用户资料。

好

Profile screen from the user menu.
Fields:
- Name (required)
- Avatar URL (optional)
- Bio (max 240 chars)
- Timezone dropdown

Inline validation; Save disabled until valid; toast on success.
Optimistic updates optional—don’t block on that.
Out of scope: password, email, billing.
Match spacing and components the app already uses; if there’s no form primitive, add a single `ProfileForm` instead of copy‑pasting markup everywhere.

我在思绪空白时使用的提示模板

Goal:
Who it’s for:
Main happy‑path (a short paragraph):

Must ship:
Nice if there’s time:

Visual refs (apps, screenshots, adjectives):

Tech / limits / “do not”:

Empty & error behavior:

Definition of done:

空行表示“模型将在此即兴发挥”。只有在我对结果满意时才会留空。

---

花一点额外的时间来打造一个清晰的提示。你的未来的自己——那位午夜不再进行 diff‑hunting 的你——会感激你的。