Cursor
FigmaIMPLÉMENTER UNE MAQUETTE
Prérequis
- Frame Figma marqué Ready for dev avec specs spacing, typo et couleurs
- Design tokens ou variables CSS déjà présents dans le repo (`globals.css`, tokens Tailwind)
- Rule UI dans `.cursor/rules/` (ex. `ui-components.mdc`) interdisant les valeurs magiques
- Environnement preview local ou Vercel pour comparer rendu vs maquette
Intégrer depuis une capture seule produit du code jetable : couleurs en dur, composants dupliqués, états hover absents. En combinant les specs Figma Dev Mode, l’inventaire des composants du repo et un agent Cursor cadré par vos rules UI, vous réduisez l’écart visuel tout en respectant le design system.
Cadrer specs Figma et contexte repo
Dans Figma Dev Mode, notez les tokens utilisés (couleurs sémantiques, spacing, typo). Exportez les valeurs des auto-layout et contraintes responsive — pas seulement une PNG.
Identifiez les écarts volontaires : texte dynamique CMS, images ratio différent. Documentez-les dans le ticket ClickUp pour éviter des allers-retours infinis.
Ouvrez `.cursor/rules/ui-components.mdc` : imposer les imports depuis `@/components/ui`, interdire les valeurs hex en dur, rappeler les breakpoints Tailwind du projet.
Implémenter frame par frame avec l’agent
Joignez la capture Dev Mode ou décrivez le frame par sections. @mentionnez le fichier cible et @folder `src/components/ui`. Itérez par delta plutôt que regénérer la page entière.
Vérifiez les états hover et focus dans le code — souvent absents du premier jet. Réutilisez les assets du repo (`public/` ou SVG existant), pas les URLs Figma temporaires.
Comparez preview locale ou Vercel avec Figma. Passez axe DevTools sur contrastes et focus. Documentez les écarts acceptés dans la PR.
Revue design-dev et handoff
Alignez-vous avec le design sur les composants réutilisables créés : le designer doit pouvoir les retrouver dans Figma ou les documenter dans Notion.
Pour les sections marketing, privilégiez un Server Component par défaut. Client uniquement si carousel, tabs ou animation GSAP — scindez en îlot `'use client'` minimal.
Erreurs fréquentes
Plugin Figma-to-code accepté tel quel : classes Tailwind incohérentes avec le projet.
Générer un nouveau Button alors que `src/components/ui/button.tsx` existe.
Ignorer mobile : le frame desktop seul dans le prompt.
Couleurs hex copiées depuis Figma au lieu des variables `--color-brand`.
Oublier `prefers-reduced-motion` sur les animations copiées de la maquette.
Ce qu’il faut retenir
Dev Mode + tokens repo + inventaire composants avant le premier prompt.
Agent cadré par rule UI : pas de valeurs magiques, réutilisation du design system.
Revue visuelle ET accessibilité ; écarts documentés.
Itération par delta, pas regenerate complet à chaque remarque design.
FAQ
Utile en brouillon pour la structure. Finalisez toujours avec vos composants, tokens et rules projet. Le output brut n’est pas maintenable en agence.
Capture Dev Mode, lien frame + description des specs, ou export des tokens JSON si votre pipeline le supporte. Le lien seul sans specs produit des approximations.
Server par défaut pour le markup statique. Client si carousel, tabs ou animation GSAP — scindez en îlot `'use client'` minimal.
ChatGPT