ゲーム化アプリスキル
マルチスクリーンのモバイルプロトタイプを、1つのダークなショーケースページに生成します。 3つの電話フレームを横に並べ、各フレームがジャーニーの異なる瞬間を表現します。
ワークフロー
- アクティブなDESIGN.mdを読む（上記にインジェクション）。ゲーム化アプリでは、見出しに太いディスプレイ書体を使用し、一般的なプロダクトよりも明るく幅広いパレットを採用します。クエストは色によってクエストらしく見えます。
- ブリーフからブランドと価値提案を選択。実際のクエスト名を生成します（例：「ボディ — 20分ストレングス：腕立て伏せ＆プランク」、「読書 — 4000週間」、「聴く — Huberman Lab · 睡眠の仕組み」、「栄養 — 高タンパクランチを作る」、「マインド — 10分集中瞑想」、「観る — The Bear · S3 E4」）。
- ステージ設定 — フルブリードの暗いページ（ほぼ黒の
#0e0d0cまたは ダークトークン）に、上部から柔らかいスポットライトグラデーション。電話機の上に小さなキャプション行：「HI-FI PROTOTYPE · IPHONE」（左）、ブランドワードマーク（右）、両方モノスペース。 - 電話フレーム — 3つの360×780電話フレームを横一列に配置（狭いビューポートではスタックに折り返す）。各電話機：
- 12pxの黒ベゼル、44pxの角丸、Dynamic Islandノッチ。
- ステータスバー（時刻/電波/バッテリー）。
- 電話固有のコンテンツ（下記）。
- 5つのアイコン（Today, Library, Stats, ⊕ 中央CTA, Profile）のボトムタブバー。アクティブタブはアクセントカラー。
- 電話1 — カバーポスター（セールス/価値提案）:
- ステータスバー。
- HI-FI PROTOTYPE · IPHONEのアイブロウ。
- 大きなディスプレイ見出し（「毎日のクエストで、より良い人間になろう。」）、「なる」にアクセント。
- ミュートされたセリフ/サンセリフの1～2文のボディ。
- モノのヒント行（「タップしてクエスト詳細を開く。ツールバーの[テーマ]を切り替えてテーマとレイアウトを変更。」）
- 下部に次の画面をほのめかす微妙なスクロールティーザー。
- 電話2 — 今日のクエストダッシュボード（ヒーロー画面）:
- 挨拶「Good morning, Sam」＋小さなXPベル鳴動。
- レベルリボン — 「LV 14 · レベル14 · 1648 / 2480 XP」と、グラスモーフィックなリボン内のプログレスバー。
- サブライン：「8クエスト待機 · 今日は430 XP獲得可能」。
- クエストタイルの3×2グリッド。各タイル：角丸、パステルアクセントカラー、左上にグリフチップ、タイトル、ミニメタ行、右下に「+NN XP」ピル。
- ボトムタブバー。
- 電話3 — クエスト詳細:
- 戻る矢印＋画面タイトル（「Quest」）。
- クエストのアクセントカラーを使用したヒーローブロック、大きなセリフのクエストタイトル（「ボディ — ストレングス」）、短いナラティブボディ、「REWARD +90 XP」スタンプ。
- ステップチェックリスト（3～4のマイクロタスク、1つ完了、2つ保留）。
- 下部に大きな一次CTA「Start quest」ピル（アクセントカラー）。
- 単一のHTML文書を作成:
<!doctype html>から</html>まで、CSSはインライン。- すべてCSSで実現 — 画像は使用しない。タイルチップとタブアイコンには
linear-gradientとインラインSVGグリフを使用。 - ステージ、各電話機、各フレームの領域に
data-od-id属性。
- 自己チェック:
- 3つのフレーム、それぞれ異なる目的を持つ。同じ画面のコピー3つではない。
- タイルの色が強すぎない — 各クエストタイルは同じニュートラルな面上で異なるパステルを使用。
- ゲーム化されており、大人向け — 遊び心があり、幼稚ではない。
出力契約
以下のように <artifact> タグで囲んで出力します:
<artifact identifier="game-slug" type="text/html" title="Mobile — App Name">
<!doctype html>
<html>...</html>
</artifact>
アーティファクトの前に1文、アーティファクトの後に何も記述しないこと。