Codex 用リスト画面と詳細画面のデザインプロンプト

検索欄とフィルターチップ付きのリスト画面と、そこから開く詳細画面を、本物らしいタイトルと数字で 2 つのファイルにデザインします。

[ライブラリ] のリスト画面と [本] の詳細画面を、2 つのファイルでデザインしてください。リストには表紙、タイトル、著者、進捗付きの [12 冊の本] を表示し、検索欄と [読書中、読了、読みたい] のフィルターチップを付けてください。詳細画面はリストの項目から開き、[読書履歴とメモ] を表示します。本物らしいタイトルと数字を使ってください。

対応モデル

Codex, ChatGPT

収録セット

モバイルアプリ

このプロンプトについて

Codex は、つながった 2 画面を別々のファイルでデザインします。12 件の項目のリストで、各項目に表紙、タイトル、著者、進捗が付き、上部に検索欄とフィルターチップが並ぶ画面と、項目をタップすると開く詳細画面です。一緒にデザインすると、行の中でも全画面でも項目が同じ見た目になります。

角かっこを、自分のアプリのリストと詳細のペアに変えてください。商品と商品ページ、タスクとタスクの画面、レシピとレシピ、といった具合です。項目数は実際のユーザーが持つ数に合わせ、実際のフィルターの状態を名前で挙げます。本物らしいタイトルと数字を求める最後の一文は、見た目以上に重要です。非常に長いタイトルの隣に、進捗 3% の本と 100% の本が並ぶと、行のレイアウトが耐えられるかがわかります。

そのあと、リストから詳細への移動が連続して感じられるか確認します。両方のファイルで、同じ表紙、タイトルのスタイル、進捗の見せ方になっているかです。この手順の [ライブラリ] 画面は、空、読み込み中、エラーの状態のプロンプトの土台にもなるので、まず通常の状態を正しく仕上げてください。

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

• Codex 用アプリの設定画面のデザインプロンプト標準的なグループ化されたリスト、各行の現在の値、適所のトグル、赤で示す破壊的な操作を備えた設定画面をデザインします。
• Codex 用の空・読み込み中・エラー状態のデザインプロンプトアプリ画面の空、読み込み中、エラーの状態を、通常の状態と同じナビゲーションとヘッダーで、別々のファイルにデザインします。
• Codex 用アプリのダークモードのデザインプロンプト色味のある暗い背景、抑えたアクセント、WCAG AA の文字コントラストで画面のダークモード版を作り、変更した色の一覧も出します。
• Codex 用 Android Material 3 への移植プロンプトiOS アプリの画面を、トップアプリバー、ナビゲーションバー、FAB を使った Material 3 の Android 版に、ブランドカラーと書体はそのままで移植します。
• Codex 用モバイルアプリのモックアップを SwiftUI コードにするプロンプト承認済みの HTML の画面を、レイアウトと余白を合わせ、テーマの色を使い、Dynamic Type に対応した SwiftUI アプリとして Codex に実装させます。
• Codex 用モバイルアプリのブリーフと画面リストのプロンプトアプリのユーザー、中心となるループ、プラットフォームを伝え、最初のバージョンの全画面を、グループと各画面の目的付きで Codex にリストアップさせます。