Prompt codex — élévation design de apps/mobile (Staff)#

⚠️ Document historique#

Brief d'implémentation du prototype, conservé pour la trace des décisions. Il ne décrit pas la plateforme actuelle. Pour l'état réel, voir ARCHITECTURE.md et API.md.

Méthode issue des best-practices Codex/frontend (OpenAI Codex docs 2026) : réutiliser le design system, être spécifique pour éviter le « AI-slop », fournir des références + états multiples, valider par comparaison de screenshots (pas juste « ça build »), raisonnement low/medium pour le frontend. À passer au codex MCP de Claude Code, en itérant écran par écran.

Prompt à donner à codex (adapter l'écran ciblé)#

Tu es un designer produit senior + ingénieur React Native. Objectif : élever le design de l'app mobile Staff (Expo/expo-router) au niveau d'une app premium (Apple / Airbnb / Linear), sans casser le routing, les données mockées ni la logique. Tu ne fais que la couche visuelle et les micro-interactions.

Design system — source unique de vérité (À RÉUTILISER, ne PAS créer de système parallèle) :

• Tokens : apps/mobile/src/lib/theme.ts (semantic, spacing, radii, typography, elevation, glass, gradients, motion). Primitives : src/components/* (header, tab bar glass, press-scale, screen, cartes). Réutilise-les ; si tu crées un composant, respecte ces tokens.
• Marque : vert émeraude #059669, blanc dominant, dégradés subtils, coins arrondis généreux, glassmorphism léger, ombres larges peu opaques teintées vert.

Direction (sois SPÉCIFIQUE — pas de patterns génériques par défaut) :

• Hiérarchie intentionnelle : un seul point focal par écran, rythme d'espacement cohérent (grille 4/8 pt), typographie SF-like avec contrastes de graisse marqués.
• Micro-interactions calmes : press-scale 0.98, transitions motion.standard, entrées en fondu + léger translate, reanimated. Rien de clignotant.
• Profondeur maîtrisée : cartes surélevées, verre sur header/tab bar, dégradés héros seulement là où ça compte (splash, cartes héros, CTA, pointage QR).
• Chiffres en tabular-nums (montants, distances, chronos, heures).

États à couvrir (pas seulement l'état nominal) :

• Loading : skeletons (pas de spinner brut) pour le feed missions et les listes.
• Empty : illustration/texte pour « aucune mission », « aucune notification ».
• Pressed / selected / disabled : états clairs sur toggles, options, boutons, onglets.

Contraintes strictes :

• Zéro texte clair sur fond clair. Sur fond vert/dégradé → blanc ; sur surface blanche → encre.
• Ne change pas les libellés légaux/exacts (charte, SEPA, engagement, messages CDC).
• Ne touche pas aux fichiers de données src/data/* ni aux types @staff/ui (sauf ajout de champ visuel justifié).

Validation (obligatoire — comparer au rendu, pas au build) :

1. cd apps/mobile && npx expo export --platform web puis screenshot de l'écran ciblé (viewport ~390×844).
2. Compare le rendu à l'intention ci-dessus. Si ça diffère, itère avec un diff précis (« la carte mission manque de hiérarchie : titre trop léger, distance noyée → … »).
3. npx tsc --noEmit et le test existant doivent rester verts.

Périmètre par itération : un écran (ou un composant partagé) à la fois. Écrans prestataire : splash/role, onboarding 1→5, feed, carte, mission/[id], pointage, récompenses, mes-missions, profil. Écrans établissement (Phase 3) : inscription 1→3, publier, suivi, noter, dashboard.

Raisonnement : low/medium (le frontend sort mieux qu'en high).