Extracteur d'inventaire de composants UI
Identifiez tous les composants, états et champs de données à partir d’un croquis pour éviter les retouches ultérieures.
Aperçu du prompt
Conseils pour vous
Normalisez les noms dès le début pour que design et ingénierie parlent le même langage. | Documentez la validation là où les données sont saisies pour accélérer la QA plus tard. | Privilégiez les variantes plutôt que de nouveaux composants pour limiter la prolifération dans le système de design. | Prenez en compte les états d’accessibilité comme l’ordre de focus et les indications ARIA.
De l’équipe opérationsNexusAi TechnologyProblème résolu
Des composants inattendus apparaissent tardivement et font exploser les délais. Cet outil inventorie les éléments tôt avec leurs états et besoins en données.
Matrice de couverture des états
Garantit que chaque élément interactif définit son comportement dans tous les états.
Contrats de données
Liste les champs, types et validations pour aligner avec l’ingénierie.
Discipline des variantes
Réduit la prolifération en regroupant les variantes de manière cohérente.
Accroches d’accessibilité
Suggère l’ordre de focus et les indices ARIA lorsque pertinent.
Instructions du prompt IA
Agissez en tant que : Responsable des systèmes de design chargé d’extraire un inventaire de composants à partir d’un croquis UI brut et de cartographier les états ainsi que les contrats de données.
Pourquoi cette tâche est importante : Un inventaire solide des composants évite les duplications, clarifie les besoins en ingénierie et garantit la cohérence des maquettes.
Limites importantes :
- Séparer les composants purement visuels des composants pilotés par les données.
- Capturer tous les états (par défaut, survol, focus, actif, désactivé, chargement, vide, erreur).
- Définir les champs de données minimaux et la validation pour chaque composant lié aux données.
Entrées utilisateur :
- Description du croquis et toutes les étiquettes présentes dans le croquis.
- Sources de données ou API connues (le cas échéant).
- Contraintes d’accessibilité et de localisation.
Objectifs :
1) Lister les composants et les catégoriser (atomes, molécules, organismes).
2) Définir tous les états interactifs et les transitions.
3) Cartographier les champs de données, la validation et les messages d’erreur.
4) Identifier les motifs réutilisables et proposer des suggestions de nommage.
Flux d’analyse :
1) Analyser le croquis pour identifier les composants candidats.
2) Normaliser les noms selon une convention cohérente.
3) Regrouper les éléments similaires en un seul composant réutilisable avec variantes.
4) Documenter la machine à états pour les éléments interactifs.
5) Identifier les dépendances (authentification, permissions, réseau).
Format de sortie requis :
- Résumé (objectif, périmètre, hypothèses)
- Tableau des composants (Nom, Type, États, Données, Validation, Réutilisabilité, Notes)
- Diagrammes d’états (textuels) pour les composants clés
- Risques et questions ouvertes
Contrôles qualité :
- Chaque élément interactif doit au minimum considérer les états focus et désactivé.
- Les règles de validation doivent être spécifiques et testables.
- Les champs de données doivent inclure le type et préciser s’ils sont obligatoires ou optionnels.
Liste de vérification :
- Les noms des composants sont uniques et cohérents.
- Pas de composants dupliqués qui devraient être des variantes.
- Tous les états d’erreur incluent des indications de texte.
Instruction finale : Produisez un inventaire clair et synthétique, prêt à être transmis aux équipes design et ingénierie.
Résultat attendu
Résumé : Inventaire pour les écrans d’intégration et de liste de projets ; suppose une authentification par email en priorité. Extrait du tableau des composants : - TextInput.Email | Atome | états : par défaut/focus/erreur | données : email:string | validation : RFC 5322 | réutilisable : élevée | notes : message d’erreur en ligne sous le champ - Button.Primary | Atome | états : par défaut/chargement/désactivé | données : n/a | validation : n/a | réutilisable : élevée | notes : indicateur de progression à gauche - ProjectCard | Molécule | états : par défaut/survol/vide | données : nom:string, tâches:int | validation : nom ≤ 60 caractères | réutilisable : moyenne | notes : badge affichant le nombre de tâches Risques et questions ouvertes : - Tonalité des messages d’erreur non définie. - Besoin de règles pour les mots de passe et politiques de localisation.
Parcours de mise en œuvre
Extraire l’inventaire dans Claude
Ouvrez Claude et collez le prompt avec la description de votre croquis et les contraintes. Demandez un tableau des composants, les états et les champs de données. Attendez-vous à un inventaire structuré avec un nommage réutilisable.
9 minVérifier dans ChatGPT
Collez la sortie de Claude dans ChatGPT et demandez les lacunes sur l’accessibilité, la validation et les messages d’erreur. Attendez une liste affinée des états et des règles de validation spécifiques.
6 minValider la base
Demandez à ChatGPT de produire un tableau final avec des identifiants uniques et un nommage des variantes à diffuser à votre équipe avant le début des maquettes.
5 min