Programmation de l'IA : Comment bien utiliser Lovable

Mon meilleur partenaire pour la programmation de l'IA à l'heure actuelle est Adorable répondre en chantant Curseur . bolt.new et windsurf, tous deux excellents aussi, ont choisi les deux premiers parce que les casquettes étaient assez hautes.

Site web de Lovable :

https://lovable.dev/

Aimable, probablement pas. boulon.nouveau Il y a un nom pour cela et je recommande à tout le monde de l'essayer, surtout à ceux qui ne savent pas coder. Je viens de regarder et j'ai créé un total de 40 projets avec lovable.

L'essentiel du billet d'aujourd'hui provient de la documentation de X et Lovable sur les meilleures pratiques pour Lovable's Prompt, avec mes réflexions pour faire bonne mesure. Si vous voulez lire l'article original directement, c'est ici :

https://x.com/lovable_dev/status/1873078129469821044

Le texte principal commence.

Utiliser le contexte

Il est nécessaire de fournir davantage d'informations générales. Exemple :

Nous construisons un outil de gestion de projet qui aide les équipes à suivre les tâches.

L'outil doit présenter les caractéristiques suivantes :

• l'authentification de l'utilisateur
• Création du projet
• faire fonctionner qqch.
• Génération de rapports

La première tâche consiste maintenant à créer l'interface utilisateur du projet.

C'est un peu comme des .cursorrules ici, pour donner un contexte à ce que j'essaie de faire. Mais n'oubliez pas la clarté à la fin, ce qu'est la première tâche, qui sera abordée plus tard, il s'agit d'avancer pas à pas et de ne pas laisser l'IA s'écarter trop de nos attentes. Autre exemple.

J'ai besoin d'une application CRM (Customer Relationship Management) qui s'intègre à Supabase et qui dispose d'un processus d'authentification sécurisé. Commencez par construire le backend.

Nous développons une plateforme de commerce électronique axée sur les produits écologiques. Nous avons besoin de générer une page de liste de produits avec des filtres de catégorie et de prix.

Il y a une contextualisation de l'information et ensuite une clarté de la tâche spécifique.

Répartition des tâches

L'une des exigences formulées par de nombreuses personnes lorsqu'elles se lancent dans la programmation de l'IA est la suivante : développer une application de prévisions météorologiques, développer un jeu 2048. C'est également vrai, nous commençons par cela et obtenons des résultats stupéfiants.

Mais commençons le vrai travail sans laisser l'IA deviner ce dont nous avons besoin.

Contraste :

不要这样：

构建一个包含所有功能的 CRM 系统



这样：

1. “设置后端”

2. "添加认证流程"

3. “添加导出功能”

Il s'agit d'un point très important, y compris la "planification de fonctions complexes" et le "processus de débogage", qui constituent la décomposition de la tâche :

Planification fonctionnelle complexe

Décloisonner la réflexion : planifions la certification :

1. Composants requis
2. interface utilisateur
3. mesure de sécurité

Processus de débogage :

Suivez cette structure :

1. Décrire ce qui n'a pas fonctionné
2. Expliquer le comportement attendu
3. Erreur dans la console de partage

Utilisation d'images

C'est une technique importante, on peut télécharger des captures d'écran, surtout pour les utilisateurs qui ne savent pas programmer, et qui ne peuvent pas "décrire avec précision", qu'entendez-vous par "décrire avec précision" ? Par exemple, la mise en page d'une page web, il y a une barre de navigation, un en-tête, un pied de page, ce sont les bases, et il y a un vocabulaire plus complexe et plus spécialisé.

Le mieux est encore d'apprendre à le décrire - ce n'est pas difficile. Le mieux est encore de donner des images de référence directes, par exemple :

Réalisez ce tableau Kanban qui supporte le glisser-déposer entre les colonnes. Utilisez Pangea dnd pour implémenter le mouvement des cartes entre les colonnes.

Les captures d'écran sont laissées à votre imagination. Voici un terme étrange : pangea dnd. Il s'agit d'une manière très professionnelle de présenter une exigence qui ne pose pas seulement un problème, mais qui indique également la direction à suivre pour trouver une solution. Il existe de nombreuses bonnes pratiques qui ont été accumulées au fil des ans dans le domaine de la programmation. Peu importe que vous ne sachiez pas programmer, vous pouvez savoir ce que signifie une partie du vocabulaire. C'est très utile pour la programmation de l'IA.

Par exemple, dans mon cas, Bauhaus, Memphis, Mondrian, je n'ai pas fait attention avant, après avoir utilisé l'IA pour m'aider à travailler, je dois donner des instructions claires à l'AT, je dois faire un peu d'apprentissage. Pour chaque spécialité, il y a un système de concepts qui peut être compris en premier, comme le chat et la souris.

Une autre astuce réside dans le fait que l'IA en sait souvent plus et plus profondément que nous, et si nous ne savons pas comment poser la question, nous pouvons la poser à l'IA, qui nous donne la réponse et nous donne une orientation plus claire pour l'apprentissage.

Un retour d'information efficace

Lorsque nous posons des exigences.Au lieu de dire "Améliorez-le", dites "Le formulaire de connexion fonctionne, mais il faut vérifier l'adresse électronique et améliorer le message d'erreur si les mots de passe ne correspondent pas".

Essentiellement, il s'agit toujours de savoir comment donner à l'IA un retour d'information plus clair. Lorsque nous communiquons avec le modèle, nous pouvons être abstraits à abstraits, concrets à concrets. Il y a des moments où vous ne savez vraiment pas quoi demander, vous pouvez dire améliorons l'interaction, améliorons la vision, mais à ce moment-là, il est important de clarifier une fois de plus le contexte de ce que nous faisons, et grâce aux mots-clés contextuels, le modèle peut établir une corrélation au moins à un niveau supérieur à la moyenne, et nous connaissons vraisemblablement la direction à prendre.

Définition des contraintes et mise à jour de l'interface utilisateur

Définir des limites claires :"Créer une application de liste de tâches limitée à 3 tâches visibles. Inclure une fonctionnalité d'ajout/édition/suppression tout en conservant notre système de conception actuel."

Autre exemple :"Seule la conception visuelle a été mise à jour. Toutes les fonctionnalités et tous les appels d'API sont restés inchangés. Concentrez-vous sur l'amélioration de la présentation mobile."Tout en mettant l'accent sur les améliorations visuelles, il est nécessaire de préciser ce qui n'a pas besoin d'être changé. Et ainsi de suite.

Exigences en matière d'accessibilité

Préciser le besoin :"Générer un formulaire de connexion avec des étiquettes ARIA, une navigation au clavier et une gestion appropriée de l'attention."Elle peut aussi exiger que nous en ayons une certaine connaissance. Savoir, c'est bien, la différence est de savoir ou de ne pas savoir.

À l'ère de la programmation de l'IA, la curiosité doit être un peu plus importante, car savoir ou ne pas savoir fait parfois la différence.

Dao dans la merde qui se noie, le travail avec l'IA est simple, je voulais à l'origine écrire ces capacités de manière fantaisiste, comme si j'étais plus que capable, mais plus j'utilise, plus j'expérimente, plus je pense qu'il est bon de rester simple, de présenter les choses telles qu'elles sont, et d'être utile à tout le monde.

Vous ne devez pas vous attendre à ce que Lovable fasse tout le travail, et lorsque vous avez essayé ce qui précède et que Lovable ne semble pas en mesure de s'améliorer, Cursor entre en jeu.