Codex 用の空・読み込み中・エラー状態のデザインプロンプト

アプリ画面の空、読み込み中、エラーの状態を、通常の状態と同じナビゲーションとヘッダーで、別々のファイルにデザインします。

[ライブラリ] 画面について、さらに 3 つの状態を別々のファイルでデザインしてください。空の状態（本がまだない新規ユーザー向けで、次にすべきことを 1 つはっきり示す）、読み込み中（実際のレイアウトに合わせたスケルトン表示）、エラー（オフライン、再試行ボタン付き）です。ナビゲーションとヘッダーは通常の画面とまったく同じにしてください。

対応モデル

Codex, ChatGPT

収録セット

モバイルアプリ

このプロンプトについて

Codex は 1 つの画面について、さらに 3 つのバージョンをデザインします。空の状態は、まだ何もない新規ユーザー向けで、次にすべきことを 1 つはっきり示します。読み込み中は、実際のレイアウトの形をしたスケルトンのプレースホルダーを表示します。エラーは、端末がオフラインのときの画面で、再試行ボタンが付きます。ナビゲーションとヘッダーは通常の画面とまったく同じなので、変わるのはコンテンツ領域だけです。

角かっこは、データがなくなりうる画面なら何にでも向けられます。フィード、受信トレイ、検索結果の画面にも同じ 3 つの状態が必要です。プロンプトを実行する前に、空の状態での次の一歩を決めておきましょう。最初の本を追加する、読書リストを取り込む、などです。それを書き込んでおけば、Codex が勝手に作ることはありません。

こうした状態は、たいてい開発の途中で、開発者がその場しのぎで作ることになります。完成したリスト画面からいま設計しておけば、スケルトンは実際の行と一致し、エラーメッセージもアプリのトーンを保てます。通常の画面と一緒に渡して、4 つすべてを同じ作業でまとめて実装してもらいましょう。

同じセットのほかのプロンプト

• Codex 用アプリのダークモードのデザインプロンプト色味のある暗い背景、抑えたアクセント、WCAG AA の文字コントラストで画面のダークモード版を作り、変更した色の一覧も出します。
• Codex 用 Android Material 3 への移植プロンプトiOS アプリの画面を、トップアプリバー、ナビゲーションバー、FAB を使った Material 3 の Android 版に、ブランドカラーと書体はそのままで移植します。
• Codex 用モバイルアプリのモックアップを SwiftUI コードにするプロンプト承認済みの HTML の画面を、レイアウトと余白を合わせ、テーマの色を使い、Dynamic Type に対応した SwiftUI アプリとして Codex に実装させます。
• Codex 用モバイルアプリのブリーフと画面リストのプロンプトアプリのユーザー、中心となるループ、プラットフォームを伝え、最初のバージョンの全画面を、グループと各画面の目的付きで Codex にリストアップさせます。
• Codex 用アプリのオンボーディングの流れのデザインプロンプトウェルカム、目標の選択、最初のホームの 3 画面を 390×844 でつなげ、CSS のイラストを使った 1 つの統一スタイルでデザインします。
• Codex 用モバイルアプリのホーム画面のデザインプロンプト最も重要な要素を 1 つ指定し、それを中心に、タブバーと実際の統計を備えた、戻ってきたユーザー向けのホーム画面をデザインします。