开源项目emilkowalski/skills中的apple-design Skill，将Apple WWDC设计原则转化为17条可落地的动效与交互规范。适合前端开发者和设计师，帮助AI生成具有物理感、可中断、手势跟随的界面。无需担心动画生硬，可直接调用审查或优化现有交互。
Tags:
终于有一个可以复刻 Apple 设计风格的 Skill 了。
Apple 的一些视觉风格，给人的感觉就是很舒服。
这种舒服感不只来自圆角、毛玻璃啥的。
而是有很多细节，比如按下按钮，按钮有回应。卡片飞出去之后，惯性是不是自然的。动画进行到一半，你能不能重新把它抓回来。
这些细节平时很难说清楚，但你一用就知道差别。
好的界面像一个能被你控制的真实物体，差一点的界面就像在播放一段写死的视频。
最近看到 Emil Kowalski 开源的 apple-design Skill，没有停在 Apple 风格的表皮上，也包含了上面提到的这些 Apple 设计的动画细节。
帮你生成的界面，用起来更有手感。
01
开源项目简介
项目叫 emilkowalski/skills，GitHub 上目前大约 10.5k Star。
作者 Emil Kowalski 是一位 Design Engineer，做过不少关于动画、界面细节、设计工程的内容。
这个开源项目是一组给 AI Agent 用的设计经验 Skill。
你在写界面、审查动画、优化交互的时候，可以让 Agent 带着这些 Skill 去判断什么地方不对，应该怎么改。
地址：https://github.com/emilkowalski/skillsApple Skill 原文：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
使用方式很简单。
npx skills@latest add emilkowalski/skills装好之后，就可以在做界面时调用 apple-design。
比如你可以这样提需求：
使用 apple-design 构建一个底部弹窗，让它在触屏设备上感觉像原生体验。
或者让它审查现有交互：
使用 apple-design 审查这个页面里的弹窗、抽屉和按钮交互。
重点关注响应速度、可中断性、手势速度、弹簧行为，以及减少动态效果模式。
也可以更具体一点：
使用 apple-design 让这个卡片拖拽交互感觉更有物理感。
它应该 1:1 跟随指针，保留释放时的速度，预测惯性动量，并在边界处有橡皮筋回弹效果。
03
点击下方卡片，关注逛逛 GitHub
这个公众号历史发布过很多有趣的开源项目，如果你懒得翻文章一个个找，你直接关注微信公众号：逛逛 GitHub ，后台对话聊天就行了：
没有评论:
发表评论