logo

v0.dev Prompt 技巧

v0 的 Prompt 不需要写得像小说,反而越像前端需求单越好。真正有用的 Prompt,通常不是“很会形容”,而是“边界很清楚”。

一个够用的结构

我更建议按这 4 块写:

目标:要做什么组件
内容:必须出现哪些模块
状态:需要哪些交互状态
风格:颜色、布局、视觉方向

写到这一步,其实已经够大多数组件用了。

最常见的问题不是太短,而是太虚

比如“做一个高级感很强的页面”,这种话对设计师都不一定有用,对模型就更不够了。更有效的说法应该落到:

  • 是卡片还是表单
  • 是一栏还是两栏
  • 是移动端优先还是桌面端优先
  • 哪个按钮是主按钮

一条很实用的原则

先写结构词,再写风格词。

结构词决定它做出来像不像你要的东西,风格词只是让它更接近你想要的气质。顺序反过来,就很容易生成“好看但没法用”的组件。

可直接参考的 Prompt

做一个结算页面:
- 左侧是购物车清单
- 右侧是支付表单
- 包含商品名、数量、价格、地址输入和提交按钮
- 桌面端两栏,移动端单栏
- 风格干净,留白多,主按钮黑色

迭代时怎么写更稳

  • 一次只改一个维度
  • 明确说“保留现有结构”
  • 不满意时指出哪块不对,不要只说“再高级一点”

后者听起来像建议,实际几乎等于没说。

v0.dev UI 生成指南
Vibe Coding

v0.dev UI 生成指南

v0 是 Vercel 推出的 AI UI 生成工具,可以通过自然语言描述生成 React 组件。

v0.dev UI 生成指南Prompt 技巧

v0.dev Prompt 技巧

v0 的 Prompt 不需要写得像小说,反而越像前端需求单越好。真正有用的 Prompt,通常不是“很会形容”,而是“边界很清楚”。

#一个够用的结构

我更建议按这 4 块写:

text
目标:要做什么组件 内容:必须出现哪些模块 状态:需要哪些交互状态 风格:颜色、布局、视觉方向

写到这一步,其实已经够大多数组件用了。

#最常见的问题不是太短,而是太虚

比如“做一个高级感很强的页面”,这种话对设计师都不一定有用,对模型就更不够了。更有效的说法应该落到:

  • 是卡片还是表单
  • 是一栏还是两栏
  • 是移动端优先还是桌面端优先
  • 哪个按钮是主按钮

#一条很实用的原则

先写结构词,再写风格词。

结构词决定它做出来像不像你要的东西,风格词只是让它更接近你想要的气质。顺序反过来,就很容易生成“好看但没法用”的组件。

#可直接参考的 Prompt

text
做一个结算页面: - 左侧是购物车清单 - 右侧是支付表单 - 包含商品名、数量、价格、地址输入和提交按钮 - 桌面端两栏,移动端单栏 - 风格干净,留白多,主按钮黑色

#迭代时怎么写更稳

  • 一次只改一个维度
  • 明确说“保留现有结构”
  • 不满意时指出哪块不对,不要只说“再高级一点”

后者听起来像建议,实际几乎等于没说。

Vibe Coding

AI 编程体系课:工具、流程与最佳实践

从零搭建 AI 编程工作流,提升开发效率。

进入 Vibe Coding →

相关路线图