design-system-architecture

# 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. 把设计系统变更同步到文档、组件示例、测试或视觉证据。 ## 输出字段 ```markdown ## DesignSystemArchitectureGate | 字段 | 内容 | |------|------| | designTokens | 颜色、字体、间距、圆角、语义 token | | componentVariantModel | 组件变体、状态、尺寸、密度 | | themeConsistency | 主题、品牌、页面一致性 | | accessibilityI18nBoundary | 无障碍、键盘、屏幕阅读器、国际化边界 | | figmaCodeSync | Figma/代码/资产/验收同步 | | adoptionGovernance | 使用规范、迁移、弃用、治理 | | evidenceMatrix | 判断 -> Figma / code / screenshot / Storybook / docs / tests | ``` ## 反模式 | 反模式 | 修正 | |--------|------| | 每个页面手写一套颜色和间距 | 抽象 designTokens 和主题规则 | | 组件只有默认态 | 补 variant/state/error/loading/disabled | | 只看 Figma 静态图 | 验证代码实现、响应式、状态...