design-system-architecture

name	design-system-architecture
description	设计系统架构专家 Owner — 当任务涉及设计系统、主题、Token、组件变体、Figma/代码同步、UI 一致性、可访问性、国际化、品牌视觉或组件库治理时使用；要求把视觉规则沉淀为可复用、可验证的系统契约。

Design System Architecture Skill

定位

本 Skill 负责设计系统 Owner 视角。它不替代单页 UI 实现，而是把 token、主题、组件变体、设计源和治理规则变成长期可维护的系统契约。

触发条件

场景	是否触发
设计系统、主题、Token、组件库、组件变体、Figma/代码同步、品牌视觉	必须
任务涉及多页面 UI 一致性、样式主题、可访问性、国际化或设计资产进入生产	必须
前端方案需要定义复用组件或视觉规范	必须
单次页面文案微调且不影响组件/主题	N/A + skipReason

核心门禁

Gate	要求	证据
DesignSystemArchitectureGate	Token、组件变体、主题、一致性、设计源和治理必须成矩阵	designTokens、componentVariantModel
DesignTokenGate	颜色、字体、间距、圆角、阴影和语义 token 必须有来源	designTokens
ComponentVariantGate	组件状态、尺寸、密度、禁用、错误、加载必须定义	componentVariantModel
ThemeConsistencyGate	主题与品牌视觉不能一页一套	themeConsistency
FigmaCodeSyncGate	设计源、代码实现、资产预算和验收入口必须可追踪	figmaCodeSync

执行步骤

1. 识别设计源：Figma、现有页面、组件库、品牌规范、代码 token。
2. 建立 token 和主题矩阵：语义、状态、暗色/亮色、响应式。
3. 建立组件变体模型：状态、尺寸、密度、错误、加载、交互。
4. 评估可访问性、国际化和生产资产预算。
5. 把设计系统变更同步到文档、组件示例、测试或视觉证据。

输出字段

## DesignSystemArchitectureGate

| 字段 | 内容 |
|------|------|
| designTokens | 颜色、字体、间距、圆角、语义 token |
| componentVariantModel | 组件变体、状态、尺寸、密度 |
| themeConsistency | 主题、品牌、页面一致性 |
| accessibilityI18nBoundary | 无障碍、键盘、屏幕阅读器、国际化边界 |
| figmaCodeSync | Figma/代码/资产/验收同步 |
| adoptionGovernance | 使用规范、迁移、弃用、治理 |
| evidenceMatrix | 判断 -> Figma / code / screenshot / Storybook / docs / tests |

反模式

反模式	修正
每个页面手写一套颜色和间距	抽象 designTokens 和主题规则
组件只有默认态	补 variant/state/error/loading/disabled
只看 Figma 静态图	验证代码实现、响应式、状态和资产预算
设计系统文档只给维护者看	同步用户/开发者可理解的使用示例

与其他 Skill 的关系

• frontend-architecture：设计系统落地到组件边界和状态模型。
• ux-interaction-architecture：交互状态和任务流影响组件变体。
• brand-visual-quality：品牌母版谱系、主题几何 parity、微尺寸光学校正、单色母版和视觉证据由其 Owner；本 Skill 消费已验收资产并负责 token/theme/component/Figma-code adoption。命中资产生产时引用 ThemeGeometryParityGate，不得在本 Skill 内复制生产门禁。
• figma 相关 Skill：需要 Figma 写入或设计读取时按 Figma 工具链执行。