Utiliser le prompt
Ajouter votre cahier des charges
Ajoutez votre contexte ci-dessous. Il sera inclus dans le prompt lorsque vous le copierez ou le téléchargerez.
Créez un prototype frontend interactif à l’aide de la stack existante du projet et de données de démonstration explicitement identifiées pour [PROJECT] et [AUDIENCE]. La tâche est la suivante : mappage d’importation de données.
Contenu et structure requis
Prévisualisez les colonnes importées, mappez les champs, validez les lignes et examinez les erreurs avant l’importation.
Utilisez [APPROVED_CONTENT] comme source pour les noms, dates, chiffres, affirmations et destinations. Dressez la liste des éléments manquants avant toute substitution. Si une démonstration est nécessaire, indiquez que son contenu est fictif. N’inventez aucun témoignage client, classement, logo de partenaire ni aucune fonctionnalité de produit.
Direction artistique
Utilisez [BRAND_RULES] et le système de design déjà sélectionné pour le projet. Si aucun système n’est fourni, partez de cette orientation : fond neutre clair, texte graphite, accent cobalt et séparateurs fins et précis ; hiérarchie dense mais lisible. Maintenez des rôles cohérents pour la typographie, les espacements et les couleurs. Donnez la priorité à la tâche plutôt qu’aux éléments décoratifs et évitez un ensemble générique de cartes sans rapport entre elles.
Préparation du contenu
Fournissez un fichier d’exemple, le schéma de destination, les champs obligatoires, les règles de validation et la gestion des doublons. Incluez des lignes non valides et des colonnes aux noms similaires.
Mise en page et comportement
Séparez la prévisualisation, le mappage des champs, la validation et l’importation finale. Gardez les décomptes de lignes visibles afin que les utilisateurs sachent combien d’enregistrements réussiraient, échoueraient ou seraient ignorés.
Vérification d’acceptation propre à la tâche
- Séparez la prévisualisation de l’importation finale et indiquez combien de lignes seraient ignorées.
- Remappez un champ obligatoire, corrigez une ligne erronée et annulez avant l’importation.
- La prévisualisation des données ne doit créer aucun enregistrement, et le résultat final doit correspondre aux décomptes examinés.
Implémentation et vérification
Conservez le texte modifiable. Utilisez une structure sémantique, des contrôles explicites, un focus clavier visible et des états vides ou d’erreur appropriés. Vérifiez les mises en page étroites et larges. Respectez les préférences de réduction des animations. Préservez le framework et les dépendances existants du projet ; ne remplacez pas discrètement la pile technique. Livrez les fichiers modifiables et expliquez tout comportement incomplet ou toute donnée d’entrée non prise en charge. Vérifiez cette tâche précise avant de proposer des fonctionnalités supplémentaires.
Pièce jointe de référence et objectif de reconstruction
Joignez le fichier reference.webp du pack de téléchargement de ce prompt à ce dernier dans OpenDesign. Créez un résultat modifiable avec une composition et une hiérarchie similaires ; n’intégrez pas l’image de référence entière comme interface finale. Préservez le contenu approuvé du projet et les règles de marque s’ils entrent en conflit avec des libellés d’exemple fictifs. Si l’image est absente ou illisible, demandez-la au lieu de prétendre à une fidélité visuelle.
Composition et contenu de référence
Utilisez le fichier reference.webp joint comme référence visuelle pour le mappage d’importation de données. Avant de commencer, identifiez les principales zones de haut en bas, leurs largeurs et hauteurs relatives, l’alignement, l’espacement, la hiérarchie typographique, les couleurs de surface, les bordures, les images et les composants récurrents. Préservez ces relations au lieu d’utiliser un modèle générique. Contenu requis pour la tâche : prévisualisez les colonnes importées, mappez les champs, validez les lignes et examinez les erreurs avant l’importation. Suivez les indications de mise en page propres à cette tâche lors de la conversion de l’image en éléments modifiables : séparez la prévisualisation, le mappage des champs, la validation et l’importation finale. Gardez les décomptes de lignes visibles afin que les utilisateurs sachent combien d’enregistrements réussiraient, échoueraient ou seraient ignorés.
Direction visuelle issue du projet de référence
fond neutre clair, texte graphite, accent cobalt et séparateurs fins et précis ; hiérarchie dense mais lisible.
Spécifications des interactions
La référence est un concept statique : le comportement décrit ci-dessous est une exigence à mettre en œuvre, et non la preuve que l’image est déjà fonctionnelle. Copiez le prompt personnalisé dans votre projet de travail. Commencez par la tâche principale : prévisualisez les colonnes importées, mappez les champs, validez les lignes et examinez les erreurs avant l’importation. Séparez la prévisualisation de l’importation finale et indiquez combien de lignes seraient ignorées. Pour chaque commande visible, précisez son déclencheur, l’état affecté et le retour fourni ; implémentez les changements locaux en maintenant un état cohérent entre les vues associées. Faites en sorte que la recherche et les filtres produisent de vrais résultats, que les commandes de sélection aient un état actif explicite et que les actions d’enregistrement affichent, le cas échéant, un retour visible pour les états en attente, de réussite et d’échec. N’ajoutez aucun workflow sans rapport avec la tâche. Utilisez des liens appropriés pour la navigation, des boutons pour les actions et des noms accessibles pour les commandes sous forme d’icônes. Ne laissez pas entendre qu’une opération backend a réussi si seule une démonstration locale a été modifiée.
Comparaison visuelle et livraison
- Comparez le résultat à l’image jointe avec des proportions identiques. Vérifiez la disposition des principales zones, les dimensions relatives des images, les sauts de ligne, les espacements, la hiérarchie typographique, le contraste, les états actifs et la densité du contenu avant de peaufiner les détails décoratifs.
- Testez ensuite la mise en page étroite sans comprimer le texte de bureau dans des libellés minuscules.
- Conservez les logos, photos et icônes comme ressources distinctes, et tous les libellés porteurs de sens comme éléments modifiables. Répertoriez les polices et ressources indisponibles ainsi que tout écart intentionnel. Livrez les fichiers fonctionnels avec un compte rendu concis des comportements implémentés et des intégrations restantes ; ne promettez pas un résultat identique au pixel près à partir du seul prompt.
Télécharger le prompt + l’image
Inclut le prompt complet et l’image de référence en taille réelle. Joignez les deux dans OpenDesign pour guider la mise en page.
Comment rédiger un prompt de design de mappage d’importation de données
Utilisez ce prompt de design de mappage d’importation de données pour prévisualiser les colonnes importées, mapper les champs, valider les lignes et examiner les erreurs avant l’importation.
La référence est un concept généré par IA. Les instructions ci-dessous décrivent ce qui doit être créé et testé ; l’image ne démontre aucun comportement fonctionnel.
Montrer ce que fera l’importation
Un tableau de bord de correspondance d’importation associe les colonnes sources aux champs de destination.
Un aperçu de l’échantillon et des erreurs par ligne aide l’utilisateur à évaluer la correspondance avant de valider les données. Séparez l’aperçu, la correspondance des champs, la validation et l’importation finale. Gardez le nombre de lignes visible afin que les utilisateurs sachent combien d’enregistrements réussiront, échoueront ou seront ignorés.
À partir du prompt
Séparez l’aperçu, la correspondance des champs, la validation et l’importation finale.
Personnalisez-le
Associez [SOURCE_COLUMNS] à [DESTINATION_FIELDS], en affichant des exemples de valeurs et les erreurs liées aux champs obligatoires. Récapitulez les lignes valides, non valides et ignorées avant l’action finale Importer.
Préparer le contenu de la correspondance d’importation des données
Les sélecteurs de mappage apparaissent au-dessus d’un tableau d’exemples de données. Fournissez les colonnes sources et les types de champs de destination, et faites en sorte que l’aperçu reflète le mappage actuel.
Fournissez un fichier d’exemple, le schéma de destination, les champs obligatoires, les règles de validation et la gestion des doublons. Incluez des lignes non valides et des colonnes aux noms similaires.
À partir du prompt
Prévisualisez les colonnes importées, mappez les champs, validez les lignes et examinez les erreurs avant l’importation.
Personnalisez-le
Pour [PROJECT], utilisez [APPROVED_CONTENT] comme source de cette correspondance d’importation des données. Fournissez un fichier d’exemple, le schéma de destination, les champs obligatoires, les règles de validation et le traitement des doublons. Incluez des lignes non valides et des colonnes aux noms similaires. Identifiez les données manquantes avant de les remplacer par du contenu de démonstration.
Vérifier un échantillon trompeur
Le volet de droite sépare les lignes valides, les erreurs et les enregistrements ignorés, les nombres étant répétés près de Continuer vers l’importation. Vérifiez la concordance de ces nombres et empêchez l’acceptation silencieuse des lignes non valides.
Incluez un format de date ou de nombre qui change plus loin dans le fichier. La validation doit signaler les lignes concernées au lieu d’approuver toute la colonne d’après sa première valeur. Réaffectez un champ obligatoire, corrigez une ligne erronée et annulez avant l’importation. L’aperçu des données ne doit créer aucun enregistrement, et le résultat final doit correspondre aux décomptes vérifiés.
À partir du prompt
Séparez la prévisualisation de l’importation finale et indiquez combien de lignes seraient ignorées.
Personnalisez-le
Évaluez la correspondance d’importation des données selon cette exigence : séparez l’aperçu de l’importation finale et indiquez combien de lignes seraient ignorées. Réaffectez un champ obligatoire, corrigez une ligne erronée et annulez avant l’importation. L’aperçu des données ne doit créer aucun enregistrement, et le résultat final doit correspondre aux décomptes vérifiés. Préservez le contenu approuvé et ne révisez que les parties qui échouent à cette vérification.
Vérifier le résultat de votre correspondance d’importation des données
Un écran convaincant n’est pas un backend fonctionnel. Testez séparément la validation, les autorisations, la persistance et le comportement en cas d’échec avant de connecter des données réelles.
- Remappez un champ obligatoire, corrigez une ligne erronée et annulez avant l’importation. La prévisualisation des données ne doit créer aucun enregistrement, et le résultat final doit correspondre aux décomptes examinés.
Prompt de suivi
Utilisez ceci après le premier résultat. Cela recentre la révision sur l’aspect le plus important de cette tâche.
Améliorez le mappage actuel d’importation de données. Remappez un champ obligatoire, corrigez une ligne erronée et annulez avant l’importation. La prévisualisation des données ne doit créer aucun enregistrement, et le résultat final doit correspondre aux décomptes examinés. Préservez le contenu approuvé et l’orientation visuelle ; ne modifiez que les éléments nécessaires pour résoudre ces problèmes.
