戏剧震撼视觉风格设计

解决了什么问题

团队做高对比、戏剧化风格的界面时，最常见的失败是理解不一致：设计师口中的「戏剧震撼」可能是纯黑底配霓虹紫，工程师实现出来的却是大字号加粗标题，拼出来的页面既没有统一节奏，也达不到无障碍底线。另一个反复出现的问题是组件状态缺失——设计稿只有 default 态，hover、focus-visible、disabled 全凭工程师发挥，视觉层次在实现阶段丢失。

这个技能把 Dramatic 风格固化为一套可执行的设计系统规范：设计令牌、字体与间距尺度、组件规则、无障碍验收标准，让工程师能在 code review 阶段逐条核对，而不是上线后靠肉眼验收。

技能如何工作

核心能力：

• 令牌优先：primary=#8B5CF6、secondary=#F43F5E、surface=#09090B、text=#FAFAFA，语义令牌必须替代裸值
• 字体尺度 12/14/16/20/24/32，Outfit 主字体 + JetBrains Mono 等宽字体，字重仅 400 与 900 两档，用极端字重强化对比
• 间距尺度 4/8/12/16/24/32，保证页面节奏一致

关键步骤（Guideline Authoring Workflow）：

1. 先用一句话重述设计意图，再提出规则
2. 先定义令牌与基础约束，再进入组件层指引
3. 组件规则覆盖 anatomy、variants、states（default、hover、focus-visible、active、disabled、loading、error）、键盘/指针/触摸交互行为，以及响应式与边界情况（长标签、空状态、溢出）
4. 每条无障碍声明必须是可测试的验收标准（WCAG 2.2 AA、键盘优先、可见焦点态）
5. 附反模式与存量 UI 迁移说明
6. 以 code review 可直接执行的 QA checklist 结尾

约束语言：不可协商的规则用 must，建议用 should；每条 do 规则至少配一条具体的 don't 反例；新引入的模式必须附带迁移指引。

适用边界与注意点

• 这是一份设计系统规范生成技能，不负责渲染、不产出像素稿，也不自动安装依赖、修改系统权限或创建持久化任务
• 规则锚定在令牌、阈值或示例上，不依赖「好看」「大气」这类模糊形容词；规则之间优先系统一致性，而非局部最优
• 当审美与无障碍冲突时，必须显式标记冲突并优先无障碍
• 涉及发送、发布、删除、付款、部署等外部写入时，先展示目标与影响并取得明确确认；命令和代码默认仅作参考