SuperAPI AI 工具集

rams

设计与创作

查看项目

更新于 10-15 17:29

技能介绍

用途:Rams 是 brianlovin/agent-config 中的设计审查技能,以「设计工程师」角色审查组件代码的可访问性与视觉设计问题。可指定某个文件分析;未指定时,会询问要审查哪些文件,或提出扫描项目中的组件文件。

主要能力:一是 WCAG 2.1 可访问性审查,按严重程度分级。Critical 检查包括:图片缺少 alt(1.1.1)、仅含图标的按钮无可访问名称(4.1.2)、表单输入没有关联 label 或 aria-label(1.3.1)、非语义点击处理器如 div/span onClick 缺少 role、tabIndex、onKeyDown(2.1.1)、链接缺少 href 仅用 onClick(2.1.1)。Serious 检查包括:移除焦点轮廓且无可见替代(2.4.7)、交互元素缺键盘处理器(2.1.1)、仅用颜色传达状态(1.4.1)、触摸目标小于 44×44px(2.5.5)。Moderate 检查包括:标题层级跳跃(1.3.1)、正数 tabIndex(2.4.3)、role 缺少必需属性(4.1.2)。二是视觉设计审查,覆盖间距不一致、溢出与对齐、z-index 冲突、字体族/字重/字号混用、行高、字体回退、对比度低于 4.5:1、缺少 hover/focus 状态、深色模式不一致,以及按钮与表单字段状态、边框/阴影/图标尺寸不一致。

使用方式:提供目标文件参数即分析该文件,否则先询问范围。审查流程要求先读取文件再评估。输出为固定格式报告,按 CRITICAL、SERIOUS 等分组,标注行号与代码片段,给出修复方式与对应 WCAG 条款,并在末尾汇总问题数量与分数。如需,也可直接修复。

适用场景:审查前端组件、UI 代码的 WCAG 合规与设计一致性。

限制:资料未提供安装命令、价格、平台或运行环境信息;未提供具体评分算法细节;除上述检查项外未说明其他功能。