第三章：AI 生成 UI——v0 + shadcn/ui + Tailwind

第三章：AI 生成 UI——v0 + shadcn/ui + Tailwind

“用 AI 工具生成 UI 的高效工作流：v0 生成骨架 → Cursor 微调 → 提取复用组件。”

3.1 AI 生成 UI 工作流

flowchart LR
    A[描述功能需求] --> B[v0 生成骨架]
    B --> C[Cursor 微调]
    C --> D[提取复用组件]
    D --> E[接入数据]

Step 1：用 v0 生成页面骨架

描述功能需求而不是视觉细节：

"创建一个 Dashboard 页面，包含：

  • 顶部导航（logo、导航链接、用户头像）
  • 左侧边栏（项目列表）
  • 主区域（资产网格展示）
  • 使用 shadcn/ui + Tailwind"

Step 2：Cursor 微调

"这个 Asset 卡片需要：

  1. 根据 status 显示不同颜色 Badge
  2. 添加右键菜单（重命名/删除）
  3. 点击跳转到详情页"

Step 3：提取为复用组件

3.2 shadcn/ui 核心组件

shadcn/ui 不是传统组件库——代码直接复制到项目，完全拥有和修改。

常用组件：

组件 用途
Button 按钮（多变体）
Badge 状态标签
Dialog 模态框
DropdownMenu 右键菜单
Input 输入框
Card 卡片容器

3.3 Tailwind 响应式布局

graph LR
    A[移动端 1 列] -->|md:| B[平板 2 列]
    B -->|lg:| C[桌面 3 列]

// 响应式网格
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

// 响应式侧边栏
<aside className="hidden md:flex w-64">
  {/* 移动端默认隐藏，桌面端显示 */}
</aside>

3.4 组件设计模式

Asset 卡片示例结构：

classDiagram
    class AssetCard {
        +asset: Asset
        +onDelete: () => void
        +onRename: () => void
        +Badge: status
        +DropdownMenu: 操作菜单
    }

组件设计原则：

  1. 单一职责：一个组件做一件事
  2. Props 驱动：数据通过 props 传入
  3. 组合优先：用基础组件组合复杂 UI

3.5 暗色模式

shadcn/ui 内置暗色模式支持，使用 next-themes：

// layout.tsx
import { ThemeProvider } from "next-themes"

export default function RootLayout({ children }) {
  return (
    <html lang="zh" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

本章小结

  1. 工作流：v0 骨架 → Cursor 微调 → 组件提取
  2. shadcn/ui：代码复制到项目，完全可控
  3. 响应式：mobile first，hidden md:flex
  4. 暗色模式：next-themes + Tailwind

本章提示词模板

生成功能组件

用 shadcn/ui + Tailwind CSS 生成一个 Asset 卡片组件：

Props：
- asset: { id, file_name, status, cdn_url, file_size }
- onDelete: (id: string) => void
- onRename: (id: string, newName: string) => void

需要的功能：
1. 缩略图（cdn_url 存在则显示图片，否则显示文件图标）
2. 状态 Badge（ready=绿色，failed=红色，processing=黄色）
3. 右键菜单（重命名/删除）
4. 响应式布局

使用 TypeScript + React 19

生成页面布局

用 Next.js App Router + shadcn/ui 生成一个 Dashboard 布局：

包含：
1. 顶部导航栏（Logo、搜索、用户头像下拉菜单）
2. 左侧边栏（项目列表，当前选中高亮）
3. 主内容区（带 Page Header）

要求：
- 使用路由组 (marketing) 和 (app)
- 侧边栏在移动端可折叠
- 使用 Tailwind CSS 响应式类
- 类型安全（TypeScript）

继续阅读：第四章：认证集成