Apple 的一些视觉风格，给人的感觉就是舒服。这种舒服感不只来自圆角和毛玻璃，更来自细节——按下按钮有回应、卡片飞出后惯性自然、动画进行到一半能重新抓回来。

好的界面像一个能被你控制的真实物体，差一点的界面就像在播放写死的视频。Emil Kowalski 开源的 apple-design Skill 没有停在 Apple 风格的表皮上，而是包含了这些动画细节，帮你生成的界面更有手感。

开源项目简介

项目叫 emilkowalski/skills，GitHub 上约 10.5k Star。作者 Emil Kowalski 是一位 Design Engineer，做过动画、界面细节、设计工程相关的内容。

这是一组给 AI Agent 用的设计经验 Skill。在写界面、审查动画、优化交互时，可以让 Agent 带着这些 Skill 判断问题所在并给出修改建议。

仓库里有几个设计工程相关的 Skill：

• emil-design-eng：整体设计工程经验
• review-animations：专门审查动画质量
• improve-animations：系统优化项目动效
• apple-design：将 Apple 设计原则和流体交互翻译到 Web 开发

项目地址：https://github.com/emilkowalski/skills

apple-design 的来源主要是 Apple 的 WWDC 设计演讲，尤其是流体界面、音频触觉反馈、字体细节、伟大设计原则等内容。作者把这些经验整理成 17 条设计和动效原则，再转换成 Web 里能落地的写法。

用这个 Skill 生成的 UI 界面效果：

核心理念

界面要从用户当前的动作里长出来。不追求把动画做得花哨，但让界面始终保持可控。

1. 速度比曲线更重要

Apple 的动画速度通常在 250-350ms 之间，比多数 Web 项目快。用户不会注意到动画本身，但会感觉界面"跟手"。关键原则：让内容先动，容器晚 50ms 再动；用弹簧动画替代缓动曲线；手势速度要比动画速度更快。

2. 可打断性

大多数 Web 弹窗点击背景后直接关闭，动画播完才算结束。但 Apple 的弹窗可以在关闭到一半时拖回来——它不会等旧动画结束，而是立刻跟随手势。apple-design 反复强调这种可打断性。

3. 材质和层级

导航栏、工具栏、弹层等浮动区域用 backdrop-filter 做出半透明层，但不能叠到看不清。大表面需要更强模糊和阴影，小控件的模糊和阴影要轻。聚焦时用遮罩压低背景，不打断流程时用偏移和透明度保留空间关系。

4. 字体细节

大标题和正文不能共用一套字距。大字需要更紧，小字需要更照顾可读性。行高也要跟字号一起调，不能只靠放大字号制造层级。

这些内容真正解决的是界面的判断力——AI 需要知道某个动画怎么写，也需要知道界面为什么会舒服。

使用方式

安装：

npx skills@latest add emilkowalski/skills

安装后，做界面时可以这样调用：

使用 apple-design 构建一个底部弹窗，让它在触屏设备上感觉像原生体验。

或者审查现有交互：

使用 apple-design 审查这个页面里的弹窗、抽屉和按钮交互。重点关注响应速度、可中断性、手势速度、弹簧行为，以及减少动态效果模式。

更具体的需求：

使用 apple-design 让这个卡片拖拽交互感觉更有物理感。它应该 1:1 跟随指针，保留释放时的速度，预测惯性动量，并在边界处有橡皮筋回弹效果。