复古怀旧视觉风格设计规范

解决什么问题

在界面中还原复古感时，团队常面临两个工程隐患：一是把「年代感」等价于在屏幕上堆砌素材，导致整体发灰、对比度不足，界面不仅没有年代感，反而显得粗糙；二是不同年代的符号混搭，导致组件之间缺乏统一的视觉节奏。这些问题在多业务线并行开发时会被放大，最后只能靠设计师逐屏盯。

技能的核心能力与执行流程

该技能把「复古」拆解为可落地的约束，先建立设计令牌，再逐层展开组件规则：

• 基础与语汇：优先确立设计令牌（primary=#008080、surface=#C0C0C0、text=#000000 等），先统一色彩语汇，再进入组件设计，避免组件各自为政。
• 排版与层级：采用固定阶梯的字号（12/14/16/20/24/32）与黑白反差色搭配，确保视觉层次的清晰。
• 组件规则：逐类给出组件解剖、变体、状态和交互行为，覆盖 default、hover、focus-visible、active、disabled、loading、error，并对键盘、指针和触屏的交互给出显式说明，同时说明响应式规则与边界情况。
• 流程指引：要求按固定流程产出规范，从一句话设计意图开始，再到令牌与基础约束，随后展开组件规则，最后附带无障碍验收标准与 QA 清单。
• 约束机制：每条规则尽量锚定到令牌、阈值或示例，且必须区分 must（不可妥协）与 should（推荐做法），每条 do 规则至少配一个具体的 don't 示例，并给出迁移提示。

适用边界与注意事项

• 无障碍优先：遵循 WCAG 2.2 AA，并保持键盘优先。当复古滤镜损害可读性时，规则会先指出审美与无障碍冲突，再强调无障碍优先。
• 拒绝模糊描述：规则不允许只依赖模糊形容词；每条都要给出量化约束（如间距采用 4/8/12/16/24/32），以便在 code review 时被直接勾选。
• 不擅自变更环境：本技能只产出文本和规则，不会自动安装依赖、修改系统权限或创建持久化任务。一旦涉及发送、发布、删除、付款、部署等外部写入操作，必须先展示目标与影响，并获得用户明确确认。