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
#2b5d50to#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 :- Définir le changement
- Énoncez précisément la transformation que vous souhaitez réaliser.
- 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.
- Expliquer le comportement
- Décrivez comment l’élément cible doit répondre aux actions de l’utilisateur.
- Définir des limites et des restrictions (facultatif)
- Définissez les limitations techniques, les exigences responsives et ce qui ne doit pas se produire.
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. »
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.
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, ou importer des designs directement depuis Figma.