Emil Kowalski Design Engineering Skills（界面设计工程技能包）

# Emil Kowalski Design Engineering Skills：安装说明

这个工具包里是 Mindket 写的安装说明，不包含技能本身。技能要从 Emil Kowalski 的仓库安装：https://github.com/emilkowalski/skills

许可证：MIT，Copyright (c) 2026 Emil Kowalski。全文见 https://github.com/emilkowalski/skills/blob/main/LICENSE

这些是 Emil Kowalski 的社区技能，并非 Anthropic、Vercel 或任何编程智能体的开发方制作或背书。

这些说明的来源：README（https://github.com/emilkowalski/skills/blob/main/README.md），https://github.com/emilkowalski/skills/tree/main/skills 下每个技能的 SKILL.md，两份速查表（https://github.com/emilkowalski/skills/blob/main/ui-cheatsheet.md 和 https://github.com/emilkowalski/skills/blob/main/performance-cheatsheet.md），作者用到的安装工具的 README（https://github.com/vercel-labs/skills/blob/main/README.md），以及 Claude Code 的技能页面（https://code.claude.com/docs/en/skills）。所有命令都由 Mindket 照抄，一条也没有运行过。

## 它是什么

十七个技能，给构建和审查界面的编程智能体用。大部分讲动效：做动画（网页上的，或 React Native 加 Expo 的）、审查动画、审查整个代码库、删掉应用不需要的动画，以及找出掉帧的原因。其余几个讲苹果风格的设计、让网页应用在手机上用起来像原生应用的修复、最坏情况的测试数据、Swift、挑选 UI 库、做原型，以及 Sonner 弹出通知库。

README 说，这些技能基于 Emil 在 Vercel 和 Linear 等公司工作的多年经验，并列出了智能体会犯的小错误和每个错误的改法。

## 十七个技能

| 技能 | 作用 |
|---|---|
| emil-design-eng | 主技能：大部分讲动画，也有一些设计建议 |
| animate | 从零做一个动画，选好曲线、时长和属性 |
| animate-expo | 同样的标准，用在 React Native 和 Expo 上：手势、底部弹层、触感反馈、页面切换 |
| review-animations | 严格审查动画代码。只在点名时使用 |
| improve-animations | 审查代码库里所有的动效，写出供其他智能体执行的计划 |
| find-animation-opportunities | 找出应该加动画的地方，也说明哪些不该加 |
| remove-animations | 删掉应用不需要的动效 |
| choreograph | 协调几个一起运动的元素 |
| animation-performance | 找出并修复掉帧的动画 |
| animation-vocabulary | 把对某个动效的模糊描述变成它准确的名字 |
| apple-design | 苹果的界面和动效原则，转换成适合网页的做法 |
| write-swift | 现代 Swift：值类型、Swift 6 并发、泛型、性能、Swift Testing |
| pick-ui-library | 从作者自己的清单里为一项任务挑一个库。只在点名时使用 |
| prototype | 为一块 UI 做出几个不同的版本，放在一个切换器后面。只在点名时使用 |
| mobile-native | 让网页应用在手机上用起来像原生应用的 CSS 和 meta 小修复 |
| break-ui | 用最坏情况的数据去试着弄坏一个界面，并报告哪里出了问题 |
| ask-sonner | Sonner 指南：配置、样式、示例和问题修复 |

来源：README 里的“Reference”列表和每个 SKILL.md 的开头信息。

## 工具包里的文件

- setup/install.md：README 给出的唯一一条安装命令、安装工具会问什么，以及装到单个项目还是所有项目
- setup/claude-code.md：在 Claude Code 里使用这些技能、需要输入名字才运行的三个技能，以及如何删除它们
- setup/other-agents.md：Codex、Cursor、OpenCode 以及安装工具列出的其他智能体

## 先准备好这些

- 一个能读技能的编程智能体，比如 Claude Code、Codex、Cursor 或 OpenCode。
- Node.js 22.20 或更高版本，安装工具要用。工具的 README 是这么写的。
- 在你的项目文件夹里打开一个终端。
- 这些技能不需要账号、注册或 API 密钥。智能体本身用它自己的账号。

## 你的数据

仓库里只有 Markdown 文本文件，没有脚本。安装工具是另一个程序：它的 README 说它会收集匿名使用数据，并给出了两个关闭的设置（setup/install.md）。你问智能体的内容和它读到的文件，会像其他会话一样发给智能体自己的服务商。

## 更新和卸载

README 没有给出更新或卸载的步骤。安装工具的 README 列出了这两件事的命令（setup/install.md）。

README.md  4 KB
setup/claude-code.md  3 KB
setup/install.md  2 KB
setup/other-agents.md  2 KB