@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 设计讲座,并面向网页环境进行了转化。
相似文章
@yanliudreamer: 再次推荐下大神@emilkowalski! 是我学习Design Engineer的领路人 之前给大家推荐过他的设计skill,很有Apple风格 https://github.com/emilkowalski/skills… (名字很牛…
推荐Emil Kowalski的设计技能和课程,这些技能具有Apple风格,旨在帮助设计师和工程师构建更好的用户界面,特别强调动画和AI代理的应用。
@dhruvtwt_: 在过去几周里,我尝试了 UI Skills 上的不同技能,以下这 10 个让我印象最深刻……
一条推荐 UI Skills 平台中 10 个突出技能的推文,包括设计工程、动画、无障碍性以及各种前端工具,并对 'emil-design-eng' 技能进行了详细深入介绍。
@tranmautritam: 这是我见过最好的设计工程技能集。每个技能都能将AI输出转化为干净的UI,而不是泛泛的垃圾。保存…
该推文分享了一个名为‘UI Skills for Design Engineers’的技能集,它有助于将AI生成的输出转化为精致的用户界面,包括用于代码库审计和UI设计原理的特定技能。
@aronhouyu: 一个新的仓库,可以让ai在做ui的时候: 少犯错误,更有高端感,并整成牛逼的动画 最近除了日常工作,都在恶补前端和设计知识 https://github.com/emilkowalski/skills…
介绍 emilkowalski/skills 仓库:为设计师和工程师提供一系列技能,帮助 AI 代理在构建用户界面时减少错误、提升设计质感并生成流畅动画。
@vista8: 发现一个使用的前端开发 Skill,比如经常不知道专业词汇,就写不出专业动效和交互。 可把这个Skill当字典用,比如 用 animation-vocabulary 告诉我“列表一个个冒出来”的动效叫什么? 用 emil-design-e…
推荐几个前端动画相关的 Skill 工具,帮助开发者查询专业动效词汇、打磨交互动效以及审查动画问题。