AI 辅助 UI 设计迭代工作流

设计师的想法 → 描述给 AI → AI 生成初稿 → 不满意 → 重新描述 → ...

┌─────────────────────────────────────────────────────────────────┐
│                     AI UI 设计迭代闭环                           │
│                                                                 │
│  ① 需求分析 ──→ ② 提示词生成 ──→ ③ 参考图生成                  │
│       │                │                │                        │
│       ↓                ↓                ↓                        │
│   ┌─────────────────────────────────────────────────────┐        │
│   │              ④ OCR 评估 + 迭代循环                   │        │
│   │              ┌─────── 未通过 ──────┐                 │        │
│   │              ↓                     │                 │        │
│   │        ⑤ 产出【UI设计文档】        │                 │        │
│   │              │                     │                 │        │
│   │              ↓                     │                 │        │
│   │        ⑥ OpenCode → Figma 连接    │                 │        │
│   │              │                     │                 │        │
│   │              ↓                     │                 │        │
│   │        ⑦ AI 设计执行 ──→ 截图     │                 │        │
│   │              │                     │                 │        │
│   │              ↓                     │                 │        │
│   │   ⑧ 截图 → OCR 再评估 ───────────┘                 │        │
│   │              │                                       │        │
│   │              ↓                                       │        │
│   │         ⑨ 设计定稿                                   │        │
│   └─────────────────────────────────────────────────────┘        │
└─────────────────────────────────────────────────────────────────┘

## 页面基本信息
- 页面名称：[如：仪表盘主页]
- 目标用户：[如：企业管理者、开发者]
- 核心任务：[用户在此页面要完成什么]

## 关键元素清单
□ 导航栏（顶部/侧边）
□ 数据展示区（表格 / 图表 / 卡片）
□ 操作按钮（主要 / 次要 / 危险）
□ 输入表单
□ 状态提示（加载 / 空态 / 错误）
□ 品牌标识（Logo / 品牌色）

## 布局结构
- 布局类型：单栏 / 双栏 / 三栏 / 自由
- 信息优先级：最重要的元素放在什么位置
- 内容密度：紧凑 / 适中 / 宽松

## 风格意向（参考已有文档）
- 风格关键词：[如：新极简、柔和、专业]
- 参考配色：[如：雾霾蓝主色、米白背景]
- 参考品牌/产品：[给AI视觉锚点]

┌──────────────────────────────────────────┐
│  顶层：导航与全局操作                      │
│  ┌──────────────────────────────────────┐ │
│  │  中层：核心内容区域                    │ │
│  │  ┌──────────┐  ┌──────────┐         │ │
│  │  │ 卡片 A   │  │ 卡片 B   │         │ │
│  │  └──────────┘  └──────────┘         │ │
│  └──────────────────────────────────────┘ │
│  底层：辅助信息与次要操作                  │
└──────────────────────────────────────────┘

# 设计 Token 参考表
colors:
  primary: "#8BA4B4"       # 主色（雾霾蓝）
  primary-light: "#B8CDD6" # 主色-浅
  primary-dark: "#6B8A9E"  # 主色-深
  background: "#FAF9F7"    # 背景（暖米白）
  surface: "#FFFFFF"       # 卡片表面
  text-primary: "#2C3E50"  # 主文字
  text-secondary: "#7F8C8D"# 次要文字
  border: "#E8E6E1"        # 边框

radius:
  sm: 4px                  # 小元素圆角
  md: 8px                  # 常规圆角
  lg: 16px                 # 大卡片圆角

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px

shadow:
  card: "0 2px 12px rgba(139, 164, 180, 0.12)"
  elevated: "0 4px 20px rgba(139, 164, 180, 0.18)"

## 设计任务
设计一个 [页面类型] 的 UI 界面

## 关键元素
- 顶部导航栏：[描述内容]
- 主要内容区：[描述内容]
- [其他元素]：[描述]

## 布局规范
- 布局类型：[单栏/双栏/三栏]
- 网格系统：[如 12 列栅格]
- 间距：[参考 Token]

## 样式规范（引用已有设计文档）
- 配色：[指定主色、辅色、背景色]
- 圆角：[sm/md/lg 分别对应]
- 阴影：[卡片级、悬浮级]
- 字体：[字号、字重、行高层级]

## 风格方向
- [引用风格关键词]
- [参考风格文档链接或描述]

# UI 设计提示词

## 任务
Design the main dashboard page for an enterprise management system.

## Elements
1. Top navigation bar: brand logo on the left, search bar in the center, user avatar + notification bell on the right
2. Sidebar: collapsible, with 5 navigation items (Dashboard, Analytics, Settings, Team, Help)
3. Main content area: 4 metric cards in a row at the top, a data table below
4. Empty state illustration for the table area when no data

## Layout
- Two-column layout: sidebar (240px, collapsible to 64px) + main content (1fr)
- 12-column grid system for the main content area
- Card padding: 24px, card gap: 20px
- Max content width: 1200px, centered

## Design Tokens
- Primary color: #8BA4B4 (雾霾蓝)
- Background: #FAF9F7 (warm off-white)
- Card surface: #FFFFFF with subtle shadow
- Border: #E8E6E1
- Text primary: #2C3E50, text secondary: #7F8C8D
- Border radius: cards 16px, buttons 8px, avatars 4px
- Shadows: use primary hue at 12-18% opacity, not gray

## Style
- Neo-minimalism: clean but warm, minimal but not empty
- Card-based design with layered depth
- Muted, cinematic color grading (inspired by film aesthetics)
- Approachable premium: sophisticated without being intimidating

## Constraints
- NO gradients, NO neon or high-saturation colors
- NO pure black text (#2C3E50 minimum)
- NO metallic or glassmorphism effects
- Keep shadow colors tinted with the primary hue

❌ DeepSeek 原始：
"Sidebar: 240px, collapsible to 64px. Main content: 1fr."

✅ 豆包版：
"左侧有一个较窄的导航栏（可收起为图标模式），右侧为主要内容区域。
整体采用卡片式布局，卡片之间有适当的间距。

配色：以雾霾蓝为主色调（低饱和度），背景为暖米白色。
卡片为白色，带有柔和的淡蓝色阴影。
圆角适中（大卡片约 16px，按钮约 8px）。

风格：简洁、温暖、有层次感。界面看起来像高端生活方式品牌，
而不是冷冰冰的企业管理工具。
避免使用渐变色、高饱和度颜色和纯黑色文字。"

参考图 → OCR 识别 → 与提示词对比 → 输出差异报告 → 迭代提示词

请分析这张 UI 参考图，对照以下提示词要求，逐项评分（通过/不通过/部分通过）：

## 配色要求
- 主色调为雾霾蓝（低饱和度）
- 背景为暖米白，非纯白
- 无渐变色
- 无高饱和度颜色
- 阴影使用主色调淡化色，非灰色

## 布局要求
- 左侧导航栏 + 右侧内容区
- 卡片式布局
- 卡片间有均匀间距
- 顶部导航栏包含 logo、搜索框、用户头像

## 风格要求
- 新极简主义：简洁但有层次
- 有温暖感，非冷淡风格
- 圆角统一

## 输出格式
{
  "passed": ["配色-主色调正确", "布局-卡片式"],
  "failed": ["配色-阴影使用了灰色"],
  "partial": ["风格-温暖感不足，建议调整背景色"],
  "score": 7/10,
  "revision_suggestions": "将阴影颜色从灰色改为...；调整..."
}

┌────────────┐     ┌────────────┐     ┌────────────┐
│  当前提示词  │ ──→ │  生成参考图  │ ──→ │  OCR 评估   │
└────────────┘     └────────────┘     └────────────┘
                                             │
                                      ┌──────┴──────┐
                                      │  评分达标？   │
                                      └──────┬──────┘
                                     ┌───────┴────────┐
                                     │                │
                                     ▼                ▼
                              ┌────────────┐   ┌────────────┐
                              │ 进入下一步   │   │ 修改提示词   │
                              └────────────┘   └──────┬─────┘
                                                      │
                                                      ▼
                                               ┌────────────┐
                                               │  重新生成    │
                                               └────────────┘

---
title: [页面名称] UI 设计文档
version: v1.0
status: 已定稿
---

## 1. 设计概览
- 页面目标：[一句话说明]
- 设计风格：[风格关键词]
- 参考图：[附图片链接]

## 2. 设计 Token
[颜色、圆角、间距、阴影、字体层级]

## 3. 布局规范
[整体布局描述 + 示意图]

## 4. 组件规范
### 4.1 [组件名]
- 位置：
- 尺寸：
- 样式（默认 / hover / active）：
- 状态（加载 / 空态 / 错误）：

### 4.2 ...

## 5. 提示词（完整版）
[直接可用，无需修改，提供给 AI 设计工具使用]

## 6. 迭代记录
| 版本 | 日期 | 修改内容 | OCR评分 |
|------|------|---------|--------|
| v0.1 | 06-19 | 初始版本 | 6/10 |
| v0.2 | 06-19 | 调整配色饱和度 | 7/10 |
| v1.0 | 06-20 | 定稿 | 9/10 |

□ 每个组件都有明确的样式描述（默认态 + 交互态）
□ 设计 Token 完整且可重用
□ 布局规范精确到间距和对齐
□ 提示词版本是"可直接复制使用"的
□ 附有参考图供对照
□ 迭代记录完整，可回溯
□ 无模糊描述（如"好看"、"高级"），全部可量化

https://www.figma.com/design/[file-key]/[page-name]?node-id=[node-id]

/figma-use 立即连接到对应的figma页面
https://www.figma.com/design/[key]/[page]?node-id=70-2
，不要使用任何截图功能（这个受限！！！），准备工作好了就告诉我，
后面等我的进一步沟通再尝试创建设计稿

□ 颜色样式（Color Styles）—— 对应设计 Token 中的色值
□ 文本样式（Text Styles）—— 字号、字重、行高
□ 组件素材 —— 可能用到的基础组件（按钮、卡片、输入框等）

┌──────────────────────────────────────────┐
│  Figma 画布                               │
│                                           │
│  ┌────────────────────────┐               │
│  │  主设计区域              │               │
│  │  (供 AI 生成)            │               │
│  └────────────────────────┘               │
│                                           │
│  ┌────────────┐  ┌────────┐  ┌────────┐ │
│  │ 按钮组件    │  │卡片组件│  │输入框  │ │
│  └────────────┘  └────────┘  └────────┘ │
│  ↑ 素材区（提前准备）                      │
└──────────────────────────────────────────┘

❌ 一次调用：让 AI 创建 10 个 Frame + 50 个组件 + 全部样式
   → 生成一个超长 function code → 高风险

✅ 拆分策略：
   第一轮："先创建一个 Frame，设置 1200x800 的背景色"
   第二轮："在 Frame 中添加顶部导航栏"
   第三轮："在导航栏下方添加左侧边栏和主内容区的布局"
   → 每次 function code 短小 → 稳定可控

/figma-design 根据以下设计规范，在刚才连接的 Figma 页面中创建设计稿
[粘贴 UI 设计文档中的完整提示词版块]

请对照以下设计规范，评估这张 Figma 截图：

[粘贴 UI 设计文档中的规范]

评估维度：
1. 颜色是否匹配 Token？
2. 布局是否遵循规范？
3. 组件样式是否一致？
4. 整体风格是否对齐？
5. 是否有明显的偏差？

输出包含：逐项评分 + 修改建议

偏差类型                   推荐方式
─────────────────────────────────────────
颜色偏差                   → AI 调整（精确色值）
间距/对齐问题              → 手动调整（更快更准）
缺少组件                   → AI 添加（描述 + 位置）
风格不符合预期              → 回到提示词迭代
全局布局调整                → AI 调整（描述新布局）
圆角/阴影细节               → 手动微调（视觉判断）

□ 每一次迭代都保留版本记录
□ OCR 评分连续两轮 ≥ 8/10 再进 Figma 阶段
□ Figma 素材提前准备，不给 AI 额外工作
□ 拆分 function code，拒绝超长单次调用
□ 截图评估后再修改，减少反复试错
□ 设计文档保持"复制即用"的完整性
□ 迭代 3 轮以上仍不达标的，回来审视需求定义

构思 ──→ 你（设计师）
  │
  ├── 提示词 ──→ DeepSeek（文本生成）
  │
  ├── 参考图 ──→ 豆包（文生图）
  │
  ├── 评估 ──→ DeepSeek-OCR（视觉验证）
  │
  ├── 执行 ──→ OpenCode + Figma（设计落地）
  │
  └── 优化 ──→ OMO 插件（指令拆分）

你始终在闭环的"中心"——AI 是工具，不是决策者。