antislop-human 无障碍技能如何让你的 AI 生成 UI 真正服务于所有用户【免费下载链接】anti-slopRules for an AI coding agent to filter out generic AI-generated UI designs, text, and code.项目地址: https://gitcode.com/gh_mirrors/anti/anti-slop在 AI 辅助开发的场景中antislop-human 是 anti-slop 项目里专注人本与无障碍的 AI 编码代理技能它把 WCAG 对比度检测、键盘可达性、焦点状态和界面状态管理写成了 AI 可以直接执行的规则并内置了一个可运行的对比度检测脚本 contrast-check.py让 AI 生成的 UI 不再截图好看、真人难用。AI 生成的 UI最容易在哪些地方伤人AI 生成的页面往往在截图里很体面但换成真实用户就暴露问题。antislop-human 指出的典型翻车点常见 AI 生成问题谁被挡在门外浅灰文字放在白底上看着很高级弱视用户、强光下使用的人焦点框被outline: none删掉只用键盘操作的用户成功/失败只靠红绿色区分色盲用户、强制色彩模式下的人200% 缩放时文字被容器裁掉需要放大文字的人手机键盘盖住正在填写的输入框移动端表单用户下面两张对比图来自项目文档同一个需求生成两次第一张是未经任何过滤的典型 AI 页面第二张加载 antislop 规则后的结果——文案更诚实、层级更克制配色对比也更经得起检查。antislop-human 技能包含什么技能文件 SKILL.md 覆盖五大块每条规则都遵循「识别 Tell → 说明 Why排除谁→ 给出 Fix」的结构并引用核心规则编号色彩与对比度正常文字 4.5:1、大文字18px3:1WCAG AA对应核心规则 R-25键盘操作Tab 顺序、Enter/Space 触发、Escape 关闭弹窗禁止只有鼠标能用R-32、R-26焦点与状态所有主题下都必须有可见焦点框R-34空态/加载/错误三态齐全且可感知R-27缩放与移动端文字支持 200% 缩放不被裁剪手机键盘不遮挡聚焦输入框R-35这个技能需要和核心文件 antislop.md 一起加载核心负责机制与交付门禁该技能负责人本侧的深度检查。WCAG 对比度检测三层工具拒绝目测通过AI 最常见的无障碍幻觉是声称深灰在黑底上能过 AA。事实上 #555555 在黑底上只有 2.82:1不通过——眼睛会高估灰色对的对比度而 AI 会复读这个听起来合理的错误结论。antislop-human 因此提供了从方便到可靠的三层检测手段第一层运行检测脚本python3 contrast-check.py #FFFFFF #777777 # 输出 ratio: 4.48:1 # normal text (4.5:1): FAIL # large text (3.0:1): PASS脚本随技能一起打包在 skills/antislop-human/ 目录下输入两个 16 进制色值输出对比度比值和两种文字尺寸下的 PASS/FAIL 结论两个结论都通过时退出码才为 0方便接入自动化流程。它还支持--selftest参数用公式复核技能文档里的参考表确保表格数据不失真。第二层WCAG 公式没有脚本环境时按 WCAG 2.x 公式手算相对亮度 L 0.2126R 0.7152G 0.0722B各通道先线性化对比度 (L1 0.05) / (L2 0.05)。完整公式见 SKILL.md 的 The Contrast Checker 一节。第三层参考表常用配对的预计算结果可作为快速核对表中未列出的配对或接近阈值的情况仍需走脚本或公式配对文字在背景上对比度正常文字 4.5:1大文字 3.0:1黑底白字 / 白底黑字21.00通过通过白字 #33333312.63通过通过白字 #6666665.74通过通过#777777 白底4.48不通过通过白字 #8888883.54不通过通过#555555 黑底2.82不通过不通过两个容易被忽略的细节图片/渐变上的文字对比度是局部的白色文字压在图片上最亮的那一小块区域就可能跌破 4.5:1。正确做法是加遮罩或纯色块衬底然后验证最差的区域而不是最漂亮的区域。非文字对比度按钮、图标、输入框边框、图表分段与背景之间也要满足 3:1WCAG 1.4.11低视用户靠边缘定位控件边缘只剩一点色差时控件等于隐形。键盘与焦点没有替代方案就禁止删除焦点框禁止裸奔的outline: none删除浏览器默认焦点框却不提供替代样式是最快让 UI 对无鼠标用户不可用的做法。正确做法是提供满足 3:1 对比度的:focus-visible样式并且在深色、浅色每个主题下都要检查一遍。Tab 顺序必须跟随视觉顺序DOM 顺序与视觉顺序不一致时键盘用户会迷路页面感觉像坏了。颜色不是唯一信号红色错误文字、绿色成功边框必须配上文字或图标。错误提示要文字优先——例如密码至少 8 位而不只是一条红色边框。一键安装 antislop-human推荐用官方安装器一条命令搞定详细步骤见 GUIDE.md 的 Install 一节npx antislop-ai随后回答四个问题其中额外技能一项里勾选antislop-human即可。它支持 Claude Code、Codex、Cursor、GitHub Copilot 等十余种 AI 编码代理安装后开启一个新会话技能才会加载。验证是否生效直接问你的 AIantislop 的 R-32 说了什么能按规则回答即加载成功。交付前的 Human Skill Checklist技能文件末尾附有一份人本技能清单与核心的交付门禁Delivery Gate配合使用所有答案必须为yes才算通过每对文字与背景色都经过对比度检测脚本、公式或参考表包括图片与渐变上的文字R-25所有交互组件边框与状态指示器相对背景达到 3:1非文字对比度每个交互元素在所有主题下都有高对比、可见的焦点指示R-32、R-34所有交互元素可用键盘到达与操作弹窗可用 Escape 关闭无裸奔的outline: noneR-32、R-26每个数据视图的空态、加载、错误态齐全且可感知不依赖纯颜色区分R-27文字可放大到 200% 不被裁剪手机键盘不遮挡聚焦的输入框R-35核心理念无障碍不是交付前最后补的一张清单而是UI 必须站得住C-4这一核心承诺的一部分。小结antislop-human 把为真实的人做 UI变成了 AI 编码代理可执行的硬约束用脚本、公式和参考表三层工具终结目测通过 AA的幻觉用键盘可达性和焦点规则守住无鼠标用户的入口再用一份可勾选的清单把关每一次交付。配合核心文件 antislop.md 一起使用你的 AI 生成页面将不再只是截图好看而是任何眼睛、双手和配置下的用户都能真正用起来的界面。【免费下载链接】anti-slopRules for an AI coding agent to filter out generic AI-generated UI designs, text, and code.项目地址: https://gitcode.com/gh_mirrors/anti/anti-slop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考