github.com·2026/10/20·plugin87
UX/UI Agent Skills(XIAS) 是一套无构建依赖的纯指令与知识层设计系统,把 Claude 等编码代理变成可产出 token 驱动、无障碍、符合任意框架和设计系统的 UI 的高级设计架构师。它内置 DTCG 三层 token、原子到模板组件规范、WCAG 2.2 AA/AAA 审计、52 个客观门禁,其中 34 个开真实浏览器测渲染 HTML,并收录 138 个设计系统与反 slop 品味库;首选 Claude Code 插件安装可获得 26 个可加载技能与 design-critic,也可经 MCP、Homebrew 或 npx init 部署,AGENTS.md 让 Codex、Cursor 等读取规则但无强制 hooks。作者报告冷启动 subagent 在无引导下独立运行 evals/run.mjs 均得 14/14,盲测同时暴露多处缺陷并转化为新门禁,/critique 对通过全部门禁的页面仍会判返工;局限是 .vue、.swift 仅做文件检查而未渲染验证。
为什么重要 提供可复现的 UI 质量门与冷启动盲测记录,适合做智能体能力评估与设计系统工具链;但 34/52 门需本地 Chrome,否则只报 FAILING/SKIPPED。适合 适合做智能体 UI 能力评测、设计系统工具链和前端 agent 质量门的工程师。
客观门总数
浏览器渲染
文件读取
实时演示页
注释 · 34 道渲染门依赖 Playwright 与 Chrome channel,否则在 accuracy_report 中报告 REQUIRED, FAILING。出自 README·Proving It
独立盲测
暴露缺陷
critic 发现
Major 级
注释 · 盲测输出未编辑,存储在 evals/out/;暴露的缺陷用于修补 kit 而非修改实验。出自 README·It was run blind
tokens/组件/可访问性深度规则
26 个可运行技能声明
138 套设计系统
冷启动盲测与批判评分
渲染示例与演示页来源
MCP server 实现
52 道门与验证构建脚本
产品设计模板
/plugin marketplace add plugin87/ux-ui-agent-skills/plugin install ux-ui-agent-skills@ux-ui-agent-skills
$ claude mcp add ux-ui-gates -- npx -y --package=ux-ui-agent-skills ux-ui-mcp
$ npx ux-ui-agent-skills init
$ brew install plugin87/tap/ux-ui-agent-skills
$ npm installnpx playwright install chrome
$ node scripts/accuracy_report.mjs

将 Claude 变成一名高级设计架构师:DTCG tokens、52 个组件、WCAG 2.2 AA-AAA、138 个设计系统、任意框架代码,以及 50 个客观门槛,这些门槛会让构建失败,而不是伪造成功。
Turn Claude into a senior design architect: DTCG tokens, 52 components, WCAG 2.2 AA-AAA, 138 design systems, any-framework code, and 50 objective gates that fail the build instead of faking success.
EVIDENCE / METHODS
表格
左侧坏屏在 REAL-render WCAG 命中 1.00:1,目标尺寸 15.3x16 小于 24x24。
| 检查门 | 坏屏实测 | 要求 |
|---|---|---|
| REAL-render WCAG | 1.00:1 | need 3 |
| State-aware WCAG | 1.00:1 | need 4.5 |
| Target size | 15.3x16 | min 24x24 |
| Responsive | overflow +820px | — |
| Token by intent | hue 239deg | not a danger colour |
注释 · 这些数字来自 README 中 gates 对 tests/fixtures/bad/slop-screen.html 的判定表。出自 README·What the gates catch