用途:在单个深色展示页上产出一个多屏移动端高保真原型,三个手机画框并排,各代表用户旅程中的一个独立界面。
主要能力:画框一为封面海报(价值主张),含状态栏、大号展示标题、说明正文与等宽字体提示行;画框二为今日任务仪表盘(核心屏),含问候语、等级丝带(等级与 XP 进度)、任务数量与今日可得 XP、3×2 任务磁贴网格(每格含圆角、粉彩强调色、字形角标、标题、迷你元信息、XP 徽标);画框三为任务详情,含返回箭头与标题、英雄区块(强调色、大号衬线任务标题、叙述正文、奖励印章)、步骤清单(3–4 个微任务,一个已完成、两个待办)和底部主行动按钮。三个画框均含 12px 黑色边框、44px 圆角、灵动岛开孔、状态栏和 5 个图标的底部标签栏(Today、Library、Stats、⊕ 中央 CTA、Profile,当前标签用强调色)。
使用方式:读取注入的活动 DESIGN.md,按简报选定品牌与价值主张并生成真实任务名称;舞台为全幅深色页面(近黑 #0e0d0c 或设计系统深色令牌)配柔和的顶部聚光渐变,手机上方的说明行左侧为“HI-FI PROTOTYPE · IPHONE”,右侧为品牌字标,均用等宽字体;画框为 360×780,横向排列,窄视口自动堆叠。输出单个 HTML 文档(<!doctype html> 到 </html>),CSS 内联,全部用 CSS 实现,不使用图片,磁贴角标与标签图标使用 linear-gradient 和内联 SVG 字形,在舞台、每个手机及各画框区域加 data-od-id。
适用场景:需要展示游戏化移动应用界面概念、任务系统或任务详情交互原型的场合。
限制:面向游戏化与成人风格(活泼但不幼稚);需依赖 DESIGN.md 注入;具体平台、收费方式与其它未提及信息暂未提供。