Codex 用アプリの設定画面のデザインプロンプト

標準的なグループ化されたリスト、各行の現在の値、適所のトグル、赤で示す破壊的な操作を備えた設定画面をデザインします。

標準的な [iOS] のグループ化されたリストを使って、設定画面をデザインしてください：[アカウント、1 日の目標、リマインダー、表示、データとプライバシー、ヘルプ]。各行の右側に現在の値を表示し、[リマインダー] にはトグルを使い、[アカウントを削除] のような破壊的な操作は一番下に赤で置いてください。

対応モデル

Codex, ChatGPT

収録セット

モバイルアプリ

このプロンプトについて

Codex は、プラットフォームのネイティブなスタイルで設定画面をデザインします。指定したセクション名ごとのグループ化されたリスト、各行の右側の現在の値、オン／オフの設定にはトグル、そしてアカウント削除のような破壊的な操作は最後に赤で置きます。

最初の角かっこのプラットフォームと 6 つのグループを、画面リストで挙げたものに置き換えてください。トグルにしたい設定はすべて名前で挙げます。それ以外は別の画面を開く行になります。設定画面は、ユーザーが独創性よりも慣習を期待する場所なので、標準的なグループ化されたリストを求めるのは意図的です。ブランドカラーは構造ではなく、トグルとリンクに使います。

1 日の目標の「20 分」やリマインダーの「午後 8:30」のような、現実的な現在の値を入れて、長い値でラベルが 2 行に押し出されないかを確かめましょう。Android でも提供するなら、この画面の Material 3 版も依頼してください。グループ化されたリストは、Android では見た目も動作も異なります。

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

• Codex 用の空・読み込み中・エラー状態のデザインプロンプトアプリ画面の空、読み込み中、エラーの状態を、通常の状態と同じナビゲーションとヘッダーで、別々のファイルにデザインします。
• 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 つの統一スタイルでデザインします。