02-UI/UX 设计 × AI 协同

💬 一句话读懂本篇：AI 出稿快但审美平均——你的价值不是画得比它好，而是定调、挑选、克制：知道哪一稿配得上你的产品，以及什么时候该停。

岗位定位：🤝 人机协同 · AI 承担约 60% 工作量。设计岗的特殊性：AI 产出的不是”错误”而是”平庸”——代码错了跑不起来，设计丑了照样上线。所以验收标准不是”对不对”，而是”配不配”。

一、传统画像：UI/UX 设计师原来干什么

二、AI 协同后的新画像

你从”画图的人”变成”艺术指导（Art Director）”——AI 是产量无限但需要盯的稿手，你做三件事：定调（风格方向）、挑选（海量稿里选一）、克制（砍掉花哨保体验）。

flowchart LR
    subgraph H["👤 你：艺术指导"]
        H1["① 定调<br>风格/色板/字体/参考"]
        H2["② 挑选<br>N 稿选 1，说得出理由"]
        H3["③ 克制<br>砍装饰、保一致性、护体验"]
    end
    subgraph A["🤖 AI：无限稿手"]
        A1["情绪板 / 风格方案"]
        A2["页面视觉稿"]
        A3["图标 / 插画 / 配图"]
        A4["设计 token / 组件规范"]
        A5["设计稿 → 前端代码"]
    end
    H1 --> A1 --> A2
    A2 --> H2
    H2 -->|"不满意，换方向"| A2
    H2 -->|"选中"| A3
    A3 --> A4 --> A5
    A5 --> H3
    H3 -.->|"不达标重来"| A5

    classDef human fill:#fff3e0,stroke:#e65100,color:#bf360c
    classDef ai fill:#e3f2fd,stroke:#1976d2,color:#0d47a1
    class H1,H2,H3 human
    class A1,A2,A3,A4,A5 ai

三、逐项对比：传统做法 vs AI 协同做法

💡 一人公司专属红利：传统流程里”设计→标注→还原”三个环节是三次信息损耗；AI 协同时设计和前端可以是同一份产物（设计稿即代码），你少当两次传话筒。

四、协同工作流：从定调到上线

flowchart TD
    PRD["📋 PRD 定稿<br>（来自 01 产品经理分册）"] --> T["👤 定调<br>关键词 + 参考产品 + 色板倾向"]
    T --> E["🤖 AI 出 3~5 套风格方向<br>（情绪板/示例页）"]
    E --> C1{"👤 关口①<br>选一套，写清选择理由<br>（理由会变成后续提示词）"}
    C1 -->|"都不行"| E
    C1 -->|"选中"| G["🤖 AI 批量出页面稿<br>首页/核心流程/边缘页"]
    G --> C2{"👤 关口②<br>一致性检查：<br>色板/字阶/间距有没有漂移"}
    C2 -->|"漂移"| G
    C2 -->|"通过"| K["🤖 AI 反推设计 token<br>+ 生成组件规范"]
    K --> F["🤖 设计稿 → 前端代码<br>（对接 05 前端分册）"]
    F --> C3{"👤 关口③<br>真机/浏览器验收：<br>响应式/暗色/空态/无障碍"}
    C3 -->|"不达标"| F
    C3 -->|"通过"| DONE["✅ 视觉定稿<br>token 与提示词入库沉淀"]

    classDef human fill:#fff3e0,stroke:#e65100,color:#bf360c
    classDef ai fill:#e3f2fd,stroke:#1976d2,color:#0d47a1
    class T,C1,C2,C3 human
    class E,G,K,F ai

节奏建议：风格探索阶段”多生成、快淘汰”（一稿看 30 秒就毙）；进入页面稿阶段后”少生成、精修”——换方向的成本越高，越要守住 token 一致性。

五、提示词模板（直接抄作业）

模板 A · 风格方向探索

1
2
3
4
5
6
7
8
【产品】xxx（一句话描述 + 目标用户）
【任务】给出 4 套差异明显的视觉风格方向，每套包含：
1. 风格关键词（3~5 个）
2. 色板（主色/辅色/中性色，给 HEX 值）
3. 字体建议（中文 + 英文，注明开源可商用）
4. 圆角/阴影/留白的总体倾向
5. 一个对标产品或参考流派
【约束】四套方向必须互相拉开差距，禁止四套都是"蓝白极简SaaS风"。

模板 B · 页面视觉稿（生图工具）

1
2
3
4
5
6
High-fidelity UI design of「页面名称」for「产品类型」,
style:「从模板A选定的风格关键词」,
color palette:「HEX色板」, font:「字体」,
包含模块:「导航/列表/表单等具体清单」,
状态:「默认态」, clean layout, realistic content（用真实感假数据，禁止乱码占位）
--另出：空数据态 / 加载态 / 错误态 各一版

模板 C · 设计 token 反推

1
2
3
4
5
6
以下是我选定的设计稿（贴图/描述）。请反推出设计 token：
1. colors（primary/secondary/neutral/semantic，HEX + 使用场景）
2. typography（字阶 h1~body~caption：字号/字重/行高）
3. spacing（间距体系，建议 4px 基准）
4. radius / shadow / border
输出为 JSON（可直接进 Tailwind config），并附一份「什么场景用什么 token」的使用规则。

模板 D · 设计稿转前端代码

1
2
3
4
5
6
7
8
【输入】设计稿（贴图）+ 设计 token（粘贴模板C输出）
【任务】用「技术栈+版本号」实现该页面为可复用组件
【约束】
1. 所有颜色/字号/间距必须引用 token，禁止硬编码魔法值
2. 覆盖状态：默认/悬停/加载/空数据/错误
3. 响应式：移动端优先，断点 xxx
4. 无障碍：对比度达标、可聚焦元素有 focus 态、图片有 alt
【输出】完整组件代码 + token 配置文件 + 与设计稿的差异说明（如有妥协，列出来）

六、验收清单（视觉定稿前逐项勾）

一致性（最重要）

• 全部页面共用同一套 token，无”这页蓝一点那页蓝一点”
• 字体不超过 2 族，字阶来自 token 而非手调
• 图标风格统一（线性/面性不混用）

完整性

• 每个页面覆盖五态：默认/悬停/加载/空数据/错误
• 响应式三档验证：手机/平板/桌面
• 暗色模式（若支持）单独过一遍，不是简单反色

体验底线

• 正文对比度 ≥ 4.5:1（无障碍）
• 可点击元素有明确的可点击感，触控目标 ≥ 44px
• 关键流程步数没有被”美观”拖累（装饰不挡操作）

合规

• AI 生成的图标/插画/字体确认可商用许可
• 未使用与知名品牌高度雷同的 AI 产出（避免抄袭争议）
• 设计稿中的假数据不含真实用户信息

七、坑点清单

💬 收尾一句：设计岗被 AI 改变的不是”谁来画”，而是”画多少选一”。一人公司的你，审美可以不是顶尖，但标准必须明确——标准写进 token 和提示词，AI 才能替你守住一致性。 下一册：03-架构师 × AI 协同（规划中）——技术选型这件事，AI 给得了对比表，给不了”适合你”。

• Previous
  11-技术文档 × AI 协同
• Next
  AI协同开发规范：人定约束，AI填充；人做校验，AI提速