Obtenir un résultat visuel de qualité

Le style graphique se pose au début, pas après coup. Une fois que Claude a généré plusieurs fichiers dans une direction stylistique, revenir en arrière demande de tout reprendre.

Prompt : style macOS / iPadOS

Un style, des composants, des animations et transitions dans le
style de macOS et iPadOS, avec Liquid Glass. Éviter le violet.
Éviter les emojis et remplacer par des icônes de la librairie
Lucide React. Typographie moderne grotesque sans-serif, avec
plusieurs niveaux de typescales pour un résultat professionnel.
Privilégier des composants de taille small et medium, mieux
adaptés à une interface de productivité avec beaucoup de données
affichées.

Ce prompt peut être intégré dans CLAUDE.md pour s'appliquer automatiquement à chaque session du projet.

Implémenter les micro-interactions, animations et transitions
avec Framer Motion. Suivre les Human Interface Guidelines
d'Apple pour les animations : durées courtes (150-300ms),
easing naturel, feedback immédiat après chaque action
utilisateur. Pour les composants web, appliquer également
les principes Material Design sur les transitions d'état
et les élévations.

Ce que ce prompt couvre :

• Animations d'entrée et de sortie des éléments dans le DOM
• Transitions entre états (hover, focus, active, disabled)
• Feedback visuel après action (confirmation, erreur, chargement)
• Cohérence des mouvements entre les différentes vues

Utiliser la librairie Shadcn/ui avec des composants en taille
small pour toute l'interface. Optimiser pour la densité
d'information : listes, colonnes, filtres, badges de statut,
indicateurs d'état. Chaque composant doit afficher le maximum
d'information dans un espace réduit sans sacrifier la lisibilité.

Pourquoi small et non medium ou large : les interfaces de productivité fonctionnent mieux avec des composants compacts. Un tableau de bord avec des composants large ressemble à une maquette de présentation, pas à un outil qu'on utilise 8 heures par jour.

Implémenter tous les états de l'interface :
- États de chargement avec skeleton loaders pendant la
  récupération des données, spinners pour les actions courtes
- États vides (empty states) avec message explicite et
  action suggérée
- États d'erreur avec message clair et option de réessayer
- Feedback visuel immédiat après chaque action utilisateur :
  confirmation, toast notification, animation de validation
- États transitoires entre deux vues ou deux étapes d'un flux

C'est systématiquement la partie que Claude Code omet si on ne la demande pas explicitement. Un prototype sans états de chargement brise l'illusion de réalité lors d'une présentation client ou d'un test utilisateur.

Appliquer les principes de progressive disclosure :
- Afficher d'abord les informations essentielles, révéler
  les détails à la demande (expand, tooltip, drawer)
- Comportement des modales selon les HIG d'Apple et iOS :
  entrée par le bas sur mobile, centré avec fond semi-transparent
  sur desktop, fermeture par tap extérieur ou swipe down
- Drawer latéral pour les panneaux de détail sur desktop
- Bottom sheet pour les actions contextuelles sur mobile

Quand on travaille sur un projet avec un design system existant dans Figma, la démarche la plus efficace est de connecter Claude Code directement à ce fichier via Figma Console MCP.

Ce que ça permet

• Tokens de couleur, typographie et espacement appliqués automatiquement
• Composants nommés dans le code comme dans Figma
• Variables de design system respectées dans chaque fichier généré
• Modifications répercutées dans Figma en direct depuis Claude Code

Prompt d'ouverture avec Figma Console MCP actif

Connecte-toi au fichier Figma [URL du fichier]. Lis les tokens,
variables et styles du design system avant de générer quoi que
ce soit. Utilise ces valeurs pour tous les choix de couleur,
typographie et espacement. Nomme les composants en cohérence
avec les noms définis dans Figma.

# Conventions visuelles et interactions

## Style
Style macOS / iPadOS avec Liquid Glass.
Pas de violet. Pas d'emojis, utiliser Lucide React pour
toutes les icônes. Typographie grotesque sans-serif, plusieurs
niveaux de typescale pour un résultat professionnel.
Composants Shadcn/ui en taille small pour toute l'interface.

## Animations
Framer Motion pour toutes les transitions et micro-interactions.
Suivre les HIG Apple : durées 150-300ms, easing naturel.
Material Design pour les élévations et transitions d'état.

## États
Toujours implémenter :
- Loading states avec skeleton loaders
- Empty states avec message et action suggérée
- Error states avec message explicite et option de réessayer
- Feedback visuel immédiat après chaque action utilisateur

## Progressive disclosure
Modales selon HIG iOS/macOS.
Drawer latéral pour les panneaux de détail sur desktop.
Bottom sheet pour les actions contextuelles sur mobile.

## Figma
Fichier de référence : [URL du fichier Figma]
Utiliser les tokens et variables du design system.
Nommer les composants en cohérence avec les noms Figma.

## Skills actifs
frontend-design, creative-director