ux-ui-agent-skills：52 道客观闸门验收 Coding Agent 写出的界面

让 Coding Agent「把界面做好看」最大的问题是验收：它说自己做对了，你只能逐屏人肉检查。XIAS（ux-ui-agent-skills，MIT）的思路是把设计经验和验收都变成客观度量：给 Agent 喂设计 token（DTCG 标准 14 份）、26 个可运行技能、2,144 个设计系统（其中 2,087 个从真实网站实测提取）；然后由 52 道闸门检查它写出来的东西——34 道会打开真实浏览器实测：每种交互状态下的 WCAG 对比度、axe 的 role 与 landmark、键盘可达性、触控目标尺寸、280px 宽无横向溢出、reduced motion。README 的自我概括很准：「检查它建了什么，而不是听它说什么」。52 个组件规格、16 个框架适配器（React 19、Next.js 15、SwiftUI 6、Tailwind v4……），无构建工具无依赖，纯指令与知识层，Claude Code、Codex、Cursor、Copilot、Gemini CLI 都能用。项目最新版 v3.0.0（2026 年 10 月 26 日发布），3,052 Star，56 个过闸页面在演示站可查。

核心功能

• 设计系统知识层：2,144 个设计系统多数是从真实站点量出来的（间距、字号、色板），Agent 不再凭训练记忆「猜」品牌感。
• 52 道客观闸门：34 道开真浏览器跑 axe、对比度、键盘、目标尺寸等实测，不过就挂构建——伪成功没有生存空间。
• 26 个可运行技能：从建 token 到组件规格到可访问性审计，覆盖设计到验收全流程，任何框架、任何设计系统。
• 零依赖纯知识层：没有构建工具没有运行时，装进 Claude Code/Codex/Cursor 即用；16 个框架适配器管代码生成风格。

典型使用场景

• Agent 写前端的质量底线：个人开发者用它把「Agent 生成的页面」拉到可交付水准，而不是每屏手修。
• 设计系统落地监督：团队有 design system 但 Agent 代码总偏离，闸门按 token-by-intent 检查偏离即失败。
• 可访问性例行把关：WCAG 2.2 AA-AAA 相关检查内建在闸门里，合并前跑一遍替代人工抽查。

快速上手

克隆仓库后按所用 Agent 的技能安装方式装入（Claude Code 用户直接指向技能目录）；跑产出后执行闸门脚本，失败的闸门会给出去报告。演示站 plugin87.github.io/ux-ui-agent-skills 收了 56 个实过闸门的完整页面（二十个整产品屏、五个网站、全部组件 harness、双主题）可直接对照。

小结

ux-ui-agent-skills 适合用 Coding Agent 写前端又不想当人肉验收器的开发者：知识层给品味，闸门给底线，「fail the build instead of faking success」是它和一般提示词合集最大的区别。要诚实说三点：52 道闸门覆盖客观可度量项，视觉判断（布局是否优雅）仍靠人和少数启发式；34 道浏览器实测闸门跑一轮要时间，高频迭代下要注意只跑增量；项目一周内刚发 v3.0.0 大版本，文档与适配器还在快速变动。它与本站此前收录的各类 Claude 技能合集互补——那些管工程纪律，XIAS 管设计验收，两个都想上就先装这个再装别的。同类可对照 replica-skill（把「克隆一个应用」拆成十一个技能、同样用打分量化的思路）与 agent-skills（Addy Osmani 的工程纪律合集）。