v0 完整使用指南 2026：我用 v0 搭了 30 天 AI 工具导航站，8 个实战 prompt + 4 个真坑

先交代背景。我这个站 www.7027a.com 是个 PHP + MySQL 的老项目，跑了大半年，架构上的取舍我在这篇30 天复盘里写得挺细的。那问题来了——一个 PHP 老站，跑去碰 v0 图什么？

最开始不是因为 v0 好用，是因为它太能吹了。我第一次用它的感觉是：输一句话，8 秒钟，出来一个还挺像样的 landing page，Tailwind 排版也顺。那一瞬间我动摇了，想过干脆把站重写。

30 天之后我没重写。这篇就是那 30 天的完整记录：我用它干了什么、烧了多少钱、以及哪 4 个地方它真的把我坑了。

先说清楚 v0 和 Cursor 到底差在哪

如果你也被这波 AI 编程工具刷屏过来，先把位置摆正，不然很容易用错工具。我在Vibe Coding 那篇指南里写过这事，这里说得直白点：

v0 是一个"出方案"的工具，Cursor 和 Claude Code 是"干活"的工具。

v0 给你的是 React / Next.js + Tailwind + shadcn/ui 的完整代码块，核心能力是"把一段人话变成一个像样的界面"。而 Cursor 3、Devin 2 这类是在真实代码库里改文件、跑测试、提交 commit 的工具。这两件事差别很关键，我一开始混着用才浪费额度。

所以我给自己定的规矩是：v0 负责"我想不清楚长什么样"，Cursor 负责"我想清楚了怎么落地"。下面 8 个 prompt 全围绕"出方案"写，想让 v0 帮你改 bug，方向就偏了。

第一次用：我输了 20 个字，得到一个没法用的页面

我第一次的 prompt 非常朴素，就一句："做一个 AI 工具导航网站的首页。"

出来的页面是那种一眼假的 AI 味：巨大的渐变标题、三个并排的"我们的优势"卡片、底部一个"立即开始"按钮。技术上挑不出错，但放到我站上完全不能用——我站的信息架构是「按分类聚合 + 工具卡片流」，不是落地页。

这次失败让我明白：v0 对"结构"的猜测能力很强，对"业务约束"一无所知。你不告诉它数据长什么样，它就给一个通用答案。这也是后面所有 prompt 都要先交代约束的原因。

我真正用顺手的 prompt 写法

下面这 8 条是我 30 天里反复改留下来的版本，可直接粘贴。每个 prompt 前面标了当时解决的具体场景。

场景一：从一张截图反推组件（用了大概 20 次，最省事的一个）

参考这张截图，做一个 [组件名] 组件。
约束：
1. 用 React + Tailwind + shadcn/ui，TypeScript
2. 配色用 CSS 变量，不要写死 hex（我后面要换主题）
3. 保留截图里的间距节奏，但宽度改成 max-w-7xl 容器居中
4. 不要加任何我没提到的区块（比如 FAQ、CTA、页脚）
5. 组件拆成独立文件，props 用 interface 明确声明

为什么加第 4 条？v0 特别爱"顺手补全"——你让它做一个卡片，它把整个页面都做了，我至少返工 6 次。现在明确说"不要加我没提到的区块"，它就老实了。

场景二：生成工具详情页并对接我的字段（用得最多）

做一个工具详情页，字段来自 API：
GET /api/tools?slug=xxx 返回 JSON，结构是
{ id, name, tagline, logoUrl, categories: string[],
  pricing: { model: "free"|"freemium"|"paid", price: string },
  features: { title: string; desc: string }[],
  pros: string[], cons: string[],
  relatedSlugs: string[] }

要求：
- 页面用 Next.js App Router，server component 取数据
- 拿不到数据时显示骨架屏，不要报错崩溃
- pricing.model 三种值用三种颜色标签区分
- 底部显示 relatedSlugs 对应的推荐位（数据也要取）

关键是把接口结构原样贴给它，别用自然语言描述"展示定价、功能、优缺点"。我一开始写"要有定价、优缺点这些信息"，出来的字段是乱的——它得靠猜你数据库长什么样。贴 JSON 之后一次就对。

场景三：改而不是重写（这个技巧救了我很多次）

不要重写整个文件。
只修改 [文件名] 里的 [组件名] 组件：
- 保持其余部分逐字不变
- 只把 [具体要求] 这段改掉
- 改完把 diff 单独列出来给我看

我发现只要不让它"重写"，代码增量就特别小，能直接贴回仓库。我现在改什么都用这个句式开头，返工率降到很低。

场景四：中文排版补救

这个页面要显示中文，请额外处理：
1. font-family 加 PingFang SC / Microsoft YaHei 兜底
2. 行高用 1.75（中文比英文需要更多行距）
3. letter-spacing 设成 0，别用 tracking-tight，中文会挤
4. 不要用 text-balance 处理中文标题

单独列出来，是因为 v0 默认那套 tracking-tight leading-tight 是按英文设计的，中文标题用它会糊成一团。我前面说它"对中文字体处理很差"，解法就在这几行里。与其抱怨，不如直接把中文排版规则塞进 prompt。

场景五：把 PHP 后端接上

这个 Next.js 页面要调用我现有的 PHP 接口：
- base URL: https://www.7027a.com
- 接口只支持 GET，用 query 参数传参
- 返回值直接是 JSON，不需要再解一层
- 请求头需要带 Referer，否则我的服务器会拒绝
请写成一个 src/lib/api.ts 的封装函数，
带 5 秒超时和失败重试一次，返回类型用 interface 声明。

注意"我的服务器会拒绝"这句。我一开始没写，v0 生成的请求不带 Referer，被我服务器 403 了，还回头问我"是不是你接口有问题"——其实就是没带。

场景六：列表分页 + 空状态

做一个工具列表页：
- 每页 24 条，接口形式 GET /api/tools?page=1&limit=24&category=xxx
- 加载更多按钮，不是分页器（我想要无限滚动的感觉）
- 三种状态都要有：加载中（骨架屏 24 个卡片）、空结果（文案写"这个分类还没有收录"）、请求失败（带重试按钮）
- 分类切换时重置 page 为 1 并清空列表

"加载更多"和"分页器"必须说清楚，我不写它就给我生成带页码的分页器。

场景七：SEO 结构化数据

给这个文章页加 SEO 标签：
- meta：title 60 字符内、description 150 字符内
- canonical 用 https://www.7027a.com/article/{slug}/
- 输出 JSON-LD 的 Article schema，包含 headline/datePublished/dateModified/author
- og:image 用 /static/icon-512.png
- 不要生成 FAQPage schema（我站点不收录 FAQ 富结果）

最后一句"不要生成 FAQPage"是我加的，它很爱自作主张。SEO 逻辑我在GPT-6 那篇里聊过，这里不展开。

场景八：设计稿到代码（Figma）

我已经把设计稿放进 Figma，请导入并实现。
- 严格按稿子的间距和字号，不要自作主张调整
- 缺失的部分（我没画的状态：hover / loading / 移动端）用 shadcn 默认样式补
- 一次只做一个组件，做完停下来让我确认

最后一句"一次只做一个组件"是血泪教训。一口气让它做完整页，它会把你没画的部分也"创意"出来。

4 个真把我坑了的坑

说完了好用的，说踩雷的。这 4 个问题每个都让我浪费了至少半天。

第一个坑：v0 生成的代码，95% 我用不上。我项目是 PHP 模板渲染，v0 给的是 Next.js App Router，产物我一行都用不了，只能当"设计稿"。你如果也是 PHP 老项目，请把预期调成"出图"，别想"出码"。

第二个坑：设计模式改一处，全局样式被重置。在设计模式里改了一个卡片的圆角，结果另外三个卡片跟着变了。原因是它改的是共享的 CSS 变量。我现在的做法是：所有颜色、圆角、阴影一律写进 @theme 或 CSS 变量，让它只改变量不改类名，规避掉这个雷。

第三个坑：额度消耗比想象中快得多。我 30 天烧了差不多 $28，平均每天不到 $1，但有一次一口气跑了 5 轮"重新生成"，单下午就花了 $6。v0 的重试是整段重写不是微调——它可能把你满意的部分一起换掉。教训是：先用小 prompt 验证方向，方向对了再让它做大的。

第四个坑：中文长文会排版溢出。中文标题没有词间空格，tracking-tight 一加，标题末尾的字符会挤出容器。我后来统一把标题的 tracking 覆盖掉，长标题强制 break-words。

我现在的实际工作流

30 天打磨下来，我固定了三步：

第一步，v0 出结构和视觉方案。这一步不追求能跑，只追求"长什么样"想清楚了，产出的 Tailwind class 和组件结构我截图存下来。

第二步，把方案翻译成 PHP 模板。这一步我用 Claude Code 或 Cursor 直接改我的主题文件，工具怎么选我在Claude 5 迁移实录和国产 AI 编程工具横评里写过。核心是让 AI 读懂我现有的模板约定，而不是每次新写一套。

第三步，回到 v0 改细节。间距、字号、文案这种纯视觉的东西，回 v0 改比手调代码快得多。

这个循环里，v0 的贡献大概是省掉 40% 的"想不清楚页面长什么样"的时间。它没帮我省一行 PHP 代码。

30 天的真实账单

总计花费 $28 左右：订阅一个月 $20 的档位，加额度超出部分约 $8。产出是 9 个页面方案，最终有 6 个真上线了，平均一个上线页面 $3.3。

如果目标是"真的要上线一个产品"，$3.3 换不到什么。但如果目标是"动手前把页面想明白"，这个价位我认为值——我用 PHP 返工一次布局的时间成本远超这个数。

谁适合用 v0，谁别碰

适合的：做落地页、活动页、工具详情页这类"结构清晰、视觉为主"的东西；原型验证；以及像我这样有既有技术栈、只缺设计决策的人。

别碰的：想直接产出生产级全栈代码的（产物是 Next.js，和你的栈大概率对不上）；需要复杂后端逻辑的（它不擅长）；以及指望它帮你 debug 的（它是"写"的工具，不是"读"工具）。

如果你是做 Next.js 的，思路要反过来——v0 对你是加速器，对我是"设计顾问"。同一个工具，在不同技术栈里的价值完全不一样。

最后几句

我花 30 天和 v0 磨合下来，最大的收获不是某个 prompt 技巧，而是意识到：这类工具的价值不在"帮你写"，而在"帮你想清楚"。想清楚了 AI 写多快都不重要，没想清楚它写得再快也白搭。

我当初被"8 秒出一个落地页"震住，是因为我把自己的活当成了"写代码"。真正花时间的地方是"这个页面到底该长什么样"——v0 干不了这个，但它能逼着你把它想清楚。

如果你也在做自己的小站，别急着重构，先拿 v0 试试出方案。我把踩过的坑都写在这儿了，你至少能省下我那 4 个半天。