フロントエンド & UI
UI-UX Pro Max · Banner Design
サイズ指定のバナーを HTML で設計し、PNG として書き出す。
概要
5 段階のバナーワークフロー。要件収集、アートディレクションの調査、生成したビジュアルを用いた HTML と CSS でのバナー制作、プラットフォームの正確なピクセルへのスクリーンショット、そして反復のための選択肢の提示。
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, Linked
デザインにとっての意味
- どのバナーもプラットフォームの正確なピクセルで書き出すので、切れたりリサイズされたりしない。
- 生成したビジュアルはテキストなしで描かれるので、見出しはくっきりした HTML のまま残る。
- 1 回のリクエストにつきアートディレクションは 3 案なので、決める前に比較できる。
カバーする内容
- Workflow
- Banner size quick reference
- Art direction styles
- Design rules
- Prerequisites
インストール方法
UI-UX Pro Max · Banner Design
-
リポジトリをクローンする。
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
スキルファイルの場所を Codex に指定する。
cli/assets/skills/banner-design/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
目的、プラットフォーム、内容、ブランド、スタイル、数量の質問に答える。
-
アートディレクションごとに、セーフゾーンを適用した HTML バナーを 1 つずつ作る。
-
指定した幅と高さで各バナーをスクリーンショットし、上限を超えるファイルは圧縮する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。