AI 辅助 UI 开发实操手册

这是一份完整的 AI 辅助 UI 开发操作手册，所有提示词和命令均可直接复制使用。

1. 复刻 UI - 图片转 JSON

操作流程

准备 UI 设计图（截图/设计稿）
使用 GPT-4V/Claude 提取 UI 参数
生成 JSON 文件
将 JSON 作为 Cursor 上下文

提示词模板

分析这张 UI 设计图，提取以下参数并以 JSON 格式输出：

1. 布局信息：容器类型、排列方式、间距、padding、margin
2. 颜色系统：主色、辅助色、背景色、文字颜色（提供 HEX 值）
3. 文字样式：字体大小、字重、行高、字间距
4. 组件尺寸：宽度、高度、圆角、边框
5. 阴影效果：box-shadow 参数
6. 图标/图片：位置、尺寸、类型

请按照以下 JSON 结构输出：

{
  "layout": {},
  "colors": {},
  "typography": {},
  "spacing": {},
  "components": []
}

详细版提示词（用于复杂页面）

请详细分析这张 UI 设计图，提取完整的设计系统参数：

【布局分析】
- 页面结构：header/main/footer 分区
- 网格系统：列数、间隙
- 容器：max-width、padding
- 响应式断点建议

【颜色系统】
- Primary: #______
- Secondary: #______
- Success/Warning/Error: #______
- 背景色阶：#______ / #______ / #______
- 文字色阶：#______ / #______ / #______
- 边框色：#______

【排版系统】
- 标题：H1-H6 的 font-size、font-weight、line-height
- 正文：font-size、line-height、letter-spacing
- 字体族：sans-serif/serif/mono

【间距系统】
- 基础单位：4px/8px
- 间距刻度：xs/sm/md/lg/xl 对应的像素值
- 组件内边距
- 组件外边距

【组件参数】
对页面中每个组件，提取：
- 类型（Button/Card/Input/Modal 等）
- 尺寸（width/height）
- 圆角（border-radius）
- 边框（border-width/style/color）
- 阴影（box-shadow）
- 状态样式（hover/active/disabled）

输出格式：完整的 design-system.json

JSON 文件示例

创建 design-system.json：

json

{
  "colors": {
    "primary": "#3B82F6",
    "secondary": "#8B5CF6",
    "success": "#10B981",
    "warning": "#F59E0B",
    "error": "#EF4444",
    "background": {
      "base": "#FFFFFF",
      "secondary": "#F9FAFB",
      "tertiary": "#F3F4F6"
    },
    "text": {
      "primary": "#111827",
      "secondary": "#6B7280",
      "tertiary": "#9CA3AF"
    },
    "border": "#E5E7EB"
  },
  "typography": {
    "fontFamily": {
      "sans": "'Inter', sans-serif",
      "mono": "'Fira Code', monospace"
    },
    "fontSize": {
      "xs": "12px",
      "sm": "14px",
      "base": "16px",
      "lg": "18px",
      "xl": "20px",
      "2xl": "24px",
      "3xl": "30px",
      "4xl": "36px"
    },
    "fontWeight": {
      "normal": 400,
      "medium": 500,
      "semibold": 600,
      "bold": 700
    },
    "lineHeight": {
      "tight": 1.25,
      "normal": 1.5,
      "relaxed": 1.75
    }
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px",
    "2xl": "48px",
    "3xl": "64px"
  },
  "borderRadius": {
    "sm": "4px",
    "md": "8px",
    "lg": "12px",
    "xl": "16px",
    "full": "9999px"
  },
  "shadows": {
    "sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
    "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
    "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
    "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1)"
  },
  "components": {
    "button": {
      "height": {
        "sm": "32px",
        "md": "40px",
        "lg": "48px"
      },
      "padding": {
        "sm": "0 16px",
        "md": "0 24px",
        "lg": "0 32px"
      },
      "borderRadius": "8px"
    },
    "card": {
      "padding": "24px",
      "borderRadius": "12px",
      "shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
      "border": "1px solid #E5E7EB"
    }
  }
}

在 Cursor 中使用

@design-system.json 

根据设计系统 JSON，创建一个 Hero Section 组件，要求：
- 使用 JSON 中定义的颜色、间距、排版参数
- 严格遵循设计规范
- 包含响应式设计

2. 定制 UI - Tweakcn 实时预览

工具链接

🔗 Tweakcn: https://www.tweakcn.com/

使用流程

访问 Tweakcn → 选择组件类型（Button/Card/Input 等）
实时调整样式参数（颜色、大小、圆角、阴影等）
复制生成的 CSS/Tailwind 代码
保存为 .css 或配置文件
将样式文件作为 Cursor 上下文

操作步骤

步骤 1： 在 Tweakcn 调整组件样式

步骤 2： 复制 CSS 代码，创建 components.css

css

/* Button Styles */
.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

/* Card Styles */
.card-elevated {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-elevated:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Input Styles */
.input-modern {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: #ffffff;
}

.input-modern:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

在 Cursor 中使用

@components.css 

使用 components.css 中定义的样式，创建一个登录表单组件，包含：
- 2 个 .input-modern 输入框（用户名、密码）
- 1 个 .btn-primary 按钮
- 使用 .card-elevated 作为容器
- 添加 React/Vue 状态管理

3. 使用组件库 - React Bits

准备工作

安装 Framer Motion：

bash

npm install framer-motion
# 或
pnpm add framer-motion
# 或
yarn add framer-motion

React Bits 资源

🔗 React Bits: https://github.com/vasanthk/react-bits

提示词模板 - 基础组件

需求：创建一个可展开/折叠的手风琴（Accordion）组件

参考以下组件代码：
```jsx
[粘贴 React Bits 中的 Accordion 组件代码]
```

要求：
1. 使用 TypeScript
2. 集成 Framer Motion 实现平滑展开/收起动画
3. 支持单个/多个同时展开模式
4. 添加自定义图标（ChevronDown）
5. 响应式设计，移动端友好
6. 包含完整的类型定义

样式要求：
- 使用 Tailwind CSS
- 边框圆角 8px
- Hover 状态有背景色变化
- 展开时有细微阴影效果

提示词模板 - 复杂组件

需求：创建一个多功能数据表格（DataTable）组件

参考以下组件代码：
```tsx
[粘贴 React Bits 中的 Table 组件代码]
```

功能需求：
1. 排序功能（点击表头排序，显示升序/降序图标）
2. 分页功能（每页 10/20/50 条可选）
3. 搜索/筛选（实时搜索，支持多列筛选）
4. 行选择（Checkbox，支持全选/单选）
5. 响应式（移动端切换为卡片视图）
6. 加载状态（Skeleton 占位）
7. 空状态展示

技术栈：
- TypeScript + React 18
- Framer Motion（排序/分页动画）
- Tailwind CSS
- Zustand（状态管理）

数据格式示例：
```ts
interface User {
  id: number;
  name: string;
  email: string;
  role: string;
  status: 'active' | 'inactive';
  createdAt: Date;
}
```

请提供完整的组件代码、类型定义和使用示例。

常用组件提示词模板

@components.css

创建一个通用 Modal 组件

基础代码参考：
```jsx
[粘贴 React Bits Modal 代码]
```

要求：
- Framer Motion 进入/退出动画（淡入 + 缩放）
- 点击遮罩关闭（可配置）
- ESC 键关闭
- 防止背景滚动（body scroll lock）
- 尺寸：sm/md/lg/xl/full
- 位置：center/top/bottom
- 使用 Portal 渲染到 body
- 支持自定义 header/footer

Tailwind 样式，遮罩背景 backdrop-blur-sm

创建一个下拉菜单组件

参考代码：
```jsx
[粘贴 React Bits Dropdown 代码]
```

功能：
- 点击/Hover 触发（可配置）
- 8 个方向定位（top/bottom/left/right + start/center/end）
- 键盘导航（上下键、回车选择、ESC 关闭）
- 自动边界检测（防止超出视口）
- Framer Motion 动画（下拉淡入 + 位移）
- 支持嵌套子菜单
- 分隔线、禁用项、图标支持

TypeScript 类型完整，包含使用示例

4. 动画效果实现

关键词表

使用准确的动画术语获得更好的效果：

中文	英文关键词	说明
淡入淡出	fade in/out	opacity 变化
滑入滑出	slide in/out	transform: translateX/Y
缩放	scale	transform: scale
旋转	rotate	transform: rotate
弹跳	bounce	回弹效果
弹性	spring	弹性物理效果
视差滚动	parallax scroll	不同速度滚动
渐变过渡	gradient transition	渐变色变化
悬浮效果	hover lift	鼠标悬停上浮
脉冲	pulse	周期性缩放
晃动	shake	左右晃动
翻转	flip	3D 翻转
展开收起	expand/collapse	高度动画
渐进式显示	stagger	依次显示

提示词模板 - 页面进入动画

为登录页面添加进入动画效果

目标组件：LoginPage.tsx

动画需求：
1. Logo - 从上方淡入下落（fade in from top），duration 0.6s，delay 0s
2. 表单卡片 - 从下方滑入 + 淡入（slide up + fade in），duration 0.8s，delay 0.2s
3. 输入框 - 渐进式显示（stagger），每个延迟 0.1s
4. 按钮 - 最后弹跳进入（bounce in），delay 0.8s
5. 背景 - 渐变色动画（gradient animation），循环播放

使用 Framer Motion，动画曲线 ease-out
页面加载完成后触发，仅执行一次

提示词模板 - 交互动画

@Button.tsx

为按钮组件添加微交互动画

动画效果：
1. Hover 状态：
   - 轻微上浮 2px（translateY: -2px）
   - 阴影加深（box-shadow 增强）
   - 背景色亮度 +5%
   - 过渡时间 0.2s

2. 点击状态（Active）：
   - 按下效果（scale: 0.98）
   - 即时反馈，duration 0.1s

3. 加载状态：
   - 内部 spinner 旋转动画
   - 文字渐隐（opacity: 0.6）
   - 禁用点击

4. 成功状态：
   - 绿色脉冲动画（pulse green）
   - checkmark 图标淡入
   - 1.5s 后恢复

使用 Framer Motion 或 CSS transition，性能优先

提示词模板 - 列表动画

@TaskList.tsx

为任务列表添加动画效果

场景：
1. 新增任务：
   - 从顶部滑入（slide in from top）
   - 其他项目平滑下移（stagger）
   - 高亮闪烁 1 次（flash highlight）

2. 删除任务：
   - 淡出 + 向右滑出（fade out + slide out right）
   - 其他项目向上补位（slide up）
   - duration 0.3s

3. 完成任务：
   - 复选框 scale 动画
   - 文字添加删除线（strikethrough）动画
   - 背景色过渡到灰色
   - 0.5s 后移到列表底部，带 reorder 动画

4. 拖拽排序：
   - 拖拽项 scale 1.05，阴影增强
   - 其他项平滑让位（smooth reorder）
   - 使用 Framer Motion 的 Reorder 组件

包含完整实现代码

提示词模板 - 滚动动画

为产品展示页添加滚动触发动画

需要安装：framer-motion（已安装）

动画需求：
1. 每个产品卡片：
   - 滚动进入视口时触发
   - 从下方淡入上滑（translateY: 50 → 0, opacity: 0 → 1）
   - 使用 IntersectionObserver 或 Framer Motion 的 whileInView
   - 每个卡片延迟 0.1s（stagger）

2. 统计数字区域：
   - 滚动到视口时数字从 0 递增到目标值（count up animation）
   - 使用 easing 函数，持续 2s

3. 图片：
   - 视差滚动效果（parallax），滚动速度 0.5x
   - 轻微缩放效果（scale 1 → 1.05）

4. 标题：
   - 字符逐个显示（character stagger）
   - 每个字符延迟 0.03s

优化性能：使用 will-change，启用硬件加速

5. 字体集成 - Google Fonts

Google Fonts 链接

🔗 Google Fonts: https://fonts.google.com/

操作流程

访问 Google Fonts → 选择字体
选择所需字重（weights）
复制引用代码
告诉 Cursor 应用位置

提示词模板 - 基础集成

集成 Google Fonts 字体到项目

选择字体：Inter（字重：400, 500, 600, 700）

引用方式（选择一种）：

**方式 1 - HTML Link：**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

**方式 2 - CSS Import：**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
```

应用位置：
1. 将 Inter 设置为全局字体（body, html）
2. 标题使用 font-weight: 700
3. 按钮使用 font-weight: 600
4. 正文使用 font-weight: 400
5. 次要文本使用 font-weight: 400 + opacity: 0.7

请更新：
- index.html（添加 link）
- globals.css（设置 font-family）
- tailwind.config.js（添加 fontFamily 配置）

提示词模板 - 多字体组合

集成多个 Google Fonts 字体

字体选择：
1. **Inter**（无衬线，用于 UI）
   - 字重：400, 500, 600, 700
   - 用途：界面、按钮、表单

2. **Merriweather**（衬线，用于正文）
   - 字重：400, 700
   - 用途：文章内容、博客

3. **Fira Code**（等宽，用于代码）
   - 字重：400, 500
   - 用途：代码块、终端

引用代码：
```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
```

应用规则：
- font-sans: Inter（导航栏、按钮、表单、标题）
- font-serif: Merriweather（博客文章、长文本）
- font-mono: Fira Code（代码块、终端输出）

更新文件：
1. index.html - 添加 link
2. tailwind.config.js - 配置 fontFamily
3. globals.css - 设置默认字体
4. 提供使用示例（className）

Tailwind CSS 字体配置

更新 tailwind.config.js 字体配置

将以下字体添加到 Tailwind 配置：

```js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
        serif: ['Merriweather', 'Georgia', 'serif'],
        mono: ['Fira Code', 'Consolas', 'monospace'],
        display: ['Poppins', 'sans-serif'], // 大标题
      },
      fontWeight: {
        normal: '400',
        medium: '500',
        semibold: '600',
        bold: '700',
        extrabold: '800',
      },
    },
  },
}
```

使用示例：
```jsx
<h1 className="font-display font-bold">大标题</h1>
<p className="font-sans font-normal">正文内容</p>
<code className="font-mono">const x = 1;</code>
<article className="font-serif">博客文章</article>
```

提示词模板 - 性能优化

优化 Google Fonts 加载性能

当前引用：
```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

优化要求：
1. 添加 preconnect 减少 DNS 查询时间
2. 使用 font-display: swap 防止 FOIT（Flash of Invisible Text）
3. 仅加载需要的字符集（latin）
4. 添加 fallback 字体

优化后的完整代码：
```html
<!-- DNS 预连接 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- 字体加载 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap&subset=latin" rel="stylesheet">
```

CSS 配置：
```css
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
}
```

如果需要自托管字体以获得更好性能，请使用 fontsource：
```bash
npm install @fontsource/inter
```

请提供完整的集成方案

6. 完整工作流示例

场景：从零创建一个仪表盘页面

步骤 1： 提取设计参数

[上传设计图]

分析这个仪表盘设计，提取完整的设计系统参数（颜色、排版、间距、组件尺寸），输出为 design-system.json

步骤 2： 定制组件样式

在 Tweakcn 调整卡片、按钮样式
保存为 dashboard-components.css

步骤 3： 实现组件

@design-system.json @dashboard-components.css

创建仪表盘页面组件：

1. 布局：
   - Header（logo + 用户菜单）
   - Sidebar（导航菜单，可折叠）
   - Main Content（4 个统计卡片 + 2 个图表）

2. 组件：
   - StatsCard（显示数字、趋势箭头、图标）
   - ChartCard（使用 recharts，折线图和柱状图）
   - Sidebar（使用 Framer Motion 折叠动画）

3. 样式：
   - 使用 design-system.json 中的参数
   - 卡片样式使用 dashboard-components.css
   - Tailwind CSS 布局

4. 动画：
   - 页面进入：卡片 stagger 动画
   - Hover：卡片轻微上浮
   - 侧边栏：滑入滑出动画

5. 响应式：
   - 桌面：4 列网格
   - 平板：2 列网格
   - 手机：1 列堆叠

提供完整代码，包含 TypeScript 类型定义

步骤 4： 添加动画效果

@Dashboard.tsx

为仪表盘添加细节动画：

1. 统计数字递增动画（count up）
2. 图表数据动画加载（Recharts animationDuration）
3. 侧边栏菜单项 hover 时图标旋转
4. 刷新按钮点击时旋转 360 度

使用 Framer Motion，代码整洁，性能优化

步骤 5： 集成字体

集成 Google Fonts - Poppins 字体

字重：400, 600, 700
应用到：
- 数字（font-bold, text-3xl）
- 标题（font-semibold）
- 标签（font-normal）

更新 index.html 和 tailwind.config.js

7. 常用提示词片段

快速复制

@design-system.json 严格按照设计系统参数实现

使用 Framer Motion 添加淡入动画，duration 0.5s，ease-out

Tailwind CSS 响应式：mobile-first，sm/md/lg/xl 断点

TypeScript 严格模式，完整类型定义，无 any

性能优化：lazy loading、code splitting、memo、useMemo

无障碍：ARIA 标签、键盘导航、焦点管理、语义化 HTML

错误处理：try-catch、fallback UI、error boundary

8. 工具链接汇总

工具	链接	用途
Google Fonts	https://fonts.google.com/	字体资源
Tweakcn	https://www.tweakcn.com/	组件样式调试
React Bits	https://github.com/vasanthk/react-bits	React 组件模式
Framer Motion	https://www.framer.com/motion/	React 动画库
Tailwind CSS	https://tailwindcss.com/	CSS 框架
Shadcn UI	https://ui.shadcn.com/	UI 组件库
Radix UI	https://www.radix-ui.com/	Headless 组件

使用建议：

所有提示词可直接复制使用
根据具体需求调整参数
多次迭代优化效果
保持设计系统一致性

AI 辅助 UI 开发实操手册 ​

1. 复刻 UI - 图片转 JSON ​

操作流程 ​

提示词模板 ​

详细版提示词（用于复杂页面） ​

JSON 文件示例 ​

在 Cursor 中使用 ​

2. 定制 UI - Tweakcn 实时预览 ​

工具链接 ​

使用流程 ​

操作步骤 ​

在 Cursor 中使用 ​

3. 使用组件库 - React Bits ​

准备工作 ​

React Bits 资源 ​

提示词模板 - 基础组件 ​

提示词模板 - 复杂组件 ​

常用组件提示词模板 ​

模态框（Modal） ​

下拉菜单（Dropdown） ​

4. 动画效果实现 ​

关键词表 ​

提示词模板 - 页面进入动画 ​

提示词模板 - 交互动画 ​

提示词模板 - 列表动画 ​

提示词模板 - 滚动动画 ​

5. 字体集成 - Google Fonts ​

Google Fonts 链接 ​

操作流程 ​

提示词模板 - 基础集成 ​

提示词模板 - 多字体组合 ​

Tailwind CSS 字体配置 ​

提示词模板 - 性能优化 ​

6. 完整工作流示例 ​

场景：从零创建一个仪表盘页面 ​

7. 常用提示词片段 ​

快速复制 ​

8. 工具链接汇总 ​

AI 辅助 UI 开发实操手册

1. 复刻 UI - 图片转 JSON

操作流程

提示词模板

详细版提示词（用于复杂页面）

JSON 文件示例

在 Cursor 中使用

2. 定制 UI - Tweakcn 实时预览

工具链接

使用流程

操作步骤

在 Cursor 中使用

3. 使用组件库 - React Bits

准备工作

React Bits 资源

提示词模板 - 基础组件

提示词模板 - 复杂组件

常用组件提示词模板

模态框（Modal）

下拉菜单（Dropdown）

4. 动画效果实现

关键词表

提示词模板 - 页面进入动画

提示词模板 - 交互动画

提示词模板 - 列表动画

提示词模板 - 滚动动画

5. 字体集成 - Google Fonts

Google Fonts 链接

操作流程

提示词模板 - 基础集成

提示词模板 - 多字体组合

Tailwind CSS 字体配置

提示词模板 - 性能优化

6. 完整工作流示例

场景：从零创建一个仪表盘页面

7. 常用提示词片段

快速复制

8. 工具链接汇总