apple-design
一个将 Apple 设计原则和流体交互经验蒸馏为 Web 开发落地方案的 Skill——不是教 AI”做漂亮点”，而是让它知道界面为什么会舒服、什么地方不对、应该怎么改。
简介
apple-design 是 Emil Kowalski 开源项目 emilkowalski/skills（GitHub 约 10.5K Star）中的核心 Skill。它把 Apple 的 WWDC 设计演讲（流体界面、音频触觉反馈、字体细节、伟大设计原则）整理成 17 条设计和动效原则，再翻译成 Web 中可落地的 CSS/JS 写法。与一般”做成 Apple 风”的提示词不同，它深入到细节层——按钮的回应感、卡片飞出的惯性、动画进行到一半能否被重新抓住——追求的是”界面像一个能被你控制的真实物体”。
关键信息
- 作者：Emil Kowalski（Design Engineer，专注动画、界面细节、设计工程）
- 项目：emilkowalski/skills
- Star 数：约 10.5K
- 定位：给 AI Agent 用的设计经验 Skill
- 来源基础：Apple WWDC 设计演讲
- 同仓库其他 Skill：
emil-design-eng（整体设计工程）、review-animations（审查动画质量）、improve-animations（系统性优化动效）
核心特性
四大设计维度
| 维度 | 核心原则 | Web 落地方式 |
|---|---|---|
| 流体交互 | 界面从用户当前动作里”长出来”，始终保持可控 | 手势跟随、惯性滚动、阻尼反馈 |
| 可打断性 | 动画进行到一半时用户能重新抓回来，不等旧动画结束 | 中断旧动画、即时响应新手势 |
| 材质与层级 | 大的表面强模糊强阴影，小控件轻模糊轻阴影；该聚焦用遮罩压低背景 | backdrop-filter、阴影层级、遮罩透明度 |
| 字体与排版 | 大字用更紧字距，小字照顾可读性；行高随字号一起调 | 差异化 letter-spacing 和 line-height |
可打断性详解
这是 apple-design 反复强调的核心概念。好的交互不是”动画做得花”，而是：
- 拖底部弹层 → 弹层贴着手指走
- 往上甩 → 顺着惯性继续打开
- 往下拉 → 有一点阻尼，不会突然卡死
- 关闭到一半再拖回来 → 不等旧动画结束，立刻跟随手势
使用方式
安装
npx skills@latest add emilkowalski/skills典型提示词
生成界面：
使用
apple-design构建一个底部弹窗，让它在触屏设备上感觉像原生体验。
审查现有交互：
使用
apple-design审查这个页面里的弹窗、抽屉和按钮交互。重点关注响应速度、可中断性、手势速度、弹簧行为，以及减少动态效果模式。
优化动效：
使用
apple-design让这个卡片拖拽交互感觉更有物理感。它应该 1:1 跟随指针，保留释放时的速度，预测惯性动量，并在边界处有橡皮筋回弹效果。
不同素材中的观点
- 2026-07-17-woshipm-apple-design-skill：逛逛GitHub 介绍
emilkowalski/skills项目。核心观点：Apple 风格的舒服感来自细节而非表皮（按钮回应、惯性自然、动画可打断、可重新抓回），apple-design提炼 17 条原则覆盖流体交互、材质层级和字体排版，真正解决的是”界面的判断力”——AI 不仅需要知道动画怎么写，还需要知道界面为什么会舒服。Skill 的价值是把这种审美判断力编译为可复用的程序性知识。
实用信息
适用场景
- 生成符合 Apple 设计语言的 UI 界面
- 审查和优化现有 Web 界面的交互体验
- 让 AI 在生成前端代码时自带”设计 QA”能力
- 需要高质感触屏交互的移动端 Web 应用
与其他设计 Skill 的关系
apple-design 是设计工程 Skill 生态的一部分。同仓库的 review-animations 专注审查、improve-animations 专注优化、emil-design-eng 提供整体设计工程经验。实际使用时可根据任务类型调用不同 Skill，也可组合使用。