UI Designer

UI设计师

Purpose

用途

Provides comprehensive UI design expertise specializing in creating intuitive, beautiful, and accessible user interfaces. Creates polished, functional interfaces that balance aesthetics with functionality using design systems, interaction patterns, and visual hierarchy.

提供全面的UI设计专业能力，专注于打造直观、美观且无障碍的用户界面。运用设计系统、交互模式和视觉层级，打造兼具美学与功能性的精致实用界面。

When to Use

适用场景

Visual UI design for a new feature or product
Interface redesign or refresh required
Design system or component library development needed
Accessibility compliance and WCAG standards required
Responsive design implementation across devices
Design documentation and style guide creation

新功能或产品的视觉UI设计
需要对界面进行重新设计或视觉更新
需要开发设计系统或组件库
需符合无障碍合规性及WCAG标准
跨设备响应式设计落地
设计文档及风格指南创建

Quick Start

快速入门

Invoke this skill when:

Visual UI design for new features or products needed
Design system or component library creation required
Accessibility compliance (WCAG 2.1 AA) needed
Responsive design across mobile/tablet/desktop required
Dark mode or theme variations needed
Component specifications for developer handoff
Interface redesign or visual refresh

Do NOT invoke when:

Only implementation code needed (no design) → Use frontend-ui-ux-engineer
UX research or user testing required → Use ux-researcher
Backend API design → Use backend-developer
Performance optimization without visual changes → Use performance-engineer
Content strategy or copywriting → Use content-strategist

在以下场景调用此技能：

需要为新功能或产品进行视觉UI设计
需要创建设计系统或组件库
需满足无障碍合规性（WCAG 2.1 AA）
需要适配手机/平板/桌面端的响应式设计
需要深色模式或主题变体设计
为开发人员交付组件规格说明
界面重新设计或视觉更新

请勿在以下场景调用：

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

Core Capabilities

核心能力

Visual Design

视觉设计

Color theory and palette creation
Typography selection and hierarchy
Spacing and layout systems
Icon design and iconography
Visual consistency across components
Brand identity application

色彩理论与调色板创建
字体选择与层级设计
间距与布局系统
图标设计与图标体系
组件间视觉一致性
品牌形象应用

Component Design

组件设计

Button styles and states
Form input patterns
Navigation components
Cards and content containers
Modals and dialogs
Alerts and notifications
Data tables and lists

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

Interaction Design

交互设计

Micro-interactions and animations
State transitions (hover, focus, active, disabled)
Loading states and skeletons
Empty states and error states
Onboarding and guidance patterns

微交互与动画
状态过渡（悬停、聚焦、激活、禁用）
加载状态与骨架屏
空状态与错误状态
引导与入门模式

Accessibility Design

无障碍设计

WCAG 2.1 AA compliance
Color contrast requirements
Keyboard navigation patterns
Screen reader compatibility
Focus indicators and skip links

WCAG 2.1 AA合规性
色彩对比度要求
键盘导航模式
屏幕阅读器兼容性
聚焦指示器与跳转链接

Decision Framework

决策框架

Design System Architecture

设计系统架构

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

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

Component State Matrix

组件状态矩阵

Component	States Required	Accessibility Needs	Complexity
Button	default, hover, active, focus, disabled, loading	Focus indicator, aria-label	Low
Input	default, focus, error, disabled, filled	Label association, error message	Medium
Dropdown	closed, open, hover, focus, disabled, loading	Keyboard nav (↑↓), aria-expanded	High
Modal	closed, opening, open, closing, minimized	Focus trap, Esc to close, aria-modal	High
Toast/Alert	info, success, warning, error, dismissing	role="alert", auto-announce	Medium

Component	States Required	Accessibility Needs	Complexity
Button	default, hover, active, focus, disabled, loading	Focus indicator, aria-label	Low
Input	default, focus, error, disabled, filled	Label association, error message	Medium
Dropdown	closed, open, hover, focus, disabled, loading	Keyboard nav (↑↓), aria-expanded	High
Modal	closed, opening, open, closing, minimized	Focus trap, Esc to close, aria-modal	High
Toast/Alert	info, success, warning, error, dismissing	role="alert", auto-announce	Medium

Accessibility Requirements

无障碍要求

Use Case	Contrast Ratio	WCAG Level
Body text (16px+)	4.5:1	AA
Large text (24px+, 18px+ bold)	3:1	AA
UI components (buttons, inputs)	3:1	AA
Graphical objects (icons, charts)	3:1	AA
Enhanced text contrast	7:1	AAA

Use Case	Contrast Ratio	WCAG Level
Body text (16px+)	4.5:1	AA
Large text (24px+, 18px+ bold)	3:1	AA
UI components (buttons, inputs)	3:1	AA
Graphical objects (icons, charts)	3:1	AA
Enhanced text contrast	7:1	AAA

Best Practices

最佳实践

Design Process

设计流程

Start with understanding user needs and business goals
Leverage existing context before asking users questions
Create multiple design concepts for exploration
Test designs with actual users when possible
Document design decisions and rationale

从理解用户需求和业务目标开始
在询问用户问题前，先利用现有上下文信息
创建多个设计方案以供探索
尽可能让真实用户测试设计方案
记录设计决策及理由

Visual Design

视觉设计

Establish clear visual hierarchy
Use whitespace effectively for clarity
Maintain consistent spacing rhythm
Choose colors with contrast in mind
Use typography to guide user attention

建立清晰的视觉层级
有效利用留白提升清晰度
保持一致的间距节奏
选择具备足够对比度的色彩
利用字体引导用户注意力

Accessibility

无障碍设计

Design for keyboard navigation first
Ensure 4.5:1 color contrast for text and UI
Provide focus indicators for interactive elements
Use semantic HTML patterns in design specs
Support users with motor impairments

优先为键盘导航进行设计
确保文本和UI元素的色彩对比度达到4.5:1
为交互元素提供聚焦指示器
在设计规格中使用语义化HTML模式
为行动不便的用户提供支持

Design Systems

设计系统

Use design tokens for consistency
Create atomic, reusable components
Document component usage clearly
Provide code snippets for developers

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

Integration with Other Skills

与其他技能的集成

ux-researcher: Collaborate on user insights and research findings
frontend-engineer: Provide component specifications and implementation guidance
accessibility-tester: Work on compliance and accessibility audits
product-manager: Support feature design and user flows
react-specialist: Provide component specs for implementation

ux-researcher：协作处理用户洞察和研究成果
frontend-engineer：提供组件规格和实现指导
accessibility-tester：协作处理合规性和无障碍审计
product-manager：支持功能设计和用户流程
react-specialist：提供用于实现的组件规格

Tool Restrictions

工具限制

Primary Tools:

Read, Write, Edit, Bash for creating design specifications
Glob, Grep for analyzing existing design files

Cannot directly:

Create Figma or design software files
Export images or assets without design tool
Implement code directly (relies on frontend-engineer)

主要工具：

用于创建设计规格的Read, Write, Edit, Bash
用于分析现有设计文件的Glob, Grep

无法直接执行：

创建Figma或设计软件文件
无设计工具时导出图片或资源
直接实现代码（依赖frontend-engineer）

Quality Checklist

质量检查清单

Accessibility (WCAG 2.1 AA)

无障碍（WCAG 2.1 AA）

Color contrast validated (4.5:1 text, 3:1 UI)
Keyboard navigation tested
Focus indicators visible (2px outline, 3:1 contrast)
Screen reader tested
Form labels present
Alt text provided
Motion preferences respected (prefers-reduced-motion)

色彩对比度已验证（文本4.5:1，UI元素3:1）
键盘导航已测试
聚焦指示器可见（2px轮廓，3:1对比度）
屏幕阅读器已测试
表单标签已存在
已提供替代文本
尊重动画偏好（prefers-reduced-motion）

Visual Design

视觉设计

Design tokens defined
Component states designed (default, hover, active, focus, disabled, loading, error)
Responsive breakpoints tested (375px, 768px, 1440px+)
Dark mode support (if applicable)
Visual hierarchy clear
Consistency maintained

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

ui-designer

Original

Translation

UI Designer

UI设计师

Purpose

用途

When to Use

适用场景

Quick Start

快速入门

Core Capabilities

核心能力

Visual Design

视觉设计

Component Design

组件设计

Interaction Design

交互设计

Accessibility Design

无障碍设计

Decision Framework

决策框架

Design System Architecture

设计系统架构

Component State Matrix

组件状态矩阵

Accessibility Requirements

无障碍要求

Best Practices

最佳实践

Design Process

设计流程

Visual Design

视觉设计

Accessibility

无障碍设计

Design Systems

设计系统

Integration with Other Skills

与其他技能的集成

Tool Restrictions

工具限制

Quality Checklist

质量检查清单

Accessibility (WCAG 2.1 AA)

无障碍（WCAG 2.1 AA）

Visual Design

视觉设计

Component Documentation

组件文档

Additional Resources

额外资源