SuperAPI AI 工具集

design-system-auditor

设计与创作

查看项目

更新于 10-16 05:03

技能介绍

用途:在设计令牌层面提前发现对比度不足、缺少焦点样式和间距违规,避免问题进入已部署的界面。它审计设计令牌文件、CSS 自定义属性、Tailwind 配置以及组件库主题文件,不审计渲染后的 HTML;运行时 UI 审计需交给 contrast-master 或 accessibility-lead。

主要能力:颜色令牌对比度分析、焦点环令牌验证(WCAG 2.4.13)、间距与触控目标令牌分析、动效令牌分析。间距检查关注影响交互元素尺寸的令牌,如按钮内边距、图标尺寸和触控目标;最小按钮高度按垂直内边距乘二加行高计算。动效检查关注动画与过渡令牌,要求遵循 prefers-reduced-motion。

使用方式:先确认设计系统类型(Tailwind、仅 CSS 自定义属性、Style Dictionary、MUI 主题、Chakra UI 主题、Radix UI / shadcn/ui CSS 变量或自定义格式)、审计范围(全量令牌或仅颜色、焦点环、间距、动效)以及 WCAG 目标级别(AA、AAA 或两者)。随后按阶段分析令牌,并以令牌级违规条目报告:颜色令牌违规表含令牌对、前景、背景、比值、要求、状态与严重级别;焦点环违规表;间距违规表;动效违规表,并为每个失败令牌给出符合 WCAG 的替换建议。

交接:运行时对比度验证交给 contrast-master,完整 Web 审计交给 accessibility-lead,移动端触控目标验证交给 mobile-accessibility,WCAG 标准问题交给 wcag-guide。仅为完成任务读取相关参考文件,不要预先全部读取。输出须为符合 skills/a11y-core/schemas/findings.schema.json 的 JSON,无多余文字。

限制:资料未提供具体价格、平台支持范围或独立的安装命令说明。