AI 生成 UI 总透着廉价感?这套开源工具,一键复刻苹果高级流体交互

很多设计师、写代码的朋友应该都有同一个烦恼：用 AI 生成页面代码，功能全都正常，但页面看着廉价又土气，跟苹果原生那种丝滑细腻的界面完全没法比。

今天给大家分享一个爆火开源工具：emilkowalski/skills，出自前 Vercel、Linear 大厂设计师，现在 GitHub 已经 14.4k 星，连 SpaceX 都在用它对标苹果流体交互。

简单说它的作用：把苹果官方多年藏在设计师脑子里的设计细节，做成 AI 能看懂、自动执行的规则，相当于免费给你的 AI 配一个苹果资深 UI 顾问。

一、用 AI 做界面，3 个让人头疼的通病，它一次性全解决

❌ 问题 1：AI 没审美，细节全做错

AI 学的都是网上普通模板，分不清好看和粗糙的区别，经常踩坑：

1. 弹窗弹出动画用错曲线，苹果统一顺滑出场，AI 经常做的卡顿拖沓
2. 随便加粗黑边框，不会用半透明阴影做出层次感一堆小错误堆在一起，页面瞬间拉低档次。✅ 工具解决：内置完整苹果设计标准，AI 写代码自动遵守规范，不用手动一点点微调。

❌ 问题 2：AI 只会说空话，没法直接改代码

普通 AI 优化只会说 “动画再流畅点”，没有实际修改方案。这个工具里的王牌功能improve-animations，一套完整修复流程：

1. 自动扫描项目里所有动画代码
2. 从 8 个专业角度找出所有问题
3. 生成修改清单，标注好哪个文件、第几行、替换成什么代码
4. 分开检查和修改，大批量优化页面超省事

❌ 问题 3：设计师、开发、AI 互相听不懂

平时大家形容动画只会说 “柔和、顺滑” 这种模糊词，AI 根本理解不到位。配套自带专业动效词汇表，统一所有人的话术，比如页面拖拽回弹效果，统一叫rubber-banding，三方沟通再也不会有误会。

二、六大实用功能，按需选用不浪费

表格

重点讲王牌功能：improve-animations

1. 全方位检查：动画用途、快慢曲线、时长、真实物理效果、能否中途关闭、性能、无障碍适配、页面连贯度，8 个维度全部查一遍
2. 问题分轻重：先改影响页面观感最严重的 bug
3. 自动生成修改文档：存到项目里 plans 文件夹，一目了然
4. 支持 AI 批量自动改代码，不用手动一行行调

三、实拍对比，一眼看出普通页面和苹果质感的差距

1. 一键生成苹果风弹窗、底部抽屉

开启apple-design功能后，自动套用苹果固定参数：弹窗刚弹出先缩小到 0.96 倍，再用 180ms 顺滑弹出；搭配多层半透明浅阴影、柔和小圆角，杜绝刺眼渐变、厚重黑边框。

2. 动画代码修改前后对比

css

ounter(lineounter(lineounter(lineounter(lineounter(line// 没优化前：廉价、卡顿、拖慢页面transition: all 300ms ease-in;// 工具优化后：苹果标准流畅写法transition: transform 180ms ease-out, opacity 180ms ease-out;

优化两点好处：

1. 去掉 all，不会多余刷新页面，网页加载更流畅
2. 出场动画统一顺滑曲线，看着舒服不生硬

3. 统一专业说法，告别靠感觉描述

以后聊动画不用含糊形容，全部有固定叫法：

• 拖拽页面边缘回弹：rubber-banding
• 弹簧效果弹出弹窗：pop-in
• 能中途关掉的顺滑过渡动画：fluid interrupt transition

设计师、前端、AI 沟通零障碍。

四、超简单安装 + 使用教程，主流 AI 编辑器全都适配

1. 一行代码完成安装

打开项目终端，直接复制运行：

bash

ounter(linenpx skills@latest add emilkowalski/skills

2. 不同 AI 工具存放位置

表格

3. 两种调用方法，推荐第一种效果更稳

1. **手动指定技能（强烈推荐，不出错）**直接跟 AI 说：使用 apple-design 做一个 iOS 风格底部弹窗，严格按照苹果顺滑交互规范来
2. 自动识别触发AI 看懂你的需求后，自动调用对应功能优化，适合简单页面快速制作

五、底层设计思路，不只是换样式模板

这套工具不只是复制苹果外观，还有一套完整动画使用逻辑：

1. 动画分轻重日常高频操作（快捷键、搜索框）简化动画，不让用户等待；弹窗、新手引导这种低频页面，用上完整弹簧顺滑动画，兼顾效率和好看。
2. 流畅优先准则只用位移 + 透明度做动画，保证手机电脑都不卡顿；自动适配关闭动画的无障碍模式；所有动画都能中途关掉，这就是苹果 “流体界面” 的核心。

六、标准使用步骤 + 避坑小技巧

标准操作流程（照着做效果最好）

1. 先用词汇库animation-vocabulary说清楚你想要什么动画
2. 调用总包emil-design-eng生成或者重新做页面组件
3. 最后用review-animations全面检查页面细节

实用小贴士

1. 尽量手动写明要用哪个功能，避免 AI 漏掉苹果设计规范
2. 分开分步调用，不要一次性加载全部功能，生成效果更稳定
3. 完全免费开源，个人做项目、商用开发都随便用，没有隐藏收费

总结

以前用 AI 做界面最大短板就是没有成熟设计标准，很容易做出廉价感页面。这个开源工具刚好补上这个缺口，不管是专职 UI 设计师、写前端的程序员，还是平时用 AI 简单做页面的朋友，都能省下大量调样式、改动画的时间，轻松做出苹果那种克制高级的界面。

项目开源地址，直接自取：

plaintext

ounter(linehttps://github.com/emilkowalski/skills

遵循成熟的设计规范，才能摆脱廉价 AI 页面，做出质感拉满的产品界面。