Chaîne maquette → spécification → code
Pour passer d'une maquette à du code avec l'IA, on intercale une spécification écrite et validée : la maquette fixe le visuel, la spécification le comportement, et l'agent implémente.
- figma
- maquette
- spécification
- design
- composant
- handoff
Syntaxe
Maquette (Figma) → spécification écrite → validation humaine → implémentation par l'agent → lint, build, revueExemple
Composant « Carte de cours », spécification remise à l'agent : - Props : titre (string), duree (minutes), niveau ("débutant" | "intermédiaire") - Accessibilité : un vrai lien, pas un div cliquable ; contraste AA - Fichiers : src/components/CourseCard.tsx (création), page catalogue (usage) - Hors périmètre : filtres du catalogue - Fin : npm run build passe ; rendu conforme à la maquette à 375 px et 1 280 pxRésultat attendu : un composant conforme dès le premier jet, sans aller-retour sur le comportement.À retenir
- La maquette fait foi pour le visuel, le dépôt pour le code : la spécification fait le lien et tranche les cas oubliés (états vides, erreurs, mobile).
- Les générateurs d'interfaces et les prototypes servent à explorer ; leur code se réécrit dans les conventions du projet avant d'entrer dans le dépôt.
- Demandez à l'agent de lister les écarts entre la maquette et le système de design existant avant de coder.
- Piège : sauter la validation de la spécification. Une erreur de comportement découverte après l'implémentation coûte un cycle complet de plus.
Voir aussi
- Chaîne spécification → plan → PRUne fonctionnalité confiée à un agent suit une chaîne courte : une spécification avec critères testables, un plan de fichiers ordonné, une implémentation bornée, puis une revue humaine.
- Brief de sessionUn agent travaille comme un prestataire : il lui faut un but, ce qui est hors périmètre, les fichiers concernés et un critère de fin observable. « Améliore la landing » n'est pas un brief.