skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

gamified-app

Generates a three-frame gamified mobile app prototype as a single self-contained HTML page.

Updated May 20, 2026
Search Tags:#html#ui design#gamification#habit tracker#mobile prototype#quest app#iphone mockup
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill gamified-app-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gamified-app
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/gamified-app
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill gamified-app-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a gamified mobile app concept from scratch requires producing multiple coherent screens that communicate the product's value proposition, core loop, and detail views. This Skill turns a brief into a complete multi-screen mobile prototype without manual HTML/CSS work. ## Core Features & Use Cases - Three-Frame Showcase: Produces a dark showcase stage with three iPhone frames — a cover poster, a quest dashboard with XP level ribbon, and a quest detail screen. - Gamification UI Patterns: Includes level progress bars, XP reward pills, pastel quest tiles, streak-style greetings, and a five-icon bottom tab bar. - Pure CSS Output: All visuals are built with CSS gradients and inline SVG glyphs, requiring no image assets. - Use Case: A designer asked to mock up a habit-tracker or RPG-style life app can get a presentation-ready three-screen prototype from a single prompt. ## Quick Start Ask the AI to design a gamified life-management app prototype with a cover poster, today's quests screen, and a quest detail screen.

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 gamified mobile app prototype in HTML?▼

Provide a brief describing your gamified app concept, and the Skill generates a single HTML file with three phone frames: a cover poster, a quest dashboard with XP progress, and a quest detail screen. All styling is inline CSS with no external images.

What kinds of apps does this prototype skill support?▼

It targets gamified personal apps such as habit trackers, daily quest apps, XP and streak systems, level-up life-management apps, and RPG-style productivity tools. The triggers include both English and Chinese phrases like 游戏化 and 习惯打卡.

Does the generated prototype require image assets or JavaScript?▼

No. The output is a single HTML document with inline CSS only. Visuals use linear-gradient backgrounds and inline SVG glyphs for tile chips and tab icons, so no image files or scripts are needed.

What screens are included in the gamified app prototype?▼

Three iPhone frames are produced: a cover poster presenting the value proposition, a quest dashboard with a level ribbon and a grid of pastel quest tiles, and a quest detail screen with a hero block, micro-task checklist, and start CTA.

Can the prototype adapt to smaller screens?▼

Yes. The three phone frames are laid out in a horizontal row that wraps to a stacked layout on narrow viewports, with a media query reducing phone dimensions below 1180px width.

Related Skills

Explore More Design & Creative Skills→
nexu-ionexu-io
84.7k

gamified-app

Generate a three-frame HTML/CSS prototype for gamified mobile experiences.

Official
Intermediate
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-html-to-react-native-ds-code-gen

Convert HTML prototypes into Expo-compatible React Native components with TypeScript.

Community
Advanced
eugene-belkovicheugene-belkovich

chaos-labs-styling

Enforce Chaos Labs brand colors, typography, and spacing across UI components.

Community
Intermediate
rojim666rojim666
68

ardot-ui-design

Generates UI design guidelines for web pages, mobile apps, dashboards, and design systems on the Ardot canvas.

Community
Intermediate