用途：生成生产级 UI 设计，并让多屏界面保持统一视觉语言，适用于排版、布局与动效需要系统化规范的场景。当产出高质量 UI、统一设计语言或需要系统化设计指导时使用；通用场景优先选 design-system，此技能为平台专用变体。
主要能力：定义设计令牌（颜色、字体、字号、字重、行高、间距、圆角、阴影、断点，间距以 8px 为基础单位）；定义布局与 UX 目标（页面类型、层级、主次操作、信息架构、响应式断点与堆叠行为）；生成 UI 输出（按区块给出组件结构与动效/交互说明）；校验无障碍（WCAG 2.1 AA 对比度、键盘导航、屏幕阅读器、文本可读性）；输出设计交接包（组件表、令牌汇总、文件清单）。
使用方式：按五步执行——1 定义设计令牌；2 定义布局与 UX 目标；3 生成 UI 输出；4 校验无障碍；5 交接（组件分解、CSS/令牌汇总、文件）。支持 SaaS 落地页、管理后台、移动优先表单等示例；文档给出多智能体协作与多轮验证：Claude 负责令牌定义与组件设计，Gemini 负责无障碍分析与参考研究，Codex 负责 CSS/组件代码生成。
适用场景：落地页、仪表盘、表单、博客、电商等界面的系统化设计；需要统一令牌、响应式规则与动效规范的团队协作。
限制：资料未提供收费、价格、具体安装命令与运行环境要求；相关技能包括 ui-component-patterns、responsive-design、web-accessibility、image-generation。当前版本 1.0.0，最后更新 2026-01-21，兼容 Claude、ChatGPT、Gemini、Codex。