终于有一个可以复刻Apple设计风格的Skill了。
Apple的一些视觉风格，给人的感觉就是很舒服。
这种舒服感不只来自圆角、毛玻璃啥的。
而是有很多细节，比如按下按钮，按钮有回应。卡片飞出去之后，惯性是不是自然的。动画进行到一半，你能不能重新把它抓回来。
这些细节平时很难说清楚，但你一用就知道差别。
好的界面像一个能被你控制的真实物体，差一点的界面就像在播放一段写死的视频。
最近看到EmilKowalski开源的emilkowalski/skills，没有停在Apple风格的表皮上，也包含了上面提到的这些Apple设计的动画细节。
帮你生成的界面，用起来更有手感。
01开源项目简介
项目叫emilkowalski/skills，GitHub上目前大约10.5kStar。
作者EmilKowalski是一位DesignEngineer，做过不少关于动画、界面细节、设计工程的内容。
这个开源项目是一组给AIAgent用的设计经验Skill。
你在写界面、审查动画、优化交互的时候，可以让Agent带着这些Skill去判断什么地方不对，应该怎么改。
地址：https://github.com/emilkowalski/skills
AppleSkill原文：https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md
仓库里有好几个和设计工程相关的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需要知道某个动画怎么写，也需要知道界面为什么会舒服。
02使用方式很简单
npxskills@latestaddemilkowalski/skills
装好之后，就可以在做界面时调用apple-design。
比如你可以这样提需求：
使用apple-design构建一个底部弹窗，让它在触屏设备上感觉像原生体验。
或者让它审查现有交互：
使用apple-design审查这个页面里的弹窗、抽屉和按钮交互。
重点关注响应速度、可中断性、手势速度、弹簧行为，以及减少动态效果模式。
也可以更具体一点：
使用apple-design让这个卡片拖拽交互感觉更有物理感。
它应该1:1跟随指针，保留释放时的速度，预测惯性动量，并在边界处有橡皮筋回弹效果。
热门跟贴