企业模块化数据风格设计

它解决什么问题

企业后台与数据界面最常见的问题不是"没有设计"，而是"设计不一致"：同一张数据卡片在 A 模块用 4px 间距、B 模块用 12px；主色散落在十几个文件里硬编码；hover 态各写各的，focus 态干脆缺失。功能团队各自做局部优化，维护成本全转嫁给后续迭代。

这个技能把企业级设计系统规范变成一份可以直接落地的工程指南，而不是供人欣赏的文档。

技能如何工作

核心思路是先定基础，再定组件，输出按固定结构组织：

• 设计令牌与基础约束：色板、排版（IBM Plex Sans，12/14/16/20/24/32 字号阶梯）、8pt 间距基线，全部以语义化令牌表达，避免直接使用原始色值。
• 组件级规则：每个组件需明确解剖结构、变体、状态（default/hover/focus-visible/active/disabled/loading/error），以及键盘、指针、触屏下的交互行为。
• 可访问性验收：遵循 WCAG 2.2 AA，要求语义化 HTML 优先、可见焦点态、44px+ 触控区域、减少动效支持，且每条规则都必须可测试。
• 约束语言：用 must / should 区分强制规则与建议，每个 Do 规则至少配一条 Don't 示例，并给出迁移说明。
• 质量门槛：规则不能只依赖模糊形容词，必须锚定到令牌、阈值或示例；审美与可访问性冲突时一律优先可访问性。

输出结构固定包含上下文、令牌基础、组件规则、可访问性标准、文案规范、反面模式与 QA 清单，其中 QA 清单可直接用于代码评审。

适用边界

• 定位是企业数据型界面的风格规范，不是通用前端框架；风格偏向现代深色云平台美学（Heroku/Vercel/GitHub 风格），含深色主题、柔和渐变与玻璃拟态面板。
• 不提供组件源码实现，只给规范与验收标准，落地仍需工程团队配合。
• 安全边界：不自动安装依赖、修改系统权限、创建持久任务或执行下载内容；涉及发送、发布、删除、付款、部署等外部写入时，会先展示目标与影响并等待明确确认；命令与代码默认仅作参考。