16b - AI 辅助 UI/UX 设计

v0.dev 提示词结构：

创建一个 [应用类型] 的 [页面/组件]，包含：
- [布局描述]：[具体元素和排列]
- [交互描述]：[按钮、表单、动画等]
- [视觉风格]：[配色、字体、间距]
- [状态描述]：[加载、空、错误、成功状态]
- 使用 [技术栈]

迭代提示词示例：

1. "把侧边栏改成可折叠的，折叠后只显示图标"
2. "添加一个搜索框在顶部导航栏右侧"
3. "表格添加排序和筛选功能"
4. "添加暗色模式切换按钮"
5. "让卡片组件支持拖拽排序"

# v0.dev 生成的代码可以通过 CLI 直接添加到项目
npx v0 add [组件URL]
 
# 或者手动复制代码到项目中
# v0 生成的组件依赖 shadcn/ui，需要先安装
npx shadcn@latest init
npx shadcn@latest add button card dialog

创建一个现代化的 SaaS 管理后台 Dashboard，包含：
- 左侧固定侧边栏：logo、导航菜单（Dashboard/用户/订单/设置/帮助），
  底部显示用户头像和退出按钮，支持折叠
- 顶部栏：面包屑导航、搜索框、通知铃铛、用户下拉菜单
- 主区域：4 个统计卡片（总用户/活跃用户/收入/订单），
  一个折线图（近 7 天趋势），一个最近订单表格
- 风格：白色背景、蓝色主色调、圆角卡片、微阴影
- 使用 React + TypeScript + Tailwind CSS + shadcn/ui
- 支持响应式：移动端侧边栏变为底部导航

创建一个登录/注册页面，包含：
- 左侧：产品介绍区域，渐变背景，产品 logo 和标语
- 右侧：表单区域，支持登录/注册切换
- 登录表单：邮箱、密码、记住我、忘记密码链接
- 注册表单：用户名、邮箱、密码、确认密码、服务条款勾选
- 社交登录：Google、GitHub 按钮
- 表单验证：实时校验，错误提示
- 使用 React + TypeScript + Tailwind CSS
- 支持暗色模式

创建一个类似 Finder/Explorer 的文件管理器界面：
- 顶部工具栏：返回/前进、路径面包屑、视图切换（列表/网格）、搜索
- 左侧：文件夹树形导航，支持展开/折叠
- 主区域：文件列表，显示名称、大小、修改时间、类型图标
- 支持多选、右键菜单（复制/粘贴/删除/重命名）
- 底部状态栏：已选文件数、总大小
- 拖拽上传区域
- 使用 React + TypeScript + Tailwind CSS + shadcn/ui

Stitch 提示词示例：

设计一个健身追踪 App 的完整用户流程，包含以下屏幕：
1. 启动页：品牌 logo + 开始按钮
2. 注册流程：选择健身目标 → 填写基本信息 → 选择训练频率
3. 主页：今日训练计划、卡路里统计、步数环形图
4. 训练详情：动作列表、计时器、完成按钮
5. 个人中心：头像、统计数据、设置入口

风格：活力橙色主色调、圆角卡片、大字体、运动感

导出选项：
1. Paste to Figma → 在 Figma 中继续细化
2. Export as HTML/Tailwind → 获取前端代码
3. Export as Image → 用于文档和演示

// Kiro 的 mcp.json 配置
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic/figma-mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-token"
      }
    }
  }
}

// Claude Code 的 MCP 配置（~/.claude/mcp.json）
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic/figma-mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-token"
      }
    }
  }
}

// Cursor 的 MCP 配置（.cursor/mcp.json）
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic/figma-mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-token"
      }
    }
  }
}

1. 登录 Figma → 点击头像 → Settings
2. 在 Personal Access Tokens 部分点击 "Generate new token"
3. 设置 token 名称和权限（需要 File Read 权限）
4. 复制 token 并保存到环境变量

Figma 设计稿准备清单：

✅ 使用 Auto Layout 组织布局（AI 能更好理解层级关系）
✅ 为组件命名使用语义化名称（如 "HeaderNav"、"UserCard"）
✅ 定义设计变量（颜色、间距、字体）
✅ 使用组件和变体（Components & Variants）
✅ 标注交互状态（hover、active、disabled）
✅ 添加 Code Connect 映射（如果有现有组件库）

在 Kiro / Claude Code / Cursor 中的提示词：

请根据 Figma 文件 [粘贴 Figma 链接] 中的 [页面/组件名称] 生成代码：

1. 读取设计稿的组件结构、颜色、字体、间距
2. 生成 React + TypeScript 组件
3. 使用 CSS Modules 管理样式
4. 保持与设计稿的像素级一致
5. 添加响应式断点（mobile: 375px, tablet: 768px, desktop: 1280px）
6. 包含所有交互状态（hover、focus、disabled）

提示词模板：

基于以下设计需求，帮我建立一个完整的设计 Token 系统：

产品类型：[桌面应用/Web 应用/移动应用]
风格：[现代简洁/企业级/活泼/极简]
主色调：[颜色代码或描述]
品牌名称：[名称]

请生成：
1. CSS 变量文件，包含：
   - 颜色系统：主色（含 50-950 色阶）、语义色（success/warning/error/info）、中性色
   - 字体系统：字体族、字号阶梯（xs/sm/base/lg/xl/2xl/3xl）、行高、字重
   - 间距系统：4px 基准的间距阶梯（0/1/2/3/4/5/6/8/10/12/16/20/24）
   - 圆角：none/sm/md/lg/xl/full
   - 阴影：sm/md/lg/xl
   - 过渡：fast/normal/slow
2. 暗色主题变量（使用相同的变量名，不同的值）
3. 响应式断点定义

提示词模板：

基于以下设计 Token，生成基础组件库：

[粘贴 CSS 变量文件]

请生成以下组件（React + TypeScript + CSS Modules）：
1. Button：primary/secondary/outline/ghost/danger 变体，sm/md/lg 尺寸，
   支持 loading 状态和 disabled 状态
2. Input：text/password/email/search 类型，支持 label、placeholder、
   错误提示、前缀/后缀图标
3. Card：基础卡片、可点击卡片、带头部/底部的卡片
4. Modal：居中弹窗、侧边抽屉，支持关闭按钮和遮罩层点击关闭
5. Toast：success/error/warning/info 类型，支持自动消失和手动关闭

每个组件要求：
- 使用设计 Token 中的 CSS 变量
- 支持 className 扩展
- 包含 TypeScript 类型定义
- 符合 WAI-ARIA 无障碍规范

推荐的设计 Token 管理流程：

Figma（设计端）
    ↓ Tokens Studio 插件同步
JSON Token 文件（tokens.json）
    ↓ Style Dictionary 构建
多平台输出：
    ├── CSS 变量（Web）
    ├── Swift 常量（iOS）
    ├── Kotlin 常量（Android）
    └── JavaScript 对象（React Native）

// style-dictionary.config.js
module.exports = {
  source: ["tokens/**/*.json"],
  platforms: {
    css: {
      transformGroup: "css",
      buildPath: "src/styles/",
      files: [{
        destination: "variables.css",
        format: "css/variables",
        options: { outputReferences: true }
      }]
    },
    js: {
      transformGroup: "js",
      buildPath: "src/tokens/",
      files: [{
        destination: "tokens.js",
        format: "javascript/es6"
      }]
    }
  }
};

提示词模板——设计系统审查：

请审查以下设计系统代码，检查：

1. Token 一致性：所有组件是否都使用了设计 Token 而非硬编码值？
2. 无障碍合规：颜色对比度是否满足 WCAG AA 标准（4.5:1）？
3. 响应式完整性：所有组件是否都有移动端适配？
4. 暗色模式：所有组件是否都支持暗色主题？
5. 状态完整性：是否覆盖了 hover/focus/active/disabled 状态？

[粘贴组件代码]

提示词模板——响应式布局生成：

将以下桌面端组件改造为完全响应式：

[粘贴组件代码]

响应式要求：
- 桌面端（≥1280px）：当前布局
- 平板端（768px-1279px）：[描述平板布局变化]
- 移动端（<768px）：[描述移动端布局变化]

技术要求：
- 使用 CSS Grid + Flexbox
- 移动优先（mobile-first）的媒体查询
- 图片使用 srcset 和 sizes 属性
- 触摸目标最小 44x44px
- 字体使用 clamp() 实现流式缩放

提示词模板——无障碍审查与修复：

请对以下组件进行无障碍审查和修复：

[粘贴组件代码]

检查项目：
1. 语义化 HTML：是否使用了正确的 HTML 元素（nav/main/aside/section）？
2. ARIA 属性：交互元素是否有正确的 role 和 aria-* 属性？
3. 键盘导航：是否支持 Tab/Enter/Escape/Arrow 键操作？
4. 焦点管理：Modal 打开时焦点是否正确转移？关闭时是否恢复？
5. 颜色对比度：文字与背景的对比度是否 ≥ 4.5:1？
6. 屏幕阅读器：是否有适当的 aria-label 和 aria-describedby？
7. 动画：是否尊重 prefers-reduced-motion 设置？
8. 表单：label 是否正确关联？错误提示是否可访问？

请输出修复后的完整代码，并标注每处修改的原因。

Bolt.new 提示词示例：

创建一个项目管理工具，包含：
- 看板视图：Todo/In Progress/Done 三列，支持拖拽
- 任务卡片：标题、描述、优先级标签、负责人头像、截止日期
- 新建任务弹窗：表单包含所有字段
- 筛选栏：按优先级、负责人、日期筛选
- 使用 React + TypeScript + Tailwind CSS
- 数据持久化到 localStorage

Lovable 提示词示例：

创建一个个人博客网站：
- 首页：文章列表，每篇显示标题、摘要、封面图、发布日期
- 文章详情页：Markdown 渲染、目录导航、评论区
- 关于页：个人介绍、技能标签、项目展示
- 深色/浅色主题切换
- 响应式设计
- 使用 Supabase 作为后端

你需要什么？
│
├─ 只需要 UI 组件 → v0.dev
│   └─ 需要 shadcn/ui 生态 → v0.dev ✅
│
├─ 需要完整可运行应用 →
│   ├─ 想在浏览器内开发 → Bolt.new
│   ├─ 想快速部署上线 → Lovable
│   └─ 想要最大控制权 → Cursor / Kiro + 手动搭建
│
├─ 需要高保真设计稿 →
│   ├─ 多屏幕流程 → Google Stitch
│   ├─ Figma 内工作 → UX Pilot AI / Figma Make
│   └─ 从截图开始 → Uizard / screenshot-to-code
│
└─ 需要设计稿转代码 →
    ├─ 有 AI 编码工具 → Figma MCP Server
    ├─ 企业级需求 → Builder.io Visual Copilot
    └─ 设计师自助 → Anima / Locofy

完整工作流（总耗时约 45 分钟）：

第一步：v0.dev 生成基础布局（5 分钟）
─────────────────────────────────
提示词：
"创建一个文件同步工具的桌面应用界面，包含：
- 左侧边栏：同步文件夹列表，每个文件夹显示名称、路径、同步状态图标
- 顶部：同步状态栏，显示'已同步/同步中/有错误'
- 主区域：选中文件夹的详细信息，包括最近同步记录
- 底部：操作按钮（添加文件夹、开始同步、设置）
- 风格：现代、简洁、深色主题
- 使用 React + TypeScript + CSS Modules"

→ 得到 React 组件骨架代码

第二步：在 Figma 中细化（30 分钟）
─────────────────────────────────
→ 将 v0 生成的设计导入 Figma
→ 调整颜色、间距、图标
→ 添加空状态、错误状态、加载状态
→ 设计设置页面、同步报告页面

第三步：通过 Figma MCP 生成最终代码（10 分钟）
─────────────────────────────────
在 Kiro 中：
"请根据 Figma 设计稿实现 Settings 页面的 UI，
读取设计稿中的颜色变量和间距，
生成 React + CSS Modules 组件"

→ AI 读取 Figma 设计稿
→ 生成 CSS Modules + React 组件
→ 人工审查调整

操作流程：

1. 在 Figma 中打开 Make
2. 用自然语言描述产品流程：
   "用户浏览商品列表 → 点击商品查看详情 → 选择规格和数量 →
    加入购物车 → 查看购物车 → 填写收货地址 → 选择支付方式 →
    确认订单 → 支付成功 → 查看订单状态"
3. Figma Make 自动生成：
   - 每个步骤的线框图
   - 页面间的跳转逻辑
   - 边缘场景（库存不足、支付失败、地址无效）
   - 空状态和加载状态
4. 在此基础上细化视觉设计
5. 通过 MCP 导出为前端代码

操作流程：

1. 在 Stitch 中输入提示词：
   "设计一个外卖点餐 App，包含：
   - 首页：附近餐厅列表、搜索栏、分类标签
   - 餐厅详情：菜单列表、评分、配送信息
   - 购物车：已选菜品、数量调整、总价
   - 订单追踪：地图显示骑手位置、预计到达时间
   风格：白色背景、绿色主色调、圆角卡片"

2. Stitch 生成 4 个屏幕的设计稿
3. 使用 Prototypes 功能连接屏幕，定义交互流程
4. 迭代优化：
   "给首页添加一个轮播 banner 区域"
   "把购物车改成底部浮动栏样式"
5. 导出到 Figma 继续细化
6. 导出 HTML/Tailwind 代码用于开发