フロントエンド & UI
apple-design
Apple の流体的なインターフェース原則を、Web のスプリングとジェスチャーに翻訳する。
概要
Apple の WWDC デザイン講演、とりわけ Designing Fluid Interfaces から抽出した知見を、CSS、Pointer Events、スプリングライブラリに対応づける。反応、割り込み可能性、慣性、素材、タイポグラフィ、アクセシビリティを扱う。
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible tran
デザインにとっての意味
- フィードバックは pointer-down で発火するので、押した要素が無反応に感じられない。
- アニメーションは画面上の現在値から始まるので、割り込み時に見えるジャンプが消える。
- フリックは着地点を予測するので、放り投げた先はジェスチャーが狙った場所に落ち着く。
カバーする内容
- Response
- Direct manipulation
- Interruptibility
- Momentum projection
- Materials and depth
- Reduced motion and accessibility
インストール方法
apple-design
-
リポジトリをクローンする。
git clone https://github.com/emilkowalski/skills -
スキルファイルの場所を Codex に指定する。
skills/apple-design/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
Codex にシート、ドロワー、ドラッグ操作のいずれかを作らせる。
-
pointer capture で 1:1 に追従し、速度の履歴を記録する。
-
指を離すと、付属の減衰値を使ってスプリングに速度を渡す。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。