La version courte
- Un prompt de site web doit préciser l’objectif de la page, sa hiérarchie et son comportement selon la taille d’écran. Utilisez ces briefs pour définir une direction, puis remplacez le contenu provisoire et testez les interactions réelles.
- Les écrans générés sont des points de départ. Testez-les avec du contenu réel, au clavier, sur petit écran et auprès des personnes qui les utiliseront. Une présentation soignée ne prouve pas que l’interface est facile à utiliser.
Un prompt de site web doit préciser l’objectif de la page, sa hiérarchie et son comportement selon la taille d’écran. Utilisez ces briefs pour définir une direction, puis remplacez le contenu provisoire et testez les interactions réelles.
Les écrans générés sont des points de départ. Testez-les avec du contenu réel, au clavier, sur petit écran et auprès des personnes qui les utiliseront. Une présentation soignée ne prouve pas que l’interface est facile à utiliser.
Comment utiliser cette collection
Choisissez la tâche la plus proche de votre travail. Copiez le prompt, remplacez la scène ou le contexte générique par vos informations et conservez les contraintes utiles pour évaluer le résultat. Modifiez une variable à la fois afin d’identifier ce qui s’améliore.
Cette méthode reprend les recommandations du guide de Figma First Draft : fournir un contexte précis et vérifier la réponse, sans supposer qu’un premier résultat soigné est correct.
Prompts pour décrire la tâche
Pour décrire la tâche, précisez l’utilisateur et la décision que l’écran doit aider à prendre.
1. Un site de bibliothèque publique
Design a public library website for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Un nouvel utilisateur peut-il identifier l’action suivante sans lire une infobulle ?
2. Un portfolio de freelance
Design a freelance portfolio for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Un nouvel utilisateur peut-il identifier l’action suivante sans lire une infobulle ?
3. Un site de petit musée
Design a small museum site for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Un nouvel utilisateur peut-il identifier l’action suivante sans lire une infobulle ?
4. Une page d’accueil de documentation SaaS
Design a SaaS documentation home for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Un nouvel utilisateur peut-il identifier l’action suivante sans lire une infobulle ?
5. Une collection de recettes
Design a recipe collection for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Un nouvel utilisateur peut-il identifier l’action suivante sans lire une infobulle ?
6. Un site d’événements locaux
Design a community events site for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Un nouvel utilisateur peut-il identifier l’action suivante sans lire une infobulle ?
7. Une page de rendez-vous de centre de soins
Design a clinic appointment page for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Un nouvel utilisateur peut-il identifier l’action suivante sans lire une infobulle ?
8. Un site d’offres d’emploi
Design a job board for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Un nouvel utilisateur peut-il identifier l’action suivante sans lire une infobulle ?
9. Une page d’impact d’association
Design a nonprofit impact page for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Un nouvel utilisateur peut-il identifier l’action suivante sans lire une infobulle ?
10. Un espace de compte d’abonnement
Design a subscription account area for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Un nouvel utilisateur peut-il identifier l’action suivante sans lire une infobulle ?
Prompts pour concevoir l’écran principal
Pour concevoir l’écran principal, précisez l’utilisateur et la décision que l’écran doit aider à prendre.
11. Un site de bibliothèque publique
Design a public library website for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez la mise en page sur ordinateur et sur un écran mobile de 360 pixels de large.
12. Un portfolio de freelance
Design a freelance portfolio for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez la mise en page sur ordinateur et sur un écran mobile de 360 pixels de large.
13. Un site de petit musée
Design a small museum site for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez la mise en page sur ordinateur et sur un écran mobile de 360 pixels de large.
14. Une page d’accueil de documentation SaaS
Design a SaaS documentation home for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez la mise en page sur ordinateur et sur un écran mobile de 360 pixels de large.
15. Une collection de recettes
Design a recipe collection for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez la mise en page sur ordinateur et sur un écran mobile de 360 pixels de large.
16. Un site d’événements locaux
Design a community events site for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez la mise en page sur ordinateur et sur un écran mobile de 360 pixels de large.
17. Une page de rendez-vous de centre de soins
Design a clinic appointment page for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez la mise en page sur ordinateur et sur un écran mobile de 360 pixels de large.
18. Un site d’offres d’emploi
Design a job board for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez la mise en page sur ordinateur et sur un écran mobile de 360 pixels de large.
19. Une page d’impact d’association
Design a nonprofit impact page for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez la mise en page sur ordinateur et sur un écran mobile de 360 pixels de large.
20. Un espace de compte d’abonnement
Design a subscription account area for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez la mise en page sur ordinateur et sur un écran mobile de 360 pixels de large.
Prompts pour gérer les données manquantes
Pour gérer les données manquantes, précisez l’utilisateur et la décision que l’écran doit aider à prendre.
21. Un site de bibliothèque publique
Design a public library website for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez que l’utilisateur peut reprendre son travail sans perdre les informations saisies.
22. Un portfolio de freelance
Design a freelance portfolio for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez que l’utilisateur peut reprendre son travail sans perdre les informations saisies.
23. Un site de petit musée
Design a small museum site for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez que l’utilisateur peut reprendre son travail sans perdre les informations saisies.
24. Une page d’accueil de documentation SaaS
Design a SaaS documentation home for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez que l’utilisateur peut reprendre son travail sans perdre les informations saisies.
25. Une collection de recettes
Design a recipe collection for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez que l’utilisateur peut reprendre son travail sans perdre les informations saisies.
26. Un site d’événements locaux
Design a community events site for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez que l’utilisateur peut reprendre son travail sans perdre les informations saisies.
27. Une page de rendez-vous de centre de soins
Design a clinic appointment page for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez que l’utilisateur peut reprendre son travail sans perdre les informations saisies.
28. Un site d’offres d’emploi
Design a job board for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez que l’utilisateur peut reprendre son travail sans perdre les informations saisies.
29. Une page d’impact d’association
Design a nonprofit impact page for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez que l’utilisateur peut reprendre son travail sans perdre les informations saisies.
30. Un espace de compte d’abonnement
Design a subscription account area for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Vérification : Vérifiez que l’utilisateur peut reprendre son travail sans perdre les informations saisies.
Que vérifier avant d’utiliser le résultat
Les écrans générés sont des points de départ. Testez-les avec du contenu réel, au clavier, sur petit écran et auprès des personnes qui les utiliseront. Une présentation soignée ne prouve pas que l’interface est facile à utiliser.
Si le résultat ne répond pas à la tâche, raccourcissez le prompt et précisez l’information ou la contrainte manquante. Conservez la version utilisée pour pouvoir reproduire le visuel final ou la modification du code.
Pour aller plus loin
Poursuivre avec un guide associé
Mise en pratique
Votre prochaine étape
Vous avez une question ou une correction?
Contacter Thrive
