フロントエンド & UI
emil-design-eng
Emil Kowalski による、アニメーションのタイミング、イージング、コンポーネントの仕上げのルール。
概要
デザインエンジニアリングの哲学を符号化する。アニメーションの判断フレームワーク、スプリングの指針、コンポーネントの原則、clip-path のテクニック、ジェスチャー処理、パフォーマンスのルール、レビューのチェックリストを含む。
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
デザインにとっての意味
- 頻繁な操作はアニメーションを完全に外すので、コマンドパレットは瞬時のまま保たれる。
- 登場は scale(0) ではなく scale(0.95) から始まるので、何もないところから現れることがない。
- ポップオーバーは中心ではなくトリガーから拡大し、空間的なつながりを保つ。
カバーする内容
- The animation decision framework
- Spring animations
- Component building principles
- clip-path for animation
- Performance rules
- Review checklist
インストール方法
emil-design-eng
-
リポジトリをクローンする。
git clone https://github.com/emilkowalski/skills -
スキルファイルの場所を Codex に指定する。
skills/emil-design-eng/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
Codex に UI コードのレビューを頼むと、Before・After・Why の表を返す。
-
新しいモーションでは、動かすべきか、なぜか、どのイージングか、どれくらいの速さかに答える。
-
チェックリストを適用し、transition: all や 300ms を超える継続時間を指摘する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。