Les techniques de rédaction de prompts efficaces pour v0 devraient également s'appliquer à d'autres outils de programmation d'IA tels que lovable. Cadre de base : Trois entrées clés Après de nombreux tests, l'équipe v0 a découvert que les meilleurs mots-clés de suggestion comportaient tous trois parties : 1. Surface du produit Que faut-il faire exactement ? 2. Cas d'utilisation (Contexte d'utilisation) Qui l'utilise, quand et quel problème résout-il ? 3. Contraintes et goût Comment procéder, et quelles sont les limites ? Le modèle ressemble à ceci : Créez un [composant, des données ou une fonction spécifique]. Pour qui ? Dans [quel scénario], Afin d'atteindre quel objectif ? contrainte: - Plateforme/Appareil - Style visuel - Exigences de mise en page Partie 1 : Interface produit Ne vous contentez pas de dire « créez un tableau de bord », expliquez clairement ce qu’il contient. Par exemple: Affichage du tableau de bord : - Noms et performances des 5 meilleurs vendeurs - Barre de progression des performances de l'équipe par rapport aux objectifs - Entonnoir de vente (Prospect → Qualifié → Démonstration → Conclusion) - Plus votre graphique de tendance des performances des 6 derniers mois est précis, moins la version 0 risque de faire des suppositions hasardeuses ou de créer un tas de fonctionnalités que vous n'utiliserez pas. Deuxième partie : Cas d'utilisation C'est la partie la plus facilement négligée, mais celle qui a le plus grand impact. Considérez ces questions : - Qui l'utilise ? - Quand l'utiliser ? - Quelle décision faut-il prendre ? - De combien de temps disposez-vous ? Reprenons l'exemple du tableau de bord : Le directeur des ventes (qui ne comprend rien à la technologie) a utilisé ça pendant la réunion du matin. Visionné sur le grand écran du bureau Identifiez rapidement ceux qui sont moins performants et, tant qu'à faire, félicitez-les pour leurs bonnes performances. Voyez-vous la différence ? Un même tableau de bord peut présenter des designs totalement différents selon qu'il s'agisse de la réunion matinale d'un responsable des ventes ou de l'analyse approfondie d'un analyste de données. La première nécessite de voir les points clés d'un seul coup d'œil, tandis que la seconde requiert des fonctions de filtrage détaillées et d'exploration approfondie. L'équipe de Vercel a réalisé un test comparatif : Versions sans cas d'utilisation spécifiés : - La fonction de recherche est factice (ce n'est qu'une simple case). - Impossible de cliquer sur le panier d'achat - C'est un vrai désastre lorsqu'on le regarde sur un téléphone portable Une version avec description des cas d'utilisation : - La recherche et le panier d'achat sont tous deux disponibles. - Parfaitement compatible avec les téléphones portables - Il a également ajouté automatiquement un aperçu rapide et un filtrage par catégorie. Bien que la génération ait pris 26 secondes supplémentaires, elle a permis d'économiser 1 à 2 cycles de modifications ultérieures. Au final, c'était en fait plus rapide. Troisième partie : Contraintes inclure: - Préférence de style - Hypothèses relatives à l'équipement - Attentes en matière de mise en page - Palette de couleurs - Exigences de réponse Par exemple: Une ambiance à la fois professionnelle et conviviale. La mise en page sous forme de cartes offre une hiérarchie claire. Code couleur : le vert indique un fonctionnement normal, le jaune indique un avertissement et le rouge indique une urgence. Il est principalement utilisé sur les grands écrans. Cela devrait donner l'impression d'être un véritable produit SaaS. Les paramètres par défaut de la version 0 sont déjà bons, mais des contraintes spécifiques peuvent les améliorer encore et rendre le code plus concis. Comparaison réelle des tests L'équipe de Vercel a mené trois séries de tests comparatifs, en ne modifiant qu'une seule variable dans chaque série. Test 1 : Impact des scénarios d'utilisation Version floue : « Pour créer un site web de commerce électronique, il vous faut des listes de produits, des fonctions de filtrage et des fonctionnalités d'achat. » Version claire : « Les sites de commerce électronique de mode s'adressent aux jeunes de 25 à 35 ans, qui les consultent principalement sur leur téléphone portable pendant leurs trajets domicile-travail. Ils comparent rapidement plusieurs produits avant de passer commande. » Créez une page produit comprenant : des images défilantes, le nom du produit, le prix, une description, la sélection de la taille et de la couleur, et un bouton « Ajouter au panier ». La partie supérieure ne comporte qu'un bouton de retour et une icône de panier. Son design est épuré et sophistiqué. Résultat : La version nette a été réalisée correctement du premier coup. La version floue nécessite une ou deux retouches supplémentaires. Test 2 : Impact sur la surface du produit Une version plus ambiguë : « Créer une page de profil utilisateur. » Version claire : "Créez une page de profil utilisateur affichant : avatar, surnom, nom d'utilisateur, adresse e-mail, biographie, date d'inscription, statistiques d'activité (nombre de publications, nombre de commentaires, nombre d'abonnés), liste des activités récentes (avec horodatage) et boutons de modification et de paramètres." Test 3 : L'impact des contraintes Version de base : «Créer un tableau de bord pour les tickets de service client. Afficher : les tickets en attente, le temps de réponse, les performances du service client et l’activité récente.» Version détaillée : Créez un tableau de bord pour la gestion des tickets de service client. Affichez : les tickets en attente, le temps de réponse, les performances du service client et l’activité récente. Priorité au mobile (les responsables utilisent leur téléphone portable pour consulter le contenu lorsqu'ils sont sur place). Thème clair à contraste élevé. Code couleur : le rouge indique une urgence (plus de 24 heures), le jaune une situation moyenne et le vert une situation normale. Mise en page à 3 colonnes maximum. Doit inclure un indicateur de chargement. Différence principale : la version de base est uniquement « visible sur les téléphones mobiles » (la mise en page pour ordinateur est plus petite), tandis que la version détaillée est véritablement « prioritairement mobile ». Itérations suivantes Après la génération, vous avez deux façons de l'améliorer : 1. Continuez à écrire les mots clés. Convient aux modifications fonctionnelles, telles que l'ajout de fonctionnalités ou la modification de la structure. 2. Mode Création : Cliquez sur Mode Création et sélectionnez directement l’élément à modifier. Idéal pour modifier rapidement des détails visuels tels que la couleur, l’espacement et la police. N'oubliez pas : utilisez des mots-clés pour la logique et la structure, et des modèles de conception pour les ajustements visuels. Enfin, voici un exemple complet : Créez un tableau de bord de service client qui affiche : - Nombre de commandes de travail en attente - Temps de réponse moyen - Les ordres de travail sont classés par priorité (élevée/moyenne/faible). - Liste des performances du service client (indiquant la charge de travail actuelle) - Flux d'activité récent des tickets Pour les superviseurs du service client (gérant 5 à 10 représentants du service client), utiliser leur téléphone portable pour surveiller la situation pendant leurs tournées, afin d'éviter la surcharge du service client et de garantir le respect des objectifs de temps de réponse. Vérifiez toutes les 30 minutes pour identifier le personnel du service client surchargé et réaffecter ses employés à d'autres tâches. contrainte: - Conçu pour mobile, thème de couleurs claires, contraste élevé - Code couleur par priorité : rouge pour les urgences, jaune pour les urgences moyennes, vert pour les urgences normales. - Affiche les indicateurs d'état du service client (occupé/disponible). - Maximum de 2 colonnes sur les appareils mobiles En conclusion Des suggestions pertinentes = de meilleurs résultats + une vitesse accrue. La prochaine fois que vous utiliserez la version 0, essayez d'écrire davantage. Indiquez clairement à qui elle est destinée, pourquoi elle est nécessaire et comment l'utiliser. -- L'article original se trouve dans la section des commentaires.
Artvercel.com/blog/how-to-pr…/t.co/vMMq7nLaJK