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".
DeepseekModel
キュレーション済みスキル
品質 優秀 · 90
v1.0.0
取得
https://deepseekmodel.com/api/download.php?id=nexu-io-open-design-design-templates-gamified-app-skill-md&format=skill
ダウンロード .skill
標準形式。system_prompt と model_config を収録し、任意の Agent で利用可能
.skill ファイルの system_prompt フィールドの実際の内容。
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","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.’"} 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.
このスキルを起動するキーワード。クリックでコピーできます。
このスキルにはトリガーワードがありません。
ダウンロードした .skill に含まれるフィールド。
| フィールド | 説明 |
|---|---|
| format | フォーマット識別子（skill/v1） |
| skill_id | スキル固有 ID |
| name | スキル名 |
| version | バージョン |
| description | 説明 |
| category | カテゴリ（配列） |
| trigger_words | トリガーワード |
| tags | タグ |
| source | ソース |
| source_url | ソース URL（本ページ） |
| exported_at | エクスポート日時（ダウンロード毎） |
| system_prompt | システムプロンプト本文 |
| model_config | モデル設定：provider / model / temperature / max_tokens / top_p |
| examples | サンプル |
| install_guide | 各プラットフォームの導入説明（Coze / Dify / Claude / カスタム） |
