Apple Design

Apple Design は、Apple の WWDC インターフェース講演を Web のジェスチャー UI、スプリング、半透明マテリアルの規則に落とす読み込み可能なスキルです。場所は emilkowalski/skills の skills/apple-design、MIT、作成日 2026-03-16、Markdown。2026-09-14 の GitHub は親リポジトリ 37,460 stars、2,108 forks（12 スキルの集合であり、apple-design 単独の数字ではない）。インストールは npx skills@latest add emilkowalski/skills。X の For You では、Codex 向けの Apple 風 UI スキルとして出てきました。

これは Apple ではなく、製品としての HIG でも GUI でもありません。より広い UI/UX パックなら UI Skills、Anthropic 公式フロントエンドなら Frontend Design、Addy Osmani のエンジニアリングライフサイクルなら Agent Skills を見てください。

主な機能

• トリガー：SKILL.md はジェスチャー駆動 UI、スプリングアニメ、ドラッグ/スワイプ/シート、運動量、中断可能な遷移、半透明マテリアル、光学サイズ、reduced-motion、Apple 風の基礎（フィードバック、空間一貫性、抑制）で読むよう指示。
• 核心：動きは画面上の現在値から始まり、指の速度を継承し、運動量を投射し、飛行中に掴める。スプリングが既定なのは中断可能だから。
• スキル内の具体値：既定 UI スプリング damping 1.0 / response 0.3-0.4、フリック bounce damping ~0.8、運動量投射 decelerationRate ≈ 0.998、ラバーバンド定数 0.55。Motion / Framer Motion の bounce + duration に対応。
• Web 対応：Pointer Events + setPointerCapture、transform/opacity のみ、マテリアルは backdrop-filter、トラッキングはサイズ依存、prefers-reduced-motion はスライドではなくクロスフェード。
• 同じリポジトリの兄弟：emil-design-eng、animate、animate-expo、review-animations、improve-animations、find-animation-opportunities、animation-vocabulary、write-swift、pick-ui-library、prototype、ask-sonner。

制限：37,460 stars はコレクションの熱量であり、認証された Apple 移植ではない。スキル本文は WWDC 2018 Designing Fluid Interfaces、WWDC 2020 タイポ、オーディオ触覚講演、Principles of Great Design（WWDC 2026）を引用。CSS transition と @keyframes は掴んで反転するジェスチャーには明示的に不適。reduced-motion 利用者にはスプリングではなくフェードが必要。

使用シナリオ

• iOS シートのような手触りが欲しい Web / アプリ UI を作る Claude Code / Codex / 他のスキルホスト。
• すでに Motion、Vaul、Embla を使い、離した瞬間のスナップではなく速度引き渡しが必要な デザインエンジニアリング。
• 代わりに Frontend Design を使うべき人：Anthropic 公式フロントエンドスキルが欲しく、Apple モーション教義ではない場合。

料金プラン

はじめに

1. npx skills@latest add emilkowalski/skills、または github.com/emilkowalski/skills をクローン。
2. ホストを skills/apple-design/SKILL.md に向ける。
3. シート、ドロワー、ドラッグを頼み、表示値から始まる中断可能なスプリングを要求する。
4. ニュースレター：animations.dev/skills。

一次情報：SKILL.md と コレクション README。

よくある質問

公式 Apple か？

違う。Emil Kowalski の Web 向け蒸留。Apple HIG が一次仕様のまま。

apple-design だけ入れられる？

文書化されたインストールはコレクション全体を取る。ホストが単一フォルダを許すなら skills/apple-design だけコピーできる。

CSS keyframes は残せる？

スキルは、ユーザーが掴めるものには使うなと書く。現在速度から再ターゲットできるスプリングを使う。

代替案

• UI Skills：より広い UI/UX 原則とコンポーネント。
• Frontend Design：Anthropic 公式フロントエンドスキル。
• Agent Skills：エンジニアリングライフサイクルであり、モーションの味ではない。

ヒント

1. MIT、12 スキル、親 37,460 stars、damping 1.0 は 2026-09-14 確認のページから引用する。
2. これが Apple だと言わない。3.5 万 stars を apple-design 単独に帰属させない。
3. 初回のあと、同じリポジトリの review-animations を組み合わせる。

まとめ

Apple Design は For You に出た WWDC から Web へのモーションスキルです。スプリング、速度引き渡し、マテリアル、reduced-motion 時のフェード。起点は emilkowalski/skills。Anthropic 公式フロントエンドなら Frontend Design を開いてください。