用途:在单个深色展示页上产出多屏移动应用原型,三个手机框并排,各自代表用户旅程中的一个时刻,适合游戏化移动应用的 hi-fi 原型演示。
主要能力:先读取当前 DESIGN.md,游戏化应用倾向使用醒目的展示字体做标题,并采用比多数产品更明亮、更宽的配色。根据简报确定品牌与价值主张,生成真实的任务名称,例如“Body — 20-min strength: pushups & planks”“Read — Four Thousand Weeks”“Listen — Huberman Lab · Sleep Architecture”“Nourish — Cook a high-protein lunch”“Mind — 10-min focus meditation”“Watch — The Bear · S3 E4”。
页面结构:全出血深色页(近黑 #0e0d0c 或设计系统深色 token),顶部柔和聚光渐变。手机上方一行小字说明:左侧“HI-FI PROTOTYPE · IPHONE”,右侧品牌字标,均为等宽字体。三个 360×780 手机框横向排列,窄视口下换行堆叠;每个手机含 12px 黑色边框、44px 圆角、灵动岛刘海、状态栏(时间/信号/电池)、各自内容,以及含 5 个图标(Today、Library、Stats、⊕ 中央 CTA、Profile)的底部标签栏,激活标签用强调色。
三个屏幕:手机 1 为封面海报,含状态栏、eyebrow、大标题(“Daily quests for becoming a better human.”,强调“becoming”)、1–2 句正文、等宽提示行,底部露出下一屏的滚动预告。手机 2 为今日任务面板,含问候语“Good morning, Sam”、等级缎带(“LV 14 · Level 14 · 1648 / 2480 XP”及进度条)、副行“8 quests waiting · earn 430 XP today”、3×2 任务磁贴网格(圆角、柔和强调色、左上图标芯片、标题、迷你元信息、右下“+NN XP”胶囊)。手机 3 为任务详情,含返回箭头与标题、带强调色的主视觉块、大号衬线任务标题、短叙述、“REWARD +90 XP”印章、3–4 项步骤清单(一项完成、两项待办)以及底部强调色主 CTA“Start quest”。
使用方式:输出单个 HTML 文档,从 <!doctype html> 到 </html>,CSS 内联,全部用 CSS 实现,无图片,磁贴芯片与标签图标使用 linear-gradient 和内联 SVG 字形,并在舞台、每个手机及各屏区域上添加 data-od-id。自检要求:三屏各有不同用途,不是同一屏的三份复制;磁贴颜色不过分抢眼,每个任务磁贴在同一中性表面上使用不同柔和色;整体读起来是游戏化且面向成人,活泼但不幼稚。输出契约:在 <artifact> 标签之间输出,标识符为 game-slug,类型 text/html,标题为“Mobile — App Name”,artifact 前一句话,之后无内容。
限制:资料未提供收费、价格、平台支持范围或实际效果等信息。