XIAS · UX/UI Agent Skills
把 Claude 变成有 15 年以上经验的资深设计架构师，产出可被 52 道客观门禁验证的 DTCG 令牌、无障碍组件与生产级代码。
- Star 数
- ★ 2.3k
- 最近更新
- 8 天前
- License
- MIT
- 主语言
- JavaScript
- FA 评分
- 70/100 · 存在缺口
30 秒速览
- 运行形态
- 可在哪里用
- 兼容但需适配Claude CodeChatGPT · Codex（部分支持）
- 费用
- 软件免费，模型调用费用自付
- 上手难度
- 低 · 几分钟可跑通
- 开始前需要
- 典型场景
- 前端团队在 Claude Code 里开发一个 SaaS 后台，希望模型产出的按钮、表单、表格自带正确的明暗主题与焦点态，而不是每次重新配色。
- 不适合
- 不打算接入任何编码 Agent、只想手动设计的设计师
- 希望 PR 被上游合并的贡献者（上游明确不合并 PR）
- 源码审查
- 70/100 · 存在缺口
这个 Agent 能做什么，适合哪些场景？
这是一个面向编码 Agent 的设计知识与指令层，不是可导入的运行时库，没有构建工具和运行时依赖。仓库包含 25 个可调用技能、5 个斜杠命令、14 个 DTCG 令牌文件、52 份组件规格、138 套品牌级设计系统，以及 16 个框架适配器（React+Tailwind、Next.js、SwiftUI、Vue、Svelte、Angular、Solid、Web Components/Lit、React Native、Flutter、Jetpack Compose 等）。它通过 Claude Code 插件市场、AGENTS.md 文件、MCP 服务器、Homebrew 或 npx 五种方式落地，可写入任意项目。执行模型的关键在 scripts/ 与 tests/ 目录：52 道门禁中 34 道会启动真实浏览器，测量渲染后的 HTML 在明暗两种主题下的 WCAG 对比度、axe 角色与地标、键盘可操作性、点击目标尺寸、减少动效、280px 溢出、按意图使用令牌等，全部通过才输出 52/52，不接受部分得分。另有 /critique 以独立子 Agent 形式渲染成品、主动寻找驳回理由，以及 evals/ 冷启动评测套件，记录一个只拿到工具包和需求简报的 Agent 能产出什么。
在项目根目录生成 CLAUDE.md（或 AGENTS.md）、.claude/rules/ 规则目录、tokens/、components/、taste/、design-systems/ 等知识文件，模型读取后按规则工作。技能层提供 /design-tokens、/design-component、/design-code、/design-screen、/a11y-audit、/apply-aesthetic、/data-dashboard、/design-review、/token-build、/figma-integration、/ux-writing、/performance 等由模型按需加载的技能，以及 /brandkit、/governance、/image-to-code、/migrate-design-system、/prototype、/redesign、/gate、/critique、/grill-me、/ship、/scaffold-project 这些需要用户显式触发的技能。校验层由真实脚本构成：令牌与对比度校验、真实渲染 WCAG、状态感知 WCAG、axe-core、焦点陷阱、RTL、目标尺寸、键盘、减少动效、横向溢出、令牌意图（lint_intent.mjs）、框架源码意图（lint_intent_source.mjs）、React 源码 esbuild 编译后服务端渲染再跑浏览器门禁（render_framework_source.mjs）。一条命令汇总全部结果：node scripts/accuracy_report.mjs，必须 52/52 否则失败。MCP 服务 ux-ui-mcp 暴露六个工具：list_gates、run_gate、review_ui、get_doctrine、get_design_system、get_tokens，返回门禁原始输出与退出码（0 无问题、1 发现问题、2 无法检查，绝不当作通过）。最终产物是可直接使用的令牌 JSON 与组件代码，仓库本身不部署任何服务。
- 前端团队在 Claude Code 里开发一个 SaaS 后台，希望模型产出的按钮、表单、表格自带正确的明暗主题与焦点态，而不是每次重新配色。
- 企业设计系统负责人要把现有的品牌规范落成 DTCG 令牌，并用同一套规则约束多个产品线的前端代码。
- 需要满足 WCAG 2.2 AA 甚至 AAA 的政务、金融或医疗项目，希望在 CI 前就拿到对比度、目标尺寸、键盘与减少动效的失败明细。
- 使用 Cursor 或 Codex 的开发者，通过 npx ux-ui-agent-skills init --agent codex 写入 AGENTS.md，把设计规则和 52 道门禁带到非 Claude 的编辑器里。
- 数据产品团队要构建高密度仪表盘（多图表、表格排序、实时数值），用 /data-dashboard 技能生成内联 SVG 图表而不引入图表库。
- 设计评审场景：把构建结果交给 /critique，在独立上下文中得到带证据的驳回理由，而不只是通过门禁的绿色勾。
如何安装或部署这个 Agent？
推荐路径是 Claude Code 插件市场，两条命令即可在任何项目中启用全部技能：
/plugin marketplace add plugin87/ux-ui-agent-skills
/plugin install ux-ui-agent-skills@ux-ui-agent-skills非 Claude Code 编辑器使用 AGENTS.md 表面：
npx ux-ui-agent-skills init --agent codex # 写入 AGENTS.md
npx ux-ui-agent-skills init --agent both # 两种表面都写也可以只取部分区域或通过 Homebrew 安装：
npx ux-ui-agent-skills add tokens taste design-systems
brew install plugin87/tap/ux-ui-agent-skills
ux-ui-skills init要在 MCP 客户端中运行门禁：
claude mcp add ux-ui-gates -- npx -y --package=ux-ui-agent-skills ux-ui-mcp若希望浏览器类门禁真正执行，需要在仓库目录安装 Playwright 与 Chrome 通道：
npm install
npx playwright install chrome安装没有账号或 API 密钥要求；运行时需要 Node.js，仓库自身声明 dependencies 为空。
如何使用这个 Agent？
安装完成后打开项目，CLAUDE.md 会自动加载并激活动作角色，直接用自然语言提需求即可，对应技能会自动匹配：
"Design a notification component with all states and accessibility"
"Build the billing settings screen, one shared theme, light and dark"
"/grill-me"
"/gate"
"/critique"运行全部门禁并查看真实得分（必须全过，不允许部分得分）：
node scripts/accuracy_report.mjs单独运行某个渲染类门禁时，若未安装浏览器，脚本会打印 SKIPPED 并以退出码 0 结束，需要显式声明必须使用浏览器：
DS_REQUIRE_BROWSER=1 node scripts/<gate>.mjs通过 MCP 客户端调用六个工具（先读 doctrine 与 tokens，再对产物跑门禁）：
list_gates
run_gate
review_ui
get_doctrine
get_design_system
get_tokens只想先看效果、不安装任何东西：
npx ux-ui-agent-skills demo冷启动评测使用：
node evals/run.mjs <brief-id>
node evals/score_critic.mjs这个 Agent 有哪些优点和局限？
- 52 道客观门禁全部有对应的真实脚本，其中 34 道启动真实浏览器测量渲染结果，结果不可自报，只接受 52/52。
- 令牌遵循 W3C DTCG 格式，采用 Primitive → Semantic → Component 三层架构，可与 Material 3、Apple HIG、Fluent、Carbon、shadcn/ui 等按角色映射互转。
- 框架无关：16 个适配器覆盖 React、Next.js、SwiftUI、Vue、Svelte、Angular、Solid、Web Components/Lit、React Native、Flutter、Jetpack Compose 等，也可按需生成新适配器。
- 同时支持 Claude Code 插件与 AGENTS.md 表面，非 Claude 编辑器也能复用同一套规则与全部门禁。
- 内置 138 套品牌级设计系统与反平庸（anti-slop）教义，用于避免模型默认的渐变、等宽卡片和 emoji 图标。
- 采用 MIT 许可，无运行时依赖，安装后不向代码仓库注入构建产物。
- 浏览器类门禁需要单独安装 Playwright 与真实 Chrome 通道，未安装时 34 道显示 REQUIRED, FAILING，单跑则显示 SKIPPED 并返回退出码 0，容易被误读为通过。
- AGENTS.md 表面没有钩子机制，规则只是请求，门禁需手动运行；只有 Claude Code 能强制拦截硬编码值和 emoji。
- 上游明确不合并 Pull Request，所有代码由维护者单人编写，贡献者只能提交门禁缺口、复现或提案。
- 框架源码校验不完整：.vue 与 .swift 目前仅做文件级检查，未经渲染测量，不包含在 52/52 的证明范围内。
- 令牌意图类检查只验证声明，不验证颜色，例如 variant=\"destructive\" 指向蓝色令牌仍可通过文件级检查。
- 项目自述仍存在未经测量的数字（作者记录中曾出现 35/16 与 34/18 的口径差异），说明部分文档陈述依赖后续元测试保证一致。
这个 Agent 与同类方案有什么区别？
仓库自身把两条路径并列给出：Claude Code 插件与开放的 AGENTS.md 表面（可用于 Codex、Cursor、Copilot、Jules、Aider、VS Code 等约二十种工具）。区别被明确写出——两者共享令牌、组件、美学、无障碍、138 套设计系统和全部 52 道门禁，但 Claude Code 独有按需加载的 25 个技能、写入时强制执行的钩子，以及运行在独立上下文中的 /critique；AGENTS.md 表面则把教义内联，规则依赖执行者遵守。仓库同时以正确性（accuracy_report.mjs 的 N/N）与质量（/critique 的主观判定）对照，强调门禁通过不代表有品味。
与相关度最高的同类 agent 并排比较关键指标。
| Agent | 源码审查 | 形态 / 费用 | Star | 最近更新 | 主语言 | 完整支持的平台 |
|---|---|---|---|---|---|---|
| XIAS · UX/UI Agent Skills 当前 | 70 · 存在缺口 | Agent 插件 / 技能免费 + 模型费 | ★ 2.3k | 8 天前 | JavaScript | Claude Code |
| DESIGN.md 设计规范 | 80 · 表现良好 | 命令行工具免费 | ★ 28k | 2 天前 | TypeScript | — |
| Appllama 移动应用设计技能 | 50 · 缺口较多 | Agent 插件 / 技能免费版 + 付费版 | ★ 2.9k | 1 个月前 | — | Codex · Claude Code |
| Stitch 设计技能库 | 0 · 缺口较多 | Agent 插件 / 技能免费 + 模型费 | ★ 8.5k | 2 个月前 | TypeScript | ChatGPT · Codex · Claude Code |
FollowAgents 如何评估这个 Agent？
查看各维度的扣分理由
证据显示：CLI 提供 --dry 预览与 --force 覆盖开关，安装路径（plugin/npx/brew/MCP）均需用户显式发起，MCP 工具只读 doctrine/tokens 并运行本地 gate，未发现凭据读取或外发行为；CI 权限收敛为 contents: read，pages 仅 pages: write + id-token: write。扣分点：README 未说明 agent 在用户项目内写入/覆盖文件时的确认流程，也未描述任何数据流（是否上传代码、是否联网），敏感数据处理完全未提及；回滚仅靠 --force 覆盖与 git，无卸载/还原说明；依赖为 devDependencies（playwright/esbuild/react），无锁文件证据，无法确认版本固定。
证据显示：失败信息设计明确——gate 退出码 0/1/2 区分“通过/发现问题/无法检查”，且明确禁止把 SKIPPED 当绿色，accuracy_report 要求 52/52 否则失败；CI 有 meta-gates 用负样本证明 gate 仍能失败。扣分点：README 自述 34/52 需浏览器、无浏览器时 34 项报 REQUIRED, FAILING，说明默认环境无法给出完整结论；依赖可用性依赖 npm/Playwright/Chrome 安装，未提供离线或降级路径；自洽性方面 README 内部数字（52 gates、34 浏览器、25 skills、19 skills、138 design systems）在不同段落表述略有出入，虽自称由 counts.test.mjs 派生，但静态无法验证。
证据显示：面向 Claude Code、Codex、Cursor、Copilot、Aider、MCP 多宿主，提供 AGENTS.md 与 CLAUDE.md 双表面，覆盖 React/Vue/Svelte/SwiftUI/Flutter 等多框架适配器，场景从 token 生成到 a11y 审计、UX 写作、动效均有对应 skill。扣分点：能力边界主要靠 README 自述，未在可见文件中给出“不做什么”的明确清单；触发精度依赖 skill 的 invocation/disable-model-invocation 字段，README 自承曾用错字段导致误触发，说明触发机制历史上不可靠；环境适配要求 Node>=20 与 Python3，且 34 项 gate 需真实 Chrome，环境门槛未在快速开始中充分前置。
证据显示：安装文档详尽（docs/INSTALL.md 五种路径、Homebrew、npx、MCP、plugin），示例与 FAQ 丰富（示例提示词、live demo、截图、before/after 对比），已知局限写得非常直白（哪些是文件检查、哪些是渲染检查、.vue/.swift 尚未渲染验证），MIT 许可证完整且与 package.json 一致，版本号 2.9.8 与 CHANGELOG 链接存在。扣分点：维护责任仅署个人作者名，无治理/响应时限/支持渠道说明，发布者身份未经验证；命名稳定性方面 skill 名称与命令在历史上有过迁移（命令改 skill），存在重命名风险；信息架构庞大（138 设计系统、52 组件、25 skill），可见文件未给出完整目录树，导航成本高。
证据显示：输出可用性有具体支撑——DTCG token、组件规格、可运行 gate、可点击 live demo 与截图，产物可直接用于项目；边际价值在于把“设计品味”转成可执行 gate 与对抗式 critic，并诚实区分“正确性可测、质量不可测”。扣分点：核心价值高度依赖宿主 agent 与浏览器环境，脱离 Claude Code/Playwright 时价值显著下降；成本方面 34 项 gate 需安装 Chrome 与 Playwright，CI 需完整 npm install，对轻量使用场景成本偏高；未提供与既有设计系统/组件库的量化对比，边际价值部分为自述。
证据显示：事实与推断分离做得很好——明确区分“测量得到的正确性”与“判断得到的好坏”，明确标注哪些数字由脚本派生、哪些尚未验证（.vue/.swift 未渲染），并公开承认曾写错数字（35/16 改为 34/18）。扣分点：claim_traceability 方面，README 中大量数字（52 gates、138 设计系统、25 skills、14 token 文件、16 适配器）在可见文件中无法逐一核对到具体文件；cross_source_corroboration 仅能靠 README、package.json、CI 三处互证部分数字，其余无独立来源；静态审查无法执行 accuracy_report 或 evals，故所有“已通过”声明均不可独立复核。
- README 中的 52/52 gate、138 设计系统、25 skills 等数字在可见文件中无法逐一核对，静态审查不能替代实际运行 accuracy_report.mjs 或 evals。
- 34 项 gate 依赖真实 Chrome 与 Playwright，未安装时报告 REQUIRED, FAILING；单独运行会打印 SKIPPED 并退出 0，切勿把 SKIPPED 当作通过。
- 安装/初始化会向用户项目写入 CLAUDE.md、.claude/ 等文件，README 未说明覆盖前的确认流程，建议先使用 --dry 预览并保留版本控制以便回滚。
- 发布者身份未经验证，维护责任仅署个人作者，无支持渠道或响应时限说明，长期维护与更新路径存在不确定性。
- 依赖为 devDependencies 且未见锁文件证据，Playwright/esbuild/React 的版本固定与供应链风险需自行评估。
- README 未描述任何数据流或敏感数据处理策略，若在含敏感代码的仓库中使用，应先确认 agent 是否联网或外发内容。
最近版本
来自该项目 GitHub Releases 的最新发布记录，说明为上游原文摘录，未经本站改写或测试。
-
发布说明摘录
**The Stop hook can no longer block you over another project's files, even if its ledger is wrong.** 2.9.7 fixed how the ledger is named; this release makes the outcome independent of the ledger being right. - The Stop hook names only files inside the current project. A ledger holding another repository's paths, for any reason, cannot block here. - With no session id the hooks record nothing and block nothing. The shared local fallback name, the root of the cross-session leak, is gone. - SessionStart deletes the shared ledgers left by 2.9.6 and earlier …在 GitHub 查看 ↗ -
发布说明摘录
The Stop hook no longer blocks you over files you did not edit. The hooks keyed their edit ledger on CLAUDE_SESSION_ID, which never reaches a hook process. Every session fell back to local, so every session wrote to one ledger. In 2.9.5 that ledger was shared by every project on the machine too, and a session was blocked over five files edited in two other repositories. 2.9.6 scoped the ledger per project; this release scopes it per session as well, using the session_id Claude Code passes to every hook on stdin. If you hit this on 2.9.5 or 2.9.6, the stale ledger can be removed: …在 GitHub 查看 ↗ -
发布说明摘录
The kit is an MCP server now. Any MCP client can run its gates, not just read its doctrine. ```bash claude mcp add ux-ui-gates -- npx -y --package=ux-ui-agent-skills ux-ui-mcp ``` Six tools: list_gates, run_gate, review_ui for measuring, and get_doctrine, get_design_system, get_tokens for the rules and the source to build from. Doctrine before generating, review after. AGENTS.md already let Codex, Cursor and Copilot read the doctrine. This lets any client run the 52 gates, which reading cannot do. Plenty of things …在 GitHub 查看 ↗