ibelick UI Skills（UI 设计工程技能包）

# ibelick UI Skills：安装说明

这个工具包里是 Mindket 写的安装说明，不包含技能、CLI 或注册表。技能在 Julien Thibeaut 的仓库里：https://github.com/ibelick/ui-skills

许可证：MIT，Copyright (c) 2026 Julien Thibeaut。全文见 https://github.com/ibelick/ui-skills/blob/main/LICENSE

UI Skills 是 Julien Thibeaut（ibelick）的社区项目，并非 Anthropic 制作或背书。

这些说明的来源：README（https://github.com/ibelick/ui-skills/blob/main/README.md），https://github.com/ibelick/ui-skills/tree/main/skills 下每个技能的 SKILL.md，CLI 的源码（https://github.com/ibelick/ui-skills/blob/main/bin/ui-skills.ts），以及仓库的 package.json 和 AGENTS.md。Claude Code 从哪里加载技能、怎样添加 MCP 服务器，出自 Claude Code 自己的文档（https://code.claude.com/docs/en/skills 和 https://code.claude.com/docs/en/mcp），用到的地方都注明了。所有命令都由 Mindket 照抄，一条也没有运行过。

## 它是什么

UI Skills 是一个给设计工程师用的小型技能注册表，有三种用法：CLI、MCP 服务器和仓库本身。README 的原话是：“Skills for Design Engineers.”（给设计工程师的技能。）README 指向它的网站 https://www.ui-skills.com 和网站上的 playbook：https://www.ui-skills.com/playbook。

仓库里有九个它自己的技能。CLI 和 MCP 服务器读取的是网站的注册表，里面也有其他发布者的技能，所以列出来的不止这九个。

## 九个技能

| 技能 | 作用 |
|---|---|
| ui-skills-root | 路由层。它让智能体通过 CLI 挑出最小够用的一组技能，最多三个 |
| baseline-ui | 快速清理看起来像 AI 生成的 UI 代码：间距、层级、字体排印、小的布局问题 |
| fixing-accessibility | 审查并修复 ARIA 标签、键盘导航、焦点、对比度和表单错误 |
| fixing-metadata | 审查并修复页面标题、描述、canonical URL、Open Graph、Twitter 卡片、图标、JSON-LD 和 robots 标签 |
| fixing-motion-performance | 审查并修复卡顿的动画：布局抖动、合成层属性、跟随滚动的动画、模糊 |
| improve-ui | 对照一个产品界面自己的设计依据来审查它，并为另一个智能体写出方案。它从不改产品源码 |
| create-design-md | 从仓库或公开网站写出一份 DESIGN.md，并用 linter 检查 |
| component-canvas | 做一张全屏、可平移缩放的画布，展示项目里已有的组件和它们的变体 |
| create-canvas | 做一张自由画布，用来探索、比较和反复修改任何东西 |

来源：每个技能的 frontmatter 和正文。

## 工具包里的文件

- setup/cli.md：README 里的四条 CLI 命令、每条打印什么，以及路由技能怎样用它们
- setup/mcp.md：注册表的 MCP 地址和它的两个工具，以及把它加进 Claude Code 的一种方法
- setup/claude-code.md：手动把一个技能加进 Claude Code，README 没有讲这种方式

## 先准备好这些

- Claude Code，或其他能运行终端命令的智能体。路由技能点名了 Codex、Cursor 和 Claude Code。
- 运行 CLI 要用 Node。仓库的 package.json 要求 22.19.0 或更新版本。npm 包本身没有写明版本。
- 网络连接。CLI 和 MCP 服务器都从 https://www.ui-skills.com 读取内容。
- 不需要账号、注册或 API 密钥。README 一个也没提。

## 装到了哪里

- CLI：什么也不装。它只把文字打印到终端。npx 第一次运行时，会从 npm 把这个包和它的依赖（其中包括 astro 和 react）下载到 npm 的缓存里。
- MCP：在你的智能体设置里加一条服务器记录。
- 手动复制：每个技能一个文件夹，放在 ~/.claude/skills/ 或某个项目的 .claude/skills/ 里（见 setup/claude-code.md）。

## 你的数据

Mindket 读过仓库里 CLI 的源码。它只向 https://www.ui-skills.com 发普通的 GET 请求，取注册表列表和技能文字，不发送你的任何文件。npm 上已发布的 0.2.4 版包里是同样的 CLI 源码。你贴给或交给 Claude 的内容，和其他 Claude 工作一样会发给 Claude。

注册表里的技能是 Claude 会当成指令来执行的文字。用不熟悉的发布者的技能前，先读一遍。

## 更新和删除

README 没有给出更新或删除的步骤。CLI 每次运行都会读取注册表，所以打印的是注册表当前的文字。手动复制的技能，删掉它的文件夹就能移除（见 setup/claude-code.md）。

README.md  4 KB
setup/claude-code.md  2 KB
setup/cli.md  3 KB
setup/mcp.md  2 KB