フロントエンド & UI
animation-vocabulary
曖昧なモーションの説明を、正確な技術用語に変える。
概要
逆引きの用語集。モーション効果をざっくり説明すると、スキルが正確な用語をそのまま返し、複数当てはまりそうなときは近い候補も添える。
Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when t
デザインにとっての意味
- エージェントに指示するための正しい言葉を、デザイナーに与える。
- clip-path と mask、pop in と bounce のような紛らわしい組を区別する。
- 用語を勝手に作らないので、名づけの信頼性が保たれる。
カバーする内容
- Entrances and exits
- Sequencing and timing
- Transitions between states
- Scroll
- Spring animations
- Polish and effects
インストール方法
animation-vocabulary
-
リポジトリをクローンする。
git clone https://github.com/emilkowalski/skills -
スキルファイルの場所を Codex に指定する。
skills/animation-vocabulary/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
見たものを説明する。たとえば「iOS のラバーバンドスクロール」のように。
-
太字の用語と、1 行の用語定義を返す。
-
2 つの用語が両方あり得るときは、代替案を求める。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。