AI 辅助 UI 设计迭代工作流

huasa

2026年6月19日

UI 设计AI 工作流DeepSeekFigmaOpenCode提示词工程设计迭代

从构思到 UI 设计的完整闭环流程，涵盖提示词生成、参考图验证、OCR 评估、Figma 联动手动迭代

AI 辅助 UI 设计迭代工作流

从"凭感觉描述"到"可执行的视觉规范"——一套 AI 驱动的 UI 设计迭代闭环

引言：为什么需要结构化的工作流？

AI 生成 UI 时最常见的困境：

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

这个循环的痛点：

❌ 语义损耗：大脑中的画面无法精确传递给 AI
❌ 风格漂移：每次生成的风格不一致，无法收敛
❌ 缺乏验证：AI 产出的"高级感"是不是你想要的？没有客观标准
❌ 工具割裂：提示词在聊天框、设计稿在 Figma、规范文档在 Notion——信息散落

解决方案：建立一套可重复的闭环流程，让每个环节都有输入、输出和验证标准。

一、整体工作流概览

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

核心角色

工具	职责	在流程中的位置
你（设计师）	提供构思、评估输出、决定迭代方向	全流程主导
DeepSeek (文本)	生成结构化提示词、撰写 UI 设计文档	②、⑤
豆包	根据提示词生成参考图	③
DeepSeek-OCR	评估图片与提示词的一致性，判定完整性	④、⑧
OpenCode	连接 Figma，执行 AI 设计	⑥、⑦

二、第一步：需求分析 — 整理关键元素

2.1 从构思中提取设计要素

在告诉 AI "帮我设计一个页面"之前，先整理以下信息：

需求清单模板：

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

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

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

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

2.2 分析布局层次

将页面拆解为三个层级：

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

层级	视觉权重	典型内容	布局策略
顶层	高（品牌感）	导航、标题、搜索	固定定位、通栏
中层	最高（内容）	数据卡片、图表、表单	网格系统、自适应
底层	低（辅助）	页脚、版权、次要链接	小字号、低对比度

2.3 统一样式设计语言

在开始写提示词前，先定义设计 Token：

# 设计 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)"

为什么要先做这一步？ 因为 AI 没有"一致性"的概念。如果不在前端约束 Token，AI 每次生成的圆角大小、间距、阴影颜色都可能不同。Token 就是给 AI 套上的"规矩"。

三、第二步：DeepSeek 生成结构化提示词

3.1 提示词模板结构

将第一步整理的元素组装成结构化提示词：

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

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

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

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

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

3.2 完整提示词示例

# 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

3.3 向 DeepSeek 提问的技巧

目标	提问方式
补充遗漏	"检查我上面的元素清单，是否遗漏了关键 UI 组件？"
优化布局	"这个布局是否符合用户的操作流？建议优化方向？"
丰富细节	"针对每个元素，补充状态变化（hover、focus、active）的样式"
转中文	"把提示词改写成中文版本，方便喂给中文 AI 绘图工具"

四、第三步：豆包生成参考图

4.1 提示词适配

将 DeepSeek 生成的提示词输入豆包时，注意以下差异：

维度	DeepSeek 风格（文本模型）	豆包适配（文生图）
排版描述	精确尺寸（如：240px）	相对描述（如：较窄的侧边栏）
颜色描述	色值（如：#8BA4B4）	色名+风格（如：雾霾蓝色调）
布局描述	CSS 语义（如：1fr）	视觉语义（如：左侧导航右侧内容）
状态描述	交互状态（hover等）	只描述静态视觉

适配示例：

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

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

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

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

4.2 生成策略

首次生成：给 3-4 张不同角度的变体，观察风格是否收敛
二次迭代：选择最接近的一张，微调提示词再生成
关键节点：每个迭代轮次至少保留一张"锚点图"方便后续对比

4.3 参考图的用途

参考图不是最终设计稿，而是视觉共识——让你和 AI 对"好看"有统一的标准。它能：

验证提示词是否准确传达了你的意图
作为后续 OCR 评估的基准图像
为 Figma 设计提供布局参考和色调参考

五、第四步：DeepSeek-OCR 评估与迭代

5.1 为什么需要 OCR 评估？

人类看一张图可以秒懂"好不好看"，但难以量化为文本反馈给 AI。OCR 评估解决了这个问题：

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

5.2 OCR 评估指令

将参考图（豆包生成的）发送给 DeepSeek-OCR，附上评估指令：

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

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

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

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

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

5.3 迭代策略

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

迭代目标：OCR 评分连续两轮 ≥ 8/10，且无"不通过"项。

5.4 常见迭代模式

问题	OCR 表现	提示词调整
颜色太鲜艳	"饱和度偏高，不符合 muted palette"	补充 "saturation < 30%，add gray tone"
布局不对	"元素排列与描述不一致"	增加布局示例或参考图描述
缺少元素	"未检测到搜索框"	明确位置和样式
风格偏差	"风格偏现代科技感，非温暖感"	补充参考风格（如：北欧、日系）
阴影错误	"阴影为灰色非主色调"	加上色值和透明度示例

六、第五步：产出【UI设计文档】

6.1 文档结构

当 OCR 评估连续达标后，将提示词沉淀为正式的 UI 设计文档：

---
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 |

6.2 文档质量检查清单

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

七、第六步：OpenCode → Figma 连接

7.1 连接 Figma

获取 Figma 设计文件的链接，格式如下：

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

在 OpenCode 中执行连接指令：

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

7.2 预先准备 Figma 素材

在发起 AI 设计之前，先在 Figma 中准备：

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

将组件放置在画布边缘或单独的 Frame 中，作为 AI 设计的"素材库"：

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

7.3 Function Code 长度管理

⚠️ 重要警告：超长的 Figma function code 会导致不可控制的卡顿

现象	表现
Cursor	直接卡死，完全不可用
OpenCode	未卡死过，但仍需注意

最佳实践：

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

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

OMO 插件的价值：OMO 插件可以在 OpenCode 中辅助拆分指令，让 AI 每次只执行一个较小的操作单元，避免一次性生成大量 Figma 节点。

八、第七步：AI 设计执行与截图迭代

8.1 提供设计文档给 OpenCode

将第五步产出的【UI设计文档】中的提示词完整版提供给 OpenCode：

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

8.2 截图 → OCR 再评估

AI 完成设计后，截图发送给 DeepSeek-OCR 评估：

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

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

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

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

8.3 迭代方式

情况	操作
OCR 评分 ≥ 8/10，无严重偏差	设计定稿
评分 6-7/10，有轻微偏差	手动在 Figma 中微调，或给 OpenCode 精确修复指令
评分 < 6/10，或有严重偏差	回到第二步或第六步，调整提示词后再来

8.4 手动调整与 AI 调整的选择

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

九、完整工作流总结

9.1 一次标准迭代的时间估算

步骤	操作	预估时间
①	整理需求 + 关键元素	10-20min
②	DeepSeek 生成提示词	2-5min
③	豆包生成参考图	1-2min
④	OCR 评估 + 迭代（2-3轮）	5-10min/轮
⑤	产出 UI 设计文档	10-15min
⑥	Figma 连接 + 素材准备	5-10min
⑦	AI 设计执行	5-15min
⑧	截图 OCR 再评估 + 调整	10-20min
合计	一次完整闭环	约 1-2 小时

9.2 最佳实践清单

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

9.3 工具链总结

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

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

十、附：常见问题

Q1: OCR 评估总是不准确怎么办？

多给一些"对比锚点"——比如提供一张你认可的参考图，让 OCR 比较差异。也可以补充文字描述"期望是什么样"和"实际是什么样"的对比。

Q2: 豆包生成的参考图风格不稳定？

每次生成时，在提示词中固定引用同一张"风格锚点图"的链接或描述，让 AI 知道这是必须保持的风格基线。

Q3: Figma function code 还是太长了怎么办？

手动拆分指令，不要一次性描述整个页面。从外到内逐步构建：

先画背景 → 2. 再画布局框 → 3. 填充组件 → 4. 调整间距 → 5. 配色

Q4: 手动调整和 AI 调整应该怎么选？

颜色、间距类的系统性调整 → AI 改（一次改全局） 元素位置、对齐类的视觉微调 → 手动拖（更快出效果） 整体布局变更 → AI 改（重新生成快于手动重建）

Q5: 这个工作流适用于什么类型的项目？

适用于：中大型页面的 UI 设计（仪表盘、后台管理、门户网站）不适用于：图标设计、插画绘制、品牌 Logo（属于图形设计范畴）

文档更新于 2026年6月