Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
nexu-io avatar

Gamified App

nexu-io/open-design

  • 241 installs
  • 83.7k repo stars
  • Updated August 5, 2026
  • nexu-io/open-design

Design and implement gamification loops—points, streaks, badges, and progress—to increase engagement in product experiences.

About

gamified-app applies open-design patterns for points, levels, streaks, and celebratory feedback, helping teams ship engaging retention mechanics with clear UX rules and balanced reward pacing.

  • Progress loops
  • Rewards and badges
  • Streak mechanics
  • Engagement UX
  • Motivation design

Gamified App by the numbers

  • 241 all-time installs (skills.sh)
  • +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #887 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill gamified-app

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs241
repo stars★ 83.7k
Last updatedAugust 5, 2026
Repositorynexu-io/open-design ↗

What it does

Design and implement gamification loops—points, streaks, badges, and progress—to increase engagement in product experiences.

Files

SKILL.mdMarkdownGitHub ↗

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.

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k
Design & UI/UXuiuxbranding
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.