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 : boîte de réception du support client.
Contenu et structure requis
Combinez la liste des conversations, le fil de discussion, le contexte client et les commandes d’attribution.
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
Définissez les conversations, l’attribution, le contexte client, le comportement des brouillons et les états de transfert. Fournissez des fils comprenant des messages reçus, envoyés et non envoyés.
Mise en page et comportement
Veillez à ce que la liste facilite le triage et que le fil reste lisible dans l’ordre chronologique. Affichez les états de brouillon et d’attribution à proximité de la conversation concernée.
Vérification d’acceptation propre à la tâche
- Veillez à la clarté de l’ordre des messages, de l’état des brouillons et du statut de transfert.
- Changez de conversation alors qu’un brouillon est en cours, réattribuez un fil et gérez un échec d’envoi.
- Un brouillon local ne doit jamais ressembler à un message distribué, et le transfert ne doit pas faire perdre le contexte.
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 la boîte de réception du support client. 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 : combinez la liste des conversations, le fil de discussion, le contexte client et les commandes d’attribution. Suivez les indications de mise en page propres à cette tâche lors de la conversion de l’image en éléments modifiables : veillez à ce que la liste facilite le triage et que le fil reste lisible dans l’ordre chronologique. Affichez les états de brouillon et d’attribution à proximité de la conversation concernée.
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 : combinez la liste des conversations, le fil de discussion, le contexte client et les commandes d’attribution. Veillez à la clarté de l’ordre des messages, de l’état des brouillons et du statut de transfert. 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 boîte de réception du support client
Utilisez ce prompt de design de boîte de réception du support client pour combiner la liste des conversations, le fil de discussion, le contexte client et les commandes d’attribution.
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.
Protéger le contexte de la conversation
Une boîte de réception du support doit permettre de passer rapidement d’une conversation à l’autre sans perdre la réponse en cours de rédaction.
L’attribution et l’état du brouillon doivent rester lisibles lorsque la liste change. Veillez à ce que la liste facilite le triage et que le fil reste lisible dans l’ordre chronologique. Affichez les états de brouillon et d’attribution à proximité de la conversation concernée.
À partir du prompt
Veillez à ce que la liste facilite le triage et que le fil reste lisible dans l’ordre chronologique.
Personnalisez-le
Utilisez une liste de conversations, un fil chronologique et un panneau de contexte client. Conservez [DRAFT] pour chaque conversation et affichez [ASSIGNEE] et [HANDOFF_STATE] à proximité de l’action de réponse.
Préparer le contenu de la boîte de réception du support client
Le fil central sépare les messages du client d’une note interne mise en évidence. Conservez l’expéditeur, l’horodatage et le niveau de visibilité de chaque entrée lors de la préparation des données de conversation.
Définissez les conversations, l’attribution, le contexte client, le comportement des brouillons et les états de transfert. Fournissez des fils comprenant des messages reçus, envoyés et non envoyés.
À partir du prompt
Combinez la liste des conversations, le fil de discussion, le contexte client et les commandes d’attribution.
Personnalisez-le
Pour [PROJECT], utilisez [APPROVED_CONTENT] comme source de cette boîte de réception du support client. Définissez les conversations, l’attribution, le contexte client, le comportement des brouillons et les états de transfert. Fournissez des fils comprenant des messages reçus, envoyés et non envoyés. Repérez les données manquantes avant de les remplacer par du contenu de démonstration.
Tester un transfert en cours de rédaction
L’éditeur propose les modes Réponse et Note interne, ainsi qu’une action Envoyer. Testez la visibilité, la conservation des brouillons et les échecs de livraison avant d’indiquer qu’un message a été envoyé.
Changez la personne assignée alors qu’une réponse est inachevée. L’interface doit rendre le transfert visible et conserver le brouillon sans laisser entendre qu’il a été envoyé. Changez de conversation alors qu’un brouillon est en cours, réattribuez un fil et gérez un échec d’envoi. Un brouillon local ne doit jamais ressembler à un message distribué, et le transfert ne doit pas faire perdre le contexte.
À partir du prompt
Veillez à la clarté de l’ordre des messages, de l’état des brouillons et du statut de transfert.
Personnalisez-le
Évaluez la boîte de réception du support client selon cette exigence : veillez à la clarté de l’ordre des messages, de l’état des brouillons et du statut de transfert. Changez de conversation alors qu’un brouillon est en cours, réattribuez un fil et gérez un échec d’envoi. Un brouillon local ne doit jamais ressembler à un message distribué, et le transfert ne doit pas faire perdre le contexte. Préservez le contenu approuvé et ne révisez que les parties qui ne satisfont pas à cette vérification.
Évaluer le résultat de votre boîte de réception du support client
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.
- Changez de conversation alors qu’un brouillon est en cours, réattribuez un fil et gérez un échec d’envoi. Un brouillon local ne doit jamais ressembler à un message distribué, et le transfert ne doit pas faire perdre le contexte.
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 la boîte de réception actuelle du support client. Changez de conversation alors qu’un brouillon est en cours, réattribuez un fil et gérez un échec d’envoi. Un brouillon local ne doit jamais ressembler à un message distribué, et le transfert ne doit pas faire perdre le contexte. Préservez le contenu approuvé et l’orientation visuelle ; ne modifiez que les éléments nécessaires pour résoudre ces problèmes.
