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，但真实用户会遇到网络慢、数据为空、权限不足、字段很长、移动端小屏幕等情况。

常见错误

错误一：prompt 只描述风格

“做一个高级感页面”很难生成可用代码。更好的 prompt 应该包含页面目标、组件清单、数据字段和状态要求。

错误二：直接复制整页代码

v0 生成的整页代码可以做参考，但接入项目时最好拆组件、补类型、改 import、接真实数据。否则后续维护会很痛苦。

错误三：忽略移动端和状态

很多 AI UI demo 在桌面端很好看，但没有考虑移动端、空状态、错误状态和加载状态。发布前必须补齐。

错误四：不检查依赖和设计系统

v0 可能生成你项目里还没有的组件或图标。接入前要确认依赖、shadcn/ui 组件和 Tailwind 配置一致。

什么时候该换别的工具

如果你想从自然语言生成完整产品流程，而不是专注 UI 和 React 代码，Lovable 可能更适合。

如果你需要更强的浏览器 IDE、终端、项目控制和框架灵活性，Bolt 更合适。

如果你已经在大型项目里维护复杂逻辑，Cursor 或本地 IDE 更适合多文件修改和重构。

如果你主要画静态产品原型，Figma 或 Uizard 可能比 v0 更直观。

FAQ

v0 适合中文 prompt 吗？

可以，但复杂界面建议保留英文技术词和组件名。中文说明业务目标，英文说明技术栈和组件结构，通常效果更稳。

v0 生成代码需要重构吗？

多数情况下需要。建议把生成结果拆成组件、补 TypeScript 类型、替换 mock data、检查可访问性和响应式。

v0 和 shadcn/ui 是什么关系？

v0 很适合生成基于 shadcn/ui 风格的 React 组件。如果你的项目已经使用 shadcn/ui，接入会更顺。

v0 能做完整后端吗？

v0 正在增强 full-stack 能力，但复杂业务后端仍然需要开发者设计和审查。它更适合生成前端和应用起点。