ux-ui-agent-skills

让 AI 按设计系统出稿，不合格直接构建失败

开源 unknown 设计创意

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 1585

维护状态活跃

是否开源是

定价模式 unknown

项目预览

项目数据

分类设计创意

开发团队plugin87

所属国家

官网地址https://plugin87.github.io/ux-ui-agent-skills

GitHubhttps://github.com/plugin87/ux-ui-agent-skills

定价模式unknown

价格说明定价信息待确认

访问状态

是否开源是

开源协议MIT

主要语言JavaScript

技术栈/模型accessibility,ai-agents,claude,claude-code,claude-skills,component-library,design-system,design-to-code,design-tokens,dtcg,figma,react,tailwindcss,ui,ux,wcag

GitHub 星标★ 1585

30天Star增速

HF 下载量

上线时间2026-03-16 00:00:00

代码更新—

仓库体积—

本站数据更新—

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-10-13

浏览次数0

项目介绍

ux-ui-agent-skills 是一套面向 Claude Code 等 AI 编程代理的设计技能包，把通用大模型变成具备资深设计架构师能力的助手。它解决的核心问题是：AI 生成界面时往往缺乏设计系统约束，产出样式随意、可访问性差、无法落地。项目内置 DTCG 设计令牌规范、52 个组件模板、138 套设计系统参考，并强制遵循 WCAG 2.2 AA-AAA 无障碍标准，可输出适配任意前端框架的代码。最特别的是它设置了 50 道客观质量门禁，检查不通过就直接让构建失败，而不是假装成功，从而保证 AI 交付的 UI 真正可用、可维护、可交付。适合需要把设计规范与 AI 生成代码打通的前端与设计工程团队。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

正在加载星标数据…

技术标签

使用教程

—

难度：入门约 5 分钟部署方式：命令行工具 6 步

环境要求

能运行 npx 的 Node.js 环境（npx 安装方式）
Claude Code 或任意 Claude 驱动的 IDE（用于加载技能工作）
Homebrew（仅选择 Homebrew 安装方式时需要）

安装与启动步骤

1选择安装方式

README 提供 Claude Code 插件、Homebrew、npx 三种方式；不确定时先看 docs/INSTALL.md 对比各自的取舍。
2Claude Code 插件安装

推荐方式。在 Claude Code 会话里执行两行斜杠命令，技能与命令对所有项目全局可用，不往仓库拷文件。
```
/plugin marketplace add plugin87/ux-ui-agent-skills
/plugin install ux-ui-agent-skills@ux-ui-agent-skills
```
3先看不安装的演示

想先看效果可不安装：该命令会复制渲染好的示例并打开浏览器，之后直接删除文件夹即可。
```
npx ux-ui-agent-skills demo
```
4npx 初始化到项目

把完整技能包放进当前目录，生成 CLAUDE.md 与 .claude/ 下的技能、规则、钩子；无需克隆仓库。
```
npx ux-ui-agent-skills init
```
5按需只装部分模块

只需设计令牌、审美、设计系统等部分内容时用 add 指定区域；list 可查看全部可用区域。
```
npx ux-ui-agent-skills add tokens taste design-systems
npx ux-ui-agent-skills list
```
6Homebrew 方式安装

与 npx 同源同一 npm 包，仅安装渠道不同。init 写入 CLAUDE.md，--agent codex 则写 AGENTS.md。
```
brew install plugin87/tap/ux-ui-agent-skills
ux-ui-skills init
ux-ui-skills init --agent codex
```

关键配置

配置项	必填	说明	示例
`CLAUDE.md`	是	init 生成的入口文件，被自动加载以激活设计代理人格	`ux-ui-skills init 生成`
`AGENTS.md`	否	给 Codex、Cursor、Copilot、Aider 等代理使用的替代入口	`ux-ui-skills init --agent codex`
`--force`	否	安装时覆盖已存在的文件	`npx ux-ui-agent-skills init --force`
`--dry`	否	仅预览将要写入的内容，不做任何改动	`npx ux-ui-agent-skills init --dry`

如何确认成功

在 Claude Code 执行 claude plugin details ux-ui-agent-skills 查看已加载技能；技能未立即出现就新开一个会话。

常见问题

Q：安装后技能没有立刻出现怎么办？

A：开启一个新的 Claude Code 会话即可；用 claude plugin details ux-ui-agent-skills 可查看实际已加载的技能清单与 token 开销。

Q：不想往项目里写任何文件能试用吗？

A：可以。运行 npx ux-ui-agent-skills demo 只复制渲染好的示例并打开，不安装任何东西，用完删掉文件夹即可。

Q：安装时提示文件已存在怎么办？

A：加 --force 覆盖已有文件；如果只想先看会改什么，加 --dry 预览而不实际写入。

Q：我用的是 Codex 或 Cursor 而不是 Claude Code？

A：改用 ux-ui-skills init --agent codex，它会写 AGENTS.md，且不会生成 CLAUDE.md 或 .claude/ 目录。

Q：如何更新或卸载？

A：插件方式用 claude plugin update 与 claude plugin uninstall ux-ui-agent-skills；如需移除市场源再加 claude plugin marketplace remove。

注意事项

当前版本 v2.9.8，项目无构建工具、依赖或运行时，纯指令与知识层，不会引入额外服务。
插件方式安装的技能对所有项目全局可用；npx/Homebrew 方式则是把文件写入当前项目。
MCP server 也在 README 引用的 docs/INSTALL.md 中介绍，但本文未给出其具体安装命令。
README 提到 52 道质量门禁与 /gate 命令，可用 /gate 跑全部检查并报告真实通过数。

核心亮点

内置 50 道客观质量门禁，不达标即构建失败，避免 AI 糊弄式产出
覆盖 DTCG 令牌、52 组件、138 设计系统，规范体系完整
强制 WCAG 2.2 AA-AAA 无障碍标准，产出可直接用于合规场景

不足之处

强依赖 Claude Code 生态，换用其他 AI 代理时可用性下降
质量门禁较严格，可能增加前期配置与调试成本

适用场景

用 AI 快速生成符合公司设计系统的前端组件
为无障碍合规要求高的产品批量产出可访问界面
把 Figma 设计令牌转成多框架可复用代码

替代项目

shadcn-ui、storybook

上一篇：anatomy

下一篇：没有了！