透视景深视觉风格设计规范

要解决什么问题

透视、景深风格的界面容易做"好看"，却很难做"一致"。等距视角、消失点构图、分层元素一旦缺少约束，就会出现配色漂移、字号混乱、间距节奏断裂——视觉上像同一个产品，实现上是两套代码。这个技能解决的就是从风格到规范的转化缺口：把"要有空间感"的设计意图，落成工程师可以直接引用的 token、组件规则和验收清单。

技能如何工作

技能采用 先基础、后组件 的分层策略：

1. 重述设计意图：用一句话明确这次要达成的空间目标，再展开规则
2. 定义 token 与基础约束：字号阶梯 12/14/16/20/24/32，字体 Poppins / Oswald / JetBrains Mono，色彩令牌如 primary=#00BD7D，间距刻度 4/8/12/16/24/32
3. 组件级规则：拆解结构、变体与状态（default / hover / focus-visible / active / disabled / loading / error），并明确键盘、指针、触摸的交互行为
4. 可测的无障碍标准：对齐 WCAG 2.2 AA，键盘优先，焦点状态可见
5. 反模式与迁移说明：每个 do 规则至少配一个 don't 反例，新样式附带存量组件的迁移指引
6. QA 检查清单：输出可直接用于 code review 的验收项

规则表达上，技能区分 must（不可妥协）与 should（建议），所有规则必须锚定 token、阈值或实例，不能只靠形容词描述。

适用边界与注意点

• 技能只生成规范文档，不修改设计文件、不安装依赖、不创建持久化任务
• 涉及发送、发布、部署等外部写入操作时，必须先展示目标与影响并取得明确确认
• 凭据仅用于用户指定的对应官方服务，不回显、不记录、不转发
• 命令与代码默认作为参考，只有用户明确要求且目标范围清楚时才可执行
• 当美观与无障碍冲突时，技能会标出冲突并优先保障可访问性