🎨 ui-skills：面向设计工程师的 AI Skill 库，教 Agent 敲出顶级 UI 细节

ui-skills 是面向 AI 编程代理的开源 UI 设计技能库，集成 30+ 个 SKILL.md 覆盖组件、动效、可访问性、排版、布局等 8 大主题。npx ui-skills start 一键路由，让 Claude Code、Cursor 等代理告别 AI Slop 风格输出。

🎤 引言

你让 Claude Code 写一个登录页，它给你吐出一坨渐变紫色 + 居中卡片 + 三段 placeholder 文本——AI 编程时代最常见的 "slop" 界面。

不是 AI 不会写，而是它没人告诉它什么不该写。tailwind 一上来就 bg-gradient-to-r from-purple-500 to-pink-500，动效默认 transition-all duration-300，组件默认 rounded-2xl shadow-xl——这些在 AI 训练数据里出现的频率比真实设计师用得还高。

ui-skills 想解决的就是这个问题。它不是工具，是一个给 AI 编程代理读的 UI 设计技能库——把"设计工程师"（Design Engineers）脑子里的规则翻译成 SKILL.md，跑 npx ui-skills start 就能让 Claude Code / Cursor / Copilot 在写 UI 之前先"读"一下规则。GitHub 6.1k Stars、264 Forks、TypeScript + Astro 驱动，MIT 协议开源。

⭐ 核心功能

🎯 一个 CLI 路由到正确的技能

ui-skills 的核心不是单一技能，而是一套路由 + 技能集合。它做的事情类似一个 Skill Router：

npx ui-skills start        # 路由代理到正确的技能集
npx ui-skills categories   # 查看所有分类
npx ui-skills list --category motion   # 按分类列出技能
npx ui-skills get baseline-ui          # 拉取具体技能内容

安装之后，CLI 会判断当前任务属于 UI 工作的哪个环节（写组件？做动效？修可访问性？），然后只把相关技能灌给 AI agent——避免一次塞 30 个 SKILL.md 把上下文撑爆。

📚 30+ 个高质量 SKILL.md（持续增长）

仓库 skills/ 目录目前收录了 7 个核心官方技能，加上从社区精选的近 30 个外部贡献者技能：

官方（ibelick）：baseline-ui、improve-ui、ui-skills-root、fixing-accessibility、fixing-motion-performance、fixing-metadata、create-design-md
社区精选：frontend-design（Anthropic）、better-ui（jakubkrehel）、design-taste-frontend（MengTo）、impeccable（pbakaus）、improve-react（Emil Kowalski）、interface-design（Dammyjay93）、12-principles-of-animation（raphaelsalaja）、web-design-guidelines（antfu）、rams、design-lab（0xdesign）……

每个技能背后都是这个领域真正的"设计工程师"——Anthropic 的前端、shadcn 的核心、Emil Kowalski（animations）、pbakaus（storyblok 前 CTO）。

🛡 baseline-ui：反 Slop 的入门技能

baseline-ui 是 ui-skills 最有代表性的技能之一，它做的是强制约束 AI 不写出烂 UI。随便摘几条：

Stack:
- MUST use Tailwind CSS defaults unless custom values already exist
- MUST use `motion/react` (formerly `framer-motion`) for animation
- MUST use accessible component primitives (Base UI / React Aria / Radix)

Components:
- MUST add an `aria-label` to icon-only buttons
- NEVER rebuild keyboard or focus behavior by hand

Interaction:
- MUST use `AlertDialog` for destructive or irreversible actions
- NEVER use `h-screen`, use `h-dvh`
- NEVER block paste in `input` or `textarea` elements

Animation:
- NEVER add animation unless it is explicitly requested
- MUST animate only compositor props (`transform`, `opacity`)
- NEVER exceed `200ms` for interaction feedback
- NEVER introduce custom easing curves unless explicitly requested

Design:
- NEVER use gradients unless explicitly requested
- NEVER use purple or multicolor gradients
- NEVER use glow effects as primary affordances
- SHOULD limit accent color usage to one per view

看到没？"NEVER use purple or multicolor gradients" 这条直接掐死了 80% 的 AI Slop 来源。

🔍 improve-ui：审计式技能（Read-only）

improve-ui 是审计技能——只看代码不写代码，扫描现有产品界面，识别"真实存在的 UI 问题"，然后产出给另一个 agent 用的实现计划。这正好对应设计工程师的"review" 工作流：先审计，再让另一个 agent 执行修复。

类似的还有 improve-react（用 React Doctor 的发现做审计）、fixing-accessibility、fixing-motion-performance——分别聚焦无障碍和动效性能问题。

📐 frontend-design（Anthropic 出品）

来自 Anthropic 官方的 frontend-design 技能，定位是生成具有高设计质量的、生产级前端界面。Anthropic 在 Claude Code 里默认内置的就是这个思路——ui-skills 把这些"内部技能"打包出来给整个 AI 编程生态用。

🔌 多代理兼容：Claude Code / Cursor / OpenClaw / Codex

ui-skills 设计时就考虑了多代理兼容。官方文档明确支持的代理包括：

Claude Code
Cursor
OpenClaw
Codex
GitHub Copilot

每个代理都可以通过 CLI 拉取技能包，写入自己的 prompt/skill 系统。这点比那些"只支持 Claude Code" 的工具友好太多。

📥 安装与使用

前置依赖

Node.js 16+（跑 npx）
一个支持 SKILL.md 的 AI 编程代理（Claude Code / Cursor / Copilot / Codex）

一键启动

# 推荐：用 npx 跑（无需本地安装）
npx ui-skills start

# 查看可用分类
npx ui-skills categories

# 列出某个分类下的所有技能
npx ui-skills list --category motion

# 拉取某个具体技能的完整内容
npx ui-skills get baseline-ui

第一次运行会自动从 npm / GitHub 下载最新技能集合（仓库最近 commit 在 2026-07-23，保持活跃）。

在 Claude Code 里用

Claude Code 支持 /skill 命令加载自定义技能。安装 ui-skills 后，可以在对话里直接调用：

# 让 Claude Code 先读 baseline-ui，再写 UI
/baseline-ui 帮我把登录页改一下

# 审计当前文件
/baseline-ui src/components/LoginForm.tsx

输出格式：

violations — 引用具体行/代码片段
why it matters — 一句话解释为什么这条规则重要
a concrete fix — 代码级的具体修复建议

在 Cursor 里用

Cursor 通过 .cursorrules 文件加载项目级规则。ui-skills 的每个技能本质上是结构化的 Markdown，可以直接复制到 .cursorrules，或者用脚本批量同步。

进阶：自定义技能集

如果觉得官方集合不够，可以 fork 仓库，在自己的 fork 里增删技能。技能只是结构化的 SKILL.md：

---
name: my-custom-skill
description: 一句话告诉 AI 这个技能什么时候用
---

# Skill Name

## Stack
- MUST use ...
- NEVER ...

## Components
- MUST add ...

然后跑 npx ui-skills get my-custom-skill 就能让 agent 加载。

🎯 适用场景

AI vibe coding 开发者：用 Claude Code / Cursor 写前端，每次都要手动改一遍"紫色渐变 + 圆角阴影"，baseline-ui 一次性约束住，省掉 review 成本
设计系统团队：想让 AI 生成的 UI 自动符合团队设计规范，把规范写成 SKILL.md 喂进去
前端工程师接手 AI 项目：代码是 AI 写的，跑 improve-ui 审计一遍，比纯人工 review 快得多
教学场景：设计工程师把"为什么不能这么做" 写成规则，让初级开发者或 AI 一起学
企业内 AI 编程平台：私有部署 Claude Code / Cursor，给整个公司强制一套 UI 标准

🔍 对比 / 替代方案

工具	形式	覆盖范围	维护者	适合阶段
ui-skills	SKILL.md 集合 + CLI 路由	30+ 技能，8 大主题	ibelick + 社区	全流程
shadcn-skill	单个技能	shadcn/ui 项目专项	shadcn	shadcn 项目
ui-ux-pro-max-skill	单个技能	50+ 风格 + 97 调色板 + 9 技术栈	nextlevelbuilder	一次性生成
frontend-design（Claude Code 内置）	单个技能	前端通用设计	Anthropic	Claude Code 用户
设计系统（Lottie / Material）	Figma 组件库	视觉/组件规范	各厂商	人工开发

ui-skills 的差异化：不是替代设计系统，而是把"设计工程师的隐性知识"显性化——shadcn-skill 告诉你怎么用 shadcn，ui-ux-pro-max-skill 帮你生成 50 种风格的 UI，但 ui-skills 的 improve-ui + baseline-ui 是在已经写完的代码里反向审计。这跟 SaaS 形式的 Diffy / UIlicious 不一样，它们测交互行为，ui-skills 测代码风格。

跟 SkillsLLM 这类聚合站比，ui-skills 是经过 ibelick 精选+亲自维护的集合，质量控制更严；SkillsLLM 更像"AI 技能的黄页"。

⚠️ 注意事项

CLI 还在演进：npx ui-skills 的命令空间早期版本变化较大，部分老博客教程的命令可能已经过时，建议以 npx ui-skills --help 实际输出为准
AI agent 的"读懂"差异：SKILL.md 写得再细，AI 也可能选择性忽略（比如你让"做一个好看的 banner"，它还是会紫色渐变）。baseline-ui 里 NEVER use purple gradients 这种强约束（MUST/NEVER） 比弱建议（SHOULD） 容易生效
技能数量 vs 上下文：30+ 个技能如果一次全塞给 AI，上下文会被挤爆。npx ui-skills start 路由的逻辑就是解决这个的——但手动 get 所有技能会让 LLM 注意力分散
社区技能质量参差：核心技能（ibelick、Anthropic、shadcn、pbakaus）质量有保证，但有些外部贡献者的技能可能只是"个人偏好"，引用前建议自己读一遍
依赖 npm registry：npx 方式需要能访问 npm，部分公司内网可能要走私有 registry
不是 ESLint：ui-skills 是给 AI 读的规则，不是给 linter 跑的规则。代码本身的检查还得用 ESLint / Biome 这些
180+ 个 issues：仓库活跃度高（12 个 open issues），但同时也说明用户需求量大，新版本可能引入不兼容变更，关注 releases 页

✅ 总结

ui-skills 是"AI 编程时代的设计工程师外脑"——把"为什么不能这样写 UI"变成 AI 能直接读懂的规则。GitHub 6.1k Stars、Anthropic/shadcn/Emil Kowalski 等社区顶级贡献者背书，质量门槛有保证。

最大卖点：SKILL.md 格式统一、CLI 路由避免上下文爆炸、baseline-ui 的强约束（MUST/NEVER）能切实掐住 AI Slop 来源；多代理兼容（Claude Code/Cursor/Copilot/Codex）覆盖了 AI 编程的主流场景。

缺点：本质上是"prompt 工程"——AI 仍有概率违反规则；社区技能质量参差；CLI 还在演进阶段，老教程可能过时；不能替代真正的 ESLint/无障碍测试。

适合谁：重度 AI vibe coding 的前端/全栈开发者、设计系统团队、企业内 AI 编程平台搭建者。不适合谁：只写后端不碰 UI 的工程师、对 AI 编程完全不感冒的纯设计师（用 Figma 更直接）。

推荐指数：⭐⭐⭐⭐（4/5），方向精准——把隐性知识显性化是 AI 编程真正稀缺的能力。前提是你已经在用 Claude Code/Cursor/Copilot，否则这个工具对你没意义。

项目地址：https://github.com/ibelick/ui-skills
官网：https://www.ui-skills.com/
协议：MIT License