v0.dev Prompt 技巧
v0 的 prompt 越像“前端需求单”，通常越有效。很多人写 prompt 时会不自觉往广告文案方向走，结果用了很多风格形容词，却没讲清楚布局、状态和交互。模型当然能生成东西，但很容易生成一个“看起来差不多”的页面，而不是你真正要的组件。
所以 v0 prompt 的关键不是会形容，而是会约束。
先说结论：结构词比风格词更值钱
一个更有效的 v0 prompt，通常先写：
- 做什么组件
- 有哪些模块
- 有哪些状态
- 在什么端优先展示
- 最后才补风格
顺序反过来，就容易得到“好看但没法接”的页面。
一条够用的 Prompt 结构
Goal:
What component/page do you want?
Content:
What must appear?
States:
What interaction or error states are needed?
Layout:
How should it be arranged across desktop/mobile?
Style:
What visual direction do you want?
这个结构对大多数组件已经足够。
差的 Prompt 和好的 Prompt
差的写法
做一个高级感很强、未来感、简洁又很丝滑的页面
问题：
- 没说清楚要什么页面
- 没说内容结构
- 没说交互状态
更好的写法
Create a checkout page.
- left side: cart summary
- right side: payment form
- desktop: two-column layout
- mobile: single-column layout
- include empty, loading, and error states
- clean minimalist style, black primary button
这类 prompt 虽然不华丽，但可执行。
最该写清楚的 5 类信息
| 类型 | 例子 |
|---|---|
| component type | card、form、dashboard section |
| information hierarchy | 标题、主按钮、辅助信息谁最重要 |
| states | loading、error、disabled、empty |
| responsive layout | mobile 优先还是 desktop 优先 |
| design constraints | 品牌色、是否极简、是否保留留白 |
只要这五类信息足够清楚，v0 的输出就会稳定很多。
Prompt 里最容易被忘掉的部分
很多人会忘写状态。
但真实项目里，这些状态非常重要：
- empty
- error
- loading
- disabled
- hover / selected
不写这些，第一版通常只像 Dribbble 图，不像产品组件。
迭代时怎么写更稳
更好的迭代方式不是“再高级一点”，而是：
- 保留当前布局，只改配色
- 保留结构，补 mobile breakpoint
- 保留层级，减少视觉装饰
- 保留功能，改为 card layout
每次只改一个维度，模型更容易稳定。
实战建议
给 v0 写 prompt 时，先把自己当 PM 或前端 reviewer，而不是创意写手。
只要你能把组件说清楚，v0 的价值就会明显高很多。
