技能介绍

解决的问题

当团队决定采用赛博矩阵暗黑风格时，常见的失败并不是缺少参考图，而是设计意图无法沉淀为可执行的约束：每个人对「暗黑」「高对比」「科技感」的理解不同，最终产物里出现 #2DB58A 之外的绿色、圆角半径不统一、间距节奏断裂，组件状态缺失（没有 loading / error 的设计），空状态直接被省略。另一个问题是规范文档写得像画册——充满「要有呼吸感」「要克制」这类形容词，工程师无法在 code review 里验证。

技能的工作方式

技能扮演设计系统规范编写者的角色，遵循一套固定的产出流水线：

先重述设计意图：用一句话说清「这套界面是什么」，再展开规则；
先令牌后组件：先定义 primary / secondary / success / warning / danger / surface / text 等语义令牌与 4/8/12/16/24/32 的间距阶梯，再讲组件级约束；
组件规格完整：解剖结构、变体、default / hover / focus-visible / active / disabled / loading / error 各状态，以及键盘、指针、触屏的交互行为；
可测试的验收标准：每条无障碍声明都能落成验收项，例如 WCAG 2.2 AA、键盘优先、可见 focus 状态；
Do/Don't 成对出现：每条必须项配一个具体的反例，并为存量不一致 UI 提供迁移说明；
以 QA checklist 收尾：产出可在代码评审中逐条执行的清单。

在措辞上，技能区分 must（不可妥协）与 should（推荐），遇到审美与无障碍冲突时一律优先无障碍。排版约束也很具体：Space Mono 等宽字体、12/14/16/20/24/32 字阶、近方形 2px 圆角、发丝级边框，呼应订单簿与终端界面的观感。

适用边界与注意点

这套技能只产出设计系统规范文档，不会替你改代码、跑构建或生成组件实现；它给出的是约束与默认值，落地仍需要工程团队接入。它只覆盖纯黑单一表面、以 #2DB58A 为唯一品牌绿的暗色方案，不适合需要多主题或彩色界面的项目。此外，规范本身不会自动生效——如果团队没有 code review 习惯，QA checklist 只会停留在文档里。安全边界方面：技能不会自动安装依赖、修改系统权限或创建持久化任务；涉及发送、发布、删除、付款等外部写入操作时，会先展示目标与影响并等待明确确认。