フロントエンド & UI
gpt-taste
GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。
概要
ヒーロー、タイポグラフィ、コンポーネント、GSAP のパラダイムを疑似ランダムに選ばせ、レイアウトのばらつきを強制するフロントエンド指示書。AIDA のページ構成と、セクション間の大きな余白も同時に守らせる。
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP Scro
デザインにとっての意味
- コンテナを広げて折り返しの壁を防ぐので、ヒーローの見出しは 2〜3 行に収まる。
- ベントーグリッドは grid-flow-dense を使うので、空セルや欠けが残らない。
- 安っぽいメタラベルは禁止、ボタン文字のコントラストも出力前に検証する。
カバーする内容
- Python-driven true randomization
- AIDA structure and spacing
- Hero architecture and the 2-line iron rule
- The gapless bento grid
- Advanced GSAP motion and hover physics
- Content, assets and strict bans
インストール方法
gpt-taste
-
リポジトリをクローンする。
git clone https://github.com/Leonxlnx/taste-skill -
スキルファイルの場所を Codex に指定する。
skills/gpt-tasteskill/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
ページを頼むと、UI コードの前にスキルが design_plan ブロックを出す。
-
ヒーローのレイアウト、フォントスタック、コンポーネント、GSAP のパラダイムというランダム選択の結果を確認する。
-
ヒーロー幅の計算、グリッド密度、ラベル点検、コントラストというプリフライト項目を確認する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 
フロントエンド & UI できること imagegen-frontend-web ランディングページのセクションごとに、横長の参考画像を 1 枚ずつ生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。