a5a8ecdb20
Import initial de la documentation : statut, roadmap, plans V1/V2, specs verticales (creche, sport), audits securite, plan de test, analyse concurrentielle et maquettes de design. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
143 lines
10 KiB
Markdown
143 lines
10 KiB
Markdown
# Prompts — Design des écrans visiteur
|
||
|
||
Prompts à utiliser avec Google Stitch ou Claude Design pour designer les écrans de l'app visiteur (visitapp-web + mymuseum-visitapp).
|
||
|
||
---
|
||
|
||
## Contexte global — Prompt de démarrage
|
||
|
||
> **MyInfoMate** est une plateforme SaaS de gestion et d'affichage de contenu pour les lieux culturels (musées, sites patrimoniaux, offices de tourisme, événements). Les clients configurent leur contenu via une interface d'administration, et les visiteurs y accèdent via une app web et mobile.
|
||
>
|
||
> **Cas d'usage principal à designer** : les visiteurs suivent un **parcours guidé** — une séquence d'étapes qui peuvent inclure du contenu informatif, des défis interactifs, ou une chasse aux trésors avec géolocalisation. C'est l'équivalent d'un audioguide moderne et immersif.
|
||
>
|
||
> **Deux expériences visuelles, un seul composant** :
|
||
> - **Mode Visite** : ambiance calme, claire, culturelle — un visiteur explore à son rythme
|
||
> - **Mode Jeu** : ambiance dramatique, immersive, ludique — escape game ou chasse au trésor
|
||
>
|
||
> Ces deux modes partage exactement la même structure technique et logique (mêmes données backend, même composant Flutter/React). Seule l'atmosphère change via CSS et animation.
|
||
>
|
||
> **Theming 100% dynamique** : chaque instance (musée, parc, événement) définit ses propres couleurs primaire/secondaire via la plateforme admin. Les designs doivent être neutres visuellement et fonctionner avec n'importe quelle combinaison de couleurs — pastel, contrasté, sombre, clair, etc. Aucune couleur en dur, tout doit être en CSS variables.
|
||
>
|
||
> **Audience** : visiteurs en mouvement, sur smartphone (mobile-first). Interface tactile, lisible à la lumière du jour, rapide à comprendre sans tutoriel.
|
||
>
|
||
> **Objectif design** : créer une expérience premium et cohérente pour que les musées et lieux culturels puissent proposer une vraie alternative mobile aux audioguides papier/physiques.
|
||
|
||
---
|
||
|
||
## Principes directeurs
|
||
|
||
- **2 modes visuels uniquement** — Mode Visite (IsGameMode=false) et Mode Jeu (IsGameMode=true)
|
||
- **Theming dynamique** — toutes les couleurs sont des CSS variables configurées par le client dans le manager-app (`--color-primary`, `--color-secondary`, `--color-background`, `--color-surface`, `--color-on-primary`). Les designs doivent fonctionner avec n'importe quelle combinaison de couleurs.
|
||
- **Loader brandé** — chaque instance peut définir un logo et une animation de chargement
|
||
- **Mobile-first** — les apps sont utilisées sur smartphone par des visiteurs en déplacement
|
||
- **Public cible** — musées, sites patrimoniaux, offices de tourisme, événements culturels
|
||
|
||
---
|
||
|
||
## Ordre recommandé
|
||
|
||
1. Prompt 1 + 3 → définir les deux modes de base (langage visuel)
|
||
2. Prompt 4 → composants de défis (partagés entre les deux modes)
|
||
3. Prompt 2 → variante carte du mode visite
|
||
4. Prompt 5 + 6 → loader et écran de fin
|
||
|
||
---
|
||
|
||
## Prompts
|
||
|
||
### Prompt 1 — Mode Visite (écran principal)
|
||
|
||
> Design a mobile guided trail screen for a cultural venue visitor app with full dynamic theming support. The primary color, secondary color, background, and surface colors are all CSS variables set by the venue (could be any color combination). Show two variants side by side: one with a blue/gold museum theme, one with a green/earth nature park theme.
|
||
>
|
||
> The screen shows: a header with cover image + trail title + back button (top left), a progress indicator ("Step 2 / 5"), and the current step card below (step image, title, description text, optional geo-distance indicator, "Mark as complete" button in primary color).
|
||
>
|
||
> Light, clean, cultural aesthetic. The design must look equally good with any primary color. No map on this screen — pure content focus.
|
||
|
||
---
|
||
|
||
### Prompt 2 — Mode Visite avec carte
|
||
|
||
> Design the map variant of the guided trail screen for a cultural venue visitor app. The map fills the top 60% of the screen (neutral OpenStreetMap/CartoDB tiles — beige/grey tones, never colored). Step pins are colored with the instance primary color: pulsing animation for the current step, greyed out for locked steps, green checkmark for completed steps, empty circle for future steps.
|
||
>
|
||
> A floating progress bar sits at the top of the map. A draggable bottom sheet (collapsed by default) shows the current step details: title, description, geo-trigger indicator ("45m from the zone" or "You are in the zone ✓").
|
||
>
|
||
> Show two color variants side by side (blue museum theme / green nature theme). Map tiles always stay neutral — only pins and UI elements use instance colors.
|
||
|
||
---
|
||
|
||
### Prompt 3 — Mode Jeu (escape game / chasse au trésor)
|
||
|
||
> Design the "game mode" variant of the same guided trail app. Uses the same dynamic theming (CSS variables) and the same layout structure as the visit mode, but with a darker, more dramatic atmosphere: dark overlay on the header image, stronger contrast, more theatrical typography for the step title and description.
|
||
>
|
||
> Show the same screen structure (step card, progress indicator, optional map thumbnail) but in game mode aesthetic. The primary color is used as a strong neon-like accent against a dark surface. Show two color variants: a red/dark escape game theme and a teal/dark outdoor treasure hunt theme.
|
||
>
|
||
> The mood shift from visit mode should be immediately clear, but the layout must be identical — it is the same component with an atmosphere toggle, not a different screen.
|
||
|
||
---
|
||
|
||
### Prompt 4 — Composants de défis (partagés entre les deux modes)
|
||
|
||
> Design a set of challenge components for a mobile cultural venue visitor app. All components use the instance primary color as the main accent and must work in both light (visit mode) and dark (game mode) backgrounds.
|
||
>
|
||
> Show 4 components, each in light and dark variant:
|
||
>
|
||
> **(1) QCM (single or multiple choice)** — question text at top, 3-4 answer buttons stacked vertically. States: default (neutral outline), selected (primary color fill), correct (green + checkmark), incorrect (red + X).
|
||
>
|
||
> **(2) Text libre** — riddle/question text, a text input field ("Your answer..."), a Validate button in primary color. After wrong answer: subtle red hint. After correct answer: green confirmation with a short success animation.
|
||
>
|
||
> **(3) Digicode** — brief instruction, a row of 4 digit display boxes (like a PIN entry), a numeric keypad (0–9 + delete), a Validate button. After wrong code: boxes shake and reset. After correct code: green flash.
|
||
>
|
||
> **(4) Mini puzzle** — a compact 3×3 jigsaw or sliding puzzle that fits within a step card (not fullscreen). Shows scrambled image pieces, drag to rearrange. Small reference thumbnail in the corner. "Step unlocked" confirmation when completed.
|
||
|
||
---
|
||
|
||
### Prompt 5 — Loader / Splash brandé -> INUTILE, faudrait que ce soit généré avec le logo des clients
|
||
|
||
> Design a branded loading/splash screen for a cultural venue visitor app. The screen shows: the venue logo centered (circular placeholder), the venue name below in bold, a subtle loading animation using the primary color (a circular progress ring or gentle pulsing dots). Background uses the instance background color.
|
||
>
|
||
> Show three variants side by side: (1) with logo + name; (2) name only fallback (no logo defined); (3) a minimal generic fallback (MyInfoMate branding) for when no customization is set.
|
||
>
|
||
> The design must work with any color combination. Duration represented as a static frame of a ~1.5 second splash screen.
|
||
|
||
---
|
||
|
||
### Prompt 6 — Écran de fin (victoire / parcours complété)
|
||
|
||
> Design a completion screen for a cultural venue visitor app, shared between visit mode and game mode. The layout is identical in both — only the atmosphere changes.
|
||
>
|
||
> **Visit mode variant** (light): calm and elegant. Headline "Trail completed ✓", summary stats (steps completed, time taken), the trail cover image as background (with overlay), a "Back to home" button in primary color, an optional "Share" button.
|
||
>
|
||
> **Game mode variant** (dark): same layout but celebratory. "Mission accomplished!" or "You escaped!" headline in large bold type, a trophy or star icon in primary color, same summary stats, same buttons but on dark surface.
|
||
>
|
||
> Show both variants side by side. The component structure is exactly the same — one CSS class changes the atmosphere.
|
||
|
||
---
|
||
|
||
### Prompt 7 — Écran de démarrage mode jeu (GameMessageDebut)
|
||
|
||
> Design a full-screen immersive intro screen for an escape game or treasure hunt in a cultural venue visitor app. The screen displays the game's narrative introduction — a rich text message set by the venue, with an optional full-bleed background image or video.
|
||
>
|
||
> Dark cinematic atmosphere. The text is centered, readable, with a subtle fade-in. At the bottom: a large "Begin the adventure" CTA button in the instance primary color with a glow effect. A subtle "Skip" text link for returning players.
|
||
>
|
||
> Show two variants: one with a background image (museum corridor, dramatic lighting), one text-only on a dark gradient. Both use the same primary color accent.
|
||
|
||
---
|
||
|
||
### Prompt 8 — Sélection de parcours
|
||
|
||
> Design a mobile trail selection screen for a cultural venue visitor app. The visitor sees a list of available trails to choose from before starting.
|
||
>
|
||
> Each trail card shows: a cover image (16:9 ratio), the trail title, a short description (2 lines max), number of steps, estimated duration, and a small tag indicating the mode — "Guided visit" (light tag, primary color outline) or "Game" (dark filled tag, primary color background).
|
||
>
|
||
> The list can scroll vertically. Cards have rounded corners, subtle shadow. Show 3 cards: one visit mode trail, one game mode trail, one locked/unavailable trail (dimmed with a lock icon).
|
||
>
|
||
> Dynamic theming: show in two color variants (blue museum / green nature park).
|
||
|
||
---
|
||
|
||
## À noter pour l'implémentation
|
||
|
||
- Le loader brandé (Prompt 5) nécessite une nouvelle feature dans le manager-app : champ "Logo de l'instance" + "Animation de chargement" configurable par instance → à ajouter au todo-features.md
|
||
- Tous les composants de défis (Prompt 4) sont partagés entre SectionQuiz et les étapes de SectionParcours — un seul composant UI, deux contextes d'usage
|
||
- Le switch Mode Visite / Mode Jeu est déclenché par `SectionParcours.IsGameMode` — une seule prop CSS suffit pour changer l'atmosphère complète
|