Open Design Gamified App Skills Guide

Skill Overview

Gamified App is a multi-frame mobile prototype skill that can generate three side-by-side iPhone mockups on a single dark showcase page, with each mockup showing a different moment in the journey. The design direction is "playful but mature": gamification elements paired with restrained colors and refined typography, so it does not look childish.

Each of the three phones has a clear role: the first is a cover/value proposition poster, the second is today's quest dashboard (Hero screen), and the third is a quest details page. A unified 5-icon Tab Bar is provided at the bottom (Today, Library, Stats, ⊕ central CTA, Profile).

Trigger Keywords

gamified app, habit tracker, RPG app, level up app, daily quests, XP app, streak app, life management app
Gamification, habit check-ins, level up apps, daily quests

When to Use

Design gamified life management app prototypes
Habit tracking / check-in app proof of concept
RPG-style life apps (daily quests to earn XP)
Mobile prototypes that need to showcase multi-screen flows

Usage

Natural Language Triggers

Design a gamified lifestyle App
Build a habit tracker prototype
Create an App for earning XP from daily tasks
gamified app for becoming a better human

Workflow

Read DESIGN.md, for a gamified app, use large font headings + a wider color palette (more playful than typical products)
Extract the brand and value proposition from the brief, generate realistic task names (for example, "Body, 20-min strength", "Read-Four Thousand Weeks", "Mind, 10-min focus meditation")
Set up the stage, full-page dark background (#0e0d0c or DS dark token) + soft spotlight gradient at the top, with a small explanatory line above
Three phones, 360×780 frames, 12px black border + 44px rounded corners + Dynamic Island notch, each containing a status bar and dedicated content
Phone 1, cover poster: large headline, 1-2 sentence subtitle, hint text
Phone 2, task dashboard: greeting, level ribbon (XP progress bar), 3×2 task card grid (each with pastel color scheme + glyph chip + XP value)
Phone 3, task details: back arrow, Hero color block, task description, step list, CTA button
Write to a single HTML file, pure CSS, no images, using linear-gradient and inline SVG glyph

Output Format

Single-file HTML artifact:

Dark stage background + top spotlight effect
Three 360×780 phone mockups (auto-stack on narrow screens)
Each phone has unique content, so the three are not all identical
data-od-id annotates the stage, each phone, and each area
Bottom Tab Bar with 5 icons

Design Key Points

Element	Specification
Stage background	`#0e0d0c` or DS dark token + top spotlight gradient
Phone dimensions	360×780, 12px border, 44px corner radius, Dynamic Island
Tab Bar	5 icons (Today, Library, Stats, ⊕, Profile), active tab accent color
Task cards	3×2 grid, each a different pastel color, rounded corners + glyph chip + XP pill
Level ribbon	Glassmorphic ribbon, containing an XP progress bar

Visual Rules

Dark mode only: the stage is near-black
No images: everything is handled with CSS gradients and inline SVG
Pastel tones: task cards use soft color schemes and should not be too eye-catching
Adult feel: gamified but mature, not too cartoonish
Large headings: bold display type for headlines

Practical Examples

Example 1: Gamified Life Management App

User: "Design a gamified life-management app-multi-screen mobile prototype: cover poster, today's quests with XP, and a quest detail."

Generates three phones:

Phone 1: "Daily quests for becoming a better human" cover poster
Phone 2: "Good morning, Sam" + LV 14 level ribbon + 8 quest cards
Phone 3: Body quest details, strength training, including checklist and CTA

Example 2: Habit Tracking App

User: "Build a habit check-in App where daily tasks earn points"

Generates:

Cover: brand value proposition
Dashboard: 6 habits to complete today (reading, exercise, meditation, etc.)
Details: step breakdown for one of the habits + start button

Related Skills

Example Use Cases

Gamified Life Management App: An entrepreneur needs a multi-screen mobile prototype to present to investors. Three phones respectively display a value proposition cover, today's task dashboard (including an XP leveling system and 6 pastel task cards), and a single task detail page, with a unified bottom Tab Bar showing the complete navigation structure. Habit Tracking Prototype Design: A health tech company needs a proof of concept for a habit tracker, using gamification elements (XP progress bar, level ribbon, task cards) to engage users while maintaining a mature design style to avoid appearing childish.