给你的 agent 配一位设计架构师：XIAS 的 52 道门禁与 26 个 Skill

AI 生成的界面总是滑向同一套 slop：靛紫渐变、四张一模一样的统计卡片、本该放图标的地方放着 emoji。3k star 的 plugin87/ux-ui-agent-skills 仓库——又名 XIAS——用结构对抗这件事：一个纯指令与知识层（无构建工具、无依赖、无运行时），把 Claude 变成设计架构师，再用 52 道客观门禁度量它的产出。

为什么这个 Skill 重要

XIAS 的全面程度不是一般风格指南能比的。它产出三层架构（Primitive → Semantic → Component）的 DTCG 格式设计 token；从原子到模板设计组件，带解剖结构、变体、状态和无障碍规格；通过适配器协议面向任何框架——React + Tailwind、Next.js、SwiftUI、Vue、Svelte、Angular、Solid、Web Components/Lit、React Native、Flutter、Jetpack Compose、原生 CSS、CSS-in-JS——也能按需生成新适配器。它还能经由基于角色的对照表与既有设计系统互转（Material 3、Apple HIG、Fluent、Carbon、shadcn/ui、Radix）。

把它和一纸 doctrine（设计准则文档）区分开的是可运行层：26 个 skill（14 个由模型自行调用，12 个由你手动启动），外加一组脚本，运行真实渲染与状态感知的 WCAG 对比度门禁、axe-core 无障碍检查、focus-trap、RTL、目标尺寸、键盘、减弱动效、溢出、按意图查 token，以及品味与 slop 审计。

安装

推荐的路径是装成 Claude Code 插件——不向你的仓库拷贝任何文件：

/plugin marketplace add plugin87/ux-ui-agent-skills
/plugin install ux-ui-agent-skills@ux-ui-agent-skills

装完你会得到全部 26 个 skill 和 design-critic agent。想把整套 kit 放进某个项目，用 npx：

npx ux-ui-agent-skills init

npx ux-ui-agent-skills add tokens taste design-systems 只装部分领域，list 列出全部，--force/--dry 控制覆盖与预览。面向 Codex、Cursor、Copilot、Aider 等基于 AGENTS.md 的工具：npx ux-ui-agent-skills init --agent codex（或 --agent both 同时要两个表面）。另有 Homebrew 公式和 MCP 服务器（claude mcp add ux-ui-gates -- npx -y --package=ux-ui-agent-skills ux-ui-mcp，六个工具，含 run_gate 与 review_ui）——安装指南（docs/INSTALL.md）逐一说明了每个选项装什么、放弃什么。

实战：设计一个组件，然后跑门禁

像平常一样描述工作，对应的 skill 会自行加载：

Design a notification component with all states and accessibility

这句话会进入 design-screen/design-component 的领地；README 里文档化的其他提示词从「Review this login page against WCAG 2.2 and Nielsen's heuristics」到「Spec the motion for the modal open/close with reduced-motion fallback」不等。

然后是度量。/gate 跑全部 52 项检查并报告真实的 N/N；它背后是 node scripts/accuracy_report.mjs，要么 52/52，要么失败——没有部分得分。52 道中有 34 道要打开真实浏览器，而插件安装不会拉起 Playwright，所以在 kit 目录里执行一次：

npm install
npx playwright install chrome

没有浏览器时，那 34 道在报告脚本下会如实报 REQUIRED, FAILING；单独运行则打印 SKIPPED 并以退出码 0 结束——所以如果你看退出码，给任何单个渲染门禁加上 DS_REQUIRE_BROWSER=1 前缀。

正确性不等于品味，kit 自己也把话挑明：/critique 把渲染出来的作品交给一个对抗性的 design-critic，它以 fork 子 agent 的身份运行——看不到产出作品的那段对话——点遍每个控件，逐条给出证据并论证应当打回。

技巧

• 如果装完后 skill 没有立刻出现，开一个新会话；claude plugin details ux-ui-agent-skills 会列出清单和每个 skill 的 token 开销。
• 分清什么能跨过工具边界：在 AGENTS.md 表面（Codex、Cursor、Copilot、Jules、Aider、VS Code 以及约二十个其他工具）上，token、全部 52 道门禁和 doctrine 都能迁移——但 26 个按需加载的 skill 不能（doctrine 改为内联），hooks 也不存在。
• hooks 是 Claude Code 侧的真正差异：三条规则不经过模型选择就会触发——每次写入禁止硬编码值和 emoji，编辑过 UI 却一次都没度量的会话会被拒绝结束。
• /observe 报告 agent 是否真的遵守了规则：编辑并度量了哪些页面、Stop hook 拦截记录、遗留未处理的发现。所有数据都留在本机，DS_OBSERVE=0 可以关掉。

何时不用这个 Skill

渲染门禁需要真实 Chrome；如果你的环境跑不了，52 道检查中有 34 道无法度量。框架覆盖也有明说的边界——.vue 和 .swift 源码只做文件级检查，README 明确说它们在「被渲染并度量之前」不能被这个数字证明。另外贡献预期与多数仓库相反：这里不合并 PR；维护者亲自写每一行，只收门禁缺口、复现和提案——想改就按 MIT fork，这才是受支持的路径。

查看 排行榜 了解更多 skill。