UI Skills：让 AI 写出专业级界面的 181 个设计技能库

你大概经历过这个场景：让 AI 帮你写一个前端页面，代码能跑，功能没问题，但出来的效果总有一股浓浓的"AI 味儿"——紫色渐变、发光按钮、混乱的间距，千篇一律的布局。

问题不在于 AI 不够聪明，而在于它缺少专业的设计规范约束。

一、项目简介

UI Skills 是什么？

一个面向**设计工程师（Design Engineer）**的 AI Agent 技能集合，让 AI 在写前端代码时自动遵循专业设计规范。

• GitHub 地址：https://github.com/ibelick/ui-skills
• 官网：https://www.ui-skills.com
• 作者：ibelick（Interface Office 工作室创始人）
• GitHub 数据：⭐ 5.2k Stars · 224 Forks
• 当前版本：v0.2.3
• 技能总数：181 个（社区多作者共建）
• 兼容 Agent：Claude Code、Cursor、OpenClaw、Codex、GitHub Copilot
• License：MIT

跟 MarketingSkills 的关键差异：MarketingSkills 解决的是"AI 不懂营销方法论"的问题；UI Skills 解决的是"AI 写的界面丑"的问题。前者聚焦营销策略，后者聚焦设计工程。UI Skills 还有一个独特之处——配套了 CLI 路由工具和精美官网，Agent 可以按需选择最合适的 Skill。

二、核心理念：反 AI 审美

UI Skills 最核心的设计哲学用一句话概括：防止 AI 生成的界面垃圾（UI slop）。

什么是"UI slop"？你大概率见过这些特征：

• 无处不在的紫色渐变和彩虹色
• 发光效果（glow）作为主要视觉手段
• 间距随意，没有统一的 spacing scale
• 动画滥用——什么都在动
• 不遵循无障碍规范
• 移动端布局崩坏

UI Skills 通过强约束规则来消除这些问题。以作者最核心的 baseline-ui 技能为例：

设计约束：

❌ NEVER use gradients unless explicitly requested
❌ NEVER use purple or multicolor gradients
❌ NEVER use glow effects as primary affordances
✅ SHOULD use Tailwind CSS default shadow scale
✅ SHOULD limit accent color usage to one per view

动画约束：

❌ NEVER add animation unless explicitly requested
❌ NEVER animate layout properties (width, height, margin, padding)
✅ MUST animate only compositor props (transform, opacity)
✅ SHOULD respect prefers-reduced-motion
❌ NEVER exceed 200ms for interaction feedback

组件约束：

✅ MUST use accessible component primitives (Base UI / Radix / React Aria)
✅ MUST add aria-label to icon-only buttons
❌ NEVER rebuild keyboard or focus behavior by hand
❌ NEVER use h-screen, use h-dvh

这套规则不是泛泛而谈的设计建议，而是精确到代码级别的约束。

三、CLI 工具：交互式 Skill 路由

UI Skills 独有一个 CLI 工具，让 AI Agent 可以交互式地选择最合适的技能。

# 启动交互式路由，AI 根据任务自动选择 Skill
npx ui-skills start
 
# 查看所有分类
npx ui-skills categories
 
# 按分类列出技能
npx ui-skills list --category motion
 
# 获取某技能的详细内容
npx ui-skills get baseline-ui

路由机制（ui-skills-root）：

当你说"帮我修一下这个 dialog 的动画"，Agent 会：

1. 判断这是一个 UI 相关任务
2. 识别类别 → Motion（动画）
3. 在 Motion 分类中选择最窄范围的 Skill
4. 只加载选中的 Skill，开始工作

选择规则很克制：

• 优先选 1 个 Skill
• 只有需要两个视角时才选 2 个
• 广泛审查最多选 3 个
• 绝不超过 3 个

这种"最小加载"策略避免了上下文膨胀，同时保证 Agent 专注于最相关的专业知识。

四、8 大 Topic 分类

181 个 Skill 按以下 Topic 组织：

① Accessibility（无障碍）

WCAG 合规审计、ARIA 修复、颜色对比度检查、键盘导航

② Motion（动效）

动画性能优化、过渡模式、微交互、页面转场、GSAP/Lottie 集成

③ Systems（设计系统）

组件库规范、Token 管理、主题系统、shadcn/ui 工作流

④ Visual（视觉）

色彩理论（OKLCH）、排版、间距、阴影、圆角、视觉层次

⑤ Interaction（交互）

手势驱动 UI、拖拽交互、弹簧动画、对话式反馈

⑥ Performance（性能）

渲染优化、动画帧率、Core Web Vitals、包体积

⑦ Craft（工艺）

设计细节打磨——hover 状态，光学对齐、图像描边、微交互

⑧ Taste（审美）

布局多样性、排版纪律、视觉一致性、"少即是多"的克制

五、5 个核心 Skill 详解

1. ui-skills-root（智能路由）

作用：所有 UI 任务的入口，根据 topic、stack、intent 路由到最合适的子 Skill。

为什么重要：181 个 Skill 全部加载进上下文不现实。ui-skills-root 确保只加载跟当前任务最相关的 1~3 个 Skill，兼顾精准度和 token 效率。

2. baseline-ui（快速清理）

作用：快速修复 AI 生成代码中的间距、层次、排版和小布局问题。一个"去 slop" pass。

技术栈约定：Tailwind CSS + motion/react (Framer Motion) + cn utility

核心约束覆盖 7 个维度：

• 组件：必须用 accessible primitives，不手动实现键盘/焦点行为
• 交互：destructive action 必须用 AlertDialog，loading 用骨架屏
• 动画：只动 transform 和 opacity，反馈不超过 200ms
• 排版：标题用 text-balance，正文用 text-pretty，数据用 tabular-nums
• 布局：固定 z-index scale，方形元素用 size-*
• 性能：不 animate 大面积 blur/backdrop-filter
• 设计：不用渐变（除非明确要求），不用 glow 效果

3. improve-ui（界面审计）

作用：审计现有产品界面，基于设计证据识别已验证的 UI 问题，输出可执行的改进计划。

独特之处：只做审计和计划，不修改源代码。改进计划写入 design-plans/ 目录，由另一个 Agent 执行。

审计流程（5 步）：

1. 选择界面：从路由和布局追踪渲染路径
2. 重建本地系统：检查 DESIGN.md、Token 定义、组件规范
3. 证明发现：每个问题必须同时满足三个条件——Contract（违反设计规则）、Runtime（运行时确认）、Correction（有明确修复方案）
4. 验证发现：尝试证伪每个候选问题，不支持的就删除
5. 报告：按置信度和影响排序，最多输出 3 个

这种严格的证据驱动方法确保了审计结果的可信度。

4. frontend-design（Anthropic 官方出品）

作用：创建独特的，生产级的前端界面，避免 generic AI aesthetics。

作者：anthropics（Anthropic 官方团队）

定位：不是"清理"或"审计"，而是从零创建有设计感的前端代码。适合新页面、新组件、新项目的 UI 实现。baseline-ui 是约束层（什么不能做），frontend-design 是创意层（怎么做得好），两者可以叠加使用。

5. better-ui（细节打磨）

作用：界面细节打磨——hover 状态、阴影、圆角、微交互、进入/退出动画，光学对齐、图像描边。

作者：jakubkrehel

关注点：不是大改布局或重构组件，而是让现有界面从"能用"变成"精致"。聚焦那些容易被忽略但显著影响体感的细节。

六、安装与使用教程

方式一：CLI 路由（推荐）

让 AI Agent 先运行 CLI，自动选择最合适的 Skill：

# 启动交互式路由
npx ui-skills start
 
# 浏览分类
npx ui-skills categories
 
# 查看某分类下的技能
npx ui-skills list --category motion
 
# 获取某技能详情
npx ui-skills get baseline-ui

方式二：安装到项目

# 安装 ui-skills-root（路由入口）
npx skills add https://github.com/ibelick/ui-skills --skill ui-skills-root
 
# 安装 baseline-ui
npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui
 
# 安装 improve-ui
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

方式三：安装社区 Skill

UI Skills 平台收录了来自多位作者的 181 个 Skill：

# 安装 anthropics/frontend-design
npx skills add https://github.com/anthropics/frontend-design
 
# 安装 jakubkrehel/better-ui
npx skills add https://github.com/jakubkrehel/better-ui

方式四：官网浏览

访问 https://www.ui-skills.com/skills 按 Topic 筛选浏览，找到合适的 Skill 后再安装。

七、使用示例

示例 1：快速清理 AI 生成的页面

你：这个页面 AI 生成的，看起来有点乱，帮我清理一下

AI：（自动加载 baseline-ui） → 检查 spacing 是否使用 Tailwind 默认 scale → 检查是否有未授权的渐变和 glow 效果 → 检查动画是否只用了 transform/opacity → 检查 icon-only button 是否有 aria-label → 输出违规项和修复代码

示例 2：审计现有产品界面

你：帮我审计一下这个 Dashboard 页面的 UI 问题

AI：（自动加载 improve-ui） → 追踪渲染路径：routes → layouts → components → tokens → 按 Contract + Runtime + Correction 三重验证 → 输出 Top 3 问题 + 改进计划到 design-plans/ → 另一个 Agent 执行修复

示例 3：从零创建高质量界面

你：帮我创建一个定价页面，要有设计感

AI：（自动加载 frontend-design） → 不是套模板，而是根据产品上下文设计 → 遵循反 generic AI aesthetics 原则 → 输出生产级代码，包含响应式和无障碍

示例 4：修复动画性能

你：这个页面滚动有点卡

AI：（自动加载 fixing-motion-performance） → 检查是否有 layout property 被动画化 → 检查大面积 blur/backdrop-filter → 检查 will-change 使用 → 输出性能问题和修复建议

八、社区生态

UI Skills 不是一个单人项目，而是一个多作者共建的技能平台。

知名贡献者：

• anthropics（Anthropic 官方）：frontend-design、canvas-design
• shadcn（shadcn/ui 作者）：improve、shadcn
• emilkowalski（设计工程 KOL）：emil-design-eng、improve-animations、apple-design
• addyosmani（Google Chrome 团队）：frontend-ui-engineering、web quality-audit
• antfu（Vue/Nuxt 核心团队）：web-design-guidelines、Vue 生态系列
• nextlevelbuilder：ui-ux-pro-max（50+ 风格、97 调色板）

181 个 Skill 覆盖了从前端框架（React、Vue、Nuxt、React Native、SwiftUI）、到 3D 可视化（Three.js 系列 11 个 Skill）、到动效（GSAP、Lottie、CSS 动画）、到无障碍审计的完整设计工程链路。

九、Agent Skills 生态趋势

UI Skills 和 MarketingSkills 代表了一个更大的趋势：Agent Skills 作为 AI 编程的标准能力层正在快速成型。

共同模式：

• 都基于 Markdown 格式的 Skill 文件
• 都兼容 Agent Skills 规范（agentskills.io）
• 都支持主流 AI Agent（Claude Code、Cursor 等）
• 都通过 npx skills add 安装

差异化定位：

对于开发者来说：如果你做产品，MarketingSkills 帮你解决"怎么卖"，UI Skills 帮你解决"怎么好看"。两者不冲突，可以同时安装。

总结

AI Agent 的代码能力已经很强，但"能跑的代码"和"好的界面"之间还有一个巨大的设计工程鸿沟。UI Skills 用 181 个专业技能填补了这个鸿沟，让 AI 从"写代码"进化为"写有设计规范的代码"。

如果你正在用 Claude Code 或 Cursor 做前端开发，UI Skills 是目前最值得安装的设计技能库。

相关链接

• 项目地址：https://github.com/ibelick/ui-skills
• 官网：https://www.ui-skills.com
• 技能浏览：https://www.ui-skills.com/skills
• Agent Skills 规范：https://agentskills.io