遊戲化應用技能
在單一深色展示頁面上產生多畫面手機原型。 三個手機框架並排，每個框架代表旅程中的一個時刻。
工作流程
- 閱讀活躍的 DESIGN.md（已注入在上方）。對於遊戲化應用，請在標題上使用大膽的顯示字體，並採用比大多數產品更明亮、更廣泛的色板——任務看起來像任務，是因為顏色如此。
- 從簡報中挑選品牌 + 價值主張。生成真實的任務名稱（例如「身體 — 20分鐘肌力訓練：伏地挺身與棒式」、「閱讀 — 《四千個星期》」、「聆聽 — Huberman Lab · 睡眠結構」、「滋養 — 烹調高蛋白午餐」、「心靈 — 10分鐘專注冥想」、「觀看 — 《大熊餐廳》 · S3 E4」）。
- 舞台 — 滿版深色頁面（近黑色
#0e0d0c或設計系統深色標記）加上柔和的頂部聚光燈漸層。在手機上方，有一行小型說明文字：左側「HI-FI PROTOTYPE · IPHONE」，右側品牌字標，均使用等寬字體。 - 手機 — 水平行中的三個 360×780 手機框架（在窄視口上會換行堆疊）。每個手機：
- 12px 黑色邊框，44px 圓角，動態島瀏海。
- 狀態列（時間 / 訊號 / 電池）。
- 特定手機內容（如下）。
- 底部標籤列，包含 5 個圖示（今日、資料庫、統計、⊕ 中央行動呼籲、個人檔案）。活動標籤使用強調色。
- 手機 1 — 封面海報（銷售 / 價值主張）：
- 狀態列。
- HI-FI PROTOTYPE · IPHONE 眉題。
- 大尺寸顯示標題（「每日任務，成為更好的人。」），強調「成為」。
- 1–2 句主體文字，使用柔和襯線 / 無襯線字體。
- 等寬提示行（「點選任務以開啟詳細資訊。在工具列中切換 [主題] 以切換主題和佈局。」）。
- 在底部邊緣有下一畫面的微妙捲動預覽。
- 手機 2 — 今日任務儀表板（主畫面）：
- 問候語「早安，Sam」+ 小型 XP 鈴鐺圖示。
- 等級締帶 —「LV 14 · 等級 14 · 1648 / 2480 XP」，在玻璃擬態風格的締帶內有進度條。
- 副標題：「8 個任務等待中 · 今天可獲得 430 XP」。
- 3×2 任務方塊網格。每個方塊：圓角、柔和強調色、左上角字形標籤、標題、小型元資料行、右下角「+NN XP」膠囊。
- 底部標籤列。
- 手機 3 — 任務詳細資訊：
- 返回箭頭 + 畫面標題（「任務」）。
- 英雄區塊，使用任務的強調色、大型襯線任務標題（「身體 — 肌力」）、簡短敘述主體、「獎勵 +90 XP」標章。
- 步驟清單（3–4 個微型任務，一個已完成，兩個待辦）。
- 底部大型主要行動呼籲「開始任務」膠囊，使用強調色。
- 撰寫單一 HTML 文件：
<!doctype html>到</html>，CSS 內嵌。- 全部使用 CSS — 無圖片。使用
linear-gradient和行內 SVG 字形作為方塊標籤和標籤圖示。 - 在舞台、每個手機、每個框架的區域上使用
data-od-id。
- 自我檢查：
- 三個框架，每個都有不同的目的。不是同一畫面的三個副本。
- 方塊顏色不壓倒一切——每個任務方塊使用不同的柔和色調，對比相同的中性表面。
- 閱讀起來感覺遊戲化且適合成人——活潑，但不幼稚。
輸出合約
在 <artifact> 標籤之間輸出：
<artifact identifier="game-slug" type="text/html" title="Mobile — App Name">
<!doctype html>
<html>...</html>
</artifact>
在神器之前寫一句話，之後不寫任何內容。