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
- 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.
- 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").
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
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.
1---2name: gamified-app3description: A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP ribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level ribbon, bottom tab bar. Use when the brief asks for a "gamified app", "habit tracker", "RPG-style life app", "level-up app", "daily quests", "XP / streak app", or "ELI5-style explainer app".4---5
6# Gamified App Skill
7
8Produce a multi-screen mobile prototype on a single dark showcase page.
9Three phone frames side-by-side, each one its own moment in the journey.
10
11## Workflow
12
131. **Read the active DESIGN.md** (injected above). For gamified apps, lean
14 on bold display type for headlines and a brighter, broader palette than
15 most products — quests look like quests because the colors do.
162. **Pick the brand + value prop** from the brief. Generate real quest
17 names (e.g. "Body — 20-min strength: pushups & planks", "Read — Four
18 Thousand Weeks", "Listen — Huberman Lab · Sleep Architecture",
19 "Nourish — Cook a high-protein lunch", "Mind — 10-min focus
20 meditation", "Watch — The Bear · S3 E4").
213. **Stage** — full-bleed dark page (near-black `#0e0d0c` or DS dark token)
22 with a soft top spotlight gradient. Above the phones, a small caption
23 row: "HI-FI PROTOTYPE · IPHONE" left, brand wordmark right, both in mono.
244. **Phones** — three 360×780 phone frames in a horizontal row (wraps to
25 stack on narrow viewports). Each phone:
26 - 12px black bezel, 44px corner radius, dynamic-island notch.
27 - Status bar (time / signal / battery).
28 - Phone-specific content (below).
29 - Bottom tab bar with 5 icons (Today, Library, Stats, ⊕ central CTA,
30 Profile). Active tab in accent.
315. **Phone 1 — cover poster (sales/value prop)**:
32 - Status bar.
33 - HI-FI PROTOTYPE · IPHONE eyebrow.
34 - Big display headline ("Daily quests for becoming a better human."),
35 accent on "becoming".
36 - 1–2 sentence body in muted serif/sans.
37 - Mono tip line ("Tap quests to open detail. Toggle [theme] in the
38 toolbar to switch theme & layout.")
39 - Subtle scrolling teaser of the next screen at the bottom edge.
406. **Phone 2 — today's quests dashboard** (the hero screen):
41 - Greeting "Good morning, Sam" + small XP-bell ringing.
42 - Level ribbon — "LV 14 · Level 14 · 1648 / 2480 XP" with a progress
43 bar inside a glassmorphic ribbon.
44 - Sub-line: "8 quests waiting · earn 430 XP today".
45 - 3×2 grid of quest tiles. Each tile: rounded corner, pastel accent
46 color, glyph chip in top-left, title, mini-meta line, "+NN XP" pill
47 in bottom-right.
48 - Bottom tab bar.
497. **Phone 3 — quest detail**:
50 - Back arrow + screen title ("Quest").
51 - Hero block with the quest's accent color, big serif quest title
52 ("Body — strength"), short narrative body, "REWARD +90 XP" stamp.
53 - Steps checklist (3–4 micro-tasks, one done, two pending).
54 - Big primary CTA "Start quest" pill at the bottom in accent.
558. **Write** a single HTML document:
56 - `<!doctype html>` through `</html>`, CSS inline.
57 - All in CSS — no images. Use `linear-gradient` and inline SVG glyphs
58 for tile chips and tab icons.
59 - `data-od-id` on stage, each phone, each frame's regions.
609. **Self-check**:
61 - Three frames, each with a distinct purpose. Not three copies of the
62 same screen.
63 - Tile colors don't overpower — each quest tile uses a different pastel
64 against the same neutral surface.
65 - Reads as gamified and adult — playful, not childish.
66
67## Output contract
68
69Emit between `<artifact>` tags:
70
71```
72<artifact identifier="game-slug" type="text/html" title="Mobile — App Name">
73<!doctype html>
74<html>...</html>
75</artifact>
76```
77
78One sentence before the artifact, nothing after.
gabrielmoreira