病灶:不缺功能,缺规矩
Agent 写前端的短板不在"能不能跑通",而在产出的观感:紫渐变、大圆角、到处发光,间距松一截、字号乱跳——功能都对,味道不对。根因是 Agent 上下文里只有任务,没有设计师与工程师多年积累的那套"口口相传的规矩"。
ui-skills 的思路是把这些规矩拆成一条条 SKILL.md,让 Agent 在需要时按需取用。仓库介绍只有一行:Skills for Design Engineers。官网技能目录当前收录 269 个面向设计工程与前端团队的 skill,antfu、emilkowalski、shadcn、Anthropic 等作者也有贡献。
机制:渐进加载,不塞满上下文
skill 初始阶段只对外暴露 name 和 description。Agent 根据这两样把任务匹配到合适的 skill,匹配成功后才把完整说明读进上下文——免得一上来就塞满无关规则。这是它和"一大坨系统提示词"最大的区别。
负责筛选的是 ui-skills-root:先判断任务是否与 UI 相关,再按主题、技术栈和意图挑 skill,规则写得很明确——优先只加载 1 条,最多不超过 3 条。
任务进入
Agent 接到请求,先判断是否与 UI 相关;不相关则一条都不加载。
start 路由
ui-skills-root 按主题、技术栈、意图,从目录里筛出候选。
选 1–3 条
优先只 1 条,上限 3 条;拿不准先看分类再定点取。
get 全文
按 slug 把选中 skill 的完整说明读进上下文,开始干活。
拿不准选哪条:先 npx ui-skills categories 看分类,list --category <x> 看清单,再 get <slug>。
不走 CLI 也可以走 MCP
MCP 地址 https://www.ui-skills.com/mcp,工具只有两个:list_skills 和 get_skill——与 CLI 的路由逻辑一一对应,任何支持 MCP 的 Agent 都能接。
上手:四条命令 + 一键安装
| 命令 | 作用 |
|---|---|
| npx ui-skills start | 走路由层:判断是否 UI 相关,按主题 / 技术栈 / 意图选 1–3 条 skill |
| npx ui-skills categories | 列出全部分类,拿不准选哪条时先看这里 |
| npx ui-skills list --category motion | 看某个分类下有哪些 skill |
| npx ui-skills get baseline-ui | 按 slug 取指定 skill 的完整说明 |
官方包管理器一键安装(装进项目后 Agent 自动可见):
$ npx skills add ibelick/ui-skills
截至原文成文,skills.sh 已列出该项目 8 个 skill,总安装量约 7.9 万。
官方最常碰到的六条
下面六条是文章重点介绍的官方技能。卡片默认收起——只有名字和一句话简介,点开才展开细则,和 Agent 的加载方式一样。
baseline-ui 快速清理:把间距、层级、排版、小布局问题一次性过检,带强制规则。 清理
最常碰到的一条,适合"功能写完了、味道不对"的存量页面。它带不少强制规则,例如:
- 视口高度用
h-screen - 一律换成 h-dvh
- 交互动画超过 200ms
- 默认使用紫渐变、发光特效
fixing-accessibility 查 ARIA、键盘操作、焦点管理和对比度。 无障碍
表单、对话框、可交互控件非常适用——这些地方恰恰是 Agent 最容易漏掉键盘路径和焦点管理的地方。
fixing-motion-performance 盯动画卡顿:布局抖动、合成层属性、滚动联动、大面积模糊。 动效性能
这四类问题都会进审查范围;页面"看起来炫但滚动掉帧"时先用它。
fixing-metadata 补 title、Open Graph、canonical、JSON-LD。 元信息
页面要上线、要在聊天里出分享预览卡片时很实用——这类事 Agent 默认不会主动做。
improve-ui 审计并写交接计划,不会动你仓库中的源码。 审计
只出报告和改法清单、不改代码,适合先拿审计结果再决定要不要动手。
create-design-md 从某个 GitHub 仓库或公开网站反推一份设计文档 DESIGN.md。 设计文档
拿到这份 DESIGN.md,就可以照着复刻出同款网站——逆向设计系统的快捷方式。
目录、贡献者与 Playbook
目录怎么翻
官网目录里能看到 antfu、emilkowalski、shadcn、Anthropic 等作者贡献的 skill,按四个主题筛:
Accessibility · Motion · Craft · Taste
Playbook:塞进检查清单的短条目
- aspect-ratio给图片预留宽高比,加载时不抖版
- text-balance标题换行更均匀,避免孤字
- 44px触控目标尽量做到 44px,手指点得准
内容都很短,正好适合塞进 Agent 的检查清单。
边界:它管规范,不管决策
把它当"规矩库",别当"设计师"
- 解决 Agent 的上下文与规范问题:该加载什么规矩、加载多少、什么时候加载。
- 不能帮你直接生成整套视觉系统——色板、品牌、构图还得自己定。
- 更不可能决策你的业务交互对不对——那仍是人的活。
如果你的日常工作大量用 AI Coding 开发 UI,又总觉得效率不理想、"AI 味"太重,ibelick/ui-skills 值得一试。