GPT Image 2.6 のモックアップを HTML にする Codex 用プロンプト
GPT Image 2.6 のモックアップを Codex で自己完結した HTML ファイル 1 つに。レイアウト、余白、色、文字を合わせ、アイコンはインライン SVG にします。
プロンプト
添付したモックアップ画像を、[390×844] の自己完結した HTML ファイル 1 つとして作り直してください。CSS はインライン、フォントはシステムフォントです。レイアウト、余白、色、文字は正確に合わせてください。アイコンはインライン SVG で描いてください。
- 対応モデル
- GPT Image 2.6, Codex
- 収録セット
- GPT Image 2.6 プロンプト
このプロンプトについて
このセットのほかのプロンプトは、どれも画像で終わります。画像はクリックも、リサイズも、公開もできません。これは Codex 用です。生成したモックアップを添付すると、CSS をインラインにしシステムフォントを使った自己完結した HTML ファイル 1 つとして、レイアウト、余白、色、文字を合わせ、アイコンをインライン SVG で描いて、画像を作り直します。
変えるのは、角かっこの中のサイズだけです。スマートフォンの画面なら 390×844 のままにし、それ以外はモックアップ自体の寸法を使います。たとえばデスクトップのヒーローやダッシュボードなら 1440×900 です。画像に写真が含まれる場合は、Codex に再現させるのではなく、実際のファイルがどこにあるかを伝えてください。
ピクセル単位で完璧ではなく、近い仕上がりの最初の結果を期待してください。Codex Design のキャンバスでは、生成画像と HTML 版が並ぶため、余白やフォントサイズのずれが見つけやすく、目視で、あるいは Codex への追加のプロンプトで直せます。
同じセットのほかのプロンプト
- GPT Image 2.6 用フィットネスアプリのホーム画面プロンプト週間距離のリング、「ランを開始」ボタン、前回のランのカード、4 タブのバーを備えたランニングアプリのホーム画面。自分のアプリに合わせて調整できます。
- GPT Image 2.6 用モバイルバンキングアプリのプロンプト残高カード、4 つのクイックアクション、最近の取引リストを、落ち着いたネイビーの配色で描くバンキングアプリの画面。数字は自由に差し替えられます。
- GPT Image 2.6 用フードデリバリーアプリのホーム画面プロンプト住所バー、検索、カテゴリーチップ、おすすめレストランのカード、「近くで人気」のリストを備えた、白と赤のフードデリバリーのホーム画面。
- GPT Image 2.6 用アプリのオンボーディング画面プロンプトウェルカム、目標のチップ、リマインダーの時刻選択の 3 つのオンボーディング画面を、1 つの統一した配色で横に並べて生成します。
- GPT Image 2.6 用チャットアプリの会話画面プロンプト吹き出し、共有された写真、波形付きのボイスメッセージ、入力欄を備えた、青いアクセントのライトテーマのメッセージ会話画面。
- GPT Image 2.6 用 iOS の設定画面プロンプトグループ化されたリスト、現在の値、同期とリマインダーのトグル、赤い「サインアウト」の行を備えたネイティブ iOS の設定画面。アプリとグループは差し替え可能です。