企业官网建设流程全解析

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 页面，第二张加载 antislop 规则后的结果——文案更诚实、层级更克制，配色对比也更经得起检查。

antislop-human 技能包含什么

技能文件 SKILL.md 覆盖五大块，每条规则都遵循「识别 Tell → 说明 Why（排除谁）→ 给出 Fix」的结构，并引用核心规则编号：

• 色彩与对比度：正常文字 4.5:1、大文字（18px+）3:1（WCAG 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" 一节。

第三层：参考表

常用配对的预计算结果，可作为快速核对（表中未列出的配对或接近阈值的情况，仍需走脚本或公式）：

两个容易被忽略的细节：

1. 图片/渐变上的文字：对比度是"局部"的，白色文字压在图片上，最亮的那一小块区域就可能跌破 4.5:1。正确做法是加遮罩或纯色块衬底，然后验证最差的区域，而不是最漂亮的区域。
2. 非文字对比度：按钮、图标、输入框边框、图表分段与背景之间也要满足 3:1（WCAG 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 编码代理，安装后开启一个新会话技能才会加载。验证是否生效：直接问你的 AI"antislop 的 R-32 说了什么？"，能按规则回答即加载成功。

交付前的 Human Skill Checklist

技能文件末尾附有一份人本技能清单，与核心的交付门禁（Delivery Gate）配合使用，所有答案必须为yes才算通过：

• 每对文字与背景色都经过对比度检测（脚本、公式或参考表），包括图片与渐变上的文字（R-25）
• 所有交互组件边框与状态指示器相对背景达到 3:1（非文字对比度）
• 每个交互元素在所有主题下都有高对比、可见的焦点指示（R-32、R-34）
• 所有交互元素可用键盘到达与操作，弹窗可用 Escape 关闭，无裸奔的outline: none（R-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