用途：当核心问题是“在设计或重构单个页面前，这个产品或产品族应遵循哪些共享 UI 规则”时使用该技能。它是该仓库前端 UI 系统的基准锚点，负责给系统问题分类、选择合适的设计系统模式、尽早把相邻前端工作分流出去，并产出可供他人或智能体执行的紧凑系统包。
主要能力：定义或重构产品、产品套件、应用加营销界面的共享设计系统；设定颜色、字体、间距、圆角、高度、动效和断点刻度等令牌策略；选择原始组件命名规则、贡献边界和可复用视觉语言约定；为落地页、仪表盘、表单和组件库建立连贯的系统方向；把“UI 感觉不一致”这类模糊请求转成系统级方向包；在组件、无障碍或响应式实现开始前判断团队是否需要系统决策；设计可复用的原始/插槽/变体 API，从临时 UI 中抽取组件族；为 Figma、代码令牌、原始组件和下游前端工作准备交接。
使用方式：先读 references/system-modes.md 再选方法；改动共享令牌、原始组件或命名规则前读 references/token-and-governance-checklist.md；决定工作归属本技能、响应式设计还是网页无障碍时读 references/scope-boundaries.md；写最终交接前读 references/design-system-packet-template.md。流程为：先分类请求并选定一个主模式（基础模式、跨界面对齐模式、原始组件治理模式、系统交接模式、系统评审模式），再界定共享系统边界，然后优先做最小共享决策（基础、原始组件策略、界面规则、无障碍基线、治理），示例从属于规则，尽早分流相邻工作，产出设计系统包，必要时仅加一两个示例，最后以边界句收尾。
适用场景：一个设计系统覆盖营销站与 B2B 仪表盘；团队随意添加颜色和间距，需要命名与评审策略；混有系统与响应式请求；已有令牌但表单焦点可见性和错误状态无障碍仍不达标。
限制：视图适配、容器查询、溢出或移动布局验证应转 responsive-design；键盘/焦点行为、WCAG 修复、标签、语义、对比度或人工无障碍验证应转 web-accessibility；宽泛页面或流程评审也应转 web-accessibility；若系统规则已明确、任务只是实现，则直接实现。未知的分层应记录为待定决策，不要编造细节。其他具体使用条件与产物细节暂未提供。