110 套 UI 设计 Skills 合集：给 AI 做 UI 装一个设计外挂

让 AI 写 UI，功能能跑但界面普通、按钮能点但细节不高级、布局能出来但没设计师的判断——这套 Skills 合集解决的就是最后那层质感问题。

用 AI 写 UI 时常遇到一个尴尬：功能都能跑，但界面一眼就是模板味。AI 会写代码，但它不知道这次该从排版、颜色、动效、信息层级还是可访问性哪个维度下手。

UI Skills 解决的就是这个问题——它把很多 UI 设计经验，拆成了 AI Agent 能理解、能执行、能复用的 Skill。可以理解成一套「AI 做 UI 的设计外挂」。

网站地址：https://www.ui-skills.com/

一、使用方法

打开网站首页，它给了一条很直接的命令：

这条命令的作用，是让 Agent 先选合适的 Skill，再开始改界面。有了 Skills 之后，可以让 Agent 按更具体的方向处理界面：是排版问题？颜色太单调？动效太僵硬？信息层级不清楚？还是可访问性不合格？

二、110 套 Skills 覆盖很全

进入 Skills 页面，已经整理了 110 个条目，官方目录里比较明显的分类包括：Accessibility、Motion、Systems、Visual、Interaction、Performance、Craft、Taste。

这几个分类基本覆盖了做 UI 时最容易被 AI 忽略的地方：

• 可访问性：颜色对比度、链接目的、键盘导航、ARIA、表单错误提示
• 动效：转场、弹簧曲线、Animate Presence、图标变形、动效性能
• Visual 和 Taste：质感、排版、颜色、层级

这个集合不只有一个作者的东西，它把社区里已经有人验证过的 Skill 收到一起，比如 frontend-design、baseline-ui、ui-ux-pro-max、shadcn——经常用 AI 做页面的人，这些名字一看就知道有多常用。

三、适合谁

• 用 AI 写前端的设计师：把网站当工具箱，先找合适 Skill，再让 Agent 按方向改
• 想提升 AI 出图出页面质量的人：很多人卡在最后 20%，功能都能跑但视觉质量差一点，这些 Skill 专治质感问题
• 前端开发：做产品 Demo、SaaS 后台、组件库、设计系统、动效优化时，能帮把设计要求写得更清楚
• 做作品集的同学：重点看 Visual、Typography、Interaction、Motion，能把作品集从「能展示」推进到「更像被设计过」

小结

这两年 AI 写代码越来越强，但 UI 质量一直是设计师最容易吐槽的地方。页面能生成不代表页面好用，能跑通功能也不代表界面有层级、有节奏、有细节。

UI Skills 这种网站的价值，就是把设计师平时积累的判断，变成 Agent 能执行的规则。以后用 AI 做界面，不用每次从零写提示词——先选 Skill，再让 Agent 动手。