Comment écrire des prompts PBX efficaces
Avec PBX (Prompt-Based Experimentation), la nouvelle interface de Kameleoon qui permet de prompter ses tests en quelques minutes, l’IA devient un véritable partenaire de création pour vos tests A/B et personnalisations. Tout se joue dans la qualité du prompt.
Un bon prompt vous permet de :
- Accélérer l’innovation : créer et tester rapidement des variations UI complexes.
- Obtenir un rendu pixel-perfect : matérialiser précisément votre vision.
- Fluidifier les workflows : réduire les ajustements manuels et les allers-retours techniques.
- Éliminer l’incertitude : générer des résultats fiables et reproductibles.
Pas besoin d’être expert en IA ou en code. En suivant quelques bonnes pratiques, vous pourrez facilement transformer vos idées en expériences impactantes.
Les principes clés d’un bon prompt
Pour guider efficacement l’IA de Kameleoon, respectez ces règles fondamentales :
- Soyez précis : décrivez le changement, la cible et le rendu attendu.
- Commencez simple, puis itérez : une instruction claire vaut mieux qu’un prompt complexe.
- Donnez du contexte : expliquez l’objectif du test pour affiner le résultat.
Pour optimiser votre prompt avant de l’envoyer dans PBX, vous pouvez aussi vous aider d’outils externes comme Mistral, Chat GPT ou Claude. Importez une capture d’écran de ce que vous souhaitez changer, décrivez la modification, puis demandez au LLM de générer un prompt structuré.
Voici quelques recommandations pour transformer vos idées en prompts clairs, efficaces et immédiatement exploitables dans PBX :
1. Soyez extrêmement spécifique
Décrivez l’action exacte
❌ “Changer le bouton”
✅ “Changer la couleur du bouton ‘Ajouter au panier’ en bleu foncé.”
Préférez des instructions simples et actionnables.
❌ “Rendre le design plus attrayant”
✅ “Remplacer le fond blanc par un dégradé bleu”
Indiquez l’emplacement précis
Exemples : “dans le bandeau principal”, “sous le titre”, “à côté du CTA”
2. Structurez vos prompts
Organisez toujours votre demande autour de trois éléments :
- Une action principale : ce que vous voulez changer.
- L’élément ciblé : la zone précise de l’interface.
- Le résultat attendu : rendu visuel ou fonctionnel. Décrivez toujours le but du test que vous souhaitez lancer.
Exemple :
Action : “Changer la couleur…
Cible : …du bouton “Ajouter au panier”...
Résultat : … en orange vif (#FF4500) pour améliorer la visibilité.”
Si votre demande est particulièrement complexe, reportez-vous à la partie “Comment structurer un prompt complexe.”
3. Décrivez les visuels le plus précisément possible
Mentionnez la taille, la couleur, la forme, le style, la position… Plus vous êtes précis, plus le rendu sera fidèle. N’hésitez pas à vous appuyer sur des références concrètes. Par exemple, “Une icône similaire à celle de Google Maps” ou “Un bleu proche de celui de Facebook”...
Vous pouvez aussi importer une maquette ou un fichier. Dans ce cas, donnez une consigne explicite : “Créer une pop-in de newsletter à partir du fichier joint, adaptée à mon branding.”
4. Un prompt = une action
Évitez de formuler plusieurs demandes dans un même prompt. Si vous souhaitez, par exemple, changer la couleur, ajouter une image et déplacer un texte, rédigez un prompt par modification. Si le résultat ne convient pas, simplifiez votre prompt ou reformulez-le.
5. Pour chaque nouvelle idée, créez une nouvelle variation
Ne recyclez pas un prompt existant, vous n’obtiendrez pas le même résultat et vous risquez de fausser les résultats de vos tests en proposant trop de modifications à la fois dans une seule et même variante.
Les erreurs fréquentes à éviter
Voici quelques pièges qui pourraient nuire à la qualité du résultat :
1. Les prompts trop vagues et les termes flous
Proscrivez les expressions comme “Améliore le design”, “Change cette zone”, “Fais quelque chose de sympa” et soyez le plus précis possible.
2. L’emploi de jargon interne ou technique
Utilisez des termes simples, comme si vous vous adressiez à une personne débutante.
3. Les prompts trop longs ou confus
Si l’IA détecte trop d’idées différentes dans votre prompt, elle risque de mal interpréter votre demande.
4. Lancer le test sans vérifier la variation
Vérifiez toujours que le visuel est satisfaisant et le comportement de la variante générée dans le mode simulation.
5. Faire une demande qui fait appel à la logique back-end
L’IA ne peut pas accéder ou modifier des éléments en server-side. Il ne sera donc pas possible de faire des demandes comme changer un prix, ajouter une remise dynamique, modifier les options de livraison ou créer un système fidélité ou d’abonnement. Ces éléments requièrent du développement.
Deux prompts clés en main à copier/coller et compléter directement dans PBX
Comment structurer une demande complexe
Pour les prompts les plus élaborés, vous pouvez utiliser cette structure en 4 étapes. Tous les prompts n’ont pas besoin de cette forme, réservez-la aux changements les plus avancés.
- Objectif : Ce que vous voulez obtenir comme résultat.
- Exigences UX / contenu : Design, layout, références… Si vous importez une maquette, spécifiez-le dans cette partie et précisez bien à l’IA sur quelle partie de celle-ci vous souhaitez qu’elle se concentre.
- Comportement attendu : Détaillez les interactions souhaitées.
- Contraintes : Limites techniques, responsive, exclusions… Précisez toujours ce que vous ne voulez pas voir se produire pour éviter à l’IA de tomber dans des “pièges” faciles.
Exemple 1 - Modifier le sélecteur de couleur sur la page Produit
Objectif
Remplace l’interface actuelle de sélection des couleurs par un menu déroulant unique avec toutes les couleurs disponibles et un aperçu de la couleur.
UX / contenu
Affiche les couleurs avec leurs noms et leurs pastilles. Si les couleurs appartiennent à des catégories différentes (“Collection permanente” et “Édition limitée”), sépare-les distinctement en 2 catégories. Le menu doit être interactif, accessible et reprendre les codes design du style du site.
Comportement attendu
Lorsque l’utilisateur choisi une couleur, met à jour la sélection de la couleur et recharge automatiquement la page pour afficher les visuels produits de la bonne couleur.
Contraintes
Crée un seul menu déroulant pour remplacer l’interface existante. Le placement et la taille du menu est déterminée par la maquette de la page (ou par ce dessin). Il doit être responsive et compatible avec les formats desktop, tablette et mobile. Il ne doit pas interférer avec aucun autre élément ou fonctionnalité existante de la page. Gère les spécificités de la page pour t’assurer qu’aucun menu supplémentaire n’est créé quand l’utilisateur sélectionne une couleur. Ce changement ne doit avoir aucun impact sur la performance.
Exemple 2 — Création d’un carrousel d’images à défilement automatique
Objectif
Transforme la liste d’images présente sur le côté gauche de la maquette que je t’envoie en carrousel interactif.
UX / contenu
Remplace les images actuelles présentent dans le header par un carrousel qui permet à nos utilisateurs de naviguer entre les images avec des flèches à gauche et à droite. Conserve les dimensions des images pour préserver la mise en page et éviter les déformations. Les flèches doivent être centrée verticalement de part et d’autre du carrousel. Au survol de la souris sur l’image, renforce l’opacité des flèches pour qu’elles soient plus visibles. Conserve le même espacement entre les images que dans la version originale de la page et assure-toi que tous ses éléments (blocs de texte, CTAs…) restent alignés.
Comportement
Crée une boucle avec les images qui défilent automatiquement toutes les 5 secondes. Type d’animation : défilement horizontal, rapide et fluide, 0,5 secondes de transition. Au survol de la souris, l’animation se met en pause et les deux flèches de navigation s’affichent clairement. Le défilement automatique doit reprendre lorsque la souris quitte la zone du carrousel.
Contraintes
La maquette que je t’ai mis en pièce jointe pour te guider est statique. Elle sert uniquement à indiquer la position et la taille du carrousel. Il doit être responsive sur tous les types d’appareils. Aucune modification de la résolution ou du recadrage des images. Ne modifie pas les autres éléments interactifs et ne crée pas de nouveaux composants d'interface utilisateur en dehors des flèches définies et de l'animation automatique des diapositives.
Vous n’avez pas encore PBX ? Contactez votre CSM ou demandez-nous une démo.
