New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

Gamified App Prototype

Free

Create engaging multi-screen mobile app prototypes.

by nexu-io84.9k stars on nexu-io/open-design
1 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Gamified App Prototype does

The Gamified App Prototype skill allows you to design a mobile app prototype that emphasizes gamification elements. This skill is particularly useful for designers and developers looking to create applications that encourage user engagement through quests and rewards. The prototype consists of three distinct phone frames displayed on a dark showcase stage, each representing a different aspect of the user's journey in the app. This setup not only highlights the app's functionality but also its visual appeal, making it ideal for presentations or client pitches.

The workflow begins with reading the active DESIGN.md to ensure the design aligns with the gamified concept. Users are guided to select a brand and value proposition, which helps in generating realistic quest names that resonate with the app's theme. The design emphasizes bold typography and a vibrant color palette, ensuring that quests are visually distinct and engaging. Each phone frame serves a specific purpose: the first acts as a cover poster, the second displays the user's quests, and the third provides detailed information about individual quests.

The output is a single HTML document that contains inline CSS, making it easy to implement without the need for external resources. This approach allows for a clean and efficient prototype that can be quickly adapted or modified based on user feedback. The skill encourages a playful yet mature design aesthetic, ensuring that the final product appeals to a broad audience while remaining functional and user-friendly.

Overall, this skill is designed for those who need to prototype gamified applications, such as habit trackers or RPG-style life apps. It streamlines the design process by providing clear guidelines and a structured approach to creating an engaging user experience.

When to use it

Use this skill when tasked with designing a gamified app or prototype that incorporates elements like quests and rewards.

When not to use it

This skill is not suitable for traditional app designs that do not focus on gamification or user engagement through quests.

What you can build with it

Creating a Habit Tracker

Design a mobile app that encourages users to complete daily tasks through quests and rewards.

Prototyping an RPG-style Life App

Develop a prototype that gamifies everyday activities, allowing users to level up and earn XP for completing real-life tasks.

Presenting to Stakeholders

Use the prototype to visually communicate your app concept to clients or stakeholders, showcasing its features and user flow.

How to install Gamified App Prototype

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/gamified-app --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

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.
  2. 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").
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.

Frequently asked questions about Gamified App Prototype

Similar skills

Legacy Circuit Mockups

Visualize and create retro circuit diagrams easily.

Brainstorming Ideas Into Designs

Transform ideas into structured designs through dialogue.

Ecommerce Image Workflow

Generate product-focused images from reference photos.

Aperture Oscillation

Surface design tensions by oscillating scope levels.

Product Design Critique

Get structured feedback on your UI designs.

Mobile App Image Generation

Create premium mobile app screen concepts effortlessly.