蒸馏 Apple 风格的 Skill 了，GitHub 上有 18.3K 人点赞

最近看到了 Emil Kowalski 的 apple-design Skill，很厉害。它并不是苹果风格的 UI 模板，而把 Apple 设计中最难复制的部分分解为规则：

反馈、惯性、材质、层级、排版、可中断动画；该项目来源于 emilkowalski/skills，在 Git Hub 上已经有 18.3k 星了。

很多人做 Apple 风的时候，只用到了圆角、blur、淡阴影等效果。最难的就是交互物理了：按钮按下去要有即时反馈，Sheet 拖动要跟着手指走，放开之后还要减速，卡片离开屏幕时不能匀速飘走，动画进行到一半还可以被重新拉回来。

其主要思想就是把 Apple Human Interface Guidelines 中的一些偏向于人体感觉的内容转化为可以被人工智能执行的动作、材质、字体、手势和无障碍等约束。

我忍不住的上手体验了一把

先安装一下，很简单

npx skills add emilkowalski/skill

搞出来的效果，响应式也做了适配

搞出来的效果

首页

详情

响应式首页

响应式详情

直接使用 Skill。

 


    
npx skills add emilkowalski/skill

可以用来做弹窗、抽屉、Sheet、拖拽卡片、导航转场、半透明 Header、列表 reveal、按钮微交互等。主要关注的是 easing、duration、transform property、reduced motion、pointer-down feedback 等属性，并且不会让 AI 再添加一些没有意义的 transition-all。

配图建议：

生成一个深色的 Apple 前端界面，中间有一个被拖拽了一半的半透明 Sheet，在它的后面是模糊层次以及圆角卡片，在它的旁边标有 velocity handoff、interruptible spring、pressed feedback、material depth

开源地址

 GitHub：https://github.com/emilkowalski/skills

我认为这个东西最值钱的地方就是把“再苹果一点”做成可以被检验的项目：反馈是否迅速、动效是否可以被打断、惯性是否能够被接住、材质是否有层次感。比起使用一套 UI 库要难得多。

我是鹏磊，持续分享 AI 编程干货，欢迎晒出你用 emilkowalski 搞的作品，看看谁的最有个性~