Interpréteur Image-en-Structure (Assisté par Vision)
Décrivez un croquis photographié et obtenez une carte UI structurée avec hiérarchie et annotations.
Aperçu du prompt
Conseils pour vous
En cas de doute, proposez des options avec leurs compromis. | Gardez les descriptions structurelles pour que tout outil de design puisse les appliquer. | Définissez la validation tôt pour guider le comportement du formulaire. | Identifiez un KPI décisif dès le départ pour éviter l’étalement du périmètre.
De l’équipe opérationsNexusAi TechnologyProblème résolu
Les photos de croquis sont souvent bruitées. Cela produit une structure claire, textuelle, que tout le monde peut utiliser pour démarrer des maquettes.
Hiérarchie d’abord
Concentrez-vous sur une structure exploitable par n’importe quel outil.
Options d’ambiguïté
Présente des choix avec compromis pour décider rapidement.
Indications de validation
Des règles de formulaire précoces réduisent les erreurs ultérieures.
Ancrage KPI
Maintient la mise en page alignée sur un seul résultat.
Instructions du prompt IA
Agissez en tant que : Analyste UI conscient de la vision qui convertit un croquis photographié en une structure UI précise, centrée sur le texte.
Pourquoi cette tâche est importante : Traduire des photos brutes en structure accélère l’alignement et évite les mauvaises interprétations.
Limites importantes :
- Si une image exacte ne peut être traitée, basez-vous sur des descriptions détaillées de l’utilisateur.
- Évitez les jugements esthétiques ; concentrez-vous sur la structure et l’intention.
- Signalez les ambiguïtés et proposez 2 à 3 interprétations.
Entrées utilisateur :
- Description photo du croquis (zones, étiquettes textuelles, flèches).
- Objectif principal et KPI clé.
- Appareil cible et contraintes.
Objectifs :
1) Extraire sections et hiérarchie.
2) Identifier composants et éléments interactifs.
3) Esquisser les champs de données probables et états.
Flux d’analyse :
1) Résumer le croquis en termes neutres.
2) Décomposer en sections avec leurs objectifs.
3) Lister les composants avec besoins d’états.
4) Signaler ambiguïtés et proposer options.
Format de sortie requis :
- Résumé
- Carte des sections
- Liste des composants avec états
- Ambiguïtés & options
- Étapes suivantes
Contrôles qualité :
- Une action principale par écran.
- Tous les éléments interactifs ont des états focalisables.
- Les champs de données ont des indications de validation basiques.
Instruction finale : Produisez la carte avec sections numérotées et points concis prêts pour le wireframing.
Résultat attendu
Résumé : Page d’intégration unique avec formulaire email, liste de fonctionnalités et CTA. Carte des sections : 1) En-tête : logo, lien de connexion 2) Hero : proposition de valeur, saisie email, CTA principal 3) Avantages : fonctionnalités en 3 colonnes Composants : - EmailInput : défaut/focus/erreur ; validation regex - Bouton CTA : défaut/chargement/désactivé Ambiguïtés : - Placement du lien des conditions ; Option A : sous le formulaire, Option B : pied de page.
Parcours de mise en œuvre
Décrivez le croquis dans ChatGPT
Collez le prompt et fournissez une description détaillée de la photo de votre croquis, incluant les zones et tout texte. Attendez-vous à une carte UI structurée avec sections numérotées.
7 minOptions d’ambiguïté dans Gemini
Collez la carte dans Gemini et demandez 2 à 3 interprétations plausibles par ambiguïté avec leurs compromis. Attendez une liste courte de décisions.
6 minVerrouillez la structure
Retournez dans ChatGPT avec les décisions finales et demandez une structure propre, validée, prête pour le wireframing.
5 min