Codex 用アプリのダークモードのデザインプロンプト

色味のある暗い背景、抑えたアクセント、WCAG AA の文字コントラストで画面のダークモード版を作り、変更した色の一覧も出します。

[ホーム] と [ライブラリ] の画面のダークモード版を作ってください。色を反転するだけにはしないでください。真っ黒ではなく暗い [グリーングレー] の背景を使い、アクセントの彩度を下げ、文字のコントラストは WCAG AA 以上を保ってください。変更した色とその理由も教えてください。

対応モデル

Codex, ChatGPT

収録セット

モバイルアプリ

このプロンプトについて

Codex は 2 つの画面のダーク版を作り、色の選び方を説明します。プロンプトのルールが、よくある問題を未然に防ぎます。真っ黒ではなく色味のある暗い背景、暗い中で光って見えないよう彩度を落としたアクセント、そして少なくとも WCAG AA を満たす文字のコントラストです。

最初の 2 つの角かっこに、変換したい画面を入れます。ホーム画面と、内容の多い画面の組み合わせが向いています。一方では中心となるビジュアル要素を、もう一方では長い文章を試せるからです。背景の色味はブランドから取りましょう。グリーンのブランドならグリーングレー、ブルーのブランドならブルーグレーにすれば、ダークテーマも同じアプリに感じられます。

変更した色の一覧は、再利用できるダークパレットの出発点になります。役割ごとのライトとダークの値の小さな表にまとめるよう Codex に頼み、それを本番コードの手順に渡せば、ダークモードは画面ごとではなくトークンから作られます。ライトの各画面とダークの対応する画面を並べて見比べるのが、くすみすぎたアクセントを見つける最も手早い方法です。

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

• 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 つ指定し、それを中心に、タブバーと実際の統計を備えた、戻ってきたユーザー向けのホーム画面をデザインします。
• Codex 用リスト画面と詳細画面のデザインプロンプト検索欄とフィルターチップ付きのリスト画面と、そこから開く詳細画面を、本物らしいタイトルと数字で 2 つのファイルにデザインします。