v0.dev（常简称 v0）是 Vercel 推出的 AI UI 生成工具。你只需要用一句话描述页面目标、内容结构、风格偏好与交互细节，它就能生成可编辑的页面原型，并给出可直接落地的前端代码片段。对设计师来说，它更像“可对话的原型搭建器”；对前端来说，它更像“能快速起草组件与页面骨架的协作搭档”。
1）需求讨论阶段：把抽象的 PRD 变成可看可点的界面草图，快速对齐信息层级与模块划分。
2）设计落地阶段：用它先生成一个“可编辑的 UI 起点”，再在 Figma/Sketch 或代码侧做规范化与精修。
3）组件库/设计系统维护：当你需要一个新组件（表格筛选、弹窗表单、空状态、仪表盘卡片等），可以先用 v0 起草，随后按团队规范重构。
4）营销/活动页：Banner + 模块区块 + CTA 的常见结构非常适合用提示词快速生成多版方案。
第 1 步：写清“页面目标 + 结构 + 风格 + 约束”。例如：这是一个 SaaS 后台的“客户详情页”，包含信息概览、订单列表、最近活动、备注区域；整体风格简洁、留白多、对比强。
第 2 步：要求可编辑与可迭代。让 v0 输出“可编辑的组件分区”，并说明你希望保留哪些模块可替换（如：表格列、筛选条件、按钮文案）。
第 3 步：对齐设计规范。如果你团队有现成规范（字体、字号阶梯、圆角、阴影、间距单位、按钮样式），建议在提示词里写成一组明确的约束：如 8px spacing、圆角 12、按钮主色 #111、正文 14px、标题 20/24px。
第 4 步：迭代关键细节。常见迭代点包括：信息密度、移动端适配、空状态、加载态、错误态、表格可读性、表单校验提示、图标风格统一等。
模板 1：后台页面
“生成一个【产品名称】后台的【页面名称】。布局：顶部标题区 + 指标卡片 3 个 + 主表格区（含筛选栏：日期、状态、关键词）+ 右侧辅助信息栏。风格：极简、黑白灰为主、强调按钮用深色。间距按 8px 体系，圆角 12。请包含空状态、加载态与无数据提示。”
模板 2：营销落地页
“生成一个面向【目标用户】的落地页：Hero 区（标题、卖点 3 条、主 CTA 按钮）+ 功能模块 4 个（图标+标题+描述）+ 客户评价 + FAQ + 底部订阅表单。视觉：大标题、强对比、卡片阴影轻。请给出两套配色方案可切换。”
模板 3：移动端 App
“生成一个移动端【功能】页面，底部有 Tabbar。页面包含：搜索框、筛选 Chips、列表卡片（主标题、副信息、状态标签、右侧操作按钮）。请保证触控区域 >= 44px，并提供深色模式版本。”
1）先看结构是否正确：信息层级、导航路径、主要 CTA 是否明确。
2）再做规范化：统一按钮层级（主/次/文字）、统一输入框与表格样式、统一图标风格与角标。
3）补齐状态：空/加载/错误/禁用/无权限等状态决定了产品体验的下限，建议一次性要求 v0 输出并检查。
4）建立“可复用的组件切片”：把页面拆成 Header、FilterBar、Table、Card、Modal 等模块，便于复用与团队协作。
1）避免一句话太空：越具体越好，尤其是“字段、模块、数量、状态、交互”。
2）不要把 v0 当最终稿：它最擅长“快速起步 + 快速迭代”，最终仍需要你按品牌与产品语境打磨。
3）善用约束条件：写清栅格、间距体系、字号阶梯、对比度与无障碍要求，生成质量会显著提升。
4）中文也能用，但关键术语可以中英混写：如 dashboard、table、modal、CTA、empty state 等，往往更稳定。
把 v0 放在“需求澄清 → 原型起草”这一段：先用它快速生成 2–3 版结构方案，选出最贴近 PRD 的一版，再进入 Figma 精修与组件化。这样你能把时间花在真正需要设计判断的地方：信息层级、可读性、品牌一致性与交互细节。
如果你最近在做产品后台、SaaS 页面或活动页，v0.dev 是一个值得加入工具箱的 UI 生成器：它能显著缩短“从想法到可视化界面”的时间，让你更快进入可讨论、可迭代的状态。
