v0 by Vercel

我们给 v0 提供了一个简单的提示词：“Build a SaaS dashboard for a freelance invoice tracker, clients, invoices with line items, status workflow from draft to paid, and a revenue chart.”（构建一个自由职业者发票追踪器的 SaaS 仪表板，包含客户、带明细的发票、从草稿到已支付的状态工作流，以及收入图表。）不到两分钟，v0 就返回了一个可运行的 Next.js 沙盒：侧边栏导航、shadcn/ui DataTable、可编辑的发票详情视图、Recharts 收入图表。几秒钟内生成生产级 UI。接着我们添加了 Next-Auth。创建发票的表单崩溃了，会话令牌没有传递给 API 路由。经过连续三次修复，第三次终于成功了。总耗时：从第一个提示词到拥有身份验证、数据库支持的可用应用，共计 47 分钟。这就是 2026 年 4 月的 v0：对于能够阅读和调试生成代码的熟练 React 开发者来说，它非常快；而对于不具备这些技能的人来说，则是一场资格测试。

v0 于 2023 年 9 月作为“生成式用户界面系统”推出内测版，三周内吸引了 100,000 名候补注册用户。Vercel 在 2023 年 7 月聘请了 shadcn 共同构建 v0，这种合作关系是结构性的：ui.shadcn.com 上的每个组件都带有一个“Open in v0”按钮，且每次生成都默认使用 shadcn 原语。到 2026 年 3 月，已有 600 万开发者使用该平台。2026 年 2 月的全面升级——沙盒运行时、Git 面板、VS Code 风格编辑器、代币计费——使其从一个组件生成器转变为全栈代理式环境。

2026 年 4 月的 v0 究竟能交付什么

v0 现在是一个基于浏览器的代理式全栈环境，组件生成器被嵌入到一个无需离开浏览器即可构建、运行和部署完整应用程序的系统中。2026 年 2 月的全面升级是最大的一次单项能力更新：一个沙盒运行时（sandboxed runtime），可在浏览器中实时运行生成的应用（包括路由、布局、交互式表单，而不仅仅是静态预览）；一个 Git 面板，无需终端即可从聊天界面创建分支和拉取请求；一个 VS Code 风格的文件编辑器，可在聊天旁直接访问代码；以及从固定积分向代币计费的转变。

数据库集成。Neon Postgres、Supabase 和 Upstash Redis 可从项目侧边栏一键配置。添加后，v0 的 AI 会自动针对已配置的服务编写模式（schema）、查询和 API 路由。2026 年 2 月新增了 Snowflake 和 AWS 数据库连接器，供企业团队连接现有的数据仓库。Figma 导入（Premium 及以上版本）可将画板转换为 shadcn/ui 组件，对于简单布局很可靠，但对于复杂的自动布局结构则稍显不足。带有自定义域名和环境变量管理的一键 Vercel 部署，让您无需离开浏览器即可完成整个工作流。

v0 的闪光点与暗藏的痛点

最经典的制胜工作流是为 React/Next.js 开发者消除样板代码。v0 能够根据提示词在 15 秒内生成真正美观的 shadcn/ui 组件、正确的 ARIA 属性、TypeScript 类型和 Tailwind 令牌。Speakeasy 工程团队在所有新组件开发中都采用了这种模式：使用 v0 搭建脚手架，使用 Figma 进行设计审查，然后集成到他们现有的 Next.js 代码库中。

“v0 能创建精美、响应式的 React 组件。我用它来搭建 UI 脚手架，这为我节省了几个小时的时间。”

，r/nextjs 社区成员，2025 年

它的失败模式是结构性的。首先是后端复杂性壁垒：v0 生成的前端代码非常出色，但它会编写原生 SQL 而不提供迁移或 ORM 工具，跳过身份验证的实现细节，并且在会话中途添加 Marketplace 数据库集成时容易崩溃。在我们的测试中，连接数据库后添加 Next-Auth 需要三轮迭代，这对于能看懂生成代码的开发者来说尚可应对，但对于不懂代码的人来说则是无解的。第二种失败模式是 2026 年 2 月的计费模式转变：

“价格一夜之间实际上翻了十倍。上个月，我用 $20 就能轻松满足使用需求。今天，我一天就花光了 $20。”

。Vercel 社区论坛，“V0.dev 已变得不可用且不道德。要求退款”，2026 年

同一帖子中的另一位用户报告说“花了 $5 来修复一个 '{'”，即使用 Max 模型来纠正标准模型引入的语法错误。第三种失败模式是缺乏会话记忆：v0 在不同对话之间没有记忆，会在会话之间丢失架构上下文，并且在新的对话中收到提示时会与之前的决定相矛盾。

语言与框架支持：现实检验

v0 就是 React 和 Next.js。这不是你可以绕过的限制，而是深深烙印在平台每一层的架构选择。生成的代码使用 React JSX、TypeScript、Tailwind CSS 和 shadcn/ui 原语。部署目标是 Vercel。数据库集成合作伙伴是 Neon、Supabase 和 Upstash，这些都是 Vercel 推荐的 Next.js 应用程序经典选择。如果你的项目是 Vue、SvelteKit 或 Astro，或者你要部署到 AWS 或 Railway，那么 v0 不是适合你的工具。你可以导出生成的代码并手动重新配置部署，但这违背了该产品的设计初衷。

在 Next.js 技术栈内，v0 支持所有现代特性：App Router、Server Components、Client Components、路由处理程序、服务器操作（server actions）以及中间件层。代理模式能够一致地处理多文件架构决策。框架支持的薄弱环节在于 TypeScript 的严格性：生成的代码可以编译和运行，但偶尔会产生不精确或过于宽松的类型，在合并到启用了严格模式的代码库之前需要进行审查。shadcn/ui 的版本感知是可靠的，v0 会根据当前的组件 API 和正确的导入路径进行生成，但如果你的项目使用的是较旧的 shadcn 版本，生成的组件可能会使用你安装环境中尚未存在的 API。

真实工作流：在 Next.js SaaS 落地页上使用 v0

“先生成，后集成”是使用 v0 的正确思维模型。不要想着：“用 v0 自主构建我的整个应用。”正确的做法是：“用 v0 消除每个组件的样板代码，然后集成到我的项目中。”

在 v0.app 中启动一个新项目。描述你需要的组件：“Build a client list component with a data table, name, email, total invoiced, status badge (active/inactive), and an action menu.”（构建一个客户列表组件，包含数据表格、姓名、电子邮件、开票总额、状态徽章（活跃/非活跃）以及操作菜单。）v0 会使用 shadcn/ui 原语生成以下内容：

// Generated by v0. Client data table with shadcn/ui
// Prompt: "client list table with name, email, total invoiced, status badge, action menu"

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"
import { MoreHorizontal } from "lucide-react"

type Client = {
  id: string
  name: string
  email: string
  totalInvoiced: number
  status: "active" | "inactive"
}

export function ClientTable({ clients }: { clients: Client[] }) {
  return (
    
      
        
          Name
          Email
          Total Invoiced
          Status
          
        
      
      
        {clients.map((client) => (
          
            {client.name}
            {client.email}
            
              {new Intl.NumberFormat("en-US", {
                style: "currency",
                currency: "USD",
              }).format(client.totalInvoiced)}
            
            
              
                {client.status}
              
            
            
              
                
                  
                    
                    Open menu
                  
                
                
                  View invoices
                  Edit client
                  
                    Archive client
                  
                
              
            
          
        ))}
      
    
  )
}

这是极具代表性的 v0 输出：正确的 TypeScript 类型、无障碍的 sr-only ARIA 标签、Intl.NumberFormat 货币格式化、Lucide 图标集成，以及映射到 shadcn CSS 变量层的 Tailwind 令牌。它可以直接放入任何 Next.js + shadcn/ui 项目中，无需修改。生成时间：在 Premium 计划下不到 15 秒。如果组件需要数据库连接，从侧边栏添加 Neon 或 Supabase 集成，v0 将根据配置的模式生成服务器端数据获取层。使用 Git 面板将组件提交到功能分支并开启拉取请求。部署预览会自动从 Vercel 显示在 PR 中。这是该工作流的最佳状态：快速、连贯，并且在合并前已准备好进行审查。

需要注意的地方：多轮会话会累积成本。代币计费模式对输入和输出都收费；在 Pro 或 Max 模型上的长时间会话会以无法提前预见的速度消耗积分。应将会话视为独立的单元：生成、审查、提交、关闭，而不是一整天都开着同一个对话。

安全性、许可与代码泄漏

2025 年 7 月，Okta 威胁情报研究人员记录了 v0 被武器化用于网络钓鱼的事件。攻击者提示 v0 生成像素级精确的 Okta、Microsoft 365 和加密货币钱包登录页面克隆，然后将它们托管在 Vercel 自己的基础设施上，以利用其受信任的域名声誉。Okta 指出，v0“允许新兴威胁行为者快速制作高质量、具有欺骗性的钓鱼页面，从而提高了他们行动的速度和规模。”Vercel 封锁了记录在案的页面，并宣布与 Okta 建立第三方滥用报告机制，但该事件暴露了一个明显的漏洞：登录页面克隆并未被检测为滥用模式。

2026 年 4 月，Vercel 披露了一起供应链漏洞事件：攻击者入侵了 Vercel 员工使用的第三方 AI 工具 Context.ai，获取了其 Google Workspace 账户的访问权限，并从 Vercel 系统中枚举了非敏感的环境变量。ShinyHunters 黑客组织在 BreachForums 上以 200 万美元的价格挂牌出售被盗数据。Vercel 证实（TechCrunch，2026 年 4 月 20 日），没有证据表明敏感环境变量遭到访问，并发布了紧急安全更新。此次数据泄露直接影响了将 API 密钥和数据库凭据作为 v0 环境变量存储的开发者，在任何已确认的 Vercel 安全事件后轮换机密信息是明智之举。

关于训练数据：Free 计划默认选择加入；Premium 计划默认选择退出；Business 计划强制退出。生成的代码归用户所有。

v0 vs. Lovable vs. Bolt.new

Lovable 是 v0 最直接的全栈竞争对手。Lovable 可根据提示词生成完整的 React + Supabase 应用程序，默认包含身份验证、数据库和部署，并提供完整的 GitHub 代码所有权和清晰的退出路径。v0 生成的 shadcn/ui 输出质量更高；而 Lovable 生成的后端架构更完整，无需进行 Marketplace 配置。对于构建 SaaS MVP 的非开发者来说，Lovable 达到可用应用所需的手动步骤更少。对于已经处于 Next.js 生态系统中、希望针对现有技术栈生成组件的开发者来说，v0 是更强大的选择。

StackBlitz 推出的 Bolt.new 在速度和计费透明度上展开竞争。Bolt 通过 WebContainers 在浏览器中运行，并在生成时实时显示代码，这是希望边构建边学习的开发者的最佳选择。Bolt 的代币计量定价在提前估算会话成本时更具可预测性。关键区别在于：Bolt 需要外部托管，而 v0 原生部署到 Vercel。除了 Next.js，Bolt 还支持 Vite、Astro 和 SvelteKit；v0 仅支持 React/Next.js。在 Vercel 生态系统之外，Bolt 在灵活性上胜出。而在其内部，v0 的原生部署和 shadcn/ui 质量则是其优势所在。

贯穿 2025 年的一个 Vercel 社区帖子提出了第三种比较：“既然我每月花 $20 就能无限次使用 Cursor，为什么还要继续为 Vercel 付费？”Cursor 是一个本地 IDE 助手，这种比较并不精确，但价值差距是真实存在的。Cursor 每月 $20 的订阅在您现有的代码库中提供了实际上无限的 AI 代码辅助。而 v0 的 $20 提供的是价值 $20 的代币，这些代币在复杂的会话中会被迅速消耗。

独立开发者、团队与企业定价

v0 在 2026 年 2 月转向代币计费模式，这极大地改变了经济效益。代币成本随模型层级和提示词复杂度的增加而增加。简单的组件生成只需几分之一美分；在 Pro 或 Max 模型上进行复杂的多文件代理式构建，每次会话花费 $1–$5。核心抱怨在于：v0 在运行生成之前不会显示成本估算。

Free：每月 $5 积分，每天 7 条消息，v0-1.5-md 模型，这是一个评估层级，而非工作层级。Premium（每月 $20）：每月 $20 积分，无限消息，v0-1.5-lg 模型，Figma 导入，API 访问，默认退出训练。在 2026 年 2 月的计费转换后，多名用户在三天或更短时间内就耗尽了 $20 的额度。Team（每用户每月 $30）：共享积分池，每天 $2 奖励积分，集中式 Vercel 计费。Business（每用户每月 $100）：默认强制退出训练数据，这是相比 Team 计划的主要治理功能。Enterprise（定制）：SSO、SLA、专属支持，不使用客户数据进行模型训练。

Vercel 锁定适用于所有计划。从 Git 到部署的工作流在 Vercel 的边界处终止。使用 AWS、Railway 或 Render 的团队可以导出生成的代码并独立部署，但会失去让 v0 保持高效的集成闭环。