v0 与 Lovable

这一课你将能做到

1. 用 v0 从文字描述生成可用的 React + Tailwind UI 组件
2. 用 Lovable 这类工具生成全栈应用骨架并正确接管代码
3. 判断「AI 生成 UI」的产出哪些能直接用、哪些必须重写

为什么要学

前端 UI 是 AI 生成效果最惊艳的领域：截个图或写句话，几十秒后一个能跑的页面就出来了。v0（Vercel 出品）生成 React + Tailwind + shadcn/ui 组件，Lovable、Bolt 这类工具更进一步，直接生成带后端的全栈应用。

人话：这类工具把「从设计稿到页面」的成本从按天算压到按分钟算。但它们的产出有个共同特点：看起来完成度 95%，实际能进生产的只有 60%——无障碍、边界状态、错误处理、和你项目的集成方式，都是要手工补的课。

对后端开发者价值尤其大：以前给管理后台画个界面要求人，现在自己描述需求直接生成，改改就能用。

先建立图像

AI 生成 UI 的现实期望值：
┌────────────────────────────────┐
│ AI 直接能给你的：               │
│   ✓ 布局结构、视觉风格          │
│   ✓ 响应式骨架                 │
│   ✓ 组件拆分雏形               │
├────────────────────────────────┤
│ 你必须自己补的：                │
│   ✗ 真实数据接入               │
│   ✗ 加载/空/错误状态            │
│   ✗ 表单校验逻辑               │
│   ✗ 权限与交互细节             │
│   ✗ 和你项目设计系统的统一      │
└────────────────────────────────┘

跟着做

步骤 1：用 v0 生成一个真实需要的组件

打开 v0.dev，别用「做一个好看的落地页」这种练习需求，用你项目里真实需要的界面：

生成一个文章管理后台的列表页：
- 顶部：搜索框 + 标签筛选下拉 + 「新建文章」按钮
- 中间：表格，列有 标题/标签/状态/创建时间/操作（编辑、置顶、删除）
- 表格行内状态用徽章区分：草稿（灰）、已发布（绿）
- 底部：分页器
- 用 shadcn/ui 组件，风格简洁专业

要点：描述结构（区域划分）+ 数据（列和字段）+ 状态（徽章颜色）+ 技术约束（shadcn/ui），四要素齐全，产出质量高一档。

步骤 2：迭代修正

第一版出来通常 70 分。针对性迭代：

修改：
1. 表格操作列的按钮改成图标 + tooltip，不要文字按钮
2. 加一个「加载中」骨架屏状态
3. 加一个「无数据」空状态，配一句话引导用户新建

每轮只改 2-3 个点，一次说十条改动 AI 容易顾此失彼。

步骤 3：导出代码并接管

v0 生成的代码可以复制或一键集成到 Next.js 项目。接管后的标准动作：

1. 读一遍：确认组件拆分合理（一个页面是否被拆成了可复用的子组件）
2. 抽离假数据：生成代码里的 mock 数组改成 props 或 API 调用
3. 统一风格：把它的颜色、间距类名换成你项目设计系统的约定
4. 补状态：loading / empty / error 三态补齐

// AI 给的：假数据写死
const articles = [{ id: 1, title: "示例" }];

// 你改成：真实数据源
const { data: articles, isLoading, error } = useArticles(filters);
if (isLoading) return <TableSkeleton />;
if (error) return <ErrorState retry={refetch} />;
if (!articles?.length) return <EmptyState />;

步骤 4：用 Lovable 生成全栈骨架

打开 lovable.dev，描述一个完整小应用：

一个极简的链接收藏应用：
- 提交 URL 自动抓取标题（可以用 Edge Function 模拟）
- 标签分类、列表展示
- Supabase 做数据库和认证
- 页面：登录页、列表页