Codex 用モバイルアプリのブリーフと画面リストのプロンプト

アプリのユーザー、中心となるループ、プラットフォームを伝え、最初のバージョンの全画面を、グループと各画面の目的付きで Codex にリストアップさせます。

[読書習慣アプリ Pagely] をデザインします。ユーザーは [1 日 10〜30 分は本を読みたいのに、つい忘れてしまう大人] です。中心となるループは [1 日の目標を決め、タイマーで読み、連続記録を続ける] です。プラットフォームは [まず iOS] です。

最初のバージョンに必要な画面をすべて、オンボーディング、中心となるループ、設定に分けて挙げてください。各画面について、目的を 1 文で、載せる最も重要な 3 つの要素を書いてください。

対応モデル

Codex, ChatGPT

収録セット

モバイルアプリ

このプロンプトについて

Codex は、アプリの最初のバージョンの画面一覧を、オンボーディング、中心となるループ、設定にグループ分けして返します。各画面に 1 文の目的と、その画面でもっとも重要な 3 つの要素が付くので、何かを描き始める前に確認できる軽量な仕様書になります。

4 か所の角かっこを置き換えます。アプリとその機能、使う人とその人の課題、短い行動の連なりとしての中心となるループ、最初に取り組むプラットフォームです。いちばん大事なのは中心となるループです。「目標を決める、読む、連続記録を続ける」のように 3 つの動詞で書くと、どの画面が中心で、どの画面が支える役なのかが Codex に伝わります。

何かをデザインする前に一覧を絞り込んでください。最初のバージョンは、必要以上の画面数で返ってきがちです。画面ごとの「重要な 3 つの要素」は手元に残しておきましょう。あとのホーム画面のプロンプトでは最も重要な要素を 1 つ指定するよう求められ、その答えはこの一覧にあるからです。

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

• Codex 用アプリのオンボーディングの流れのデザインプロンプトウェルカム、目標の選択、最初のホームの 3 画面を 390×844 でつなげ、CSS のイラストを使った 1 つの統一スタイルでデザインします。
• Codex 用モバイルアプリのホーム画面のデザインプロンプト最も重要な要素を 1 つ指定し、それを中心に、タブバーと実際の統計を備えた、戻ってきたユーザー向けのホーム画面をデザインします。
• Codex 用リスト画面と詳細画面のデザインプロンプト検索欄とフィルターチップ付きのリスト画面と、そこから開く詳細画面を、本物らしいタイトルと数字で 2 つのファイルにデザインします。
• Codex 用アプリの設定画面のデザインプロンプト標準的なグループ化されたリスト、各行の現在の値、適所のトグル、赤で示す破壊的な操作を備えた設定画面をデザインします。
• Codex 用の空・読み込み中・エラー状態のデザインプロンプトアプリ画面の空、読み込み中、エラーの状態を、通常の状態と同じナビゲーションとヘッダーで、別々のファイルにデザインします。
• Codex 用アプリのダークモードのデザインプロンプト色味のある暗い背景、抑えたアクセント、WCAG AA の文字コントラストで画面のダークモード版を作り、変更した色の一覧も出します。