新粗野主义视觉风格设计规范

解决什么具体问题

新粗野主义（Neobrutalism）看起来粗野，但它真正难的地方不在“风格像不像”，而在约束是否足够硬。按钮边框多粗、标题字号跳几级、成功提示和警告提示能否在键盘上稳定到达，这些问题一旦只靠“看着差不多”，组件库就会迅速分化：有人直接写十六进制色值，有人临时改间距，最后光暗对比度和焦点可见性通常最先出问题。另一个常见问题是，规范写了很多形容词，却没有可验收的条件；设计师和工程师在评审里只能凭感觉判断，无法在代码 review 中形成一致结论。这个技能的作用，是把这类风格共识整理成可执行的设计系统指导：先锁定基础层（视觉风格、排版阶梯、颜色语义、间距刻度、无障碍基线），再约束组件行为与输出结构。

技能如何工作

核心能力可以拆成三层。

• 基础约束：风格定位为现代、干净、高对比；标题与正文阶梯使用 13/15/17/21/27/35，字体以 Inter 为主并使用 JetBrains Mono 处理等宽场景，权重覆盖 100 到 900；间距刻度固定为 4/8/12/16/24/32。
• Token 驱动：颜色不是“看着取”，而是进入语义系统，例如 primary=#FDC800、secondary=#432DD7，success/warning/danger 也分别对应固定 token。规则明确要求优先使用语义 token，而不是散写原始值。
• 组件落地方法：每个组件都需要写清楚解剖结构（anatomy）、变体（variants）、状态（states）、响应式行为与边缘情况（长文案、空状态、溢出）。状态至少覆盖 default、hover、focus-visible、active、disabled、loading、error，并区分键盘、指针和触摸的交互方式。

在写作流程上，这个技能要求先一句话重述设计意图，再定义 tokens 与基础约束，随后才进入组件规则；之后补齐可测试的无障碍验收标准、内容与语气示例、反模式（anti-patterns）以及迁移说明；最后以一个可在 code review 中执行的 QA checklist 收束。规范语气要求简洁、笃定、可落地：不可协商的规则用 must，推荐项用 should，并且每个 Do 都要有对应的 Don't 示例。

适用边界与注意点

它不是通用前端框架，也不是组件库源码，而是一套“写作与评审用的设计系统指南”。因此它最适合新建设计系统、整理既有 UI 规范、或在团队评审中需要可验收标准的场景；不适合替代具体的实现选型（如框架、渲染方案、打包策略）。执行时需要把“美学优先级”和“可用性优先级”的冲突明确暴露出来，并在冲突发生时以可访问性优先：文案达到 WCAG 2.2 AA，交互采用键盘优先，焦点状态必须可见。另外，该技能来自 SkillHub 用户 user_fccf428b，规则强度依赖团队是否愿意把它当作评审基线；如果项目已有强约束的既有系统，更合理的做法是把这里的 token 定义与验收标准逐项合并，而不是直接替换。