gamified-app

游戏化应用技能

在单个深色展示页面上制作一个多屏移动端原型。 三个手机框并排摆放，每个框展示用户旅程中的一个独立时刻。

工作流

1. 阅读当前的 DESIGN.md（已注入上方）。对于游戏化应用，标题采用醒目的展示字体，配色也要比大多数产品更加明亮、丰富——任务看起来像任务，正是因为颜色如此。
2. 根据简报选择品牌和价值主张。 生成真实的任务名称（例如：“身体 — 20 分钟力量训练：俯卧撑与平板支撑”、“阅读 — 《四千周》”、“聆听 — Huberman Lab · 睡眠架构”、“营养 — 烹饪一份高蛋白午餐”、“心智 — 10 分钟专注冥想”、“观看 — The Bear · 第 3 季第 4 集”）。
3. 搭建舞台——铺满页面的深色背景（近黑色 #0e0d0c 或 DS 深色令牌），顶部带柔和的聚光渐变。手机上方放一行小字说明：左侧为“HI-FI PROTOTYPE · IPHONE”，右侧为品牌字标，两者均使用等宽字体。
4. 手机——三个 360×780 的手机框水平排列（视口较窄时换行堆叠）。每部手机都包含：
   • 12px 黑色边框，圆角半径 44px，动态岛挖孔。
   • 状态栏（时间／信号／电池）。
   • 手机专属内容（见下文）。
   • 底部标签栏，含 5 个图标（Today、Library、Stats、⊕ 中央 CTA、Profile）。当前标签使用强调色。
5. 手机 1 — 封面海报（销售／价值主张）：
   • 状态栏。
   • HI-FI PROTOTYPE · IPHONE 眉题。
   • 大号展示标题（“每日任务，助你成为更好的自己。”），其中“成为”使用强调色。
   • 1–2 句正文，使用柔和的衬线／无衬线字体。
   • 等宽字体提示行（“点按任务打开详情。在工具栏中切换 [theme]，以切换主题和布局。”）
   • 底部边缘露出下一屏的滚动预览。
6. 手机 2 — 今日任务面板（主屏）：
   • 问候语“早上好，Sam”＋正在响铃的小铃铛，标注 XP。
   • 等级条——“LV 14 · Level 14 · 1648 / 2480 XP”，带玻璃拟态进度条。
   • 副标题：“有 8 个待完成任务 · 今天可获得 430 XP”。
   • 3×2 任务卡片网格。每张卡片包含：圆角、柔和强调色、左上角的字形徽章、标题、简短元信息，以及右下角的“+NN XP”徽标。
   • 底部标签栏。
7. 手机 3 — 任务详情：
   • 返回箭头＋屏幕标题（“任务”）。
   • 主视觉区块采用该任务的强调色，包含大号衬线任务标题（“身体 — 力量训练”）、简短叙述，以及“奖励 +90 XP”印章。
   • 步骤清单（3–4 个微任务，其中一个已完成，两个待完成）。
   • 底部放置醒目的主 CTA 按钮“开始任务”，使用强调色胶囊样式。
8. 编写一份 HTML 文档：
   • 从 <!doctype html> 到 </html>，CSS 内联。
   • 全部用 CSS 实现——不使用图片。使用 linear-gradient 和内联 SVG 字形制作卡片徽章与标签栏图标。
   • 在舞台、每部手机以及每个手机框的各个区域上添加 data-od-id。
9. 自检：
   • 三个手机框各有明确用途，不能是同一屏幕的三个副本。
   • 卡片颜色不能喧宾夺主——每张任务卡片使用不同的柔和色调，背景则保持统一中性。
   • 整体体现游戏化与成熟感——有趣，但不幼稚。

输出约定

在 <artifact> 标签之间输出：

<artifact identifier="game-slug" type="text/html" title="Mobile — App Name">
<!doctype html>
<html>...</html>
</artifact>

在 artifact 前写一个句子，之后不写任何内容。