splatstudio — Application Gamifiée Multi-écran

Compétence Application Gamifiée

Produire un prototype mobile multi-écran sur une seule page sombre de présentation. Trois téléphones côte à côte, chacun représentant un moment du parcours.

Workflow

1. Lire le DESIGN.md actif (injecté ci-dessus). Pour les applications gamifiées, privilégier une typographie grasse pour les titres et une palette plus lumineuse et large que la plupart des produits — les quêtes ressemblent à des quêtes grâce aux couleurs.
2. Choisir la marque + la proposition de valeur à partir du brief. Générer de vrais noms de quêtes (ex. « Body — 20 min de force : pompes et gainage », « Read — Quatre Mille Semaines », « Listen — Huberman Lab · Architecture du sommeil », « Nourish — Cuisiner un déjeuner riche en protéines », « Mind — 10 min de méditation », « Watch — The Bear · S3 E4 »).
3. Mise en scène — page sombre pleine largeur (presque noir #0e0d0c ou jeton sombre DS) avec un léger dégradé de projecteur en haut. Au-dessus des téléphones, une petite ligne de légende : "HI-FI PROTOTYPE · IPHONE" à gauche, le mot-clé de la marque à droite, les deux en police monospace.
4. Téléphones — trois cadres de 360×780 px en ligne horizontale (qui se superposent sur les écrans étroits). Chaque téléphone :
   • Bord noir de 12 px, coins arrondis de 44 px, encoche dynamic island.
   • Barre de statut (heure / signal / batterie).
   • Contenu spécifique au téléphone (ci-dessous).
   • Barre de navigation inférieure avec 5 icônes (Aujourd'hui, Bibliothèque, Statistiques, ⊕ CTA central, Profil). L'onglet actif en couleur d'accentuation.
5. Téléphone 1 — Affiche de couverture (vente / proposition de valeur) :
   • Barre de statut.
   • HI-FI PROTOTYPE · IPHONE en surtitre.
   • Grand titre d'accroche (« Quêtes quotidiennes pour devenir une meilleure personne. »), accentuation sur « devenir ».
   • 1–2 phrases de corps en serif/sans sérif adouci.
   • Ligne de conseil en monospace (« Appuyez sur une quête pour ouvrir le détail. Basculez [thème] dans la barre d'outils pour changer l'apparence. »)
   • Aperçu subtil du défilement de l'écran suivant en bas.
6. Téléphone 2 — Tableau de bord des quêtes du jour (l'écran principal) :
   • Salutation « Bonjour Sam » + petite cloche XP qui sonne.
   • Ruban de niveau — « LV 14 · Niveau 14 · 1648 / 2480 XP » avec une barre de progression dans un ruban glassmorphique.
   • Sous-ligne : « 8 quêtes en attente · gagnez 430 XP aujourd'hui ».
   • Grille 3×2 de tuiles de quêtes. Chaque tuile : coin arrondi, couleur pastel d'accentuation, puce de glyphe en haut à gauche, titre, mini-méta ligne, pilule "+NN XP" en bas à droite.
   • Barre de navigation inférieure.
7. Téléphone 3 — Détail de la quête :
   • Flèche retour + titre d'écran (« Quête »).
   • Bloc héros avec la couleur d'accentuation de la quête, grand titre en serif (« Body — force »), court texte narratif, tampon « RÉCOMPENSE +90 XP ».
   • Liste de contrôle d'étapes (3 à 4 micro-tâches, une terminée, deux en attente).
   • Grand bouton CTA principal « Commencer la quête » en bas, dans la couleur d'accentuation.
8. Écrire un unique document HTML :
   • <!doctype html> jusqu'à </html>, CSS en ligne.
   • Tout en CSS — pas d'images. Utiliser linear-gradient et des glyphes SVG en ligne pour les puces des tuiles et les icônes des onglets.
   • data-od-id sur la scène, sur chaque téléphone, sur les régions de chaque écran.
9. Auto-vérification :
   • Trois écrans, chacun avec un objectif distinct. Pas trois copies du même écran.
   • Les couleurs des tuiles ne dominent pas — chaque tuile de quête utilise un pastel différent sur la même surface neutre.
   • Le rendu est gamifié et adulte — ludique, pas enfantin.

Contrat de sortie

Émettre entre des balises <artifact> :

<artifact identifier="game-slug" type="text/html" title="Mobile — Nom de l'application">
<!doctype html>
<html>...</html>
</artifact>

Une phrase avant l'artefact, rien après.