9.3k Star，有人把 331 套顶级 UI 设计 Skill 做成了合集

阅读全文

⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处 http://www.iocoder.cn/Fight/ui-skills-design-engineers/ 「芋道源码」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表

RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址

您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。

新的源码解析文章实时收到通知。每周更新一篇左右。

认真的源码交流微信群。

它补的是 AI 缺的那门课

让 AI 帮忙写页面，写多了会发现一个规律。功能基本都对，样式也确实写了，但界面放在一起就是不对劲，圆角和阴影各写各的，一个页面里挤着好几种强调色，动效要么完全没有，要么多到晃眼。

靠一句「写得好看点」是解决不掉的。AI 写 CSS 本身没什么问题，它缺的是设计上的判断，比如颜色用到什么程度该停，间距哪里该松哪里该紧。

ui-skills 官网首屏，CLI 与 MCP 两张入口卡

ui-skills 就是冲着这件事来的。它给自己的定位是设计工程师的技能库，技能就是一份份写好的 SKILL.md，装着某个方向的设计规则和经验。Claude Code、Cursor、Codex 这类助手都支持加载技能文件，装好之后说一句话，它会先去读对应的技能，再按里面的约束写代码。仓库现在九千多 Star，MIT 协议。

ui-skills 仓库首页实时截图，Star 数可见

现在的目录长什么样

规模是这份合集最直观的部分。官网的目录页写着，这里收了 331 套高质量技能，覆盖无障碍、动效、框架、测试和性能这些方向。

技能目录页顶部的规模文案与主题计数

比起一个总数，更有用的是它按主题分好了类，而且每个主题都带着条数。数量最多的是 Frontend 211，往下是 UI 165、Systems 96、Tooling 87、Interaction 82、Motion 67、Testing 43。

再往后是 Architecture 34、Performance 34、Accessibility 33、Video 26，以及 Code quality 10、Color 9、Typography 7、Frameworks 6、Debugging 4，最小的一类是 3D，四条。

这个数字不是宣传口径。官网提供了一份可机读的 registry 清单，每条一行写着技能名、原始 SKILL.md 的直链和一句话描述，自己数一遍正好是 331 条，想核随时可以核。

官网首页整体，Skills 列表与 Learn 区块

技能卡片网格，每张卡带作者署名

里面不只有作者自己写的那几份，更多是社区里已经被验证过的作品。按条目数排，收录最多的是 antfu 的 19 份，然后是 mengto 和 pbakaus 各 18 份、figma 16 份。

几个熟面孔也在。Anthropic 官方的 frontend-design 专门对付 AI 页面长得都一个样这件事，shadcn 那份对应 shadcn/ui 的写法规范。AccessLint 贡献了一整组无障碍检查，addyosmani 放进来前端 UI 工程指南和网页质量审计，antfu 则是给 JS/TS 项目定的工具规范。

先读哪一份，由一个路由技能决定

合集大了会有新问题，331 份技能不可能全塞进上下文。仓库里有一份根技能 ui-skills-root，作用相当于路由。

接到 UI 相关的任务时，AI 先看它，由它判断这件事属于哪个主题，再挑最少够用的几份来读。选择规则写得挺死，首选 1 份，需要两个明确角度时才用 2 份，只有大范围评审、重设计或者多界面工作才用 3 份，永远不超过 3 份。排序依据是先看主题、再看技术栈、最后看具体程度，越具体的越优先，技术栈对不上的往后排。

这套约束的意义在于上下文预算。规则文件本身也是要吃掉 token 的，一次读进来十几份用不上的规范，反而会把有用的那几条淹掉。

几份主力技能各自管什么

baseline-ui 是其中最值得先装的一份。它的目标写得直白，deslop，去 AI 味，管的是间距、层级、排版和小布局问题。

它的规则定得很细，也没什么商量余地。不要主动用渐变，尤其不准用紫色渐变。一个视图里只留一个强调色。阴影就用 Tailwind 默认的那几档。带键盘和焦点行为的组件，必须基于 Base UI、React Aria、Radix 这类无障碍基础组件来写。需要 JavaScript 动画就用 motion/react。

我们让它审查文件的时候，它会逐条列出违反了哪条规则、引用具体那行代码、一句话说清为什么不行，最后给出代码级的修法。

improve-ui 处理的是另一头，收拾已经存在的界面。它沿着路由和布局，把一个界面的组件、样式和 token 之间的引用关系追一遍，找出有证据支撑的问题，然后在 design-plans 目录下写实施方案。两条边界值得记一下，它严格只读，不碰产品源码；写出来的方案必须自包含，因为执行方案的是另一个 agent，拿不到这次审查的任何上下文。

create-design-md 解决的是另一个常见问题。很多项目没有设计文档，AI 每次写 UI 都靠猜。这份技能会从现有仓库或者一个公开网站里提取设计语言，生成一份 DESIGN.md 放在项目根目录，生成过程里它只碰这一个文件。

还有三份修复类技能分工明确。fixing-accessibility 管无障碍，ARIA 标签、键盘导航、焦点管理、颜色对比度、表单错误提示都会过一遍，标准对着 WCAG 来。

fixing-metadata 管页面元信息，标题、描述、Open Graph、Twitter 卡片、canonical、JSON-LD 这些在新页面上线前查一遍。fixing-motion-performance 管动画性能，布局抖动、合成层属性、滚动关联动画、大面积模糊带来的渲染开销，它会给出具体改法。

命令行和 MCP，两种拿法

东西不一定要装。它有配套的命令行工具，npx 直接跑，不用安装也不用注册，有 Node 环境就行。四条命令各管一件事。

npx ui-skills start
npx ui-skills categories
npx ui-skills list --category motion
npx ui-skills get baseline-ui

start 会把路由技能的完整内容打出来，告诉你后面怎么选。categories 列出主题，list 按主题挑技能，看中哪一份再用 get 拉完整内容。

官网上的 CLI 入口卡，带复制按钮

拿到内容之后，放进对应工具的技能目录就能用，Claude Code 是 .claude/skills/，Cursor 有自己的 rules 目录。装好之后说一句「帮我把这个页面收拾一下」，它就会自己去读技能再动手，想调整规则接着说一句就行。

不想用命令行的话还有一条路。它提供 MCP 服务，地址是 https://www.ui-skills.com/mcp，只暴露 list_skills 和 get_skill 两个工具。在支持 MCP 的客户端里把这个地址写进配置，agent 就能直接联网查技能库，拿到的内容一直是最新的，连手动拉取都省了。

不想装也能看的四十多条规则

官网上还有个 Playbook 页面，把技能里的经验蒸馏成了四十多条规则，每条一两句话，全部能直接执行。随手举几条。

给图片设 aspect-ratio，加载时旁边的内容不会跳
表格里的数字用 tabular-nums，位数不会跳动
按钮和控件的触控目标至少 44px
按钮按下去给一个 0.96 左右的缩放反馈
进场动画用 ease-out，ease-in 会显得慢
空状态别只写解释，给一个明确的下一步操作

这几条一条都不难，但把它们凑在一起，AI 生成界面时最常翻车的那几个地方基本都被照顾到了。就算一份技能都不装，把这页过一遍也有收获，拿它当检查清单挺顺手。

它适合谁，不适合谁

用 AI 写前端、又被界面质感拖住的人，这份合集值得翻。它补的正好是审美这块短板，而且整理得很省事，散落在各个作者手里的经验收在一起，用的时候挑就行，不用自己从头攒。

要留意的是它给的是规则不是审美。规则能挡住「紫渐变加满屏阴影」这类明显错误，挡不住一个平庸但合规的布局。真要做出有辨识度的界面，还得自己想清楚这个产品该长什么样。

另外 331 份技能是社区合集，质量不会整齐划一。挑之前先看清楚作者和技能说的适用范围，装进来之后也要跑一遍看看效果，别指望装了就自动变好看。

仓库在 https://github.com/ibelick/ui-skills