gamified-app

1# Gamified App Skill
2 
3Produce a multi-screen mobile prototype on a single dark showcase page.
4Three phone frames side-by-side, each one its own moment in the journey.
5 
6## Workflow
7 
81. **Read the active DESIGN.md** (injected above). For gamified apps, lean
9   on bold display type for headlines and a brighter, broader palette than
10   most products — quests look like quests because the colors do.
112. **Pick the brand + value prop** from the brief. Generate real quest
12   names (e.g. "Body — 20-min strength: pushups & planks", "Read — Four
13   Thousand Weeks", "Listen — Huberman Lab · Sleep Architecture",
14   "Nourish — Cook a high-protein lunch", "Mind — 10-min focus
15   meditation", "Watch — The Bear · S3 E4").
163. **Stage** — full-bleed dark page (near-black `#0e0d0c` or DS dark token)
17   with a soft top spotlight gradient. Above the phones, a small caption
18   row: "HI-FI PROTOTYPE · IPHONE" left, brand wordmark right, both in mono.
194. **Phones** — three 360×780 phone frames in a horizontal row (wraps to
20   stack on narrow viewports). Each phone:
21   - 12px black bezel, 44px corner radius, dynamic-island notch.
22   - Status bar (time / signal / battery).
23   - Phone-specific content (below).
24   - Bottom tab bar with 5 icons (Today, Library, Stats, ⊕ central CTA,
25     Profile). Active tab in accent.
265. **Phone 1 — cover poster (sales/value prop)**:
27   - Status bar.
28   - HI-FI PROTOTYPE · IPHONE eyebrow.
29   - Big display headline ("Daily quests for becoming a better human."),
30…