フロントエンド & UI
Animation Review
シニア級の水準に照らして、モーションを見つけ、改善し、レビューする。
概要
Emil Kowalski のモーションスキル 3 つが 1 つのループとして働く。動かすべき場所を見つけ、既存のモーションを改善し、高い水準に照らしてアニメーションコードをレビューする。
Bundles 3 commands: find-animation-opportunities / improve-animations / review-animations
Find, improve and review motion in a codebase against a senior craft bar.
デザインにとっての意味
- 動くべきなのに動かない UI を洗い出し、動かすべきでないモーションは退ける。
- 曖昧な「もっと良くして」を、優先順位づけしたモーションの監査に変える。
- アニメーションを、個人の好みではなく明示された水準に保つ。
カバーする内容
- Find animation opportunities
- Improve animations
- Review animations
- Craft bar
インストール方法
Animation Review
-
リポジトリをクローンする。
git clone https://github.com/emilkowalski/skills -
スキルファイルの場所を Codex に指定する。
skills/find-animation-opportunities/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
find パスを実行して、UI の中のモーションの機会を突き止める。
-
improve パスを適用して、既存のアニメーションコードを作り直す。
-
出荷前に review パスを実行し、詰めの甘いモーションを捕まえる。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。