interface-design

涵盖 UI/UX 设计、无障碍访问，以及设计系统构建。内容包括设计原则、结合 WCAG 对比度要求的色彩理论、字体比例尺、8pt 行间距网格、响应式断点、WCAG 2.1 无障碍合规标准、动效设计，以及设计系统治理。在设计界面、选择配色，或当用户询问“这个界面是否具备无障碍特性？”或“我该采用怎样的行间距？”时，可作为参考。

SKILL.md

--- frontmatter

name: interface-design
description: >-
  Covers UI/UX design, accessibility, and design systems. Includes design
  principles, color theory with WCAG contrast requirements, typography scales,
  8pt spacing grid, responsive breakpoints, WCAG 2.1 accessibility compliance,
  motion design, and design system governance. Use when designing interfaces,
  choosing colors, or when the user asks "is this accessible?" or "what spacing
  should I use?"
user-invocable: false
agent: frontend-dev
allowed-tools: 'Read, Write, Edit, Glob, Grep'

Design Principles

Philosophy: Design is problem-solving through systematic thinking, with accessibility and user needs at the center. Every design decision must be intentional, accessible, and meaningful.

Quick Reference

Topic	Key Principle	Reference
Core	User-first, accessible by default, consistent, minimal	references/core.md
Color	Function first, 4.5:1 contrast minimum, never color-only	references/color.md
Typography	Legible, accessible, reinforce hierarchy	references/typography.md
Spacing	8pt grid, consistent rhythm, logical properties	references/spacing.md
Responsive	Mobile-first, content-out, fluid layouts	references/responsive.md
Accessibility	WCAG 2.1 AA minimum, keyboard navigable, screen reader compatible	references/a11y.md
Accessibility Review	WCAG 2.1 AA checklist, testing tools, common issues	references/accessibility-review.md
Motion	Purposeful, natural, respect reduced motion	references/motion.md
Systems	Tokens, components, patterns, governance	references/systems.md

Core Principles

1. User-First

Every design decision must serve user needs and goals.

•Understand user context: Who, what, why, when, where?
•Validate assumptions with real users
•Measure outcomes that matter to users

2. Accessible by Default

Accessibility is not a feature - it is a requirement.

•WCAG 2.1 AA minimum, AAA as aspiration
•Keyboard navigation for all functionality
•4.5:1 contrast for text, 3:1 for UI components
•Never use color as the sole indicator

3. Consistent

Consistency reduces cognitive load and builds trust.

•Design tokens as single source of truth
•Component reuse over reinvention
•Predictable naming conventions

4. Minimal

Every element must justify its existence.

•Progressive disclosure
•Clear visual hierarchy
•Sufficient whitespace

5. Delightful

Good design feels effortless.

•Smooth, purposeful interactions
•Thoughtful details
•Performance as a feature

Design Tokens

Use semantic tokens, never hardcoded values.

typescript

// Pattern: [category]-[property]-[variant?]-[state?]
color-text-primary
color-background-secondary
spacing-component-padding-md

Critical Rules

•Never use pixel values directly - Always use design tokens
•Never use divs for buttons - Use semantic HTML
•Never skip alt text - All images need descriptions
•Never use color alone - Combine with icons/text
•Never ignore reduced motion - Respect user preferences
•Never animate layout properties - Use transform/opacity only
•Never skip focus indicators - Minimum 3:1 contrast
•Never exceed 75ch line length - Optimal readability at 65ch

Quality Checklist

Every design deliverable must meet: