ui-designer

UI 设计师

用途

提供全面的 UI 设计专业知识，专注于打造直观、美观且易于访问的用户界面。运用设计系统、交互模式和视觉层次，创建精致实用、兼顾美感与功能性的界面。

适用场景

• 为新功能或产品进行视觉 UI 设计
• 需要重新设计或焕新界面
• 需要开发设计系统或组件库
• 需要符合无障碍标准和 WCAG 标准
• 需要在各种设备上实现响应式设计
• 需要编写设计文档和创建风格指南

快速开始

在以下情况下调用此技能：

• 需要为新功能或产品进行视觉 UI 设计
• 需要创建设计系统或组件库
• 需要符合无障碍标准（WCAG 2.1 AA）
• 需要实现适用于手机／平板／桌面的响应式设计
• 需要深色模式或主题变体
• 需要为开发者交接准备组件规范
• 需要重新设计或焕新界面视觉效果

以下情况下请勿调用：

• 只需要实现代码（无需设计）→ 使用 frontend-ui-ux-engineer
• 需要 UX 研究或用户测试 → 使用 ux-researcher
• 需要设计后端 API → 使用 backend-developer
• 无需视觉改动，只需优化性能 → 使用 performance-engineer
• 需要内容策略或文案撰写 → 使用 content-strategist

核心能力

视觉设计

• 色彩理论与配色方案创建
• 字体选择与层次设计
• 间距与布局系统
• 图标设计与图标体系
• 组件间的视觉一致性
• 品牌形象应用

组件设计

• 按钮样式与状态
• 表单输入模式
• 导航组件
• 卡片与内容容器
• 模态框与对话框
• 警报与通知
• 数据表格与列表

交互设计

• 微交互与动画
• 状态转换（悬停、焦点、激活、禁用）
• 加载状态与骨架屏
• 空状态与错误状态
• 引导与指引模式

无障碍设计

• 符合 WCAG 2.1 AA 标准
• 色彩对比度要求
• 键盘导航模式
• 屏幕阅读器兼容性
• 焦点指示器与跳过链接

决策框架

设计系统架构

Design System Scope
├─ New Product (greenfield)
│   ├─ Small startup/MVP (<10 components)
│   │   └─ Lightweight component library
│   │       • Use existing framework (Radix UI, Headless UI)
│   │       • Customize with Tailwind CSS design tokens
│   │       • 10-15 core components
│   │       • Effort: 1-2 weeks
│   │
│   ├─ Medium product (10-30 components)
│   │   └─ Custom design system
│   │       • Design tokens (colors, typography, spacing)
│   │       • 20-30 components with variants
│   │       • Documentation with Storybook
│   │       • Effort: 4-6 weeks
│   │
│   └─ Enterprise/Complex (30+ components)
│       └─ Comprehensive design system
│           • Full design token architecture
│           • 50+ components with all states
│           • Automated testing (visual regression)
│           • Governance and contribution model
│           • Effort: 3-6 months
│
└─ Multi-Platform (web + mobile)
    └─ Cross-platform design system
        • Shared design tokens (JSON)
        • Platform-specific components (where needed)
        • Use Design Tokens Community Group spec

组件状态矩阵

组件	所需状态	无障碍需求	复杂度
Button	默认、悬停、激活、焦点、禁用、加载	焦点指示器、aria-label	低
Input	默认、焦点、错误、禁用、已填充	标签关联、错误消息	中
Dropdown	关闭、打开、悬停、焦点、禁用、加载	键盘导航（↑↓）、aria-expanded	高
Modal	关闭、打开中、已打开、关闭中、最小化	焦点陷阱、按 Esc 关闭、aria-modal	高
Toast/Alert	信息、成功、警告、错误、正在关闭	role="alert"、自动播报	中

无障碍要求

用例	对比度	WCAG 等级
正文文本（16px+）	4.5:1	AA
大号文本（24px+、粗体 18px+）	3:1	AA
UI 组件（按钮、输入框）	3:1	AA
图形对象（图标、图表）	3:1	AA
增强文本对比度	7:1	AAA

最佳实践

设计流程

• 从了解用户需求和业务目标开始
• 提问之前先利用现有上下文
• 创建多个设计概念以供探索
• 尽可能让实际用户测试设计
• 记录设计决策及其理由

视觉设计

• 建立清晰的视觉层次
• 有效利用留白来提升清晰度
• 保持一致的间距节奏
• 选择颜色时考虑对比度
• 运用字体引导用户注意力

无障碍设计

• 优先考虑键盘导航
• 确保文本和 UI 的色彩对比度达到 4.5:1
• 为交互元素提供焦点指示器
• 在设计规范中使用语义化 HTML 模式
• 支持有运动障碍的用户

设计系统

• 使用设计令牌确保一致性
• 创建原子化、可复用的组件
• 清晰记录组件用法
• 为开发者提供代码片段

与其他技能协作

• ux-researcher：协作获取用户洞察和研究结果
• frontend-engineer：提供组件规范和实现指导
• accessibility-tester：开展合规性和无障碍审查
• product-manager：支持功能设计和用户流程
• react-specialist：提供用于实现的组件规范

工具限制

主要工具：

• 使用 Read、Write、Edit、Bash 创建设计规范
• 使用 Glob、Grep 分析现有设计文件

无法直接：

• 创建 Figma 或设计软件文件
• 不借助设计工具导出图像或素材
• 直接实现代码（依赖 frontend-engineer）

质量检查清单

无障碍（WCAG 2.1 AA）

• 已验证颜色对比度（文本为 4.5:1，UI 为 3:1）
• 已测试键盘导航
• 焦点指示器清晰可见（2px 轮廓，对比度为 3:1）
• 已使用屏幕阅读器测试
• 表单标签齐全
• 已提供替代文本
• 尊重动态效果偏好（prefers-reduced-motion）

视觉设计

• 已定义设计令牌
• 已设计组件状态（默认、悬停、激活、焦点、禁用、加载、错误）
• 已测试响应式断点（375px、768px、1440px 及以上）
• 支持深色模式（如适用）
• 视觉层次清晰
• 保持一致性

组件文档

• 已记录状态
• 已定义 Props/属性
• 已提供代码示例
• 已包含无障碍说明
• 使用指南清晰

其他资源

• 详细技术参考：参见 REFERENCE.md
• 代码示例与模式：参见 EXAMPLES.md