@emilkowalski:新技能:/apple-design 苹果的 WWDC 视频是知识宝库。我梳理了最喜欢的一些视频并…
摘要
从苹果 WWDC 视频中提炼出的 17 条设计与动效原则精选集,封装成可复用的技能,供设计工程师审查和改进 UI 动画与界面。
查看缓存全文
缓存时间: 2026/07/09 23:52
新技能:/apple-design Apple 的 WWDC 视频堪称知识宝库。我梳理了自己最喜欢的几场,提炼出 17 条设计与动效原则。可用于回顾现有作品,或在启动新项目时确保方向正确。https://t.co/jCwhthpi20 — # emilkowalski/skills 来源:https://github.com/emilkowalski/skills # 面向设计工程师的技能 skills.sh (https://skills.sh/emilkowalski/skills) 帮助设计师和工程师构建更好的用户界面。动画或设计上的选择究竟是否恰当,往往难以判断。这些技能旨在帮你更快做出正确决策。它们基于我在 Vercel 和 Linear 等公司多年的工作经验。这里的所有技能都是领域专长的副产品。AI 不会取代这种专长,它只是放大你能从中获得的价值,并让你相对他人更具优势。所以,学习编码、设计,或在任何其他领域建立专长吧——这极其宝贵。你将在动效方面积累专长:请访问 animations.dev (https://animations.dev/) ## 安装 bash npx skills@latest add emilkowalski/skills ## 为何使用它? AI 代理缺乏良好品味 我多次发现,代理无法为动画挑选正确的要素。例如,在入场动画中本应使用 ease-out(缓出)时,却用了 ease-in(缓入)原因在这里。或者,它们会选择实线边框而非半透明阴影。所有这些细微之处累积起来,会使你的界面要么惊艳,要么……差强人意。正如《有品味的AI代理》中所说,这些技能列出了代理可能犯下的所有小错误,并解释了如何修正。这是通往优秀界面的捷径,也是在平庸之作中脱颖而出的利器。 ## 参考 - emil-design-eng — 主要技能,包含大部分动画建议及部分设计建议。 - review-animations — 基于我的规则,严格审查你的动画。 - animation-vocabulary — 通过使用正确的词汇,精准告诉 AI 你想要什么,从而获得更好的动画。 - apple-design — 苹果的界面设计与流畅动效原则,提炼自其 WWDC 设计讲座,并面向网页环境进行了转化。
相似文章
@dhruvtwt_: 在过去几周里,我尝试了 UI Skills 上的不同技能,以下这 10 个让我印象最深刻……
一条推荐 UI Skills 平台中 10 个突出技能的推文,包括设计工程、动画、无障碍性以及各种前端工具,并对 'emil-design-eng' 技能进行了详细深入介绍。
@vista8: 发现一个使用的前端开发 Skill,比如经常不知道专业词汇,就写不出专业动效和交互。 可把这个Skill当字典用,比如 用 animation-vocabulary 告诉我“列表一个个冒出来”的动效叫什么? 用 emil-design-e…
推荐几个前端动画相关的 Skill 工具,帮助开发者查询专业动效词汇、打磨交互动效以及审查动画问题。
@KyrieCheungYep: 给大家介绍一下这个 Skill,这是我在向一些客户做项目介绍的时候,沉淀下来的 Skill,经过了我自己多番实战验证 这是一个专门把「可见 UI 参考图」高质量还原成 HTML/CSS 的 Codex&Claude Skill 它会把设计…
KyrieCheungYep 发布了一个名为 ky-design-to-html 的 Codex/Claude Skill,用于将 UI 截图或设计稿高质量还原为 HTML/CSS,通过拆解设计结构、分离代码与资产、画布适配及浏览器截图校验等工作流减少视觉偏差。
@swapnakpanda: 系统设计变得简单,一旦你观看了所有这些视频
一条推广一系列让学习更简单的系统设计视频的推文。
@ivanfioravanti: @awnihannun 的《Writing Fast MLX》技能对任何使用 Apple MLX 框架的人来说都是必备的。
推荐 Awni Hannun 的《Writing Fast MLX》技能给使用 Apple MLX 框架的开发者的推文。