吃豆人复古街机设计系统

要解决什么问题

复古街机风很容易做「像」，却很难做「准」。开发里最常见的翻车现场：用 #FFFF00 随手描一个黄块当幽灵，再把按钮圆角拉满，整个界面立刻从街机变成贴纸风；字重、字距、间距各写各的，间距破坏了 8pt 基线，一行按钮和相邻卡片的内边距肉眼可见地错位；深底黑配低对比灰字，在 OLED 上很酷，WCAG 2.2 AA 直接不达标。

问题不在没人会画像素，而在于缺少一套能把「街机感」翻译成令牌、组件规则和验收标准的工程化规范。这个技能就是来填这个坑的。

它如何工作

技能的核心是一套规范撰写流程，最终产出的是设计系统文档，不是图片。它强制按固定结构展开：

• 先一句话重申设计意图，再谈规则——避免团队各写各的「复古」
• 先定义设计令牌（颜色、字体、间距），再谈组件一致性
• 再逐层落到组件解剖、状态、变体与交互行为
• 每个组件明确要求给出 default、hover、focus-visible、active、disabled、loading、error 等状态

几个关键约束值得单独拎出来：

• 字体固定为 Press Start 2P（正文与展示）和 Space Mono（等宽），提供 100–900 字重
• 颜色层：primary=#2A3FE5、secondary=#F4B9B0、success=#16A34A、warning=#D97706、danger=#DC2626、surface=#000000，文本 text=#111827
• 间距按 8pt 基线网格执行，不容忍局部随意值
• 规则语言区分 must（不可协商）和 should（建议），每条 do 规则必须配至少一个具体反例
• 无障碍不是附录：键盘优先、可见焦点态、prefers-reduced-motion 降级、44px+ 触达目标、高对比度支持，且每条无障碍声明都要给出可在代码评审中执行的验收标准

最终输出以 QA checklist 收尾，可以直接贴进 PR 做评审清单用。

适用边界

这个技能是写作规范，不是渲染引擎。它给工程师和设计师可落地的约束文本，不产出像素、不生成图片。视觉上它是高对比、点状描边、黑白底+霓虹蓝点缀的街机风，不适合需要柔和、圆角、渐变的现代商务界面。

另外有两条工程纪律要守住：规则必须锚定到令牌或阈值，不能只靠「更活泼」「更有呼吸感」这类形容词；当审美与可访问性冲突时（比如关闭焦点环换取纯净视觉），一律优先可访问性。

安全边界方面，技能不自动安装依赖、修改系统权限或创建持久任务；命令和代码默认仅作参考，只有你明确要求且目标范围清楚时才会执行。