v0-dev 是一个面向 v0 by Vercel 的技能，v0 是 Vercel 推出的 AI 工具，可从自然语言描述生成 React 组件和整页 UI。该技能帮助开发者为 v0 编写有效提示词、把生成的组件集成到 Next.js 项目中、迭代设计，并使用 shadcn/ui、Tailwind CSS 和 React 构建生产级 UI。
用途 该技能适用于需要原型化 React 组件、生成 shadcn/ui 布局，或借助 v0 快速搭建界面原型的场景。它围绕 v0 的使用展开，包括提示词编写、组件集成和设计迭代。
主要能力
提示词指导：技能给出了有效提示词的判断标准和可用的提示词模式。
• 好的提示词应具体、可视化，并包含数据示例。例如一个定价页应写明三个档位及各自价格、功能清单、视觉重点（如 Pro 档使用边框和徽章突出），并指定使用 shadcn/ui。 • 模糊、缺少视觉细节的提示词（如“做一个定价页”）则效果较差。 • 可用模式包括：带真实数据的仪表盘、带校验状态的表单、带操作的数据表格。
集成工作流 技能说明了将 v0 生成内容接入 Next.js 项目的流程：
- 使用 shadcn 初始化项目。示例命令为：
npx create-next-app@latest my-app --typescript --tailwind --app，随后cd my-app并执行npx shadcn@latest init。 - 安装 v0 会用到的组件，例如通过
npx shadcn@latest add card table badge button input select avatar以及npx shadcn@latest add sheet dialog dropdown-menu tabs。 - 将 v0 输出复制到项目中。v0 提供 “Add to Codebase” 按钮生成 npx 命令，也可手动把组件代码复制到 src/components/。
- 自定义生成代码。v0 输出是标准 React + shadcn/ui + Tailwind，没有锁定、没有专有组件、没有运行时依赖。
迭代 v0 支持对话式迭代，每次迭代都在前一次基础上进行，并在对话内保留上下文。示例流程为：先生成初始组件，再细化（如放大头像、添加编辑按钮和社交链接），添加变体（如供侧边栏使用的紧凑版），增加交互（如铅笔图标切换内联编辑简介），最后做响应式调整（如移动端纵向堆叠、头像居中）。
能力边界
• v0 擅长的内容：落地页、营销站点、仪表盘布局、管理面板、表单（多步骤、带校验 UI）、带筛选和分页的数据表格、卡片布局、网格系统、导航（侧边栏、页头、面包屑）、模态对话框、滑出面板、弹出层。 • v0 的局限（需在代码中处理）：不进行真实 API 调用（只生成模拟数据）、没有认证逻辑、没有数据库集成、复杂状态管理需自行使用 React context 或 Zustand、自定义动画需手动添加 Framer Motion、需检查 Server Components 与 Client Components 的 “use client” 放置。
使用建议
• 提示词中的具体数据：包含实际数字、标签和内容，例如“12,450 users”比“user count”生成效果更好。 • 引用 shadcn 组件：在提示词中提及“shadcn/ui”，明确目标组件库时 v0 生成的代码更干净。 • 一次生成一个组件，再在 Cursor 中组装；复杂的整页提示词效果更差。 • 迭代而非重来，利用对话保留上下文持续改进。 • 检查 “use client”：v0 可能不必要地添加，不使用状态或副作用的组件可移除。 • 生成后加入自己的设计令牌，更新颜色与间距以匹配品牌；v0 使用 shadcn 默认值。 • 将模拟数据替换为真实数据：UI 定稿后把 v0 生成的模拟数据替换为 API 调用。 • 没有厂商锁定：v0 输出是标准 React 代码，归开发者完全所有，对 v0 无运行时依赖。
示例场景 技能给出两类示例：用户请求为项目设置 v0-dev 时，应检查系统要求和前置条件、安装或配置、建立初始项目结构并验证；用户请求用 v0-dev 构建功能时，应搭建组件或配置、连接相应数据源、实现功能并测试验证。