القائمة
设计系统架构专家 Owner — 当任务涉及设计系统、主题、Token、组件变体、Figma/代码同步、UI 一致性、可访问性、国际化、品牌视觉或组件库治理时使用；要求把视觉规则沉淀为可复用、可验证的系统契约。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/devcodex-labs/devcodex --skill design-system-architectureيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | design-system-architecture |
| description | 设计系统架构专家 Owner — 当任务涉及设计系统、主题、Token、组件变体、Figma/代码同步、UI 一致性、可访问性、国际化、品牌视觉或组件库治理时使用；要求把视觉规则沉淀为可复用、可验证的系统契约。 |
本 Skill 负责设计系统 Owner 视角。它不替代单页 UI 实现，而是把 token、主题、组件变体、设计源和治理规则变成长期可维护的系统契约。
| 场景 | 是否触发 |
|---|---|
| 设计系统、主题、Token、组件库、组件变体、Figma/代码同步、品牌视觉 | 必须 |
| 任务涉及多页面 UI 一致性、样式主题、可访问性、国际化或设计资产进入生产 | 必须 |
| 前端方案需要定义复用组件或视觉规范 | 必须 |
| 单次页面文案微调且不影响组件/主题 | N/A + skipReason |
| Gate | 要求 | 证据 |
|---|---|---|
DesignSystemArchitectureGate | Token、组件变体、主题、一致性、设计源和治理必须成矩阵 | designTokens、componentVariantModel |
DesignTokenGate | 颜色、字体、间距、圆角、阴影和语义 token 必须有来源 | designTokens |
ComponentVariantGate | 组件状态、尺寸、密度、禁用、错误、加载必须定义 | componentVariantModel |
ThemeConsistencyGate | 主题与品牌视觉不能一页一套 | themeConsistency |
FigmaCodeSyncGate | 设计源、代码实现、资产预算和验收入口必须可追踪 | figmaCodeSync |
## DesignSystemArchitectureGate
| 字段 | 内容 |
|------|------|
| designTokens | 颜色、字体、间距、圆角、语义 token |
| componentVariantModel | 组件变体、状态、尺寸、密度 |
| themeConsistency | 主题、品牌、页面一致性 |
| accessibilityI18nBoundary | 无障碍、键盘、屏幕阅读器、国际化边界 |
| figmaCodeSync | Figma/代码/资产/验收同步 |
| adoptionGovernance | 使用规范、迁移、弃用、治理 |
| evidenceMatrix | 判断 -> Figma / code / screenshot / Storybook / docs / tests |
| 反模式 | 修正 |
|---|---|
| 每个页面手写一套颜色和间距 | 抽象 designTokens 和主题规则 |
| 组件只有默认态 | 补 variant/state/error/loading/disabled |
| 只看 Figma 静态图 | 验证代码实现、响应式、状态和资产预算 |
| 设计系统文档只给维护者看 | 同步用户/开发者可理解的使用示例 |
frontend-architecture：设计系统落地到组件边界和状态模型。ux-interaction-architecture：交互状态和任务流影响组件变体。brand-visual-quality：品牌母版谱系、主题几何 parity、微尺寸光学校正、单色母版和视觉证据由其 Owner；本 Skill 消费已验收资产并负责 token/theme/component/Figma-code adoption。命中资产生产时引用 ThemeGeometryParityGate，不得在本 Skill 内复制生产门禁。figma 相关 Skill：需要 Figma 写入或设计读取时按 Figma 工具链执行。