技能概述
Gamified App 係一個多幀手機原型技能，可以喺單個深色展示頁面上生成三台並排嘅 iPhone 模型，每台展示旅程中嘅不同時刻。設計方向係「好玩但成熟」— 遊戲化元素配搭克制嘅色彩同精緻嘅排版，唔會顯得幼稚。
三台手機各自有明確分工：第一台係封面/價值主張海報，第二台係今日任務儀表板（Hero screen），第三台係任務詳情頁。底部統一配備 5 個圖標嘅 Tab Bar（Today、Library、Stats、⊕ 中央 CTA、Profile）。
觸發關鍵字
- gamified app、habit tracker、RPG app、level up app、daily quests、XP app、streak app、life management app
- 遊戲化、習慣打卡、升級 App、每日任務
什麼時候用
- 設計遊戲化生活管理 App 原型
- 習慣追蹤 / 打卡 App 概念驗證
- RPG 式人生應用（每日任務賺 XP）
- 需要展示多屏幕流嘅手機原型
使用方法
自然語言觸發
設計一個遊戲化生活 App
做一個 habit tracker 原型
整一個每日任務賺 XP 嘅 App
gamified app for becoming a better human
工作流程
- 讀取 DESIGN.md — 遊戲化 App 用大字體標題 + 較闊嘅色板（比一般產品更活潑）
- 從簡報提取品牌同價值主張 — 生成真實任務名稱（例如「Body — 20-min strength」「Read — Four Thousand Weeks」「Mind — 10-min focus meditation」）
- 舞台搭建 — 全頁深色背景（
#0e0d0c或 DS dark token）+ 頂部柔和聚光漸變，上方小字說明行 - 三台手機 — 360×780 幀，12px 黑色邊框 + 44px 圓角 + Dynamic Island 凹槽，各含狀態欄同專屬內容
- Phone 1 — 封面海報：大標題、1-2 句副標題、提示文字
- Phone 2 — 任務儀表板：問候語、等級絲帶（XP 進度條）、3×2 任務卡片網格（每張 pastel 配色 + glyph chip + XP 值）
- Phone 3 — 任務詳情：返回箭頭、Hero 色塊、任務敘述、步驟清單、CTA 按鈕
- 寫入單一 HTML — 純 CSS，無圖片，用
linear-gradient同 inline SVG glyph
輸出格式
單文件 HTML artifact：
- 深色舞台背景 + 頂部聚光效果
- 三台 360×780 手機模型（窄螢幕自動堆疊）
- 每台手機有 unique content，唔會三台都一樣
data-od-id標註舞台、每台手機、每個區域- 底部 Tab Bar 5 圖標
設計要點
| 元素 | 規格 |
|---|---|
| 舞台背景 | #0e0d0c 或 DS dark token + 頂部聚光漸變 |
| 手機尺寸 | 360×780，12px 邊框，44px 圓角，Dynamic Island |
| Tab Bar | 5 圖標（Today, Library, Stats, ⊕, Profile），active tab accent 色 |
| 任務卡片 | 3×2 網格，每張不同 pastel 色，圓角 + glyph chip + XP pill |
| 等級絲帶 | Glassmorphic ribbon，內含 XP 進度條 |
視覺規則
- 只用深色模式 — 舞台係近黑色
- 無圖片 — 全部用 CSS gradient 同 inline SVG 搞定
- Pastel 色調 — 任務卡片用柔和配色，唔好搶眼
- 成年感 — 遊戲化但成熟，唔好太卡通
- 標題大字 — bold display type 做 headline
實際例子
例子 1：遊戲化人生管理 App
用戶：「Design a gamified life-management app — multi-screen mobile prototype: cover poster, today's quests with XP, and a quest detail.」
生成三台手機：
- Phone 1：「Daily quests for becoming a better human」封面海報
- Phone 2：「Good morning, Sam」+ LV 14 等級絲帶 + 8 個任務卡片
- Phone 3：Body 任務詳情 — strength training，含 checklist 同 CTA
例子 2：習慣追蹤 App
用戶：「做一個習慣打卡 App，每日任務賺積分」
生成：
- 封面：品牌價值主張
- 儀表板：今日待完成嘅 6 個習慣（閱讀、運動、冥想等）
- 詳情：其中一個習慣嘅步驟分解 + 開始按鈕