gamified-app

Generate a three-screen gamified mobile prototype in a single HTML document.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/junainfinity/osmDesign --skill gamified-app
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gamified-app
Source: https://github.com/junainfinity/osmDesign/tree/main/skills/gamified-app
Command: npx skills add https://github.com/junainfinity/osmDesign --skill gamified-app

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers often need to quickly visualize and share gamified mobile-app concepts. This skill renders three phone frames on a dark showcase page, enabling rapid iteration and stakeholder feedback.

Core Features & Use Cases

  • Three-screen prototype: cover poster, today's quests dashboard, and a quest detail view on a single page.
  • Design-system driven: supports color, typography, layout, and components for brand-consistent prototypes.
  • Use Case: ideal for pitching gamified life-management or habit-tracker concepts to clients or teammates.

Quick Start

Load example.html in your browser to preview the mobile prototype.

Frequently Asked Questions about gamified-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a multi-screen gamified mobile prototype quickly?

Generate a high-fidelity gamified mobile prototype by providing a design brief to produce a single HTML document. This renders three phone frames—a cover poster, quest dashboard, and detail view—on one showcase page for rapid concept validation.

What is the best way to visualize a gamified habit-tracker concept for a pitch?

Render a gamified habit-tracker concept as three mobile phone frames on a dark showcase page. This generates a self-contained HTML file with inline CSS, allowing fast iteration and stakeholder feedback without relying on external design assets.

Can I use a design system to generate a mobile prototype with inline CSS?

Yes, you can apply a design system to generate a mobile prototype with inline CSS. The output is a single HTML document that supports color, typography, layout, and component configurations to ensure brand-consistent gamified app demos.

Does the generated mobile prototype HTML work offline without external assets?

Yes, the generated mobile prototype HTML works offline without external assets. It outputs a single HTML document with inline CSS that functions across mobile viewports, ensuring your gamified demo is fully self-contained.

What screens are included in a three-screen gamified app prototype?

A three-screen gamified app prototype includes a cover poster, a today's quests dashboard, and a quest detail view. These screens are rendered together on a single page to demonstrate the core flow of life-management or habit-tracker concepts.