📌 一句话摘要
本文介绍一个开源项目 emilkowalski/skills,其中的 apple-design Skill 将 Apple 设计原则与动效细节编译成 AI Agent 可调用的规则,帮助生成更舒适、可控的界面。
📝 详细摘要
文章推荐了 GitHub 上 10.5k Star 的开源项目 emilkowalski/skills,重点介绍其中的 apple-design Skill。该项目将 Apple 的 WWDC 设计演讲、流体交互原则、可中断动画、材质层级、字体规则等提炼为 17 条设计原则,并转换成 AI Agent 可使用的 Skill。文章展示了通过该 Skill 生成的 UI 界面截图与动图效果,描述了核心理念(如界面跟随手势、可中断性、动态阻尼等),并提供了简单的安装与使用命令。整体属于项目速览与推荐,信息层面让读者知晓了这个有价值的工具,但缺乏对原则落地细节的深入分析。
💡 主要观点
- 开源项目 emilkowalski/skills 收集了多个设计工程相关的 Skill,apple-design 是其中专注于复刻 Apple 风格的一个。 项目由 Design Engineer Emil Kowalski 创建,包含 emil-design-eng、review-animations、improve-animations 以及 apple-design 等 Skill,主要用于指导 AI Agent 生成界面与动画。
- apple-design Skill 将 Apple 的设计原则转化为 17 条可落地的规则,核心强调界面的可控感与物理性。 规则来源包括 Apple WWDC 演讲,聚焦流体交互、手势跟随、可中断动画、材质层级、字距与行高等,目标是让 Web 界面拥有接近原生 Apple 的体验。
- 使用方式简单,通过 npx skills@latest add emilkowalski/skills 安装后即可在提示中引用。 开发者可以在生成或审查界面时,用自然语言要求 AI 参考 apple-design,例如“构建一个底部弹窗,感觉像原生体验”或“审查卡片拖拽交互的物理感”。
💬 文章金句
- 好的界面像一个能被你控制的真实物体,差一点的界面就像在播放一段写死的视频。
- apple-design 里反复强调这种可打断性。