未来科技前卫风格设计系统

要解决的具体问题

设计系统规范文档经常变成一本没人读的散文集：颜色写“偏蓝的科技感”，间距靠“看着差不多”，组件状态只写“点击有反馈”。工程师拿到这样的规范只能边猜边实现，最后每个页面都是一套私有样式。

这个技能把写规范变成可执行的流程：每条规则必须锚定到具体的令牌、阈值或示例，不能拿“现代”“大气”这类形容词单独充当约束。

核心能力与工作流程

• 基础层先行：品牌视觉定义在 token 上——primary=#3B82F6、secondary=#8B5CF6，以及 success/warning/danger 语义色和 4/8/12/16/24/32 的间距阶梯；规则要求优先引用语义令牌，而不是写死色值。
• 组件层随后：每个组件都要明确结构（anatomy）、变体与状态，必须覆盖 default、hover、focus-visible、active、disabled、loading、error，并分别说明键盘、指针、触摸三种交互行为。
• 写作流程固定：先用一句话重述设计意图，再定义令牌，然后写组件级规则，补齐无障碍验收标准与文案规范，最后给出反模式与迁移说明，以一份能在 code review 中执行的 QA 清单收尾。
• 约束语言有层次：must 标注不可协商的规则，should 标注推荐做法；每条 do 规则至少配一个具体的 don't 反例。

适用边界与注意点

无障碍优先级高于视觉新颖性：WCAG 2.2 AA、键盘优先交互和可见的 focus 状态是硬性要求，规范中每个无障碍声明都必须能在实现中测试。

这个技能只产出规范文档，不会自动安装依赖、修改系统权限或创建持久任务。涉及发布、删除、付款等外部写入时，会先展示目标与影响并取得明确确认；命令和代码默认仅作参考，只有你明确要求且目标范围清楚时才会执行。