Décomposeur de Mise en Page à partir d'une Capture d'Écran (Image → Plan DOM → Carte des Composants)
Convertissez rapidement n'importe quelle capture d'écran d'interface en une carte de composants structurée avec sections, hiérarchie et un plan DOM préliminaire prêt pour le codage.
Aperçu du prompt
Conseils pour vous
- Gardez les noms stables entre les sprints pour éviter les changements inutiles. - Capturez tôt les UI répétitives comme une prop variante. - Confirmez les affordances interactives (survol, focus, clic) avec le design. - Commencez les stubs Storybook avec uniquement les props nécessaires à la capture d'écran.
De l’équipe opérationsNexusAi TechnologyProblème résolu
Accélère la phase la plus difficile : traduire les visuels en une structure cohérente de composants et un plan de mise en page sans conjectures.
Analyse hiérarchique
Transforme les visuels en arbre de composants et zones.
Planification des props/états
Définit des entrées claires et des surfaces d'événements.
Notes de mise en page responsive
Propose des motifs grille/flex selon les points de rupture.
Registre des risques
Signale les interactions peu claires à confirmer rapidement.
Instructions du prompt IA
Agissez en tant que : Ingénieur frontend senior et architecte de systèmes UI.
Pourquoi cette tâche est importante : Partir d'une capture d'écran conduit souvent à des composants ad hoc, une dérive des noms et des reprises. Une carte claire réduit l'ambiguïté et accélère le codage.
Limites importantes :
- Supposer React + Tailwind ou CSS Modules.
- Privilégier les balises HTML sémantiques et les rôles ARIA lorsque nécessaire.
- Ne pas inventer de fonctionnalités produit au-delà de ce que la capture d'écran suggère.
Entrées utilisateur :
- Lien ou description de la capture d'écran
- Contraintes de la marque (le cas échéant) : échelle d'espacement, familles de polices, couleurs primaires/secondaires
- Points de rupture cibles (ex. : sm, md, lg, xl)
Objectifs :
1) Identifier les zones de mise en page (en-tête, navigation, contenu principal, barres latérales, pied de page, dialogues).
2) Proposer un arbre de composants avec noms, objectifs et potentiel de réutilisation.
3) Esquisser les props/états, dépendances de données et surfaces d'événements.
4) Suggérer des groupes d'utilitaires Tailwind ou classes CSS pour la mise en page principale.
Flux d'analyse :
1) Analyser la hiérarchie visuelle : motifs grille vs flex, rythme d'espacement, rôles typographiques.
2) Esquisser les limites des composants selon la répétition et les points d'interaction.
3) Définir les props pour la variabilité (texte, icônes, images, tailles, variantes).
4) Noter les besoins d'accessibilité (repères, étiquettes, ordre de focus).
Format de sortie requis :
- ComponentTree : liste à puces des composants avec imbrication
- ComponentSpecs : pour chaque composant : objectif, props, état, aria/rôles
- LayoutPlan : stratégie grille/flex avec notes sur les espacements, marges et points de rupture
- Risks : hypothèses et points à confirmer avec les parties prenantes
Contrôles qualité :
- Noms cohérents et descriptifs (PascalCase pour les composants).
- Éviter les composants trop imbriqués quand un modèle slot/enfant suffit.
Checklist de vérification :
- Chaque composant peut-il être rendu indépendamment dans Storybook ?
- Les props sont-elles minimales mais complètes pour la réutilisation ?
Instruction finale : Produisez ComponentTree, ComponentSpecs, LayoutPlan et Risks en sections distinctes clairement identifiées, prêtes à être transmises à un développeur.
Résultat attendu
ComponentTree : - AppLayout - TopBar - SideNav - ContentArea - StatsCard (x3) - DataTable LayoutPlan : - Extérieur : grid-cols-[auto,1fr] avec gap-6 sur lg ; SideNav se replie sous md. ComponentSpecs : - Props de StatsCard : title, value, delta, icon, variant. Risks : - Actions sur les lignes du tableau peu claires (icônes vs texte).
Parcours de mise en œuvre
Élaborez la carte des composants dans ChatGPT
Ouvrez ChatGPT et collez le lien de votre capture d'écran ainsi que les contraintes de marque sur l'espacement et la typographie. Demandez un ComponentTree, ComponentSpecs, LayoutPlan et Risks. Attendez-vous à une hiérarchie structurée et un plan DOM préliminaire que vous pourrez copier dans un document de planification.
10 minCréez les stubs Storybook
Dans votre éditeur (ex. VS Code), générez des composants React vides à partir du ComponentTree et ajoutez des stories Storybook basiques avec les props de ComponentSpecs. Cela transforme le plan en placeholders fonctionnels dans lesquels vous pourrez intégrer le code.
20 minConfirmez les hypothèses avec l'équipe
Partagez la section Risks et le lien Storybook avec votre chef de projet/designer. Enregistrez les décisions (ex. noms de variantes, points de rupture) directement dans les props des composants pour verrouiller l'interface avant le codage.
15 min