gamified-app skill
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".
Is the gamified-app skill safe?
Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.
No findings.
Install the gamified-app skill
A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.
git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design mkdir -p ~/.claude/skills cp -r /tmp/open-design/design-templates/gamified-app ~/.claude/skills/gamified-app
In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub
The instructions your agent would load
SKILL.md as published, without the frontmatter. Read it on GitHub
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
on bold display type for headlines and a brighter, broader palette than most products — quests look like quests because the colors do.
- Read the active DESIGN.md (injected above). For gamified apps, lean
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").
- Pick the brand + value prop from the brief. Generate real quest
with a soft top spotlight gradient. Above the phones, a small caption row: "HI-FI PROTOTYPE · IPHONE" left, brand wordmark right, both in mono.
- Stage — full-bleed dark page (near-black #0e0d0c or DS dark token)
stack on narrow viewports). Each phone:
- Phones — three 360×780 phone frames in a horizontal row (wraps to
Profile). Active tab in accent.
- 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,
- Phone 1 — cover poster (sales/value prop):
accent on "becoming".
- Status bar.
- HI-FI PROTOTYPE · IPHONE eyebrow.
- Big display headline ("Daily quests for becoming a better human."),
toolbar to switch theme & layout.")
- 1–2 sentence body in muted serif/sans.
- Mono tip line ("Tap quests to open detail. Toggle [theme] in the
- Subtle scrolling teaser of the next screen at the bottom edge.
- Phone 2 — today's quests dashboard (the hero screen):
bar inside a glassmorphic ribbon.
- Greeting "Good morning, Sam" + small XP-bell ringing.
- Level ribbon — "LV 14 · Level 14 · 1648 / 2480 XP" with a progress
color, glyph chip in top-left, title, mini-meta line, "+NN XP" pill in bottom-right.
- Sub-line: "8 quests waiting · earn 430 XP today".
- 3×2 grid of quest tiles. Each tile: rounded corner, pastel accent
- Bottom tab bar.
- Phone 3 — quest detail:
("Body — strength"), short narrative body, "REWARD +90 XP" stamp.
- Back arrow + screen title ("Quest").
- Hero block with the quest's accent color, big serif quest title
- 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:
for tile chips and tab icons.
- <!doctype html> through , CSS inline.
- All in CSS — no images. Use linear-gradient and inline SVG glyphs
- data-od-id on stage, each phone, each frame's regions.
- Self-check:
same screen.
- Three frames, each with a distinct purpose. Not three copies of the
against the same neutral surface.
- Tile colors don't overpower — each quest tile uses a different pastel
- Reads as gamified and adult — playful, not childish.
Output contract
Emit between tags:
<artifact identifier="game-slug" type="text/html" title="Mobile — App Name">
<!doctype html>
<html>...</html>
</artifact>One sentence before the artifact, nothing after.
More skills from nexu-io/open-design
- Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
- Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
- Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
- Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
- Acard-twitterTwitter quote or data card designed to pair with a post.
- Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
- Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
- Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
- Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
- Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.