software-ui-ux-design

用途

本技能用于设计或审查界面、流程、组件系统，以及为 AI 辅助前端工作准备简报。它负责设计方向、交互行为、状态覆盖和可交付的实现交接，不负责用户研究或代码层面的修复。

适用场景包括：设计屏幕、流程或组件行为；审查界面的设计层面问题；选择设计系统模式或组件库；为 AI 生成前端工作准备高质量简报；审查 AI/自动化 UX。

不适用场景（应改用其他技能）：用户研究与研究设计、代码级无障碍修复、无障碍测试自动化、前端实现、产品策略或路线图。

主要能力

技能支持多种模式：

审查现有 UI：当产品存在可用性、无障碍、一致性或转化问题时，输出发现项与验收标准。
设计新 UI：从零塑造流程或屏幕，输出流程、状态、组件与交接规格。
设计系统决策：团队需选择基础组件或令牌结构时，给出带权衡的建议。
AI 前端简报：当 Codex 或 Claude 将生成 UI 时，定义视觉论点、交互论点与验证计划。
AI UX 审查：产品包含聊天、智能体或自动化时，提供透明度、控制与失败处理指导。
风格/配色/字体选择：新界面需要具体设计方向时，通过离线数据库脚本生成设计系统（scripts/search.py --design-system）。

使用方式

工作流程：确认模式（审查、新 UI、设计系统决策或 AI 前端简报）；收集状态、约束与质量标准；对新界面从离线数据库生成具体设计方向（python3 scripts/search.py "<product> <industry> <tone>" --design-system），可用 --persist 持久化以便跨会话复用；定义主流程与支撑状态；产出验收标准与可实现的交接细节；对 AI 生成 UI 增加视觉锚点、内容计划与基于浏览器的验证路径。

默认原则：先明确平台、主要用户旅程与约束；每次输出一个主任务流；覆盖加载、空、错误、离线与降级状态；交接中必须包含语义与无障碍约束；AI 生成 UI 前先定义视觉与交互论点；最终建议前核实当前平台指南；追求消费级工艺，而非仅通过审查。

无障碍基线

新工作按 WCAG 2.2 AA 设计（符合性也涵盖 2.1 与 2.0），但具有法律约束力的版本因司法管辖区和界面类型而异（欧盟公共部门、EAA、ADA Title II、Section 508、原生应用）。在声明产品必须满足什么之前，需查阅 references/wcag-accessibility.md 中的司法管辖区表；WCAG 3.0 草案不是发布目标。

验证清单要求：对比度必须通过 scripts/contrast_check.py <fg> <bg> 计算得出，不得估算；焦点顺序逐元素列出；目标尺寸 ≥24×24 CSS px（WCAG 2.2 AA，SC 2.5.8），主要控件采用平台尺寸（iOS 44pt / Android 48dp）；动态内容需指定 aria-live 礼貌级别与批处理规则；单键快捷键需指定重映射/禁用机制与焦点作用域规则；每个可点击元素需指定按下与提交状态；撤销/恢复语义需端到端定义；同意与接受/拒绝按钮视觉权重相等；任何滚动驱动或 CSS 动画需提供 prefers-reduced-motion 回退；微文案使用用户语言；AI 生成 UI 需在浏览器中用真实内容验证。

适用场景与限制

技能提供离线设计数据库搜索（80+ 风格、190+ 配色、字体搭配、UX 指南，基于 BM25 搜索），以及多个参考文档、模板与脚本。脚本为仅使用标准库的 Python，采用 MIT 许可。

已知陷阱包括：只设计快乐路径；混淆无障碍符合性与可用交互设计；将设计系统一致性当作层级与任务清晰度的替代；用“现代”“干净”等形容词写 AI 前端简报；让响应式行为保持隐式；推荐其他平台模式而不核实；将欧盟合规视为事后法律问题；未提供 reduced-motion 回退；将无障碍写成清单断言而非可计算约束；规格深度与界面访问频率成反比。

常见反模式包括：过度卡片化、多个主操作、仅靠悬停/手势/动画传达含义、未验证的 AI 生成 UI、不对称同意按钮、通用空状态、居中加载指示器、权限墙、机器人语气文案、装饰性动效。

输出契约

每个实质性输出应包含：用户/任务上下文、主流程、状态覆盖、与平台相关的无障碍与性能检查、组件或令牌指导、适合实现或审查的验收标准。

平台默认

web：语义结构、焦点行为、重排、目标尺寸。
iOS：系统导航、动态字体、安全区域。
Android：Material 3 模式、边到边、预测性返回、大屏行为。

AI 前端简报规则

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

学习循环

当先前决策或陷阱相关时，若存在 learnings.consolidated.md 则查阅；仅在需要历史或作为可用回退时使用 learnings.md。应用后若遇到值得记住的模式、应防止的错误或令人意外的领域事实，通过 agents-skills-feedback-loop/scripts/append_learning.py 向 learnings.md 追加一条带日期的条目。不要修改 SKILL.md 本身。

技能介绍

用途