ワンクリックでManusで任意のスキルを実行

gamified-app

A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP ribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level ribbon, bottom tab bar. Use when the brief asks for a "gamified app", "habit tracker", "RPG-style life app", "level-up app", "daily quests", "XP / streak app", or "ELI5-style explainer app".

Manusで実行

スター64,847

フォーク7,266

更新日2026年5月27日 09:30

ソース

nexu-io

nexu-io/open-design

GitHub リポジトリを開く Creator のリポジトリを見る

インストールコマンド

ダウンロード

Manusで実行

役立つ用途SOC

ウェブ・デジタルインターフェースデザイナーコンピュータ・数学職15-1255L4

ファイルエクスプローラー

3 ファイル

SKILL.md

readonly

このリポジトリの他の Skills

同じリポジトリ

frontend-slides

nexu-io/open-design

Create animation-rich, zero-dependency HTML presentations on a fixed 1920×1080 stage that scales to any viewport. Distinctive typography, committed palettes, choreographed reveals — no generic AI-slop aesthetics.

2026-06-1264.8k

fs-creative-voltage

nexu-io/open-design

Creative Voltage decks: retro-modern electric blue × deep navy split panels, neon yellow badges, halftone dot textures, and script flourishes on a fixed 1920×1080 stage that scales to any viewport. Syne + Space Mono + Yellowtail. Single-file, zero-dependency HTML.

2026-06-1264.8k

fs-editorial-forest

nexu-io/open-design

Editorial Forest — a quiet, literary HTML deck theme: deep forest green #2e4a2a, dusty pink #e89cb1, and warm cream #efe7d4 paper set in Source Serif 4 with JetBrains Mono kickers. Mixed light/dark scheme, 8-slide quarterly-review rhythm, fixed 1920×1080 stage scaled to any viewport.

2026-06-1264.8k

fs-electric-studio

nexu-io/open-design

Electric Studio (钴蓝工作室) HTML decks: bold clean vertical split panels — white over cobalt #4361ee — with corner brand marks, a dark accent bar on the panel seam, quote typography as the hero element, all-Manrope 800/400, and confident restrained spacing. Fixed 1920×1080 stage scaled to any viewport, zero dependencies.

2026-06-1264.8k

fs-emerald-editorial

nexu-io/open-design

Emerald Editorial - magazine-cover business decks: saturated emerald #3CD896 canvas, deep navy #0F1A5C ink, warm paper #F1E9D6 tiles, double-rule masthead ornaments, Bodoni Moda 900 display serif, fixed 1920x1080 stage with uniform viewport scaling. Mixed scheme, 8 slide masters.

2026-06-1264.8k

fs-notebook-tabs

nexu-io/open-design

Create editorial 'physical notebook' HTML decks: a cream paper card floating on a dark ground, mint/lavender/pink/sky index tabs on the right edge, binder holes on the left, Bodoni Moda display + DM Sans body. Fixed 1920×1080 stage scaled to any viewport. Locked theme — only the content changes.

2026-06-1264.8k

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

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.

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").

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

name	gamified-app
description	A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP ribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level ribbon, bottom tab bar. Use when the brief asks for a "gamified app", "habit tracker", "RPG-style life app", "level-up app", "daily quests", "XP / streak app", or "ELI5-style explainer app".
triggers	["gamified app","habit tracker","rpg app","level up app","daily quests","xp app","streak app","life management app","游戏化","习惯打卡"]
od	{"mode":"prototype","platform":"mobile","scenario":"personal","featured":12,"preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"craft":{"requires":["state-coverage","animation-discipline"]},"example_prompt":"Design a gamified life-management app — multi-screen mobile prototype: cover poster, today's quests with XP, and a quest detail. ‘Daily quests for becoming a better human.’"}