6.1
深览指数
产品人人都是产品经理·逛逛GitHub··AI 生成
终于有一个蒸馏 Apple 风格的 Skill 了，GitHub 上有 10.5K 人点赞。
介绍 Emil Kowalski 开源的项目 emilkowalski/skills，它并非简单复刻 Apple 视觉表皮，而是将 Apple 流体交互、动画可打断性、字体细节等核心设计原则提炼为 17 条可落地到 Web 开发的 AI Agent Skill。文章通过具体原则（如界面从手势「长出来」、可中断动画、材质层级、字距调整）和交互 Demo，展示了如何让 AI 生成的界面具备「手感」而非仅有外观。适合前端工程师、UI 设计师和关注 AI 应用落地质量的从业者。原文 ↗
核心观点
- ▍Apple 设计风格的核心竞争力在于交互细节（如动画可打断性、物理惯性、手势跟随），而非仅靠圆角、毛玻璃等视觉元素；开源项目 emilkowalski/skills 旨在将这些原则转化为 AI Agent 能理解和执行的 Skill 规则。
- 01项目名为 emilkowalski/skills，GitHub 上约 10.5k Star，作者 Emil Kowalski 是一名 Design Engineer，内容来源包括 WWDC 设计演讲。
- 02项目包含 apple-design、emil-design-eng、review-animations、improve-animations 等多个与设计工程相关的 Skill，其中 apple-design 专门将 Apple 设计原则和流体交互翻译到 Web 开发。
- 03apple-design Skill 的核心原则包括：界面从用户当前动作「长出来」；动画保持可打断性，拖拽底部弹层时手势 1:1 跟随，释放后保留惯性，关闭中途可重新拖回；材质层级通过 backdrop-filter 半透明实现，大表面与小组件的模糊/阴影强度不同。
- 04字体方面强调大标题和正文不能共用一套字距，大字需更紧、小字更照顾可读性，行高需随字号调整。
- 05使用方式为通过 npx skills@latest add emilkowalski/skills 安装，后续可让 Agent 审查或生成具有原生手感的具体交互（如底部弹窗、卡片拖拽）。
反方 / 局限
- — 文章未讨论该 Skill 在非 Web 场景（如原生 iOS/Android 平台）的适用性，也未涉及将 WWDC 原则直接「翻译」到 Web 时可能因技术栈差异造成的体验折损。
6 分钟 · 4 卡片 · 9 资料
读原文 →