software-ui-ux-design

软件 UI/UX 设计

使用此技能设计或审查界面、流程、组件系统和 AI 辅助前端需求说明。此技能负责设计方向、交互行为、状态覆盖和可供实现的交接内容，不负责用户研究或代码修复。

快速参考

模式	适用场景	必需输出
审查现有 UI	产品存在易用性、无障碍、一致性或转化问题	发现的问题及验收标准
设计新 UI	需要从头设计流程或屏幕	流程、状态、组件、交接规范
设计系统决策	团队需要选择基础组件或令牌结构	附带权衡分析的建议
AI 前端需求说明	Codex 或 Claude 将生成 UI	视觉理念、交互理念、验证计划
AI UX 审查	产品包含聊天、Agent 或自动化功能	透明度、控制权、故障处理指南
风格／调色板／字体选择	新界面需要明确的设计方向	根据离线数据库生成的设计系统（scripts/search.py --design-system）

何时使用此技能

当主要任务是以下事项时，请使用此技能：

• 设计屏幕、流程或组件行为
• 从设计层面审查界面问题
• 选择设计系统模式或组件库
• 为 AI 生成的前端工作准备完善的需求说明
• 审查 AI／自动化 UX

当主要任务属于以下事项时，请转到其他技能：

需求	改用
用户研究和研究设计	../software-ux-research/SKILL.md
代码层面的无障碍修复	../software-accessibility/SKILL.md
无障碍测试自动化	../qa-testing-accessibility/SKILL.md
前端实现	../software-frontend/SKILL.md
产品战略或路线图	../product-management/SKILL.md

默认原则

• 首先明确平台、主要用户旅程和限制条件
• 每份输出聚焦一个主要任务流程
• 覆盖加载、空白、错误、离线和降级状态——这些决定信任，而非顺利路径
• 交接内容必须包含语义和无障碍方面的限制
• 对于 AI 生成的 UI，在生成代码之前定义视觉和交互理念
• 提供最终建议前，核实当前的平台指南相关说法
• 追求面向消费者级别的匠心，而不只是“通过审查”。符合 WCAG 却毫无生气的屏幕，还不算完成。

Craft Bar

面向消费者的产品工作不能只看任务是否完成，还要根据下表进行评判。每项实质性的设计产出都应对照这些标准进行审核。

维度	通过	不通过
首次获得价值所需时间	主要用户在 60 秒内	多步骤设置向导
空状态	展示填充后的状态模型，并提供一个动词 CTA	“暂无内容” + 灰色插画
加载状态	与填充后的布局相匹配的骨架屏	居中显示的旋转指示器
错误恢复	用用户的口吻说明原因，并提供明确的下一步操作	“出了点问题”
微文案	语气统一；数字易读；CTA 使用动词	系统腔、状态码、名词式 CTA
动效	服务于功能（起点 → 终点、层级关系）	每次状态变化都加入装饰性弹跳
触控反馈	每个可点击元素都有按下和提交状态	提交操作没有反馈
视觉对齐	图标、数字和大写字母在视觉上保持平衡	按像素网格测量虽相等，视觉上却不齐
首次使用的惊喜感	有一个非功能性时刻，能让用户会心一笑	没有
无需重启即可恢复	支持返回、撤销，以及无需重做即可编辑	每项操作都要先确认“你确定吗？”

如果有三行或更多不通过，那么无论指标如何，这个界面都属于设计欠债。完整指南请参见 consumer-craft-patterns.md。

对于 Agent 界面——即代表用户跨多个步骤执行操作的任何界面——还要评估四项 Agent 标准（可控性、操作可逆性、成本可见性、记忆可理解性）；界面可能通过上面的所有标准，却在这四项上全部不通过。请参见 references/ai-automation-ux.md#agent-surface-craft-bar。

工作流

1. 确认模式：审核、新建 UI、设计系统决策或 AI 前端需求说明。
2. 收集状态、约束和质量标准。
3. 对于新界面，使用离线数据库生成具体的设计方向：python3 scripts/search.py "<product> <industry> <tone>" --design-system（参见 references/design-database-search.md）；使用 --persist 保存，以便在多个会话中复用。
4. 定义主要流程和配套状态。
5. 制定验收标准和可直接用于实现的交接细节；检查 references/ui-quality-priority-rules.md 中的优先级 1-3。
6. 对于 AI 生成的 UI，补充视觉锚点、内容规划和基于浏览器的验证路径。

ASCII 流程图

UI/UX design task
  -> Confirm mode: audit, new UI, system decision, or AI frontend brief
  -> Gather platform, primary journey, states, constraints, and quality bar
  -> Define hierarchy, interaction model, and supporting states
  -> Add accessibility, performance, and implementation handoff criteria
  -> Specify verification path and evidence needed
  -> Deliver acceptance criteria and unresolved tradeoffs

无障碍基线

新项目应按照 WCAG 2.2 AA 进行设计（符合该标准也意味着符合 2.1 和 2.0），但具有法律约束力的版本因司法管辖区和界面类型而异（欧盟公共部门、EAA、ADA Title II、Section 508、原生应用）。在说明产品必须满足什么要求之前，请查看 references/wcag-accessibility.md#jurisdictional-baselines 中的司法管辖区对照表；WCAG 3.0 草案并非可用于正式发布的目标。

验证清单

完成任何 UI/UX 设计输出前：

• 确认平台（web、iOS、Android），并应用平台特定约束
• 覆盖全部五种状态：加载、空状态、错误、离线/降级和正常路径
• 每个视图只有一个主要操作；次要操作在视觉上弱化
• 检查 Craft Bar 行的通过/失败情况；发布前失败项少于 3 项
• 无障碍性应经过计算，而非口头断言：规范中的每个对比度比例都必须来自运行 scripts/contrast_check.py <fg> <bg>，绝不能靠估算（将模型估算的比例标为“已计算”属于捏造）；并且测量时应以文本实际呈现的表面（行、卡片、模态框）为准，而不只是页面画布；逐项列出焦点顺序；目标尺寸 ≥24×24 CSS px（WCAG 2.2 AA，SC 2.5.8），主要控件应符合平台尺寸（iOS 为 44pt / Android 为 48dp）
• 动态内容会主动播报：任何实时更新的区域（新行、状态变化、流式内容）都必须指定 aria-live 礼貌级别和批处理规则——仅有视觉脉冲对屏幕阅读器来说不可见
• 单键快捷键必须指定重新映射/禁用机制（WCAG 2.1.4）和焦点范围规则
• 为每个可点击元素指定按下和提交状态，而不只是演示主要 CTA 上的状态、让其他元素的状态含糊不清
• 端到端定义撤销/恢复语义：撤销操作时服务端状态、审计跟踪和并发用户会发生什么；每个焦点界面都必须指定正常路径的退出方式（不能只有错误路径）
• 同意和接受/拒绝按钮的视觉权重应相同（符合 GDPR/ePrivacy 同意规则和监管机构的 Cookie 指引）
• 所有滚动驱动或 CSS 动画都必须提供动画回退方案（prefers-reduced-motion）
• 微文案采用用户视角：说明原因，并提供具体的恢复步骤
• 在浏览器中使用真实内容验证 AI 生成的 UI，不要使用 lorem ipsum
• 检查面向欧盟用户的界面的法律义务：EAA 无障碍要求、GDPR/ePrivacy 同意设计，以及《DSA》第 25 条中 GDPR 或消费者法尚未涵盖的平台暗黑模式规定

输出要求

每项实质性输出都应包含：

• 用户/任务上下文
• 主要流程
• 状态覆盖
• 与平台相关的无障碍性和性能检查
• 必要时提供组件或设计令牌指南
• 适用于实现或评审的验收标准

平台默认要求

平台	主要约束
web	语义结构、焦点行为、重排、目标尺寸
iOS	系统导航、Dynamic Type、安全区域
Android	Material 3 模式、边缘到边缘、预测性返回、大屏行为

AI 前端简报规则

使用 AI 生成 UI 时，应先定义视觉主张、页面类型、内容结构、构图规则和设计系统约束；要求使用真实内容，而非 lorem ipsum，并在生成后通过浏览器验证。完整简报模板：references/ai-assisted-frontend-briefing.md。

已知陷阱

• 只设计理想流程，之后才发现加载、空状态、错误、权限和降级状态与主流程相互矛盾。
• 混淆无障碍合规与可用的交互设计，尤其是在焦点顺序、错误恢复和密集型组件系统方面。
• 把设计系统的一致性当作界面层级、任务清晰度或实际决策支持的替代品。
• 为 AI 前端撰写需求说明时，只使用 modern 或 clean 之类的形容词，却不定义构图、内容密度或交互限制。
• 对响应式行为含糊其辞，导致布局崩塌、点击目标和溢出问题留到实现阶段才处理。
• 不检查 Web、iOS 或 Android 的惯例是否适用，就推荐其他平台的模式。
• 把欧盟合规当作事后处理的法律问题。《欧洲无障碍法案》（自 2025 年 6 月 28 日起适用）、GDPR/ePrivacy 同意规则，以及《数字服务法案》（DSA）第 25 条（针对在线平台上的暗黑模式，但不包括 GDPR 或《不公平商业行为指令》已涵盖的做法）都带来了设计层面的义务，并且正在积极执法（法国国家信息与自由委员会（CNIL）在 2025 年对 Google 和 SHEIN 处以罚款，原因是它们未经有效同意或在用户拒绝后设置 Cookie；处罚依据是法国数据保护法，而非 DSA）。具体个案的法律依据应咨询具备资质的欧盟监管法律顾问。对于面向欧盟的任何 B2C 界面，无障碍设计和同意设计都是法律要求，而非个人偏好。
• 指定动态效果或滚动驱动动画，却没有提供 prefers-reduced-motion 备用方案。如果规范没有明确处理这种情况，那么对设置了减少动态效果偏好的用户而言，CSS 滚动驱动动画将不可见。
• 把无障碍要求写成清单式断言（“至少达到 AA”“焦点顺序合理”），而不是经过计算、可实现的约束。专家评审会否决对元素实际尺寸下的对比度从未进行计算、且未规定实时区域播报行为的规范——清单级别的无障碍要求看起来像是事后补上的，也无法通过审核。
• 规范深度与界面使用频率成反比：每天都会访问的页面（主页、仪表板）只用一段话描述，而一次性流程却写了好几页。细节预算应与访问频率相匹配。

常见反模式

卡片过多、多个主要操作、信息仅通过悬停／手势／动画传达、未经验证的 AI 生成界面、不对称的同意按钮、泛泛的空状态、居中的加载动画、权限墙、机器人腔文案和装饰性动态效果。完整列表及对应修复方案：references/operational-playbook.md#common-anti-patterns-to-avoid。

导航

参考资料 — 每项任务最多阅读 2-3 篇；选择与需求相符的主题组。

工作流与系统

• references/design-database-search.md — 可离线搜索的设计数据库：80 多种样式、190 多种配色方案、字体搭配、UX 指南（通过 scripts/search.py 使用 BM25 搜索）
• references/ui-quality-priority-rules.md — 按优先级排序的质量规则（1 = 无障碍 … 10 = 图表），以及专业润色规则和应用交付前检查清单
• references/implementation-research-workflow.md — 从研究到实现的工作流
• references/ui-generation-workflows.md — 从探索到交付的端到端 UI 创建流程
• references/prototype-to-production.md — 弥合原型与已发布 UI 之间的差距
• references/design-systems.md — 令牌结构、基础组件、设计系统决策
• references/design-token-governance.md — 双层令牌唯一事实来源、同等性检查，以及可选的四层所有权分类
• references/component-library-comparison.md — 如何选择组件库
• references/operational-playbook.md — 日常 UI/UX 决策框架

启发式原则、无障碍与包容性

• references/nielsen-heuristics.md — 可用性启发式原则
• references/wcag-accessibility.md — WCAG 符合性指南
• references/neurodiversity-design.md — 适用于 ADHD、自闭症、阅读障碍、计算障碍的设计模式
• references/demographic-inclusive-design.md — 按年龄段和人生阶段划分的设计模式
• references/cultural-design-patterns.md — 国际化、RTL 和区域市场设计模式

视觉设计

• references/frontend-aesthetics.md — 摆脱模板化外观，打造独特设计
• references/typography-systems.md — 系统化、无障碍且响应式的字体排印
• references/dark-mode-theming.md — 暗色模式和多主题系统
• references/motion-design.md — 功能性动效：库概览（Motion，前身为 Framer Motion；GSAP）、弹簧/补间默认值、减少动态效果的实现、动效规范检查清单
• references/consumer-craft-patterns.md — 消费级精良设计实践指南

模式与界面

• references/modern-ux-patterns.md — 当代 UX 模式与预期
• references/mobile-ux-patterns.md — iOS/Android 移动端模式
• references/form-design-patterns.md — 布局、验证、多步骤、错误处理
• references/data-visualization-ux.md — 无障碍交互式图表与仪表板
• references/surface-type-recipes.md — 数据表格、命令面板、设置、搜索、通知、定价、付费墙、比较表、评论、表单、引导流程、模态框
• references/simplification-patterns.md — 降低界面复杂度

转化与 AI

• references/cro-framework.md — 从设计到 CRO 的交接（转交给 marketing-cro）和垂直领域 UI 基准测试

• references/ai-assisted-frontend-briefing.md — 向 AI 提供简报以生成 UI

• references/ai-automation-ux.md — 聊天、Agent 和自动化的 UX；按可逆性分级的审批关卡、中断/引导、成本可见性、Agent 记忆界面、4 阶段人类与 Agent 框架、ACI 工具设计，以及 Agent 到 UI 的事件契约

• references/ai-design-tools.md — AI 辅助设计工具：使用、质量控制、伦理

• references/performance-ux-vitals.md — 感知性能、加载状态、关注内容变化（指标转交给 software-frontend）

• data/sources.json

脚本 — 离线设计数据库搜索引擎（仅使用 Python 标准库，随附，MIT）：scripts/search.py（CLI）、scripts/core.py、scripts/design_system.py 和 scripts/contrast_check.py（规范中对比度数值的唯一认可来源），用于搜索 data/ 中的 CSV 数据库。标志、数据文件、DESIGN.md 导出及上游信任说明：references/design-database-search.md#scripts-and-data-files。

模板

• assets/design-brief.md
• assets/ux-review-checklist.md
• assets/ui-generation/full-ui-spec.md
• assets/audits/simplification-audit-template.md
• assets/design-systems/template-design-system.md
• assets/interaction-patterns/template-micro-interactions.md — 微交互实现细节，适用于 references/motion-design.md 中的动效规范

相关技能

调用以下任何基础技能前先进行判断： 每个基础技能都包含 When to Apply / When to Skip 部分。如果你的任务符合跳过条件，请转交给其中指定的基础技能，而不是引入任务不需要的基本要素。

• ../software-ux-research/SKILL.md
• ../software-frontend/SKILL.md
• ../software-mobile/SKILL.md
• ../software-accessibility/SKILL.md
• ../software-localisation/SKILL.md
• ../foundations-consumer-neuroscience/SKILL.md — 眼动追踪/生物识别 UX 研究的有效性与神经数据法律适用范围；注意力和显著性模板

经验反馈循环

当以往的决策或陷阱与当前任务相关时，如果存在 learnings.consolidated.md，请查阅该文件；仅在需要了解历史或将其作为可用后备方案时使用 learnings.md。否则跳过这两个文件。

应用后，如果你遇到了值得记住的模式、值得避免的错误，或让你感到意外的领域事实，请通过 agents-skills-feedback-loop/scripts/append_learning.py 向 learnings.md 追加一条带日期的项目。不要修改 SKILL.md 本身。