フロントエンド & UI
imagegen-frontend-web
ランディングページのセクションごとに、横長の参考画像を 1 枚ずつ生成する。
概要
Web サイトのデザイン参照のための、画像ディレクションのスキル。セクションごとに独立した横長の画像を 1 枚ずつ生成し、パレットは 1 つに固定しつつ、ヒーローの構図はセットの中で変化させる。
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections pro
デザインにとっての意味
- 8 セクションのランディングページなら、1 枚に詰め込んだボードではなく読みやすいコンプが 8 枚できる。
- ヒーローの構図は、左にテキスト・右に画像という多用されがちな定番を超えて変化する。
- 1 つのパレット、タイプスケール、CTA のファミリーが、生成されるすべてのフレームで保たれる。
カバーする内容
- Image count and page slicing
- The combinatorial variation engine
- Hero minimalism rules
- Color and material rules
- Multi-image consistency rule
- Default site packs
インストール方法
imagegen-frontend-web
-
リポジトリをクローンする。
git clone https://github.com/Leonxlnx/taste-skill -
スキルファイルの場所を Codex に指定する。
skills/imagegen-frontend-web/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
欲しいセクション数を伝える。指定がなければランディングページは既定で 6 セクションになる。
-
スキルはまずセクション数を宣言し、各出力にセクション番号のラベルを付ける。
-
エディトリアルやシネマティックといった雰囲気の言葉を与えて、ヒーローのスケールと背景を導く。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。