v0.dev 第一个组件

更新时间：2026-01-11 数据来源：

• https://v0.dev↗
• https://vercel.com↗

v0.dev 是 Vercel 推出的 UI 生成工具，输入自然语言即可生成 React 组件。下面用最短流程完成你的第一个可用组件。

#1) 开始前准备

• 明确组件类型：按钮 / 卡片 / 表单 / 列表
• 想清楚 3 件事：结构、状态、交互

#2) 最小可用 Prompt

text复制
生成一个登录卡片组件：
- 标题：欢迎回来
- 两个输入框：邮箱、密码
- 主按钮：登录
- 次按钮：忘记密码
- 风格：简洁、浅色、对齐居中

#3) 生成后必做三件事

1. 看结构：HTML 结构是否清晰、语义是否合理
2. 看交互：按钮/输入焦点状态是否正常
3. 看可复用性：把硬编码文案抽成 props

#4) 常见问题

• 样式太乱：加一句“使用统一间距/统一圆角/统一字体大小”。
• 组件太大：拆成 2~3 个小组件再让 v0 组合。

#实例 Prompt（短版）

text复制
生成一个产品卡片：图片、标题、价格、购买按钮，移动端优先。

---

本页面由匠人学院 Wiki 系统维护。