终于有一个可以复刻 Apple 设计风格的 Skill 了。

Apple 的一些视觉风格，给人的感觉就是很舒服。

这种舒服感不只来自圆角、毛玻璃啥的。

而是有很多细节，比如按下按钮，按钮有回应。卡片飞出去之后，惯性是不是自然的。动画进行到一半，你能不能重新把它抓回来。

这些细节平时很难说清楚，但你一用就知道差别。

好的界面像一个能被你控制的真实物体，差一点的界面就像在播放一段写死的视频。

最近看到 Emil Kowalski 开源的 emilkowalski/skills，没有停在 Apple 风格的表皮上，也包含了上面提到的这些 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 开发里。

今天推荐的 apple-design 这个。

它的来源主要来自 Apple 的 WWDC 设计演讲，尤其是流体界面、音频触觉反馈、字体细节、伟大设计原则这些内容。

作者把这些经验整理成 17 条设计和动效原则，再转换成 Web 里能落地的写法。

我试了一下，用这个 Skill 直接生成 UI 界面是下面这样的。

Skill 最核心的理念有那么几个。

比如界面要从用户当前的动作里长出来。

它不追求把动画做得花，但是要让界面始终保持可控。

包括按下某一个按钮，拖动、松开手的时候，都有一些动画交互的细节。

比如你拖一个底部弹层，好的体验是弹层贴着手指走。

你往上甩，它会顺着惯性继续打开。

你往下拉，它会有一点阻尼，不会突然卡死。你在它关闭到一半的时候再拖回来，它不会等旧动画结束，而是立刻跟随你的手势。

apple-design 里反复强调这种可打断性。

再比如 Apple 风格不只是动效。

它还包括材质和层级。

导航栏、工具栏、弹层这些浮动区域，可以用 backdrop-filter 做出半透明的层，但不能一层一层叠到看不清。

大的表面要有更强的模糊和阴影，小控件的模糊和阴影要轻一点。该聚焦的时候用遮罩压低背景，不该打断流程的时候用偏移和透明度保留空间关系。

它也讲字体。

大标题和正文不能共用一套字距。

大字需要更紧一点，小字需要更照顾可读性。行高也要跟字号一起调，不能只靠放大字号制造层级。

这些东西放在一起，你会发现它真正想解决的是界面的判断力。AI 需要知道某个动画怎么写，也需要知道界面为什么会舒服。

装好之后，就可以在做界面时调用 apple-design。

比如你可以这样提需求：

或者让它审查现有交互：

也可以更具体一点：