Back to Details

gamified-app

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Gamified App Skill

游戏化应用技能

Produce a multi-screen mobile prototype on a single dark showcase page. Three phone frames side-by-side, each one its own moment in the journey.
在单个深色展示页面上制作多屏移动原型。三个手机框架并排展示，分别对应用户旅程中的不同环节。

Workflow

工作流程

  1. Read the active DESIGN.md (injected above). For gamified apps, lean on bold display type for headlines and a brighter, broader palette than most products — quests look like quests because the colors do.
  2. Pick the brand + value prop from the brief. Generate real quest names (e.g. "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").
  3. Stage — full-bleed dark page (near-black 
    #0e0d0c
    or DS dark token) with a soft top spotlight gradient. Above the phones, a small caption row: "HI-FI PROTOTYPE · IPHONE" left, brand wordmark right, both in mono.
  4. Phones — three 360×780 phone frames in a horizontal row (wraps to stack on narrow viewports). Each phone:
    • 12px black bezel, 44px corner radius, dynamic-island notch.
    • Status bar (time / signal / battery).
    • Phone-specific content (below).
    • Bottom tab bar with 5 icons (Today, Library, Stats, ⊕ central CTA, Profile). Active tab in accent.
  5. Phone 1 — cover poster (sales/value prop):
    • Status bar.
    • HI-FI PROTOTYPE · IPHONE eyebrow.
    • Big display headline ("Daily quests for becoming a better human."), accent on "becoming".
    • 1–2 sentence body in muted serif/sans.
    • Mono tip line ("Tap quests to open detail. Toggle [theme] in the toolbar to switch theme & layout.")
    • Subtle scrolling teaser of the next screen at the bottom edge.
  6. Phone 2 — today's quests dashboard (the hero screen):
    • Greeting "Good morning, Sam" + small XP-bell ringing.
    • Level ribbon — "LV 14 · Level 14 · 1648 / 2480 XP" with a progress bar inside a glassmorphic ribbon.
    • Sub-line: "8 quests waiting · earn 430 XP today".
    • 3×2 grid of quest tiles. Each tile: rounded corner, pastel accent color, glyph chip in top-left, title, mini-meta line, "+NN XP" pill in bottom-right.
    • Bottom tab bar.
  7. Phone 3 — quest detail:
    • Back arrow + screen title ("Quest").
    • Hero block with the quest's accent color, big serif quest title ("Body — strength"), short narrative body, "REWARD +90 XP" stamp.
    • Steps checklist (3–4 micro-tasks, one done, two pending).
    • Big primary CTA "Start quest" pill at the bottom in accent.
  8. Write a single HTML document: 
    • <!doctype html>
      through 
      </html>
      , CSS inline.
    • All in CSS — no images. Use 
      linear-gradient
      and inline SVG glyphs for tile chips and tab icons.
    • data-od-id
      on stage, each phone, each frame's regions.
  9. Self-check:
    • Three frames, each with a distinct purpose. Not three copies of the same screen.
    • Tile colors don't overpower — each quest tile uses a different pastel against the same neutral surface.
    • Reads as gamified and adult — playful, not childish.
  1. 阅读当前的DESIGN.md（已注入上方内容）。对于游戏化应用，标题采用粗体显示字体，配色比大多数产品更明亮丰富——任务之所以看起来像任务，正是因为配色的作用。
  2. 从需求中提取品牌定位与价值主张。生成真实的任务名称（例如：「身体——20分钟力量训练：俯卧撑与平板支撑」「阅读——《四千周》」「收听——Huberman Lab · 睡眠架构」「滋养——制作高蛋白午餐」「心智——10分钟专注冥想」「观看——《熊家餐馆》· S3 E4」）。
  3. 展示背景——全屏深色页面（近乎黑色的
    #0e0d0c
    或设计系统中的深色标识色），顶部添加柔和的聚光灯渐变效果。手机上方添加一行小说明文字：左侧为「HI-FI PROTOTYPE · IPHONE」，右侧为品牌标志，均采用单色显示。
  4. 手机框架——三个360×780尺寸的手机框架横向排列（在窄屏视口下自动切换为堆叠布局）。每个手机框架包含：
    • 12px黑色边框，44px圆角，动态岛刘海。
    • 状态栏（时间/信号/电量）。
    • 对应页面的专属内容（详见下文）。
    • 底部标签栏，包含5个图标（今日、库、统计、⊕中央操作按钮、个人资料）。当前激活的标签采用强调色。
  5. 手机1——封面海报页（推广/价值主张展示）：
    • 状态栏。
    • 顶部小字「HI-FI PROTOTYPE · IPHONE」。
    • 大尺寸显示标题（「通过日常任务成为更好的自己」），其中「成为」一词采用强调色。
    • 1-2句正文，采用柔和的衬线/无衬线字体。
    • 单色提示文字（「点击任务查看详情。在工具栏中切换[主题]以更改主题与布局。」）
    • 页面底部边缘添加微妙的下一页滚动预告效果。
  6. 手机2——今日任务仪表盘（核心页面）：
    • 问候语「早上好，Sam」+ 小型XP铃铛动画。
    • 等级进度条——「LV 14 · 等级14 · 1648 / 2480 XP」，进度条嵌入玻璃态样式的栏中。
    • 副标题：「8个待完成任务 · 今日可赚取430 XP」。
    • 3×2网格布局的任务卡片。每张卡片：圆角设计、柔和强调色、左上角图标芯片、标题、小型元信息行、右下角「+NN XP」标签。
    • 底部标签栏。
  7. 手机3——任务详情页：
    • 返回箭头 + 页面标题（「任务」）。
    • 英雄区块：采用任务对应的强调色，大尺寸衬字体任务标题（「身体——力量训练」）、简短描述文字、「奖励 +90 XP」印章。
    • 步骤清单（3-4个微任务，1个已完成，2个待完成）。
    • 页面底部采用强调色的大型主操作按钮「开始任务」。
  8. 编写单个HTML文档：
    • 包含
      <!doctype html>
      至
      </html>
      的完整结构，CSS内联。
    • 所有视觉效果通过CSS实现——不使用图片。使用
      linear-gradient
      和内联SVG图标制作卡片芯片与标签栏图标。
    • 在展示背景、每个手机框架、每个页面区域添加
      data-od-id
      属性。
  9. 自我检查：
    • 三个框架各有明确用途，并非同一页面的重复。
    • 卡片颜色不过于刺眼——每张任务卡片在相同中性背景上使用不同的柔和色调。
    • 整体风格既具游戏化又符合成人审美——有趣但不幼稚。

Output contract

输出规范

Emit between 
<artifact>
tags:
<artifact identifier="game-slug" type="text/html" title="Mobile — App Name">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
在
<artifact>
标签中输出：
<artifact identifier="game-slug" type="text/html" title="Mobile — App Name">
<!doctype html>
<html>...</html>
</artifact>
在artifact前添加一句话说明，之后无需其他内容。