Skip to content
Get packs

Gamified App Prototype

Creates a three-screen gamified mobile app prototype as a single HTML page

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent can turn a brief for a habit tracker, daily-quest or level-up style app into a visual mockup. It produces one self-contained HTML page showing three phone screens side by side: a cover poster, a dashboard of daily quests with XP rewards and a level bar, and a quest detail screen. It uses CSS and inline SVG only, with no images, so the result can be previewed in a browser.

Great for

  • Designers pitching a gamified habit or life-management app idea to stakeholders
  • Product teams wanting a quick clickable-style visual concept before building
  • Students or hobbyists learning how gamification patterns look in mobile UI

Skip it if

  • Producing a working app, since the output is a static visual prototype with no real logic or data storage
  • Situations needing real brand guidelines or accessibility-verified designs, because the skill relies on a generic bold, colourful style and does not check contrast

Try asking

  • “Design a gamified life-management app with a cover poster, today's quests with XP, and a quest detail screen”
  • “Make a habit tracker prototype with daily quests and a streak counter on a dark stage”
  • “Create an RPG-style level-up app mockup for a fitness brand”
Step-by-step guide: how to use Gamified App PrototypeInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    gamified-app.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip gamified-app.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip gamified-app.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide a brand name, colour preferences and the key value proposition in your brief so the cover headline and quests fit your product
  • The skill expects a DESIGN.md design system file to be present; supply one for consistent colours and type
  • Open the generated HTML in a browser and check the layout on narrow screens, since the phones wrap on small viewports

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.