FreePublished on GitHubEnglish overview

gamified-app

Create a mobile app prototype that presents habits or daily tasks as quests with experience points and levels. A single HTML page displays three phone screens: a cover, today's quest dashboard, and a quest detail with steps and rewards.

OriginalShow the original description

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

nexu-io/open-design

AI rating90/ 100 See how to install

Good for

Prototype a habit tracker with game elements
Explore a daily quest dashboard with experience points
Design quest details with steps and rewards
Present an app concept through three phone screens

Overview

What it does

Creates mobile app prototype screens that add game elements to habits and daily tasks. A single HTML document places three phone frames on a dark background: a cover explaining the app's value, today's quest list, and a quest detail screen. The screens combine experience points, a level progress bar, rewards, a step checklist, and a bottom tab bar.

When it helps

Use it when planning a habit tracker or an RPG-style life management app and exploring how people would move through it. The three distinct screens let you review how tasks are named and colored, and how rewards for completing them are presented. On narrow displays, the phone frames stack vertically.

Example requests

“Prototype a life management app that turns exercise, reading, and meals into daily quests.”

“Create a cover, today's quest list with experience points, and a detail screen showing steps and rewards.”

Provide the brand name and the value you want to communicate so that specific quest content can be reflected in the screens.

Notes

A DESIGN.md defining colors, typography, layout, and components is required. The result is an app prototype. Screens use CSS and inline SVG, without images.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?: AGoodIt explicitly targets uses such as habit tracking and produces three screens: a cover, today's quests, and quest details.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?: AGoodNine workflow steps specify screen dimensions and components, and the output format is defined as a single HTML document.
SafetyAre sending data, deleting files, and running commands disclosed?: AGoodThe workflow centers on reading DESIGN.md and producing HTML, with no external transmission, deletion, or credential retrieval.
Easy setupDoes it need few tools or API keys, and are they documented?: BPartly lackingA DESIGN.md covering color, typography, layout, and components is required, but instructions for preparing it are absent.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Files included (2)

SKILL.md4.4 KB
example.html16.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

8-bit-orbit-video-template

FreeSummaryAI rating 90

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

Create a retro pixel presentation video
Customize a three-scene video template
Preview scene transitions and motion in HTML