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.
Agent 识别该技能的关键词，点击任意一个即可复制。
该技能未提供触发词。
下载的 .skill 包内含以下字段。
| 字段 | 说明 |
|---|---|
| format | 格式标识（skill/v1） |
| skill_id | 技能唯一 ID |
| name | 技能名称 |
| version | 版本号 |
| description | 技能描述 |
| category | 所属分类（数组） |
| trigger_words | 触发词列表 |
| tags | 标签列表 |
| source | 来源标识 |
| source_url | 来源链接（本页地址） |
| exported_at | 导出时间（每次下载生成） |
| system_prompt | 系统提示词正文 |
| model_config | 模型参数：provider / model / temperature / max_tokens / top_p |
| examples | 示例 |
| install_guide | 各平台导入说明（Coze / Dify / Claude / 自定义框架） |
