emilkowalski.ski/skill

由前 Vercel、Linear 资深设计工程师 Emil Kowalski 开发的本地化命令行工具（CLI）。它将多年在高级动效、微互动和高质感 UI 领域的经验“硬编码”为规则，专门赋予你的 AI Agent（如 Claude Code）顶级的审美与纠错能力。

🚀 核心定位：让 AI 拥有设计品味

普通的 AI 代码助手能写出“可以跑”的动画，但往往缺乏直觉——分不清场景该快还是慢、缓动曲线选错等。

本项目并非独立 SaaS，而是通过注入规则（Skills），让你的本地前端环境中的 AI 编程助手具备：

• ✅ 设计品味 (Taste)：理解高级 UI/UX 规范。
• ✅ 物理直觉：掌握正确的动画时序与曲线。
• ✅ 自动纠错：拦截低级动效错误，减少手动微调时间。

🧠 五大核心 AI 技能包 (Skills)

该项目包含一套可组合的技能指令，直接在你的 Prompt 或 CLI 中生效：

1. emil-design-eng | 👨‍💻 设计工程专家

• 作用：在编写 React、CSS、Framer Motion 动画时提供专业建议。
• 价值：指导 AI 做出符合物理直觉的动效决策（如阻止高频操作使用冗长动画）。

2. review-animations | 🧐 动效严格审查

• 作用：对前端动画代码进行像素级“硬核审查”。
• 价值：揪出低级错误，例如误用淡入、超长时长等不符合规范的参数。

3. improve-animations | 🔍 全库动效重构计划

• 作用：扫描整个代码库进行审计。
• 维度覆盖：动效目的、缓动曲线、物理特性、可中断性、性能优化及无障碍（Accessibility）。
• 输出：生成一份可让低成本 AI 自动执行的重构行动计划。

4. find-animation-opportunities | ✨ 寻找动效契机

• 作用：分析 UI 界面，精准定位适合加入微互动的区域。
• 反向约束：明确指出哪些地方绝对不要加动画（避免廉价感）。

5. apple-design | 🍎 苹果动效哲学 (WWDC)

• 作用：将 iOS/Apple 的界面设计与流体动效原则提炼为 Web 端规范。
• 价值：让 AI 能够写出类似 iOS 系统级的细腻交互质感。

👥 适用人群

角色痛点与需求独立开发者 / 全栈工程师缺乏 UI/UX 设计师配合，希望用低成本工具获得 Linear/Vercel 级别的产品质感。设计工程师 (Design Engineer)使用 AI 提效重构，需要产出物直接符合高审美标准，减少手动调整 cubic-bezier 的时间。深度 AI 使用者高频用户 Claude Code / Cursor，希望解决其写前端代码“缺乏品味”的问题。

💰 免费与付费详情

✅ 核心工具：完全开源且免费

• 当前 Skill 技能包：0 元。可直接通过终端安装到你的 AI 代理中运行。
• 使用方式：集成到本地项目，无后台、无 API Token 限制（取决于基座模型）。

💳 进阶内容：知识付费课程

本 Skill 是 Emil 的付费在线课程的“AI 衍生品”。若需深入学习底层物理理论及代码实践，可购买其正课。

• 课程名称：Animations on the Web
• 参考价格：$199 USD 起（官网以最新为准）。
• 详情页面：animations.dev

⚙️ 快速上手指南

由于其本质是注入 AI Prompt/技能包，通常配合支持自定义 Skills 的系统使用。

📥 安装步骤 (以 Claude Code / Cursor 为例)

在项目根目录下运行以下命令：

bash

# 将 Emil 的设计工程师技能包添加到本地 AI 代理中
npx skills add emilkowalski/skill
# 将 Emil 的设计工程师技能包添加到本地 AI 代理中
npx skills add emilkowalski/skill

⚠️ 提示：确保你使用的是支持安装第三方 Skill/Plugin 的 CLI 环境或 IDE（如 Cursor, Claude Code）。

📝 交互指令示例 (Prompt Examples)

安装后，你可以直接在对话框下达以下指令：

1. 审计这个全局的代码库，看看哪些动效需要被优化 -> (调用 improve-animations)
2. 帮我把这个下拉菜单的缓动曲线调整得更符合物理直觉 -> (调用 emil-design-eng)
3. 检查我这里的动画是否触发了重排问题？

🛑 核心避坑点：

如果你打算使用此技能，或在开发精细动画时，请务必遵守这些由该工具提炼出的硬核规范。这是 AI 审查的重点拦截项：

⏱️ 1. 控制时长 (Timing)

• 规则：普通的 UI 微交互动画绝对不要超过 300ms。
• 原因：速度快往往能显著提升用户的“感知性能”，慢动作会让用户觉得网站卡顿。

📉 2. 慎用 ease-in (淡入)

• 规则：元素进入屏幕的动画，永远首选 ease-out（淡出）或自定义弹簧效果。
• 原因：ease-in 会让动画快结束时达到最快速度，视觉上感觉像是在“撞墙”，极其不自然。

🚫 3. 高频操作别加动画

• 场景示例：表格行切换、频繁点赞按钮、普通的键盘输入响应等。
• 规则：能不加就不加。动效是用来引导视觉或增加趣味的，高频场景加动画只会让用户烦躁。

📐 4. 严格属性限制

• 白名单：只允许 AI 修改 transform 和 opacity（性能消耗低）。
• 黑名单：绝对禁止用动画改变 height、width 或 margin。这会导致浏览器频繁触发重排 (Layout Thrashing)，造成严重的掉帧卡顿。