力量感现代视觉设计规范

解决的问题

团队落地设计系统时最常见的问题，不是没有规范文档，而是规范写得太"软"。"界面要有力量感""标题要醒目"这类描述无法在代码评审中被验证，设计师和工程师各自凭感觉实现，风格逐渐漂移。另一个问题是规则只覆盖视觉层，忽略了交互状态与无障碍要求，组件在键盘导航、高对比度模式下的表现无人负责。

这个技能针对的正是这类痛点：把模糊的美学意图转写成一份可以直接执行、能够被测试的工程规范。

核心能力与工作流程

技能以"先基础、后组件"的顺序组织输出，遵循固定的七段结构：

• 上下文与目标：先用一句话重述设计意图，再展开具体规则
• 设计令牌与基础约束：明确色板、字体与字重、间距基准。默认色板为 #FAFAFA 主色与 #000000 纯黑背景的高对比组合，Oswald 承担标题与正文，JetBrains Mono 用于代码类内容
• 组件级规则：拆解结构、变体与交互状态（default、hover、focus-visible、active、disabled、loading、error），覆盖键盘、指针、触摸三种输入
• 无障碍验收标准：键盘优先、可见焦点、44px 以上触摸目标、语义化 HTML 优先于 ARIA，每条要求都必须可在实现中测试
• 文案与语气：简洁、确定、乐于助人，禁止含义模糊的标签
• 反模式清单：禁止低对比度文本、破坏 8pt 间距节奏、含糊命名，并附迁移指引
• QA 清单：可直接嵌入代码评审的检查项

写作约束上，不可协商的规则用 must，建议项用 should，每条 do 规则至少配一个具体的 don't 示例。

适用边界

技能产出的是规范文档，不是可运行的组件库，落地仍需团队自行实现。它不评审设计稿，也不自动修改代码；涉及发送、发布、删除等外部写入操作时，必须先确认目标与影响。令牌值为默认起点，品牌有既定色板时应覆盖而非直接套用。