v0.dev 第一个组件
第一次用 v0，最容易犯的错就是一上来生成整页 dashboard 或完整产品壳子。这样做通常看起来很炫，但学习价值很低。真正更稳的起手式，是先做一个单功能组件，比如登录卡片、产品卡片、筛选栏、CTA 区块。因为你只有在边界清楚的任务里，才更容易看出 v0 到底帮你省了哪部分时间。
所以第一组件的目标，不是“做最大”，而是“做最清楚”。
先说结论：第一个组件要选边界很清楚的东西
更适合作为第一题的通常是：
- login card
- pricing card
- search bar
- filter panel
- empty state
这类组件有几个共同点：
- 结构简单
- 状态可数
- 复用价值高
- 容易看出生成质量
开始前先想清楚 3 件事
| 维度 | 你要回答什么 |
|---|---|
| 结构 | 页面里到底有哪些块 |
| 状态 | 有哪些交互状态需要覆盖 |
| 交互 | 用户点击后会发生什么 |
很多人先讲“高级感、科技感、简洁感”，但没讲结构。结果第一版就偏。
一个更靠谱的首个 Prompt
Create a login card component.
Requirements:
- title: 欢迎回来
- two input fields: email and password
- primary button: 登录
- secondary action: 忘记密码
- clean centered layout
- desktop and mobile friendly
- include basic error and disabled states
这类 prompt 的重点不是文采，而是清楚。
第一版生成后先看什么
第一眼别只看漂不漂亮，先检查：
- 信息层级是否清楚
- 主按钮是否够明确
- spacing 是否合理
- 基本状态有没有覆盖
如果第一版连结构都不清，后面继续改颜色通常是在浪费时间。
第一个组件最常见的两个坑
| 问题 | 根因 | 修法 |
|---|---|---|
| 看起来很花，但不适合接项目 | 风格词太多，结构词太少 | 先把 layout 说清楚 |
| 一次生成太大 | 想让 v0 替你做完整页面 | 先拆成可测试组件 |
v0 第一课最该学的不是“怎么生成更漂亮”，而是“怎么控制任务边界”。
什么时候这版才算合格
一个第一组件至少应该做到：
- 结构能看懂
- 状态不离谱
- 代码可以继续修改
- 拿进项目时不会完全重写
如果只能截图看好看，但没法继续接工程，那它更像视觉草稿，不是组件草稿。
实战建议
第一次用 v0，建议你同一个组件只做这三轮：
- 先出结构
- 再补状态
- 再调视觉
这样你能更清楚地看到每一轮到底变好了什么。
