SuperAPI AI 工具集

kb-design-system

设计与创作

查看项目

更新于 10-16 05:03

技能介绍

用途:为设计令牌提供对比度、焦点环与间距审计的参考数据,不承担评审角色,供 design-system-auditor.agent.md 使用。

主要能力:提供 WCAG 对比度计算步骤(sRGB 通道线性化、相对亮度、对比度比值)及 JavaScript 实现思路;提供 HSL 转 Hex 方法以处理 CSS 变量令牌;给出 AA/AAA 阈值表(正文 4.5:1/7:1,大字 3:1/4.5:1,UI 组件与焦点指示 3:1,占位文本 4.5:1,禁用态与品牌标志豁免);梳理 Tailwind、shadcn/ui、Radix、MUI v5+、Chakra UI、Style Dictionary 的令牌路径;列出常见高风险令牌对与合规替换;给出 Storybook addon-a11y 配置与 CI 运行方式;说明 WCAG 2.4.13 焦点外观要求、最小合规焦点环实现与需检测的违规写法;提供令牌文件发现命令(find 与 PowerShell)、严重级别分类。

使用方式:安装 Storybook 无障碍插件并在预览配置中启用 color-contrast、focus-visible 等规则,结合 test-runner 在 CI 中执行检查;按给定公式或脚本计算令牌对比度,并逐对检查语义色组合。示例命令保持原样:npm install --save-dev @storybook/addon-a11y;npm install --save-dev @storybook/test-runner。

适用场景:设计系统令牌审查、主题色对比度验证、焦点环合规检查、CI 无障碍回归。

限制:仅提供参考数据与计算/检查方法,不自动修改代码;部分比值为资料中给定示例值;未提供价格、平台支持范围与效果保证等信息。