UX/UI Agent Skills（XIAS）

UX/UI Agent Skills（又叫 XIAS）是 Thientan Soparat（GitHub 用户 plugin87）开源的界面设计工具包。README 说它给 AI 编程助手配上一套设计规则、设计令牌（design token）、可运行的 Skill 和 138 套参考设计系统，生成的界面可以落到 React、Vue、SwiftUI、Flutter 等各种框架。作为 Claude Code 插件安装后有 25 个 Skill，本站只推荐本地设计和校验这部分：design-screen 做整页界面；design-component 按原子设计（Atomic Design）给组件写出结构、变体、各种状态和无障碍要求；design-tokens 生成三层结构的 DTCG 格式令牌；design-code 把设计转成指定框架的代码；a11y-audit 按 WCAG 2.2 做无障碍审计；ux-writing 写报错、空状态这类界面文案；/gate 跑完全部 52 项自动检查；/critique 交给一个专门挑毛病的设计评审。检查项包括真实渲染下亮暗两种主题、悬停和聚焦状态的文字对比度，axe 无障碍检测、键盘操作、点击区域大小、减少动态效果、280 像素宽度下不横向溢出，还会查“删除”这类危险按钮有没有用警示色。它特别的地方在于把“对不对”和“好不好”分开处理：能量化的交给检查脚本，结果只有通过和不通过；审美交给 /critique，它在独立的上下文里看截图、点每个按钮，看不到做设计时的对话，默认站在“打回重做”的一边找理由。

适合谁：用 AI 编程工具做网页或应用界面、在意无障碍和设计一致性的产品设计师和前端开发者。需要会用 Claude Code、Codex 这类能执行命令的工具，完全不碰命令行的读者上手会比较吃力。

使用前提：README 推荐在 Claude Code 里用 /plugin 安装，会装上 25 个 Skill、一个设计评审代理和 3 个 Hook，Hook 会在每次写文件时检查有没有写死的数值和 emoji，改过界面却一项检查都没跑时不让会话结束。Codex、Cursor 等工具用 npx ux-ui-agent-skills init --agent codex 把 AGENTS.md 和整套文件写进项目，加 --force 会覆盖已有文件，可以先用 --dry 预览；Hook 只在 Claude Code 里生效。52 项检查里有 34 项要打开真实浏览器，需要你自己在工具包目录装 Playwright 和 Chrome；没装时单独运行的检查会显示 SKIPPED 并正常退出，这不代表通过。检查脚本要用 Node 和 Python。README 自己也说，通过检查只代表正确，不代表好看。scaffold-project 会生成一个新项目模板，模板里预先配了 Figma 和 Notion 的第三方 MCP 服务器（要你提供 FIGMA_API_KEY、NOTION_API_KEY），共享权限设置里还预先放行了所有 npm run 开头的命令，这比只读检查的范围宽，本站没有核查推荐。figma-integration 能把令牌和组件推送到 Figma，在 Figma 和代码之间双向同步，会往你的 Figma 账号里写内容，而且它是 AI 会自己调用的 Skill 之一，本站没有核查推荐；不需要 Figma 同步的话，不要连接 Figma 的 MCP。138 套设计系统是参考资料，里面涉及的品牌标志和字体，使用权要自己确认。MIT 许可。

以上根据项目公开说明整理，本站没有实际测试。