Skills for designers and engineers, distilled from Emil Kowalski's years of experience at companies like Vercel and Linear. Knowing whether an animation or design choice is right is hard; these skills aim to get you to the right decisions faster, on the premise that AI doesn't replace domain expertise — it amplifies it. The canonical repo is emilkowalski/skills (not /skill).面向设计师和工程师的技能，提炼自 Emil Kowalski 在 Vercel、Linear 等公司多年的经验。判断一个动画或设计选择是否正确很难；这些技能的目标是让你更快做出正确决定，前提是 AI 不会取代领域专业知识——它放大这种知识。规范仓库是 emilkowalski/skills（不是 /skill）。面向設計師和工程師的技能，提煉自 Emil Kowalski 在 Vercel、Linear 等公司多年的經驗。判斷一個動畫或設計選擇是否正確很難；這些技能的目標是讓你更快做出正確決定，前提是 AI 不會取代領域專業知識——它放大這種知識。規範儲存庫是 emilkowalski/skills（不是 /skill）。デザイナーとエンジニアのためのスキル。Emil Kowalski が Vercel や Linear などで積んだ長年の経験を抽出したもの。アニメーションやデザインの選択が正しいかどうかを見極めるのは難しい。このスキルは正しい判断へより速く到達することを目指す。前提は、AI は専門知識に取って代わるのではなく、それを増幅するということである。正規のリポジトリは emilkowalski/skills（/skill ではない）。
Quick start快速上手快速上手クイックスタート
What it does
Skills for designers and engineers building better user interfaces, focused on getting animation and design decisions right. Agents often pick the wrong ingredients for an animation, such as an ease-in easing for an enter animation when it should be ease-out, or a solid border instead of a semi-transparent shadow, and these small things compound into an interface that is either amazing or just not that great.
How it works
The skills list the little mistakes agents can make and explain how to fix them, drawing on the author's years at Vercel and Linear. The main skill, emil-design-eng, covers mostly animation plus some design advice. Around it sit focused skills: animate and animate-expo build animations from scratch with the correct curve, duration, and properties; review-animations and improve-animations review and audit; find-animation-opportunities and remove-animations add or remove motion; and apple-design, write-swift, pick-ui-library, prototype, mobile-native, break-ui, and ask-sonner cover design systems, Swift, library choice, prototyping, native feel, stress-testing, and Sonner.
How to use it
Key points
- The canonical repo is
emilkowalski/skills, not a singular skill path. - The README gives no extra runtime requirements, so this entry keeps setup to the single install command.
它是做什么的
面向设计师和工程师的技能，帮助他们构建更好的用户界面，重点是把动画和设计决策做对。作者指出，智能体常常为动画选错要素，例如进入动画用了 ease-in 缓动而本应用 ease-out，或用了实线边框而不是半透明阴影；这些小问题累积起来，界面要么出色，要么就是差那么一点。
它怎么工作
这些技能列出智能体可能犯的小错误并解释如何修正，源自作者在 Vercel、Linear 等公司多年的经验。主技能 emil-design-eng 主要讲动画，也包括一些设计建议。围绕它的是专项技能：animate 和 animate-expo 从零构建动画并选对曲线、时长和属性；review-animations 和 improve-animations 负责评审和审计；find-animation-opportunities 和 remove-animations 负责增加或去掉动效；apple-design、write-swift、pick-ui-library、prototype、mobile-native、break-ui 和 ask-sonner 则覆盖设计体系、Swift、库选择、原型、原生手感、压测和 Sonner 通知库。
怎么用
关键要点
- 规范仓库是
emilkowalski/skills，不是单数形式的技能路径。 - README 直言其观点：AI 不能取代领域专长，它放大你能从专长中获得的东西。
- 还包括：针对掉帧动画的
animation-performance，以及帮你准确描述想要动效的 animation-vocabulary。 - README 没有给出额外的运行环境要求，因此本条目把安装部分保持为一条安装命令。
它是做什麼的
面向設計師和工程師的技能，幫助他們建構更好的使用者介面，重點是把動畫和設計決策做對。作者指出，智慧體常常為動畫選錯要素，例如進入動畫用了 ease-in 緩動而本應用 ease-out，或用了實線邊框而不是半透明陰影；這些小問題累積起來，介面要麼出色，要麼就是差那麼一點。
它怎麼運作
這些技能列出智慧體可能犯的小錯誤並解釋如何修正，源自作者在 Vercel、Linear 等公司多年的經驗。主技能 emil-design-eng 主要講動畫，也包括一些設計建議。圍繞它的是專項技能：animate 和 animate-expo 從零建構動畫並選對曲線、時長和屬性；review-animations 和 improve-animations 負責評審和稽核；find-animation-opportunities 和 remove-animations 負責增加或去掉動效；apple-design、write-swift、pick-ui-library、prototype、mobile-native、break-ui 和 ask-sonner 則涵蓋設計體系、Swift、程式庫選擇、原型、原生手感、壓測和 Sonner 通知程式庫。
怎麼用
關鍵要點
- 規範倉庫是
emilkowalski/skills，不是單數形式的技能路徑。 - README 直言其觀點：AI 不能取代領域專長，它放大你能從專長中獲得的東西。
- 還包括：針對掉幀動畫的
animation-performance，以及幫你準確描述想要動效的 animation-vocabulary。 - README 沒有給出額外的執行環境要求，因此本條目把安裝部分保持為一條安裝命令。
何をするのか
デザイナーとエンジニアがより良いユーザーインターフェースを作るためのスキルで、アニメーションとデザインの判断を正しく行うことに焦点を当てる。著者は、エージェントがアニメーションの要素を誤って選ぶことが多いと指摘する。たとえば、入場アニメーションに ease-out であるべきところで ease-in のイージングを使ったり、半透明のシャドウの代わりに実線のボーダーを選んだりする。こうした小さな誤りが積み重なり、インターフェースは素晴らしいものにも、ただ今ひとつのものにもなる。
仕組み
スキルはエージェントが犯しうる小さなミスを列挙し、修正方法を説明する。著者の Vercel や Linear での長年の経験に基づく。主要スキル emil-design-eng は主にアニメーションを扱い、デザインの助言も含む。周囲には専門スキルがある。animate と animate-expo は正しいカーブ、持続時間、プロパティでアニメーションをゼロから作る。review-animations と improve-animations はレビューと監査を行う。find-animation-opportunities と remove-animations はモーションの追加と削除を行う。apple-design、write-swift、pick-ui-library、prototype、mobile-native、break-ui、ask-sonner はデザインシステム、Swift、ライブラリ選択、プロトタイピング、ネイティブな感触、ストレステスト、Sonner トーストライブラリをカバーする。
使い方
押さえておきたい点
- 正規のリポジトリは
emilkowalski/skills であり、単数形のスキルパスではない。 - README は要点を率直に述べている。AI はドメインの専門知識に取って代わるのではなく、専門知識から得られるものを増幅する。
- フレーム落ちするアニメーション向けの
animation-performance や、望む動きを正確に言葉で指定するための animation-vocabulary も含まれる。 - README に追加の実行環境要件はないため、この項目はセットアップを 1 件のインストールコマンドだけに留める。
Supported platforms支持的平台支援的平台対応プラットフォーム
Generic
Notes备注備註備考
Canonical repo is emilkowalski/skills (not /skill). The ~49.7k secondary figure for a 'Skills for Designers and Engineers' collection matches this repo (now 51,114), not VoltAgent/awesome-claude-design.规范仓库是 emilkowalski/skills（不是 /skill）。二手来源中约 49.7k 的“Skills for Designers and Engineers”合集数字对应的是这个仓库（现为 51,114），不是 VoltAgent/awesome-claude-design。規範儲存庫是 emilkowalski/skills（不是 /skill）。二手來源中約 49.7k 的「Skills for Designers and Engineers」合集數字對應的是這個儲存庫（現為 51,114），不是 VoltAgent/awesome-claude-design。正規のリポジトリは emilkowalski/skills（/skill ではない）。「Skills for Designers and Engineers」コレクションについての二次情報の約 49.7k という数字は、このリポジトリ（現在 51,114）に該当するもので、VoltAgent/awesome-claude-design ではない。
Skills included包含的技能包含的技能含まれるスキル
emil-design-enganimateanimate-exporeview-animationsimprove-animationsfind-animation-opportunitiesremove-animationsanimation-performanceanimation-vocabularyapple-designwrite-swiftpick-ui-libraryprototypemobile-nativebreak-uiask-sonner