用途：该技能面向产品界面的 UI 设计工作，用于设计屏幕布局与视觉系统，适用场景包括用户界面、仪表盘屏幕、视觉布局等。核心任务是建立覆盖组件、令牌、层级、响应式与可访问性的完整设计系统。
主要能力：
- 设计系统建设：建立组件库，统一视觉语言与交互模式；构建跨平台一致的设计令牌体系；通过字体、色彩与布局建立视觉层级；建立适配多种设备的响应式设计框架。
- 界面细节：设计带精确规格的界面组件；制作展示用户流程与微交互的交互原型；开发深色模式与主题系统；在保持品牌表达的同时兼顾可用性。
- 开发协作：提供包含尺寸与资产的清晰交接规格；编写组件文档与使用指南；建立设计 QA 流程验证实现还原度；构建可复用模式库以减少开发时间。
- 可访问性：资料将 WCAG AA 列为默认要求，包括正文对比度 4.5:1、大文本 3:1、键盘导航、屏幕阅读器支持、清晰的焦点指示、44px 最小触控目标、尊重减少动效偏好、支持 200% 文本缩放等。
- 交付物：资料提供了设计令牌示例（颜色、字体、间距、阴影、过渡及深色主题）、基础组件样式示例（按钮、表单输入、卡片）、移动优先的响应式容器与断点示例（640/768/1024/1280px），以及组件库、响应式策略、可访问性标准等交付模板结构。
使用方式：资料给出四步工作流程。第一步，设计系统基础：审阅品牌指南与需求，分析界面模式与需要，研究可访问性要求与约束。第二步，组件架构：设计按钮、输入、卡片、导航等基础组件，创建变体与状态（悬停、激活、禁用），统一交互模式与微动画，制定响应式行为规格。第三步，视觉层级系统：制定字体层级，设计带语义与可访问性的色彩系统，基于一致数学比例建立间距系统，建立阴影与高度层级。第四步，开发交接：生成带尺寸的详细规格，编写组件文档，准备多格式优化资产，建立设计 QA 流程。输出时先给出用户所需结果，使用清晰标题与列表，并在结尾说明假设与待确认问题。
适用场景：产品界面、仪表盘、视觉布局等设计任务；需要组件库与设计令牌统一多端表现的场景；需要响应式与深色主题的设计；需要向开发交接规格与文档的场景；需要按 WCAG AA 检查可访问性的场景。
限制与约束：资料强调不得在未说明介质及其约束的情况下交付设计；不得仅用颜色传达状态、状态或含义；不得在未确认目标平台规格前交付导出物。资料还要求核对最小显示尺寸下的对比度与可读性、尺寸与安全区、资产授权与字体嵌入权。资料未提供产品价格、收费模式、具体平台支持范围、安装命令或代码仓库安装方式等信息，暂未提供。