用 v0 做企业落地页/Dashboard 实战
v0 是 Vercel 出的 AI 前端生成工具：你用一句话或一张截图描述想要的界面，它直接生成可运行的 React + Tailwind 页面，并能一键部署上线。 这篇带你跑通一个真实流程——用 v0 做落地页和一个后台 Dashboard，从生成、迭代到导出部署，并讲清它擅长什么、不擅长什么，别用错地方。
如果你是产品、运营、独立开发者，想快速把一个想法变成能看能点的页面，v0 是目前体验最顺的一条路。
v0 是什么，和 Cursor、Bolt 有什么不一样
v0 的定位很专一：生成前端 UI。它擅长把”我想要一个 SaaS 落地页/数据看板/定价表”这种描述，变成结构清晰的组件代码，默认用 React、Tailwind、shadcn/ui 这套现代栈。
和它容易混的几个工具，定位其实不同：
- v0：聊天式生成 UI，强在单页面/单组件的视觉效果，所见即所得，适合做落地页、Dashboard 这类前端。
- Cursor：是 AI 代码编辑器，强在改你已有的整个项目，全栈、逻辑、重构都行，但你得自己搭框架。
- Bolt：偏全栈一把梭，前后端一起生成、浏览器里直接跑，更适合做能跑通的小应用原型。
一句话区分：要好看的前端页面找 v0；要改大项目找 Cursor；要前后端都生成的原型找 Bolt。本文聊的就是 v0 的主场——前端页面。
再补一个判断标准:看你手头有没有现成项目。从零开始、只要一个能看的页面,直接开 v0;已经有个跑了几个月的 Next.js 项目想加新页面,不如直接开 Cursor 在项目里改,省掉”生成完还要对齐现有组件规范”的功夫。我见过团队把整个 Dashboard 丢给 v0 单独生成,结果按钮圆角、间距、字号和主项目对不上,最后还得手动统一一遍。v0 最省事的场景是”平地起页面”,不是”往老项目里插页面”。
第一步：准备与第一次生成
注册登录后，你会看到一个聊天输入框。两种起手方式：
方式一:用提示词生成。 把需求写具体,别只说”做个落地页”,而是说清楚:
做一个 AI 写作工具的 SaaS 落地页,深色主题。包含:顶部导航(logo + 登录按钮)、主视觉区(大标题 + 副标题 + 行动按钮 + 产品截图占位)、三个核心功能卡片、定价表(免费/专业/团队三档)、底部 FAQ 和页脚。用渐变点缀,风格现代简洁。
方式二:用截图生成。 这是 v0 很强的一招——把一张你喜欢的网页截图或设计稿丢进去,让它照着还原成代码。对”我看到某个站很好看,想要类似的”这种需求特别省事。
生成后右侧会实时渲染出页面,你可以直接在预览里看效果。
写提示词有个具体的顺序建议,照这个顺序写命中率明显更高:先说页面类型和主题风格,再说模块清单(从上到下列),最后说配色和调性。比如上面那条提示词拆开看是”落地页 + SaaS 写作工具 → 顶导/主视觉/功能卡/定价表/FAQ/页脚(按从上到下顺序)→ 深色 + 渐变点缀”。这个顺序对应了 v0 按区块拼装的生成逻辑,配色和模块混着说,比如”做个蓝色落地页,里面有定价表,风格现代,还要导航栏”,容易漏模块或配色套不到位。
另外一个容易被忽略的点:第一次生成时把”不要什么”也说清楚,比如”不要卡片阴影太重”、“不要放轮播图”。v0 的默认风格偏”AI 生成范”——渐变球、大量圆角卡片、居中大标题,不特别说,大概率拿到一眼就是 AI 做的页面。提前排除不想要的元素,比自己看到再改要省两三轮对话。
第二步:迭代调整,把页面磨到位
第一版几乎不会一次到位,迭代调整才是 v0 的核心体验。你像跟人对话一样提修改要求:
- “主视觉的标题再大一点,副标题颜色调浅”
- “定价表改成横向三列,中间那档加个『最受欢迎』标签”
- “导航栏加个粘性吸顶效果”
- “整体换成蓝紫渐变配色”
每次修改它都会在原版基础上增量改动,并保留历史版本,改坏了能回退。几个实用技巧:
- 一次只改一类东西:别一句话塞五个需求,拆开提,命中率更高。
- 善用「选中元素再改」:在预览里点中某个区块,针对它单独提要求,比泛泛描述准。
- 让它给变体:不确定方向时,让它”出三个不同风格的版本”再挑。
做 Dashboard 时思路一样:先让它搭出整体布局(侧边栏 + 顶栏 + 内容区),再逐块补——数据卡片、图表占位、表格、筛选器。图表它通常用现成图表库生成,数据先用假数据占位,后面接真实接口。
Dashboard 比落地页多一个坑要提前防:表格和图表的数据结构容易一版一变。今天让它加一列”状态”,可能直接改写表格组件的数据类型,明天再加”负责人”,几轮下来字段名不统一(一会儿 status,一会儿 state)。做法是:第一次生成骨架时就把完整数据字段列一遍,比如”字段包括:客户名称、状态(进行中/已完成/已取消)、负责人、创建时间、金额”,一次说清楚比分批加省事得多。
另外,v0 生成的图表默认是 Recharts 一类库的用法,提前跟它说”图表数据结构用数组套对象的形式,方便我后面替换成接口数据”,导出的代码会更好改。
第三步:导出代码,部署到 Vercel
页面满意后,有两条路落地:
一键部署到 Vercel。 v0 是 Vercel 自家产品,导出代码部署 Vercel 是最顺的路径——点部署,它把项目推上去,几十秒就给你一个能访问的线上地址。做落地页验证、给客户看 demo,这条路最快。部署完默认给你一个 xxx.vercel.app 的域名,如果要挂自己的域名,在 Vercel 项目设置里加一条 CNAME 解析就行,不用额外折腾服务器。
导出代码到自己项目。 如果你已经有项目(比如用 Cursor 在维护一个 Next.js 仓库),可以把 v0 生成的组件代码复制出来,粘进自己的工程里继续改。因为它就是标准的 React + Tailwind + shadcn/ui,和主流前端项目无缝衔接,不是黑盒。
这里有个坑值得提前知道:v0 生成的组件通常依赖它自己那套 shadcn/ui 的基础组件(Button、Card、Input 这些),项目里没装的话,直接粘贴代码会报”找不到模块”的错。解决办法:用 v0 提供的 CLI 命令(类似 npx shadcn add)把依赖的基础组件自动装好,比自己对照报错一个个补要快。
如果项目托管在 GitHub 上,v0 还支持直接同步到仓库——生成满意后关联仓库,它开一个新分支把代码推上去,你走正常的 PR 流程 review 后合并,比复制粘贴更不容易漏文件。
想系统理解 v0 的完整工作流,可以看 v0 使用教程（规划中）;想用它做数据看板,搭配 用 AI 做数据看板（规划中）一起看。
新手常见坑
- 提示词太笼统:只说”做个好看的页面”,出来的东西大概率不是你要的。把布局、配色、模块一项项写清楚。
- 想让它写后端逻辑:v0 主场是前端 UI,登录鉴权、数据库、支付这些它不擅长,别硬塞,那是 Bolt 或自己写后端的活。
- 生成即上线:导出的代码可读可改,但落地页文案、SEO、真实数据接口都得你自己补,它只给你一个漂亮的壳。
- 复杂交互别指望一步到位:多步表单、复杂状态联动,v0 能搭骨架,精细逻辑还是要进代码手动调。
- 改到一半突然”整体变样”:有时候你只想改一个按钮颜色,它却把整个区块的布局都重新排了一遍。这种情况多半是提示词里带了容易引发全局重排的词,比如”整体更现代一点”、“再高级一点”这类模糊描述会触发它大幅重写。想小范围改动,尽量点选具体元素再提要求,别用这种笼统的形容词。
- 依赖版本和你本地项目对不上:v0 生成代码时用的 Tailwind、shadcn/ui 版本是它自己的默认版本,如果你本地项目锁定的是旧版本,粘过去可能有些类名或 API 不认。导出前留意一下它给的依赖列表,和自己项目版本差太多的,宁可手动挑关键组件抄过来,别整包替换。
常见问题
v0 生成的代码能商用吗? 可以。它产出的是标准 React + Tailwind 代码,版权归你,导出后随便改随便上线。具体授权条款以官方文档为准。
v0 免费吗? 有免费额度可以体验,生成次数和高级功能按套餐区分。具体额度与价格以官方页面为准,本文不写易过期的数字。
v0 适合做完整的网站/应用吗? 适合做前端页面和原型——落地页、Dashboard、营销页很顺手。但完整应用涉及后端、数据库、鉴权,建议 v0 出前端、再用 Cursor 等工具补全栈,或交给开发同学接逻辑。
不会写代码能用 v0 吗? 能跑通生成和部署,因为全程对话式操作。但要改细节、接数据、长期维护,还是得懂点前端。完全零基础建议先把 React/Tailwind 的基本概念过一遍,用起来会顺很多。
v0 和 Figma 是替代关系吗? 不是。Figma 产出的是设计稿(图),v0 产出的是能跑的代码。常见组合是:Figma 出设计 → 截图丢给 v0 → 生成代码,两者互补。
👉 看看我们的 AI 编程实战体系课,或逛 AI 编程教程大全 把基本功打扎实。