UI Skills | 面向设计工程师的 UI Agent Skill 精选目录

UI Skills 是面向设计工程师与前端团队的 UI Agent Skill 精选目录：把散落在 GitHub 与社区里的界面质量、无障碍、动效与审美类 Skill 集中索引，并为每条 Skill 提供可直接复制的安装命令。若你在 Cursor、Claude Code 等 Agent 环境里做界面，却不想每次从零写「别用 generic AI 审美、要查 WCAG、Tailwind 间距要对齐」这类约束，这个目录能帮你快速找到可落地的 Skill 包。

UI Skills — 首页 Skill 卡片列表。

UI Skills 首页

内容定位

不是什么：不是 UI 组件库、不是设计稿托管，也不是单一作者的教程站。
是什么：Skill 聚合与分发入口——每条收录对应一个可安装的 Agent Skill（通常含 SKILL.md 指令文件），覆盖无障碍审计、动效性能、React 架构、shadcn/ui 工作流、反「AI 味」界面审美等主题。
规模与组织：站点自称收录 100+ 条高质量 Skill（以官网实时列表为准），并按主题分栏浏览，例如 Interaction、Taste 等，便于按「微交互 / 审美方向 / 无障碍」等维度检索。

代表性 Skill（节选）

Skill	侧重	贡献者
baseline-ui	Tailwind 项目里的排版尺度、动效时长、组件无障碍与布局反模式检查	Ibelick
fixing-accessibility	ARIA、键盘导航、焦点、对比度与表单错误的审计修复	Ibelick
fixing-motion-performance	布局抖动、合成层属性、滚动联动动效等性能问题	Ibelick
frontend-design	生产级、反 generic AI 审美的界面生成约束	anthropics
wcag-audit-patterns	WCAG 2.2 自动化 + 人工核查与修复指引	wshobson
emil-design-eng	Emil Kowalski 式设计工程：组件、动效与交付质感	emilkowalski
shadcn	项目内 shadcn/ui 的搜索、添加、组合与修错工作流	shadcn-ui
react-doctor	React 安全、性能、正确性与架构的质量评分检测	millionco
interface-design	仪表盘、Admin、SaaS 等界面的一致性与工艺	Dammyjay93
12-principles-of-animation	迪士尼 12 原则在 Web 动效中的落地	raphaelsalaja

完整列表与安装命令以 ui-skills.com/skills 为准。

差异化亮点

垂直于「设计工程 × Agent」：不是泛开发者工具榜，而是专门服务「用 AI 写界面还要像产品」这一交叉人群。
可执行而非纯阅读：每条 Skill 强调 copy-ready install，降低从发现到放进 .cursor/skills/ 或 Claude Skills 目录的路径摩擦。
社区来源多元：收录 Ibelick、Anthropic、shadcn-ui、Emil Kowalski、pbakaus 等知名设计工程实践者的 Skill，质量筛选由站点编辑完成（具体收录标准以官网说明为准）。
主题分栏：Interaction（微交互与反馈）、Taste（审美与反 generic）、以及无障碍/性能/框架等维度，适合按项目阶段补 Skill 而非一次性全装。

适用与不适用

适合：设计工程师、前端 Lead、用 Agent 做 UI 原型或生产代码的团队；需要统一无障碍、动效、组件库工作流约束的项目。

不太适合：只做后端、完全不使用 Agent/Cursor Skills 的开发者；期望站内直接提供在线 IDE 或托管组件——这里本质是 目录 + 安装指引，Skill 本体仍在各贡献者仓库。

访问与下一步

首页：https://www.ui-skills.com/
完整目录：https://www.ui-skills.com/skills/
使用方式：在目标 Skill 卡片复制安装命令，放入本机 Agent 的 skills 目录（如 Cursor 的 .cursor/skills/ 或 Claude 的 skills 路径），具体以各 Skill 页说明为准。

来源

UI Skills 官网（2026-06-07 访问）
UI Skills Directory