splatstudio

Gamifizierte App – Skill

Erstelle einen Multi-Screen-Mobilprototypen auf einer einzigen dunklen Bühne. Drei iPhone-Gehäuse nebeneinander, jedes mit einem eigenen Moment der User Journey.

Workflow

1. Lies die aktuelle DESIGN.md (oben eingefügt). Für gamifizierte Apps setze auf kräftige Display-Schriften für Überschriften und eine hellere, breitere Palette als bei den meisten Produkten – Quests sehen nur dann wie Quests aus, wenn die Farben stimmen.
2. Wähle Brand + Value Proposition aus dem Briefing. Generiere echte Quest-Namen (z. B. „Körper – 20 Min. Kraft: Liegestütze & Planks“, „Lesen – Vier Jahrtausende“, „Hören – Huberman Lab · Schlafarchitektur“, „Ernähren – High-Protein-Mittagessen kochen“, „Mind – 10 Min. Fokus-Meditation“, „Schauen – The Bear · S3 E4“).
3. Bühne – Vollflächige dunkle Seite (nahezu schwarz #0e0d0c oder DS-Dunkel-Token) mit einem weichen Top-Spotlight-Verlauf. Über den Telefonen eine kleine Bildunterschriftenzeile: „HI-FI-PROTOTYP · IPHONE“ links, Marken-Wortmarke rechts, beides in Mono.
4. Telefone – Drei 360×780-Telefonrahmen in einer horizontalen Reihe (bei schmalen Viewports umbrechend und gestapelt). Jedes Telefon:
   • 12px schwarzer Rahmen, 44px Eckenradius, Dynamic-Island-Notch.
   • Statusleiste (Uhrzeit/Signal/Akku).
   • Telefon-spezifischer Inhalt (siehe unten).
   • Untere Tab-Leiste mit 5 Symbolen (Heute, Bibliothek, Statistiken, ⊕ zentraler CTA, Profil). Aktiver Tab in Akzentfarbe.
5. Telefon 1 – Cover-Poster (Sales/Value Prop):
   • Statusleiste.
   • HI-FI-PROTOTYP · IPHONE-Eyebrow.
   • Große Display-Überschrift („Tägliche Quests, um ein besserer Mensch zu werden.“), Akzent auf „werden“.
   • 1–2 Sätze Fließtext in gedämpfter Serifen-/Serifenloser Schrift.
   • Mono-Tippzeile („Tippe auf Quests, um Details zu öffnen. Schalte [Theme] in der Toolbar um, um Design & Layout zu wechseln.“)
   • Dezenter Scroll-Teaser des nächsten Bildschirms am unteren Rand.
6. Telefon 2 – Heutiges Quest-Dashboard (der Hero-Screen):
   • Begrüßung „Guten Morgen, Sam“ + kleine XP-Glocke.
   • Level-Ribbon – „LV 14 · Level 14 · 1648 / 2480 XP“ mit Fortschrittsbalken in einem glasmorphischen Ribbon.
   • Unterzeile: „8 Quests warten · verdiene 430 XP heute“.
   • 3×2-Raster mit Quest-Kacheln. Jede Kachel: abgerundete Ecken, pastellfarbene Akzentfarbe, Glyphen-Chip oben links, Titel, Mini-Meta-Zeile, „+NN XP“-Pill unten rechts.
   • Untere Tab-Leiste.
7. Telefon 3 – Quest-Detail:
   • Zurück-Pfeil + Bildschirmtitel („Quest“).
   • Hero-Block mit der Akzentfarbe der Quest, großer Serifen-Quest-Titel („Körper – Kraft“), kurzer narrativer Text, „BELOHNUNG +90 XP“-Stempel.
   • Checkliste mit Schritten (3–4 Mikroaufgaben, eine erledigt, zwei ausstehend).
   • Großer primärer CTA „Quest starten“-Pill am unteren Rand in Akzentfarbe.
8. Schreibe ein einzelnes HTML-Dokument:
   • <!doctype html> bis </html>, CSS inline.
   • Alles in CSS – keine Bilder. Verwende linear-gradient und Inline-SVG-Glyphen für Kachel-Chips und Tab-Symbole.
   • data-od-id auf der Bühne, jedem Telefon, den Regionen jedes Frames.
9. Selbst-Check:
   • Drei Frames, jeder mit eigenem Zweck. Nicht drei Kopien desselben Screens.
   • Kachelfarben überfordern nicht – jede Quest-Kachel verwendet eine andere Pastellfarbe auf derselben neutralen Oberfläche.
   • Wirkt gamifiziert und erwachsen – verspielt, nicht kindisch.

Ausgabe-Contract

Gib zwischen <artifact>-Tags aus:

<artifact identifier="game-slug" type="text/html" title="Mobile – App-Name">
<!doctype html>
<html>...</html>
</artifact>

Ein Satz vor dem Artefakt, nichts danach.