sanqiufong/slides-from-anything/gamified-app

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.

1. 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").

1. 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.

1. 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.

1. 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.

1. 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.

1. 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.

1. 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.

1. 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.