SuperAPI AI 工具集

frontend-agents-design-system-validator

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:在合并 UI 变更前,对 CSS 代码库进行设计系统合规审查,供智能体与代码评审者使用,输出结构化findings报告。

主要能力(确定性规则):1)颜色/间距/字号/圆角/阴影值必须是 var(--token) 引用,@layer tokens 块外不得出现原始值(ERROR);2)三层令牌链:组件用语义令牌,语义令牌引用原始令牌,组件不得直接引用原始令牌(WARNING);3)每个已定义令牌须被引用,每个引用须能解析(悬空 ERROR、孤儿 INFO);4)kebab-case 加命名空间前缀(WARNING);5)层顺序须在入口声明:@layer tokens, theme, base, components, utilities;(ERROR);6)可动画自定义属性须用 @property 注册 syntax、inherits、initial-value(WARNING);7)utilities 层外禁用 !important(ERROR);8)每个语义令牌须同时有明暗两套值(ERROR);9)文本对比须满足 WCAG 1.4.3:正文 4.5:1、大字号(>= 18pt 或 >= 14pt 粗体)3:1(ERROR);10)UI 组件与图形对象须满足 WCAG 1.4.11:与相邻色 3:1(ERROR)。

使用方式:报告格式为 <file>:<line>:<col> [SEVERITY] <RULE-ID> <message>,并附 suggested fix。流程为:用 grep 盘点令牌定义与 var() 引用,用 comm 求差集找孤儿与悬空;查找 @layer tokens 外的颜色字面量;校验层顺序;比对 transition/animation 中的令牌与 @property 注册;比对明暗两套定义;对比度需用 axe-core、pa11y 或 colorjs.io 等真实工具计算,grep 仅为近似。另给出令牌/原始值、原始层/语义层、对比度失败时改前景还是背景三棵决策树及修复示例。

限制:不含对比度之外的无障碍、性能与一致性审查;不涉及 OKLCH 调色板生成、DTCG 令牌格式规范、Tailwind/shadcn/Material 集成及 Stylelint/PostCSS 插件配置。实际区分「tokens 层内/外」需 PostCSS、Stylelint 等真实解析器,grep 约 90% 近似。价格与许可等其余信息暂未提供。