Sega像素游戏风格设计蓝图

解决什么问题

复古像素、街机柜风格的界面很容易做到"看起来像"，却很难做到"每次重做都一致"。Sega 像素风依赖几项强风格化元素：VT323 像素字体、0px 硬直角圆角、会物理按压进实色偏移块的粗体胶囊按钮、彩虹描边卡片投影。一旦缺少约束，同一个页面里就会出现三种主色蓝、四种间距节奏、两套按钮高度。

这个技能要解决的就是这件事：把审美偏好翻译成能被代码评审执行的规则，让设计师和工程师在同一套语义化 token 上对齐，而不是各自凭感觉还原。

技能如何工作

核心能力是撰写一份完整的 Sega 设计系统指南，输出结构固定为七个部分：

• Context and goals：先用一句话重述设计意图，再展开规则
• Design tokens and foundations：先定义 token 与基础约束，再谈组件
• Component-level rules：组件解剖结构、变体、状态、响应式行为
• Accessibility requirements：每条无障碍声明都对应可测试的验收标准
• Content and tone standards：文案语气与正反例
• Anti-patterns：明确禁止的实现方式
• QA checklist：可直接挂进 code review 的检查项

基础层强制使用语义 token 而非原始值，例如 primary=#4502FF、success=#16A34A，配合 4/8/12/16/24/32 间距刻度和 13/15/17/21/27/35 字号阶梯。组件层要求逐项写明 default、hover、focus-visible、active、disabled、loading、error 状态，并分别描述键盘、指针与触摸的交互行为。

约束语言采用 must 与 should 分级：must 用于不可妥协的规则，should 用于推荐项。每条 do 规则至少配一个具体 don't 示例。当审美与无障碍冲突时，一律优先无障碍。

适用边界与注意事项

这套指南面向游戏相关的 Web 与应用界面，不替代通用设计系统。它不做多主题扩展，也不涉及动效曲线、3D 资源或音效规范。

规则质量有硬门槛：不允许只依赖"好看""和谐"这类模糊形容词，每条规则必须锚定到 token、阈值或具体示例，这样评审时可以在代码里验证，而不是靠感觉讨论。

如果接入方已有不一致的 UI，指南会附带迁移说明，而不是让你推倒重来。已有组件引入新模式时，必须先给出迁移路径。