v0 by Vercel UI 生成教程：从提示词到可用 React 界面

这篇教程会完成什么

这篇教程会带你用 v0 by Vercel 生成一个可用的 Web UI 起点。目标不是让 AI 一次生成完美生产代码，而是让你掌握一个稳定流程：先写清楚界面需求，再生成组件和页面，随后检查结构、状态、响应式和项目集成问题。

适合这个流程的场景包括 SaaS dashboard、AI chat 界面、设置页、定价页、数据卡片、后台管理页、landing page 和产品原型。如果你的技术栈是 React、Next.js、Tailwind CSS 或 shadcn/ui，v0 会更顺手。

完成后，你应该得到一组可复制进项目的组件、一份需要人工修改的清单，以及接入真实数据前的检查步骤。

开始前需要准备

在打开 v0 前，先准备四类信息。

第一是页面目标。不要只写“做一个 dashboard”，而要写清楚页面给谁用、展示什么数据、用户要完成什么任务。例如“给 SaaS 管理员使用的订阅分析 dashboard，展示收入、活跃用户、流失风险和最近事件”。

第二是组件清单。提前列出你需要哪些模块：顶部导航、侧边栏、指标卡片、图表区域、表格、筛选器、详情抽屉、空状态和错误状态。组件越清楚，v0 越容易生成可维护结构。

第三是设计约束。写清楚你想要的视觉风格、布局密度、颜色倾向、是否使用 shadcn/ui、是否需要移动端优先。不要只说“modern”，要说“B2B SaaS 风格，信息密度中等，浅色背景，卡片边框清晰，移动端堆叠”。

第四是项目约定。如果你已经有设计系统、组件路径、命名习惯或数据字段，要提前写进 prompt。否则 v0 可能生成一套看起来不错但很难接进现有项目的代码。

第一步：写出可生成的界面 Prompt

一个好的 v0 prompt 不只是描述外观，还要描述结构、数据、状态和交互。

可以这样写：

“Create a B2B SaaS analytics dashboard using React, Tailwind CSS, and shadcn/ui. The page is for subscription managers. Include a top nav, left sidebar, four KPI cards, revenue trend chart placeholder, churn risk table, recent events list, empty state for no data, loading skeleton, and responsive mobile layout. Use a clean professional style with subtle borders and clear hierarchy.”

这个提示比“生成一个漂亮 dashboard”更可靠。它告诉 v0 页面用途、技术栈、组件、状态和响应式要求。

如果你写中文也可以，但关键技术词建议保留英文，例如 React、Tailwind、Card、Table、Dialog、loading skeleton、empty state。这样生成结果通常更稳定。

第二步：先检查结构，再调整视觉

v0 生成第一版后，不要马上改颜色。先看结构是否合理。

重点检查：

• 页面是否回答了原始需求。
• 组件是否拆分清楚。
• 数据区域是否和真实业务字段接近。
• 移动端结构是否成立。
• 是否包含加载、空状态和错误状态。
• 是否过度堆叠复杂动效或不必要装饰。

如果结构不对，先让 v0 修改结构。例如：“把 KPI cards 拆成独立组件”“把表格列改成 customer、plan、risk、last_seen”“增加 empty state 和 retry button”。

视觉调整应该在结构稳定后做。否则你可能花时间美化一个不符合需求的页面。

第三步：把生成代码接入项目

把 v0 代码复制进项目时，不要整段无脑粘贴。建议按组件拆分接入。

先创建页面组件，再拆出可复用组件，例如 MetricCard、RiskTable、RecentEvents、DashboardHeader。然后检查 import 路径、shadcn/ui 组件是否已安装、图标库是否存在、Tailwind 配置是否匹配。

接着把假数据替换成真实 props 或 API 数据。不要让 mock data 长期留在生产页面里。可以先定义清楚类型，例如 SubscriptionMetric、ChurnRiskCustomer、RecentEvent，再逐步接入后端。

如果项目使用 TypeScript，要检查类型是否完整。AI 生成代码有时会把字段写成 any 或松散对象，这会影响维护。应该用明确 interface 或 schema 替代。

第四步：人工审查可访问性和边界状态

v0 生成的 UI 通常视觉不错，但仍然要人工检查可访问性和边界状态。

至少检查这些项目：

• 按钮是否有明确文本。
• 表单是否有 label 和错误提示。
• 表格在移动端是否可用。
• loading、empty、error 状态是否完整。
• 颜色对比是否足够。
• 键盘导航是否能操作关键元素。
• 真实长文本是否会撑坏布局。
• 图表和数据卡片是否有清晰说明。

这一步决定生成界面能不能进入真实产品。AI 很容易生成漂亮 demo，但真实用户会遇到网络慢、数据为空、权限不足、字段很长、移动端小屏幕等情况。