游戏化应用技能
在单个深色展示页面上生成多屏移动应用原型。 三个手机界面并排展示，每个界面代表旅程中的一个独立时刻。
工作流程
- 阅读活动的 DESIGN.md（已在上方注入）。对于游戏化应用，标题应使用粗体显示字体，调色板比大多数产品更明亮、更宽广——任务看起来像任务，正是因为颜色的运用。
- 从需求中选取品牌 + 价值主张。生成真实的任务名称（例如：“身体 — 20分钟力量训练：俯卧撑与平板支撑”、“阅读 — 《四千周》”、“聆听 — Huberman Lab · 睡眠结构”、“滋养 — 烹饪高蛋白午餐”、“心灵 — 10分钟专注冥想”、“观看 — 《熊家餐馆》第三季第4集”）。
- 舞台——全出血深色页面（近黑色
#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 — 任务详情：
- 返回箭头 + 屏幕标题（“任务”）。
- 使用任务强调色的英雄区块，大型衬线字体任务标题（“身体 — 力量训练”），简短叙述正文，“REWARD +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>
在 artifacts 前写一句话，之后不写任何内容。