Codex 用モバイルアプリのモックアップを SwiftUI コードにするプロンプト
承認済みの HTML の画面を、レイアウトと余白を合わせ、テーマの色を使い、Dynamic Type に対応した SwiftUI アプリとして Codex に実装させます。
プロンプト
承認されたオンボーディングとホームの画面を、私たちの [SwiftUI] アプリに実装してください。レイアウトと余白は [designs/] にある HTML ファイルに合わせ、色は [Theme.swift] のものを使い、Dynamic Type に対応し、合うところでは既存のコンポーネントを再利用してください。
- 対応モデル
- Codex
- 収録セット
- モバイルアプリ
このプロンプトについて
Codex は、承認されたオンボーディングとホームの画面を、HTML ファイルをレイアウトと余白の基準として、実際のアプリに実装します。色は既存のテーマファイルから取り、ユーザーの設定に合わせて文字が拡大縮小するよう Dynamic Type に対応し、すでにあるコンポーネントを重複して作らず再利用します。
SwiftUI は、Jetpack Compose、React Native、Flutter など自分のフレームワークに置き換え、ほかの 2 つの角かっこは HTML デザインのフォルダと色を定義しているファイルに向けてください。Apple のプラットフォーム以外では、Dynamic Type を、Android でシステムのフォントスケールを尊重するといった、それぞれの同等の機能に置き換えます。ダークモードをデザインしてあるなら、そのファイルにも触れておくと、両方のテーマを一度に作れます。
この手順では、Codex がテーマとコンポーネントを読み込むため、リポジトリの中で作業する必要があります。アプリ全体ではなく、プロンプトにある 2 画面から始めましょう。その 2 つの余白とコンポーネントがモックアップと合えば、型がすでにコードにあるので、残りの画面は速く進みます。
同じセットのほかのプロンプト
- Codex 用モバイルアプリのブリーフと画面リストのプロンプトアプリのユーザー、中心となるループ、プラットフォームを伝え、最初のバージョンの全画面を、グループと各画面の目的付きで Codex にリストアップさせます。
- Codex 用アプリのオンボーディングの流れのデザインプロンプトウェルカム、目標の選択、最初のホームの 3 画面を 390×844 でつなげ、CSS のイラストを使った 1 つの統一スタイルでデザインします。
- Codex 用モバイルアプリのホーム画面のデザインプロンプト最も重要な要素を 1 つ指定し、それを中心に、タブバーと実際の統計を備えた、戻ってきたユーザー向けのホーム画面をデザインします。
- Codex 用リスト画面と詳細画面のデザインプロンプト検索欄とフィルターチップ付きのリスト画面と、そこから開く詳細画面を、本物らしいタイトルと数字で 2 つのファイルにデザインします。
- Codex 用アプリの設定画面のデザインプロンプト標準的なグループ化されたリスト、各行の現在の値、適所のトグル、赤で示す破壊的な操作を備えた設定画面をデザインします。
- Codex 用の空・読み込み中・エラー状態のデザインプロンプトアプリ画面の空、読み込み中、エラーの状態を、通常の状態と同じナビゲーションとヘッダーで、別々のファイルにデザインします。