Skip to main content
PBX Build utilise l’IA pour vous aider à construire et tester rapidement des idées. Vous n’avez pas besoin de compétences en programmation pour créer des variations performantes—vous devez seulement savoir comment communiquer votre vision à l’IA. Pensez à l’IA comme à un collaborateur compétent. Si vous fournissez des instructions claires et du contexte, l’IA peut fournir des résultats précis. Utilisez ce guide pour apprendre les principes de la rédaction de prompts efficaces.

​
Qu’est-ce qui fait un bon prompt ?

Pour obtenir les meilleurs résultats de l’IA, concentrez-vous sur ces trois principes fondamentaux.

​
Contexte

Fournissez un contexte sur l’objectif de votre modification. Expliquer pourquoi vous voulez tester une idée particulière aide l’IA à adapter sa sortie pour répondre à vos objectifs.
  • Bon : « Change the color of the CTA to blue to improve visibility for the user. » ✅
  • Trop vague : « Make this CTA nicer. » ❌

​
Précision

Soyez précis sur la modification que vous souhaitez apporter. Donnez une description visuelle précise, incluant des détails comme la taille, la couleur, la forme, la position et le style.
  • Bon : « Add a white delivery truck icon next to the free shipping text to improve the click-through rate. The icon’s height should match the text height. » ✅
  • Aucun objectif clair : « Change up the design. » ❌

​
Simplicité

Utilisez une terminologie simple et exploitable. Concentrez-vous sur des instructions claires et limitez-vous à une seule demande par prompt. Ne complexifiez pas le prompt avec du jargon technique.
  • Bon : « Replace the white background with a top-to-bottom gradient from #2b5d50 to #dae995. » ✅
  • Trop d’instructions : « Change the button color, add a promo image, and move the text. » ❌

​
Suivez une structure de prompt claire

Les utilisateurs réussissent avec PBX lorsque leurs prompts suivent une structure claire. Utilisez ces quatre étapes pour des requêtes plus complexes :
  1. Définir le changement
    • Énoncez précisément la transformation que vous souhaitez réaliser.
  2. Spécifier les changements visuels et de mise en page
    • Détaillez les changements visuels pour l’élément cible, les directives de mise en page et les éléments de conception. Vous pouvez également référencer des maquettes ou des fichiers de design ici.
  3. Expliquer le comportement
    • Décrivez comment l’élément cible doit répondre aux actions de l’utilisateur.
  4. Définir des limites et des restrictions (facultatif)
    • Définissez les limitations techniques, les exigences responsives et ce qui ne doit pas se produire.
Utilisez un LLM pour affiner les prompts complexes avant de les utiliser dans Kameleoon. Vous pouvez même fournir la structure de prompt ci-dessus comme modèle à suivre pour le LLM.

​
Exemples en action

Examinez ces exemples pour voir comment la structure de prompt fonctionne en pratique.

​
Le prompt « comparer les hôtels »

Cet exemple fournit une structure claire pour une fonctionnalité complexe :
« Build a ‘Compare hotels’ feature like the mockup. Add a ‘Compare properties’ toggle in the left sidebar to turn it on or off. When the toggle is on, show a ‘Compare’ checkbox on each property card in the bottom right. If at least one property is selected, show a sticky bottom tray with thumbnails, an ‘X/5 selected’ counter, and ‘Cancel’ and ‘Compare’ buttons. Clicking ‘Compare’ opens a simple modal showing the selected listing details. Limit selection to 5. »
Prompt Comparer les hôtels
Modale Comparer les hôtels

​
Ce prompt fonctionnera-t-il ?

Prompt : « Replace the ‘Show on map’ block with a movable floating ‘Map’ button. Users should be able to drag it anywhere on the page. Clicking it should open the map view. » Verdict : ✅ Oui. Il suit la structure de prompt recommandée et décrit clairement la transformation.
Prompt Afficher sur la carte
Prompt : « Show a 15% discount for returning loyal customers. » Verdict : ❌ Non. L’IA a actuellement du mal à créer de nouvelles fonctionnalités impliquant des données dynamiques ou une logique backend. Prompt : « Make the grid view the default view. » Verdict : ✅ Oui. Si la vue en grille existe déjà sur la page, l’IA peut changer l’état par défaut.
Prompt Vue en grille

​
En cas de doute…

Si vous ne savez pas comment formuler un prompt, gardez ces conseils à l’esprit :
  • Voyez grand, mais restez réaliste : L’IA ne peut pas créer de nouvelles fonctionnalités backend. Concentrez-vous sur les changements UI et UX.
  • Restez simple : Les changements simples n’ont pas besoin de prompts complexes.
  • Traitez l’IA comme un membre de l’équipe : Rédigez les prompts aussi clairement que vous briefriez un développeur.
Vous pouvez également utiliser la fonctionnalité Draw a sketch pour entourer visuellement la zone que vous souhaitez mettre à jour, la fonctionnalité Import a file pour fournir une maquette à suivre pour l’IA, importer des designs directement depuis Figma ou référencer un site web externe comme source d’inspiration—par exemple : « Reproduis le layout de filtres de ce site de réservation de voyages : www.example.com/search. »

​
FAQ

Vous pouvez créer n’importe quel variant que vous gérez avec du code front-end. Cependant, Kameleoon ne peut pas générer de code pour les prompts qui nécessitent une logique backend ou des changements côté serveur. Un développeur familier avec votre système backend doit gérer ces cas.
PBX excelle dans des tâches telles que :
  • Les changements de texte ou de contenu, y compris les titres, les CTA et les avertissements.
  • Les mises à jour de style, comme les couleurs, les polices et les ajustements de mise en page.
  • Les bannières et insertions de contenu.
  • Les changements interactifs simples, y compris le repositionnement de boutons, les liens et les modales.
Vous pouvez également utiliser PBX pour des flux multi-étapes, des galeries ou des éléments interactifs personnalisés. Pour les cas avancés, utilisez une approche hybride. Tout d’abord, laissez PBX générer l’implémentation initiale, puis affinez-la manuellement. Cette méthode combine la vitesse de l’automatisation avec la précision du développement personnalisé.
Notre IA explore de nombreuses façons possibles de répondre à votre demande, elle ne produit donc pas un résultat fixe. Le même prompt peut donner des sorties différentes à chaque fois.La variation des sorties se produit en raison de :
  • Hasard contrôlé : Le modèle varie ses réponses pour éviter la répétition et encourager la créativité.
  • Interprétation du prompt : De petites différences de contexte peuvent pousser le modèle à se concentrer sur des détails différents.
  • Diversité de l’entraînement : Le modèle s’appuie sur des motifs provenant de jeux de données d’entraînement variés.
Pour obtenir des résultats plus cohérents, ajoutez des contraintes. Fournissez une maquette, un fichier de design ou définissez un Master Prompt qui définit des règles générales et un contexte de marque pour toutes vos générations.
Oui, vous pouvez affiner la sortie avec des prompts de suivi, mais gardez à l’esprit l’historique des prompts.Ce dont PBX se souvient :
  • Le code qu’il a généré le plus récemment (utilisé comme contexte).
Ce dont PBX ne se souvient pas :
  • Vos instructions de prompt précédentes.
  • L’historique complet de la conversation.
  • Les maquettes ou croquis ajoutés dans les prompts antérieurs.
Les prompts de suivi vagues comme « Fix the issue with X and Y » peuvent échouer car PBX manque de contexte complet.Bonnes pratiques pour les prompts de suivi :
  • Moins efficace : « The arrow navigation doesn’t work. »
  • Plus efficace : « In the new carousel, the arrow navigation does not work as expected. Fix it using the code generated from my previous prompt. The arrows should appear on the left and right and advance one image per click. »
Soyez spécifique dans les prompts de suivi :
  • Identifiez l’élément ou la fonctionnalité à corriger.
  • Décrivez le comportement attendu.
  • Référencez explicitement le code généré.
  • Incluez les détails techniques pertinents.
Oui, à condition que le DOM de la page contienne le code HTML de l’élément déclenché par le survol. Si JavaScript injecte l’élément dynamiquement après l’interaction de survol, l’IA de Kameleoon peut ne pas le détecter ou le modifier avec précision.Pour de meilleurs résultats, vérifiez que :
  • L’élément au survol existe dans le HTML initial, même s’il est caché.
  • La structure est stable et ne se génère pas de manière asynchrone.