用途：该技能面向前端设计系统决策，适用于设计或评审 UI 系统、组件结构、令牌、布局与视觉交互；选择 CSS 架构、响应式行为、无障碍约束或动效规则；把仓库的视觉方向转化为可实施的前端指导。不适用于泛泛解释、文案编辑，或不影响架构与可复用实现模式的一次性代码改动。
主要能力与硬性规则：保留仓库的令牌与组件状态契约，不硬编码孤立的视觉决策；优先使用语义 HTML 与原生控件，再考虑 ARIA 替代；为交互 UI 定义键盘行为、可见焦点、可测量对比度与减少动效行为；保持响应式组件可复用，为媒体与字体预留布局空间，避免无证据的性能回退。主答案以决策为先，深度论证放入本地参考。新增版本、浏览器、API、法律或采用类声明前需先核实。
决策门：依据仓库原生 CSS 架构、命名、lint、构建管线与团队约定，保留既有范式，仅在仓库支持且接受迁移成本时引入新方案；若存在 Design.md、design.md、设计令牌源或已批准设计工具，则以其为视觉事实来源；平台特性（容器查询、嵌套、:has()、light-dark()、滚动驱动动画等）需受支持浏览器矩阵约束并定义回退；令牌契约选择 OKLCH 时新令牌保持 OKLCH；暗色优先仅在产品与来源要求时使用；可复用组件优先容器查询；无障碍需保留语义 HTML、键盘访问、焦点可见、对比度测量、触控目标与减少动效；性能技术需与浏览器矩阵兼容并有实测或既定目标；有仓库原生校验命令时运行，依赖或权限不可用时不要指定 npx、浏览器审计等命令。
执行步骤：先识别仓库架构、设计来源、浏览器矩阵、无障碍范围、性能证据、团队约定、工具可用性与迁移成本；再定义或保留令牌、状态、语义 HTML、焦点、对比度与减少动效契约；选择最小兼容的 CSS、布局、组件、主题与动效方案，记录回退与被拒方案；仅在需要详细决策矩阵、示例、保障或命令前提时读取 references/technical-reference.md；最后说明所选模式、证据、运行时风险、回退或迁移计划与验证路径，仅在核实后添加变更日志声明。
输出契约：返回推荐决策、仓库证据与适配理由；被拒替代方案及具体权衡（含迁移成本）；无障碍、浏览器、性能与运行时风险及缓解或回退；仓库中可用的验证步骤，或采用前仍需的证据。
限制：资料未提供具体收费、价格、平台支持范围与效果数据；版本敏感声明需按 references/source-index.md 的核实规则处理。