精致优雅视觉风格设计规范

解决的问题

在跨团队协作中，设计系统的执行常陷入两难：要么是设计师输出的规范过于抽象，开发难以落地；要么是团队各自为战，导致同一产品的按钮间距、颜色 token 出现多种实现，最终视觉风格混乱且无障碍标准难以统一。本技能针对这类“规范落地难”的问题，将设计系统拆解为可执行的工程化指南。

核心能力与工作步骤

1. 设计意图澄清

每条指南开篇需用一句话明确设计意图，避免模糊的形容词描述。例如，在定义“按钮”组件前，先说明“按钮需同时支持桌面与移动端点击，且状态变化需符合用户对物理按键的直觉预期”。

2. 设计令牌与基础约束

• 设计令牌定义：强制要求优先使用语义化令牌（如 --color-primary），而非硬编码色值（如 #3B82F6）。令牌需覆盖颜色、字体、间距等基础属性，例如字体规范中明确 primary=Playfair Display、mono=JetBrains Mono，并限定字重范围为 100-900。
• 无障碍基线：所有组件必须满足 WCAG 2.2 AA 标准，例如文本与背景对比度不低于 4.5:1，且交互元素需支持键盘导航并显示可见的焦点状态。

3. 组件级规则生成

• 解剖结构与状态：需明确组件的必选/可选子元素（如按钮需包含文本和图标槽位），并定义完整状态集（default、hover、focus-visible、active、disabled、loading、error）。例如，按钮的 disabled 状态不仅需降低对比度，还需移除悬停效果。
• 响应式与边缘情况：需覆盖断点适配（如移动端间距缩放规则）和极端内容（如长文本换行策略）。例如，输入框在屏幕宽度小于 480px 时，字体大小自动从 16px 降至 14px。

4. 质量门禁与验收标准

• 可测试性要求：每条无障碍声明必须转化为可验证的验收标准，例如“导航菜单展开时，焦点需自动移动至第一个菜单项，且 tabindex 属性值为 0”。
• 反模式示例：提供明确的禁止实现，例如“禁止使用 outline: none 移除焦点样式”，并配套替代方案（如自定义 :focus-visible 样式）。

适用边界与注意点

• 安全限制：不自动安装依赖或修改系统权限，涉及外部写入操作（如部署到生产环境）需用户二次确认。
• 语言与沟通：指南需使用简洁、自信的语气，避免模糊表述（如“适当调整”），优先用具体数值（如“间距为 16px”）替代。
• 迁移支持：若团队已有不一致的 UI 实现，需在指南中添加迁移说明，例如“旧版按钮组件需在两周内替换为新的 token 体系，期间保留双轨支持”。