📌 项目地址：ibelick/ui-skills | ⭐ 5,385 颗星 | 🔧 TypeScript | 📜 未标注
这个仓库里没有组件
先说清楚：ibelick/ui-skills 里没有 Button，没有 Modal，没有一个能复制进项目的 React 组件。5385 个 star 给的不是代码，是一种组织方式。
它做的事是把设计工程（design engineering）的经验打包成一个个 “skill”，让 AI 编码 agent 在写 UI 之前调用。Claude Skills 走通用路线，这个项目只做 UI 垂类。范围窄，换来内容聚焦。
分发渠道有三个：网站、CLI、MCP。
CLI：四条命令
README 给出的全部命令：
npx ui-skills start
npx ui-skills categories
npx ui-skills list --category motion
npx ui-skills get baseline-ui
工作流是线性的：categories 看分类，list --category motion 看某分类下的技能，get baseline-ui 拉取某个技能。start 启动一个浏览界面，README 没写内部细节，以实际运行为准。
motion 和 baseline-ui 是 README 里实际出现的名字，说明分类至少覆盖动效和基线规范。其他分类有哪些，我不猜，跑了 categories 就知道。全程 npx，不用全局安装，试一下成本接近零。
MCP：连命令都不用跑
README 给了一个 MCP 端点：
https://www.ui-skills.com/mcp
暴露两个工具：list_skills 和 get_skill，命名和 CLI 的 list/get 一一对应，能力等价。
把端点配成 MCP 服务器后，你在 Claude Desktop 或 Cline 里说“按 ui-skills 的 motion 规范写这个动画”，agent 自己去查、自己去拉。人的操作只剩配置那一次。
它解决什么问题
AI 生成 UI 的老毛病：语法对，判断缺。模型能写出语义化标签、编译通过的 CSS，但不知道输入框高度取多少合适、按钮点击后给什么反馈、表单报错放哪里。
这些知识一直存在，散落在各公司的设计系统文档里。问题是 agent 写代码时读不到。ui-skills 把它们结构化成可安装模块，在 agent 干活前注入上下文。
对比一下：在 system prompt 里手写几千字设计规范，或者跑一条 npx ui-skills get baseline-ui。后者可维护、可复用，团队每个人拿到同一份规范。MCP 方式连命令都省了。
Playbook
README 提到一个 playbook 页面：ui-skills.com/playbook，是从技能库提炼的 UI 经验总结。你不用 AI agent，单看这份提炼也有价值。具体内容 README 没展开，自己去看。
我的判断
让 AI 产出更好的 UI 有两条路。一是堆参数，等模型自己学会审美；二是把领域知识结构化，推理时喂给模型。ui-skills 选了第二条。成本低、见效快，内容可以由社区持续迭代。
这类项目的价值随技能库质量增长——工具只是壳，壳里装的东西才决定它好不好用。MIT 协议，如果你的日常是带 AI 写 UI，花十分钟接进工作流试试。