Workflows
v0 与 Claude Code 组件工作流
用 v0 快速生成 UI 原型，再用 Claude Code 接入真实项目的数据、状态、可访问性、测试和生产规范。
v0 适合帮助团队快速起一个高保真界面草稿，Claude Code 更适合把这个草稿接入真实代码库。最稳的做法不是“生成后直接粘贴上线”，而是先用 v0 做原型，再让 Claude Code 按项目现有组件、数据层、可访问性规范和测试方式完成集成。
什么时候适合用 v0
当界面结构还不确定，或者需要快速拿一个静态原型给团队评审时，可以考虑使用 v0：
- 仪表盘卡片、表格、图表和空状态。
- 多步骤表单，以及 loading、error、success 等多状态界面。
- 需要快速视觉迭代的落地页区块。
- 需要先让业务方确认布局的内部工具页面。
如果只是小改动、后端逻辑、认证、支付、数据库迁移或线上问题修复，通常直接从 Claude Code 开始更合适。
推荐工作流
1. 先生成界面原型
给 v0 一个聚焦的 UI brief：
Create a responsive usage dashboard for a SaaS app. Include current usage, plan limit, recent activity, upgrade CTA, loading state, and empty state.如果要提供截图、Figma 或参考图，先确认你有权使用，并且这些素材确实代表目标产品方向。
2. 交给 Claude Code 接入项目
把生成的组件粘贴给 Claude Code，或者让它读取对应文件：
请把这个 v0 组件接入我们的项目。使用现有 design tokens、组件 primitives、路由、数据获取方式和错误处理模式。不要新增 UI 库。如果组件涉及共享布局、导航、认证或计费流程，先让 Claude Code 输出集成计划，再批准编辑。
3. 替换示例数据
生成式 UI 经常带有硬编码示例数据，需要改成真实 props、hooks 或服务端数据：
请把示例 usage 数据替换为现有 billing usage API，并按照 dashboard 模块已有模式补齐 loading、error 和 empty states。4. 做生产前清理
上线前做一次定向检查：
请检查这个组件的可访问性、响应式表现、多余依赖、重复样式和测试覆盖。保留视觉设计，但对齐当前代码库。交付检查表
| 检查项 | 要确认什么 |
|---|---|
| 设计系统 | 使用现有 token、组件、字体层级、间距和暗黑模式规则。 |
| 依赖 | 不随意新增 UI 库、图表库或动画库。 |
| 数据 | 移除 placeholder 数据，并覆盖真实 API 状态。 |
| 可访问性 | 支持标签、焦点顺序、键盘操作和可读对比度。 |
| 响应式 | 移动端、平板和桌面端不出现文字遮挡或布局溢出。 |
| 测试 | 按相邻组件的测试方式补充或更新测试。 |
适合交给 Claude Code 的提示词
请把这个 v0 组件导入 src/components/billing。把 demo data 改成 typed props，沿用现有 Button 和 Card primitives，并补齐 loading 和 error states。请对比这个 v0 输出和我们的 design system，先列出不一致点，再只应用安全修复。请增强这个组件的可访问性：键盘导航、表单标签、必要的 aria 属性、焦点状态和对比度。常见风险
- 生成代码可能使用了和项目不一致的组件库。
- placeholder 数据没有替换就进入生产代码。
- 视觉上看起来完整，但缺少 error、loading、权限和空状态。
- 为一个小组件引入了过重依赖。
- 可访问性和响应式表现仍然需要实际验证。
相关页面
官方来源
下一步：Explore-Plan-Code - 原型确认后，用更稳的流程推进实现。