モバイルアプリの UI デザインプロンプト。

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

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

オンボーディングの流れを、ウェルカム、1 日の目標の選択、最初のホーム画面の 3 画面でデザインしてください。各画面は 390×844、CSS はインライン、フォントはシステムフォントの、自己完結した HTML ファイルにしてください。3 画面すべてで一貫したスタイルを使ってください：[温かいクリーム色の背景、アクションには深い緑、コーラルのアクセント 1 色、見出しは明朝体（セリフ体）]。目標の選択画面には進捗インジケーターを表示し、イラストは CSS で描いてください。

連続記録 [12] 日目の、戻ってきたユーザー向けのホーム画面をデザインしてください。最も重要な要素は [1 日の目標に対する今日の進捗] で、最初に目に入るようにしてください。その下に [ページの進捗付きの、今読んでいる本]、[読書セッションを始める] ためのプライマリボタン、[今週の統計] を置いてください。[今日、ライブラリ、統計、プロフィール] の下部タブバーも入れてください。

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

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

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

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

[ホーム] 画面を、Material 3 の慣習に沿って Android 向けにしてください。トップアプリバー、ナビゲーションバー、そして合うなら [セッションを始める] ためのフローティングアクションボタンを使ってください。ブランドカラーと書体はそのままにしてください。iOS 版から変わった点を挙げてください。

承認されたオンボーディングとホームの画面を、私たちの [SwiftUI] アプリに実装してください。レイアウトと余白は [designs/] にある HTML ファイルに合わせ、色は [Theme.swift] のものを使い、Dynamic Type に対応し、合うところでは既存のコンポーネントを再利用してください。