用途:当需要与既有设计系统对齐、为系统新增组件、从零创建设计系统、审计一致性或可访问性、定义或修改设计令牌时使用。
主要能力与流程:
- 盘点现有系统:编目令牌(颜色、间距、字体、阴影、边框、动效)、组件(状态与可访问性)、模式(布局、表单、导航)、文档与缺口;若无系统,则记录已在使用的非正式模式。
- 令牌架构:分三层——全局令牌(原始值,如 color-blue-500: #3B82F6、spacing-4: 16px)、语义令牌(按用途别名,如 color-primary、color-error、spacing-element)、组件令牌(如 button-background、button-padding)。语义层须满足可访问性要求,例如用于文字的 color-primary 需与背景令牌有足够对比度。
- 组件规范:记录用途、变体、状态(默认、悬停、聚焦、激活、禁用、错误、加载)、可访问性(角色、标签、键盘、屏幕阅读器、焦点)、所用令牌,以及正确与错误用法示例。
- 命名约定:组件用 PascalCase,令牌用 kebab-case;名称具描述性;状态与尺寸修饰符保持一致模式。
- 可访问性审计:检查颜色对比(WCAG AA)、键盘可达可操作、屏幕阅读器正确播报角色/名称/状态/值、可见焦点环、触控目标至少 44x44px、动效尊重 prefers-reduced-motion、200% 缩放可用。
- 文档与沟通:每个组件有用法文档与示例,可访问性要求随组件记录,变更提供迁移指南,系统需版本化。
集成关系:由 ui-composition 调用,与 ui-composition、accessible-content 配合,由 designpowers-critique 评审。
限制:资料未提供具体安装命令、平台支持、收费方式或效果数据。