AI 辅助 UX·体验/UI 设计阶段(用 AI 生成美观UI·设计系统·配色·交互状态·微文案·UI转代码Figma·响应式的提示词与流程)

这是 Will「AI 辅助 UX 工作流」笔记里最大的一区——体验/界面/视觉设计的综合提炼。它回答一个非常具体的问题:当一个不会画图的产品经理坐在 AI 面前,想做出一个像样的界面,这一步到底能让 AI 干哪些活、怎么开口、用什么工具、哪里会翻车。

先把这一区在整套设计知识里的位置说清楚:

Google Material Design 3 设计系统(动态色彩/Type Scale/Tonal Elevation/形状/自适应/动效/无障碍核心主张与规则) 讲的是一个具体设计系统(Google Material 3)内部的规则与数值——对比度要多少、触控目标要多大、颜色角色怎么命名。那是"规则字典"。

Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) 讲的是做 UI 的手艺细节——灰色分几档、阴影怎么打、按钮怎么分级。那是"手艺手册"。

Google UX 证书 / 视觉设计·设计系统·响应式讲的是视觉设计的通论与原理(层级、格式塔、对比)。那是"为什么"。

本篇讲的是"怎么用 AI 把上面这些规则,快速变成真东西"——给一句话或一张参考图,让 AI 吐出 UI、设计系统、配色、状态清单、文案、可编辑的 Figma/代码。这是"AI 操作台"。

几个反复出现、容易被吓退的术语先讲人话:

Design Tokens(设计令牌):把"主色、字号、间距、圆角"这些数值起个变量名存起来(如 --color-primary: #5e6ad2),而不是到处写死具体值。好处是换皮肤、切深色、统一全站只改变量。AI 生成 UI 时,先让它产出一份 tokens,后面所有页面引用它,视觉才会统一——这是本区一切"先定系统再铺页面"做法的工程底座。

Figma Make:Figma 官方的"用文字/截图生成可编辑设计稿"的 AI 功能。你给它一段英文提示词或一张图,它直接在 Figma 里搭出界面。本区多个技法的最终落点就是"产出一段能粘进 Figma Make 的提示词"。

低保真线框图(lo-fi wireframe):剥掉一切颜色/圆角/阴影/真实图标,只剩黑白灰方块和文字的"结构草图"。用来先确认"信息架构和布局对不对",再单独换视觉皮肤。

UI Skill:把"优化某一类 UI 问题"打包成一条可复用命令(如 bolder 放大视觉张力、clarify 改文案),喂给 Claude/Codex 这类能写代码的 AI,让它按统一标准改你的 HTML。

本区的元方法(贯穿所有技法的一句话):把"凭感觉"换成"先定规则,再让 AI 按规则批量产出,你只做取舍和验收"。 AI 最擅长的不是替你拍板审美,而是:把你模糊的"感觉"提取成明确的 tokens/清单/状态表,然后保证一致地铺满整个产品。

全文按工作任务重组成 11 节:① 判断框架(好的体验/界面/交互长什么样 + UI 做不好的卡点)→ ② 生成美观 UI 的视觉基准线 → ③ 为参考网站/参考图生成设计系统 → ④ 品牌色与色彩含义 → ⑤ 边界交互状态穷举 → ⑥ UX 微文案生成 → ⑦ UI 转代码 / 转 Figma → ⑧ Figma 视觉优化(只换皮) → ⑨ 响应式多平台 → ⑩ 局部多方案呈现与决策 → ⑪ UI Skill(Impeccable + Awesome-design)。每节带何时用 / Why / 反例 + 可复用提示词骨架。

一、先建判断框架:好的体验/界面/交互长什么样 + UI 做不好的卡点在哪

来源:What is good experience design / What makes a good interface design / What makes good interaction design / What makes designers stagnate 何时用:在让 AI 出任何稿之前,你得先有一把尺,否则 AI 给你十版你也不知道哪版对。这一节不产 UI,产的是你审稿和写提示词时的判断标准。

1.1 体验设计的四个特性(审"这产品到底行不行"用)

特性	一句话	自问
可用性 Usable	好不好用、易不易上手	功能好找吗?能顺利完成任务吗?
公平性 Equitable	不同能力/背景的人都能用好	照顾到被忽视的群体了吗(如表情有不同肤色)?
愉悦性 Enjoyable	用着开心、有情感连接	有个性化、有让人会心一笑的地方吗?
实用性 Useful	真解决了实际问题	给用户增加价值了吗?(注意:可用性≠实用性——好用但没用也是失败)

1.2 好界面的"因果链"(写视觉提示词时按这条链想)

界面不是"风格选择",是一条链:设计目标(用户认知)→ 视觉原则(怎么引导)→ 设计变量(用什么实现)→ 视觉结果(最终长相)。

设计目标先问三件事:用户要看到什么(认知)、要做什么(行为)、做完该感受到什么(情绪)。目标不清,后面全漂。
视觉原则:强调(突出最该注意的)、层级(引导视觉流向)、比例(元素大小协调)、一致与多样(统一中有变化)。
设计变量(真正能调的 6 个参数):颜色(区分/强调/情绪)、字型排版(层级骨架)、间距(表达关系——靠近=一组,拉开=分开)、形状圆角(大圆角=友好,直角=严肃)、图层阴影(谁前谁后)、运动时序(动效是导航不是装饰)。

给 PM 的用法:你写提示词时,与其说"做好看点",不如沿这条链给约束——"主路径(下单)要在视觉上压过其他元素(强调),用大字号+主色;次要操作弱化成灰色文字按钮(层级);卡片用 12px 圆角传递友好(形状)"。AI 接到这种结构化约束,出稿质量比"做漂亮"高一个量级。

1.3 好交互的四条原则(审交互/写状态提示词用)

可达性(任务有完整不断路的路径)、可感知性(每个动作都有反馈——点击有响应、加载有进度、出错有说明)、可恢复性(假设用户一定会犯错,删除前确认、操作可撤销、流程可续)、可支撑性(在用户卡住的时刻按需给帮助,时机比内容重要)。判断标准:效率(几步完成)、准确性(误操作概率与代价)、认知负荷(要记多少东西)、情绪曲线(哪个节点最易挫败)。

1.4 UI 做不好的真正卡点(诊断自己/团队/AI 产出的盲区)

Will 这页点破一个反直觉的事:UI 做不好,本质不是"技巧不够",是不会"做决策"。四层断层:

视觉能力 → 信息理解能力:不会取舍 → 信息密度失控、重点不明。卡点表现为反复纠结"该不该强调/怎么排序/这按钮该不该存在"。解药:把内容拆成 主/次/噪音,敢删噪音。
排版能力 → 行为设计能力:页面"看起来挺好"但用户不知道下一步干嘛。解药:把界面当引导系统,主路径显眼、次要动作退后。
组件能力 → 系统能力:单页 OK 但整体混乱(每页像重新设计)。解药:统一 spacing/字号/权重规则,局部正确升级为整体一致。
设计思维 → 业务判断:不知道"为什么这样设计",无法把设计绑定到转化/留存/信任。解药:能在多方案间取舍并讲清目标、代价、预期。

Why 这节排第一:AI 能帮你跨过第 1、3 层(取舍清单、系统一致性它很擅长),但第 2、4 层(行为路径、业务判断)是 AI 替不了你的——你得带着这把尺去给 AI 下约束、去验收。反例:直接丢"帮我做个好看的首页",等于把 4 层决策全甩给 AI,出来的必然是"看起来挺好但用户不知道下一步"的漂亮废稿。

二、生成美观 UI:先建立"视觉基准线"(Beautiful UI Design)

何时用:你需要先知道"国际高级水准的 UI 长什么样",以及让 AI 产出的稿能对齐这条线。 Why:Will 这页本质是一个视觉标杆库(Mobbin 级案例:Airbnb / Spotify / Notion / Stripe / Linear / Fey / World App 等)。它的潜台词是——你作品的 UI 若与这些产品相近,这项能力就到了国际高级水准。这条"基准线"是你后面所有 AI 出稿的及格线。

给 PM 的可操作做法(原页是图库,这里给出能落地的用法):

喂参考给 AI:把你心仪的标杆产品截图当参考图(走第三、八节的"参考图提取 token"流程),而不是空口说"做好看"。
用基准线反推及格标准:好 UI 的共性是——克制的配色(1-2 主色 + 大量中性灰)、清晰的层级(一眼看到重点)、充足留白、统一的圆角/阴影系统。拿这几条去 review AI 的产出。
兜底:若 AI 产出的视觉整体不佳又懒得调,直接走第七节的"Figma 默认视觉系统兜底"——一键拉回接近 Untitled UI($300+ 商业 UI 库)的质量基准线。

三、为参考网站 / 参考图生成设计系统(把"感觉"变成可复用的 Tokens)

来源:Generate a design system for a reference website / Optimize UI visuals by analyzing reference images 何时用:你有个喜欢的网站(如 Apple、Stripe)或几张参考图,想把它的视觉风格变成一套你能复用的规则(颜色/字体/间距/圆角/阴影变量),让后续所有页面视觉统一。 Why:这是本区的"地基技法"。一旦有了 tokens,后面生成的每个页面都引用同一套变量,视觉自动统一——这正是第一节说的"组件能力→系统能力"那一跃。

路径 A:从参考网站生成可交互的设计系统站点

第一步(生成 token 化的 HTML):
[www.apple.com](替换成你的目标网站)
Create an HTML for an Apple UI design system using pure CSS variables (:root + dark)
创建一个 Apple UI 设计系统的 HTML,纯 CSS variables(:root + 深色)

第二步(把它变成可浏览的设计系统站):
根据第一步代码,生成带有可切换左侧边栏的交互式 HTML UI 设计系统(英文)

产出:一个可交互网页,内含颜色 / 排版 / 间距与圆角 / 阴影 / 动效 / 层级 / 按钮 / 徽章 / 输入框 / 卡片 / 弹层 / 骨架屏 / token 浏览器等组件的完整设计系统。

路径 B:从参考图提取风格基因 + 生成 Design Tokens(更适合"我有几张喜欢的截图")

[上传参考图1:整体风格参考]
[上传参考图2:某个组件细节参考,可选]

请做两件事:
第一,从参考图中提取视觉决策:
- 我想借鉴的:整体色调、空间感、组件风格
- 我不想照搬的:[你填,如"它的布局太复杂"]
- 情绪基调:[你填,如"专业、克制、现代"]
第二,基于上面的决策生成 Design Tokens:
- 主色、辅助色、背景色、文字色
- 字号层级(typography scale)
- 间距规则
- 圆角、阴影

输出:DESIGN_BRIEF.md + tokens.css

产出两个文件:DESIGN_BRIEF.md(把"感觉"写成规则)+ tokens.css(可直接 import 的变量)。

关键技巧:提示词里同时写"想借鉴的"和"不想照搬的"——这一正一反的约束,是让 AI 不跑偏的核心。反例:只说"模仿 Stripe 的风格",AI 会连它复杂的布局一起抄过来;明确"借鉴它的配色和留白,但不要它的多列复杂布局",才提取得干净。

四、品牌色与色彩含义探索(Explore Brand Colors / Color Meanings)

选品牌色:让 AI 基于"产品调性 + 目标情绪 + 行业惯例"给候选主色,并直接产出色阶(如主色 100→900 九档)——这样深浅状态、hover、禁用态都有对应色,而不是只有一个孤零零的主色(这点与 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) 的"一套色要 9 阶"、Google Material Design 3 设计系统(动态色彩/Type Scale/Tonal Elevation/形状/自适应/动效/无障碍核心主张与规则) 的"色调调色板 0-100"完全一致)。
色彩含义校验:写微文案/配色前,让 AI 说明"暖色促进行动、冷色建立信任"这类心理映射,确保用色和情绪目标对齐(对应第一节因果链里的"情绪目标")。
落地:确定的品牌色直接写进第三节的 tokens.css,全产品引用。

何时用:定品牌主色、或想知道某个颜色在你的产品语境里传递什么情绪。说明:Will 这两页本身是参考图库(色卡/案例),无独立提示词。结合本区方法,给 PM 的可操作做法:

五、边界交互状态穷举:逼 AI 把状态全列出来(Boundary Interaction States)

来源:Boundary Interaction States / UI State Reference Table 何时用:做任何有输入/提交/加载的功能前,确保不漏状态——这是 PM 最容易丢的活,也是上线后 bug 和差评的重灾区。 Why:人做界面只画"正常态",但真实世界 80% 的体验事故出在异常态(断网、超时、格式错、空状态、未保存就离开)。AI 最擅长的就是按清单穷举,把你想不全的边界状态一次列齐。

可复用提示词骨架(状态穷举):

上下文
- 我正在构建的功能:[功能名]
- 技术框架:[React / SwiftUI / Flutter / 原生 HTML]
- 用户行为:[如"提交支付表单""上传头像"]
- 当前已覆盖状态:[列出已有,或写"无"]

任务
你是资深交互设计师。为该功能生成完整的 UI 状态覆盖清单。
每个状态输出一行 5 列表格:| 状态 | 触发条件 | UI 组件 | 文案/标签 | 是否可恢复 |
规则:
- 文案必须可直接上线,禁止占位符(不许写 [X] 或 [错误信息])
- UI 组件要具体(内联错误/Toast/Modal/Skeleton/进度条/Banner/空状态/引导/禁用按钮)
- 可恢复:Yes / No / Limited(附一个词说明)

必须逐类检查(不适用才跳过):
1 正常路径:默认、输入中、成功、异步提交完成
2 用户错误:必填未填、格式错误、规则校验失败、内容错误、超限、多次失败锁定、未勾选协议
3 系统错误:无网络、请求失败、超时、服务异常、数据异常、会话过期、无权限、限流
4 加载/处理中:首屏骨架屏、局部加载、提交锁定、慢响应、上传/下载进度
5 边界/决策态:空状态、搜索无结果、首次引导、危险操作确认、覆盖确认、未保存离开、功能降级、复制/粘贴、敏感信息提示、权限请求

输出后追加一节"你可能遗漏的状态(States You Might Have Missed)",指出本功能特别易漏的状态。
所有文案用同一种语言:[中文/英文,选一]。

配套查表:UI 状态对照表(5 大类,做组件前先筛)

大类	典型状态(每个都要想文案+UI形式)
01 正常路径	默认态(Placeholder)、输入中(行内提示/字符计数)、提交中(按钮 Loading)、操作成功(Toast"已保存")、异步已提交("已提交,结果将通知你")
02 用户错误	必填缺失、格式错误(给示例 name@mail.com)、规则校验失败("需至少8位含数字字母")、验证码错误、超出限制、连续错误锁定("已失败5次,锁定30分钟"+找回入口)、未勾选协议(高亮抖动)、不支持的文件类型
03 系统错误	无网络、请求失败(带错误码)、请求超时、服务不可用(给预计恢复时间)、数据异常(+刷新按钮)、登录态失效(自动跳登录)、无权限(+返回)、风控拦截("操作过于频繁,X分钟后再试")
04 加载/等待	首屏骨架屏、局部刷新、提交锁定(disabled+Spinner 防重复点)、慢响应提示(超3s)、上传进度("已上传64%"可取消)
05 边界/决策	空状态("还没有内容"+引导CTA)、搜索无结果、首次引导(Coach mark)、危险操作确认("删除后不可恢复")、覆盖确认、离开未保存、功能降级、复制成功/失败、粘贴格式不兼容、敏感信息提醒

使用方式:做任何组件前,从上表筛出相关状态 → 每个状态补具体文案和视觉形式。反例:只做了"成功 Toast"就上线,结果用户断网时界面无任何反馈(黑洞),用户狂点提交按钮造成重复下单——这正是"可感知性"和"提交锁定"缺失的代价。

六、通用 UX 微文案生成(General UX Microcopy Generator)

何时用:写按钮文字、错误提示、空状态、成功反馈、标题等"小而关键"的文案,且想要专业、有 A/B 测试方向的版本。 Why:微文案是用户决策链上的最后一脚。"提交"vs"立即领取优惠券"、"输入错误"vs"手机号格式不对,请检查位数"——改一个词,转化率可能差很多。AI 在这件事上能稳定输出专业级文案 + 多版本对比。

可复用提示词骨架(微文案):

你是资深 UX Writing 专家。每句微文案都建立在 3C 原则上:
- Clarity 清晰:用户一眼知道发生了什么、下一步做什么
- Concision 简洁:删掉一切多余的字
- Character 有个性:符合品牌语气,不像机器说话

写作前先分析:用户此刻的情绪状态?核心 JTBD(真正想完成的事)?
处于决策链哪个阶段(认知/考虑/行动/留存)?有什么顾虑/摩擦要消除?

我要写的文案背景:
【场景类型】(标题/正文/按钮/错误提示/空状态/成功反馈/落地页标题…)
【我想表达的意思】(用大白话说清即可,不需写得好)
【品牌语气】(友好自然/专业严谨/轻松活泼/极简克制,或描述品牌感觉)
【目标用户】(可选)

请按结构输出:
1. 用户分析(3-4句:情绪、JTBD、决策阶段、主要摩擦点)
2. 版本 A / B / C(三个风格各异),每版含:文案正文 + 写作策略(命中什么心理、适合什么场景) + A/B 测试建议
3. 写作分析:核心难点、处理思路、可读性是否匹配目标用户认知成本

关键技巧:让 AI 先做"用户分析"再写文案,而不是直接给文案——这一步逼它把"用户此刻焦虑/赶时间"这类语境想清楚,文案才不会跑偏。三个版本 + A/B 建议,正好对应 PM 的工作流(选一版上线、留一版做实验)。反例:直接问"给我个好点的按钮文案",AI 给一句你也不知道为什么是它、能不能测。

七、UI 截图转代码 / 转 Figma(让 AI 把图变成能编辑的东西)

来源:Image UI to code Figma design mockup / From UI to product prototype / HTML to Figma / Restore Figma's default UI visual system 何时用:你有一张界面截图(竞品、灵感、手绘),想把它变成可编辑的 Figma 稿或代码,而不是对着图重画。这是 AI 辅助设计里省时间最猛的一类。

7.1 截图 → Figma Make 还原提示词(高保真复刻)

请分析这张 UI 截图,生成一份可直接粘进 Figma Make 的还原提示词。要求:
1. 用英文输出(Figma Make 对英文响应更准)
2. 识别所有控件,用 Figma 标准命名(Frame, Auto Layout, Button, Input, Icon, Chip, Card, Divider)
3.【重点】描述每个区域的"容器形态":是圆角卡片?色块背景?细线分隔?虚线?无边框留白?
   明确每个容器的:背景色/边框色/边框粗细/圆角(large/medium/none)/有无阴影
4. 提取色值给 hex:主背景/卡片背景/边框/主文字/次文字/强调色/按钮色
5. 描述字号关系(large/medium/small/xs 或相对比例)
6. 描述间距(padding/gap/margin 相对关系)
7. 提示词开头加"还原模式声明",禁止 Figma Make 自由发挥、禁止替换容器形态
8. 按区域分块,从上到下从左到右,每区一段
输出:直接给提示词正文,复制即用。

Why "禁止自由发挥"是关键:AI 默认会"美化"你的图,导致还原失真。明确写"还原模式""禁止替换容器形态",才能让它老实复刻而非二次创作。

7.2 截图 → 低保真线框图(先确认结构,再换皮)

你是资深产品设计师,专长把高保真 UI 还原成"无视觉风格的低保真线框图"。
把我给的 UI 截图转成纯结构线框,输出单文件 HTML。
必须剥离:品牌色/渐变→全灰度;圆角/阴影/美化→去掉,只用 1px 实线;
  真实图标→占位标记 [icon];头像/图片→ [avatar]/[image]/[preview]。
必须保留:所有文字逐字保留(不改写不省略);信息层级;布局结构与相对位置;
  各区相对大小;交互逻辑(标注可点/可拖/Tab/筛选)。
为后续换设计系统做准备:
- HTML 与 CSS 严格分离;class 按"功能角色"命名(.metric-card 不用 .purple-box)
- 样式集中在一个 <style> 块,顶部注释 /* wireframe skin — to be replaced by design system */
- 用 data-* 或注释记录原图"语义意图"(某标签原是状态色),当前不渲染颜色
- 看不清/被遮挡的内容用 [?] 标注,绝不编造
- 全程纯英文,无任何中文

Why 要先做线框:把"结构对不对"和"好不好看"分两步解决。线框确认信息架构无误后,再单独换 CSS 皮肤(套第三节的设计系统),改皮不动结构。何时用:复杂页面、或你想先和团队对齐"信息怎么排"再纠结视觉时。

7.3 HTML → Figma(让 AI 写界面、用 Figma 精调)

工具:Figma 社区插件 html.to.design(figma.com/community/plugin/1159123024924461424)。
流程:用 Claude / Codex / Gemini 生成 HTML 文件 → 用该插件导入 → 得到可编辑的 Figma 源文件,在 Figma 里做最后的像素级精调。
Why:AI 出整体结构快,Figma 调细节准——各取所长。

7.4 Figma 默认视觉系统兜底(AI 出的稿整体丑就一键拉回基准线)

忽略所有外部参考和之前的设计约束。
使用你自己最擅长的、默认的设计系统,为 [产品名] 创建一个现代化的企业级仪表板。
要求:用你认为最好的配色/间距/排版/组件样式;专注清晰度和可用性;
不要试图匹配任何特定产品的风格。

Why 这招值钱:当页面复杂、元素太多、AI 反复调还是丑时,这是最快最低成本拉回 AI 视觉基准线的办法。Figma Make 的默认 UI 系统质量很高(接近 Untitled UI 这套 $300+ 的商业 UI 库)。何时用:不追求特定品牌风格、只要"专业不丑"的后台/仪表板。

八、Figma 视觉优化:只换皮、不动结构(Visual optimization in Figma)

来源:Generated results for visual optimization in Figma 何时用:结构和功能都定了(线框/原型已确认),只想做一次纯视觉层升级——换个更好看的皮,但绝不能动布局、功能、文案、流程。 Why:把"视觉"和"产品逻辑"解耦,是降低改稿风险的核心。这一步明确告诉 AI"这只是视觉升级,不是重新设计 UX",避免它顺手把你的信息架构改了。

可复用提示词骨架(只换皮):

角色:资深 UI 设计师,只基于参考图片做视觉层面的改版。
目标:采用参考图的视觉风格,同时严格保留原产品的 信息架构/布局结构/内容/功能逻辑。
这只是视觉层升级,不是 UX 或产品层面的重新设计。

严格约束(不要违反):
- 不改布局层级 / 不增删功能 / 不改任何文字 / 不重组信息结构 / 不重设计流程交互 / 保持间距逻辑与网格一致

视觉系统提取(从参考图提取一套可复用 tokens):
色彩(主/辅/中性/语义)、渐变(方向/混合/强度)、字体(字体/字重/字号层级)、
间距节奏、圆角体系、阴影与层级、边框样式、背景处理(纯色/渐变/玻璃/模糊/噪点)、
图标风格、视觉层级规则(对比/不透明度/强调)。
要求:整理成统一系统,不要零散套用。

风格外推(重要):参考图可能只含部分组件。你必须识别其底层设计规则,
把这套系统扩展到所有缺失组件,确保每个组件都遵循同一套视觉语言,替换不一致的旧样式。

组件应用:把视觉系统应用到全部组件(出现的对齐其样式,未出现的按相似组件+系统规则推断):
Button / Checkbox / Tab / Text Field / Card / Chip / Divider / Toast / Tooltip / Dialog /
Drawer / Avatar / Icon / Skeleton / Table / Top Navigation Bar … (按你的产品组件清单列全)

关键技巧:"风格外推"——参考图往往只有几个组件,但你的产品有几十个。明确要求 AI"识别底层语法并推断缺失组件",才能保证全产品视觉统一,而不是只有那几个组件好看、其余游离在系统外。反例:不写约束直接"参考这张图优化我的页面",AI 很可能连布局都给你改了,产品逻辑被破坏。

九、响应式多平台设计(Responsive Multi-Platform Design)

何时用:一张桌面端截图,想直接得到能在手机/平板/桌面都自适应的页面。 Why:很多设计桌面端完美,缩到手机就拥挤错位、字小点不到。让 AI 一步到位产出移动优先的响应式代码,省去手动调断点。

最小提示词:

Convert this UI screenshot into semantic responsive HTML + CSS.
Use a mobile-first approach, utilize CSS variables to define colors,
and ensure compliance with WCAG AA contrast standards.

将此 UI 截图转换为语义化的响应式 HTML + CSS。使用移动优先的方法,
利用 CSS 变量定义颜色,并确保符合 WCAG AA 对比度标准。

三个关键词的 Why:

mobile-first 移动优先:先保证小屏好用,再往大屏加内容——比"先做桌面再压缩"更不容易出错位。

CSS variables 定义颜色:产出的颜色都是变量(token),和第三节的设计系统能无缝对接。

WCAG AA 对比度:无障碍硬约束(正文对比度≥4.5:1),这是 Google Material Design 3 设计系统(动态色彩/Type Scale/Tonal Elevation/形状/自适应/动效/无障碍核心主张与规则) 里也反复强调的不可偏离项——AI 不主动加,你就得显式要求。

若 AI 一次没适配好,可叠加第十一节 Impeccable 的 adapt(响应式适配)命令专门修跨设备断层。

十、局部多方案呈现与决策(Presentation and Decision-making of Multiple Local Options)

何时用:某个页面感觉"不对劲"但说不清问题,想让 AI 像高级 PM / UX Lead 一样先系统诊断问题、再给保守/中度/彻底三档改法,而不是直接出一版让你赌。 Why:AI 默认只做"表层视觉评价"(好不好看)。这套提示词逼它从用户真实任务 + 场景 + 交互优先级 + 决策成本出发做深度诊断——产出的是"为什么这样设计/哪里有问题/为什么严重/怎么改",而不是审美意见。

流程(两步):

诊断:给单页 UI 截图 + 下面提示词 → 产出文字版问题分析报告(含保守/中度/彻底三档改法)。
出方案:把"第3步的三档改法说明 + 局部页面截图"再喂回去 → 产出对应的局部优化方案(图)。

诊断提示词骨架(关键步骤):

你是资深 UX/产品体验专家。不要只做表层视觉评价,必须从
「用户真实任务 + 使用场景 + 交互优先级 + 决策成本」出发系统分析。
我给你一张界面图(车机/APP/网页/后台/支付页/B端工具/智能硬件均可)。
严格按步骤、不跳步、不泛泛而谈、必须具体:

第一步 判断场景(很重要):核心使用场景是什么?用户此刻什么状态(赶时间/焦虑/低注意力/
  高风险…)?最核心任务是什么(只能有一个第一优先级)?
  (示例:不是"用户在用车机",而是"驾驶中持续做路径决策,核心任务是下一步往哪开")
第二步 按用户任务拆模块(不按视觉拆):拆出 5-8 个核心模块,每个说明
  模块名称 / 用户为什么需要它 / 它解决什么任务。
第三步 逐模块分析(核心):每模块输出 用户真实任务(不是功能是什么,是用户真正想解决什么)/
  当前设计问题 / 问题为什么严重 / 改进方向。
（最后按 保守 / 中度 / 彻底 三档给改法,供我选)

关键技巧:"按任务拆,不按视觉拆"——逼 AI 说"快速发起导航模块"而不是"左上角一个卡片",分析才有产品价值。反例:直接问"这个页面怎么优化",AI 给一堆"这里加点留白、那里换个颜色"的表层意见,碰不到真正的体验问题(用户在这一步到底要干嘛、卡在哪)。

十一、UI Skill:把"优化某类 UI 问题"打包成可复用命令

来源:UI skills - Optimize the UI visuals(Impeccable / Awesome-design) 何时用:你已经有一版 HTML/界面(AI 生成的或现有的),想按统一标准做某一类专项优化,且希望可复用、可重复执行。 Why:前面几节是"从零生成",这节是"对已有界面做精修"。把"放大视觉张力""改文案""极简提炼"这类操作固化成命令,喂给能写代码的 AI(Claude/Codex),就能稳定地、批量地优化,而不是每次重新描述需求。

11.1 Impeccable——21 个原子优化命令(开源:impeccable.style,GitHub pbakaus/impeccable)。每条命令解决一类具体问题:

命令	解决什么问题
`adapt` 响应式适配	桌面完美但手机拥挤错位 → 加断点、流体布局、调小屏字号触控区
`animate` 动效微交互	界面完全静止显廉价 → 入场编排、hover/按压反馈、列表错落出现、GPU 加速(尊重 reduce-motion)
`arrange` 布局节奏	元素都有但"哪里不对" → 统一间距系统、修对齐、梳理视觉动线
`audit` 质量体检(出报告不改代码)	全面查问题 → 无障碍/性能/响应式断层/代码反模式,给优先级清单
`bolder` 放大张力	设计太温吞像没立场的 PPT → 推大标题、加重字重、强化对比,让核心信息压过一切
`clarify` 文案清晰化	"提交""操作失败"让人懵 → 改成动作导向("立即领取优惠券")、具体指引、有引导的空状态
`colorize` 引入色彩	全黑白灰冰冷无层级 → 战略性引色彩标记重点、区分内容类型、用色温传情绪
`critique` UX 设计评审(出报告)	设计师视角的主观评价(区别于 audit 查技术)
`delight` 惊喜时刻	加恰到好处的小惊喜
`distill` 极简提炼	删冗余、做减法
`extract` 组件提取	从页面抽出可复用组件
`frontend-design` 核心技能基础	前端设计基本功底座
`harden` 健壮加固	增强边界/异常健壮性
`normalize` 设计系统对齐	把散乱样式拉齐到统一系统
`onboard` 新手引导设计	设计首次使用引导
`optimize` 性能优化	性能层面优化
`overdrive` 极致视觉特效	拉满视觉特效
`polish` 上线前精修	上线前最后一公里打磨
`quieter` 收敛克制	过度花哨时往回收
`teach-impeccable` 初始化上下文	给 AI 装载 Impeccable 的方法论上下文
`typeset` 排版系统	建立/修正排版系统

怎么用:这些是 .md 形式的 SKILL 文件(Claude animate 是默认自带的)。把对应 SKILL.md 喂给会写代码的 AI + 你的 HTML,它就按该命令的标准改。配对逻辑:先 audit/critique 体检出问题 → 再用 bolder/clarify/arrange 等针对性修 → 最后 polish 收尾。

11.2 Awesome-design——把大厂设计语言拆成可迁移的设计资产(开源:VoltAgent/awesome-design-md)。

它解决什么:不是"参考不够",而是"无法抽象与迁移"。它把 Apple / Stripe / Linear / Airbnb / Notion / Spotify / Claude / Webflow / Framer 等产品的设计语言,拆成结构化的 DESIGN.md / SKILL-xxx.md——里面是可执行的设计规则(配色 token、字体、组件样式、交互模式、系统约束),不只是截图。
范例(Linear 的 SKILL 长这样):核心 DNA 一句话(dark-mode-native precision engineering 暗黑精密工程感)+ 配色表(背景 #08090a→#28282c 按亮度堆叠、文字 #f7f8f8 近白不用纯白防眼疲劳、品牌靛蓝 #5e6ad2 是唯一彩色、边框一律半透明白)+ 字体(Inter Variable 字重 510)+ 明确的禁忌(文字绝不用纯 #ffffff)。
怎么用:把某个产品的 SKILL-xxx.md 当设计系统 token 喂给 AI——"按 Linear 的这套规则生成我的仪表板",AI 就能产出风格统一、像素级贴合该品牌语言的界面。本质是第三节"参考网站生成设计系统"的现成高质量版(别人已经帮你把 token 抽好了)。

Why 这是本区的"集大成":它把前面所有技法串起来——Awesome-design 给你现成的高质量 tokens(第三、八节),Impeccable 给你优化已有界面的标准命令(第二、九节),两者配合,一个 PM 不需要画图天赋也能稳定产出接近大厂水准的 UI。反例:还在凭感觉跟 AI 说"做得像 Linear 那样酷一点"——而 SKILL-linear.md 早把"酷"翻译成了一张张可执行的 hex 值和规则表,直接喂它即可。

附:本区里偏"图库/演示"性质、无独立方法的页面

为完整起见说明:本区另有几页是纯参考图库或视频演示,无独立提示词或方法论(已并入相关章节理解):Beautiful UI Design(视觉标杆图库,见第二节)、Explore Brand Colors / Explore Color Meanings(色卡库,见第四节)、Design System(设计系统案例图)、VisionCraft / TypeLayout / UI MockupCanvas(演示视频/占位页)。它们的价值是当参考输入,而非方法本身。