Le guide complet de la conception et des meilleures pratiques des mots-clés pour la programmation de l'amour

utiliser Adorable Procéder à une vérification rapide de la conception, de la stratégie et de la méthodologie.

Pour vous aider à tirer le meilleur parti de Lovable, nous avons compilé une liste de stratégies et d'approches de conception de conseils. Ces stratégies sont en partie issues de l'expérience de notre équipe et en partie partagées par les membres de la communauté.

Qu'est-ce que la conception de repères ? La conception des invites fait référence à l'entrée textuelle en langage naturel utilisée pour interagir avec Lovable. Il s'agit d'un message contenant des instructions que vous donnez à Lovable.

Étant donné que Lovable s'appuie sur de grands modèles linguistiques (LLM), des stratégies efficaces de conception d'indices peuvent améliorer de manière significative son efficacité et sa précision. Autres lectures recommandées Analyser les mots-clés du système bolt.new, générer des conseils sur le code frontal, c'est ici ! .

 

principes de base

Les messages-guides sont le principal moyen d'interagir avec les applications Lovable :

1. écran de bienvenueLes messages d'encouragement : Commencez par des messages préétablis ou créez les vôtres.
2. Interface utilisateur du constructeurLes services d'aide à l'enfance : Iterate quickly using a chat-based interface (interface de discussion).

Les messages d'encouragement sont au cœur de toutes les interactions.

 

Stratégie de conception de la queue

Ces stratégies peuvent souvent être combinées, en fonction de votre cas d'utilisation. N'hésitez pas à expérimenter ces stratégies pour trouver ce qui fonctionne le mieux pour vous. Bien que Lovable puisse accomplir de nombreuses tâches avec des astuces très basiques et génériques, l'utilisation de ces stratégies peut vous aider à obtenir de meilleurs résultats.

Conception d'indices basée sur un scénario

Fournir des informations contextuelles aide Lovable à comprendre l'étendue globale de vos besoins. Les informations contextuelles peuvent être utilisées pour mettre en place des tâches spécifiques avant qu'elles ne soient demandées.

Mise en contexte

我们正在构建一个项目管理工具，帮助团队跟踪任务。
该工具应具有以下功能：
- 用户认证
- 项目创建
- 任务分配
- 报告功能
现在，第一个任务是创建项目创建的用户界面。

Autre exemple :

我需要一个具有 Supabase 集成和安全认证流程的 CRM 应用程序。首先设置后端。

Autre exemple :

我们正在开发一个专注于环保产品的电商平台。生成一个具有类别和价格筛选功能的产品列表页面。

Conception progressive des repères

Notre expérience a montré qu'il est plus efficace d'apporter de petites modifications progressives que de donner une indication importante et d'attendre de l'IA qu'elle s'en charge complètement.

Ne le faites pas.: :

构建一个带有 Supabase、认证、Google Sheets 导出和数据增强功能的 CRM 应用程序。

Ceci est recommandé: :

1. 设置一个连接 Supabase 的 CRM 后端。
2. 添加具有用户角色的安全认证流程。
3. 集成 Google Sheets 用于导出记录。

Autre exemple :

1. 设置用户信息的数据库架构。
2. 开发一个用于检索用户数据的 API 端点。

Utilisation de repères visuels

Nous avons récemment ajouté la possibilité pour les utilisateurs de télécharger une image avec une invite et de demander à Lovable de construire une solution basée sur l'image.

Il existe deux méthodes principales. La première est la méthode de l'indice simple.

Conseils simples pour le téléchargement d'images

Vous pouvez télécharger une image et ajouter l'exemple de conseil suivant :

创建并实现一个尽可能类似于附图的用户界面。

这个截图显示了一个移动端的布局问题。调整边距和填充，使其在保持相同设计结构的同时具有响应性。

Vous pouvez également aider l'IA à mieux comprendre le contenu de l'image et les informations spécifiques qui y sont associées.

Messages-guides sous forme d'images avec instructions détaillées D'excellents résultats peuvent être obtenus en ajoutant des instructions spécifiques à une image téléchargée. Bien qu'une image vaille mille mots, il est particulièrement important d'ajouter un texte décrivant la fonctionnalité souhaitée, car les informations interactives ne sont pas toujours évidentes dans les images statiques.

我希望您创建一个尽可能类似于截图中的应用程序。
它本质上是一个看板克隆。
它应该具有以下功能：在每列中添加新卡片（任务），更改单列内这些卡片的顺序，甚至在列之间移动这些卡片。
可以使用 Pangea home dnd npm 包来实现拖放功能。

Intégration du retour d'information

Examiner les résultats de l'IA et fournir un retour d'information spécifique en vue d'une amélioration.

登录表单看起来不错，但请为电子邮件字段添加验证，以确保其包含有效的电子邮件地址。

Éviter l'ambiguïté

Veillez à ce que vos questions soient claires et sans ambiguïté. Évitez les termes vagues et soyez aussi précis que possible dans la description de vos besoins.

Ne le faites pas.: :

让这个应用更好。

faire qqch. comme ceci: :

重构该应用以清理未使用的组件并提升性能，但不改变 UI 或功能。

Autre exemple :

创建一个包含用户名、电子邮件和密码字段的用户注册表单。

Conseils non spécifiques

Éviter les messages non spécifiques et généraux

创建一个用户输入的表单

Ajout de contraintes

Parfois, l'ajout de contraintes peut aider l'IA à se concentrer sur ce qui est important et à éviter toute complexité inutile.

Ajout de contraintes

创建一个简单的待办事项应用，最多同时显示 3 个任务。
包括添加、编辑和删除任务的功能。

优化此代码，但确保 UI 和核心功能保持不变。记录每项更改。

 

Stratégies avancées de conception des queues

L'accent mis sur l'accessibilité

Encourager la génération de code conforme aux normes d'accessibilité et aux meilleures pratiques modernes. Cela permet de s'assurer que le résultat est non seulement fonctionnel, mais aussi convivial et conforme aux lignes directrices en matière d'accessibilité.

生成一个符合无障碍最佳实践的 React 登录表单组件，包括适当的 ARIA 标签和键盘导航支持。

Utilisation de composants et de bibliothèques prédéfinis

Spécifier l'utilisation de certaines bibliothèques ou composants d'interface utilisateur pour maintenir la cohérence et l'efficacité du projet. L'IA doit ainsi utiliser des outils spécifiques pour garantir la compatibilité de l'application et l'uniformité du langage de conception.

使用 shadcn/ui 库创建一个响应式导航栏，并使用 Tailwind CSS 进行样式设计。

Conseils pour la mise en œuvre de la pensée en chaîne (CoT)

Pour les tâches complexes, l'IA est encouragée à aborder le problème par étapes avant de fournir une solution. Cette approche permet de décomposer les tâches complexes afin de générer des solutions plus précises et plus complètes.

让我们一步步思考如何设置一个安全的身份验证系统：
1. 需要哪些必要组件？
2. 它们应该如何交互？
3. 提供实现代码。

Conseils multilingues

Spécifiez la langue cible pour les commentaires de code et la documentation lorsque vous travaillez dans un environnement multilingue. Cela garantit que le contenu généré est accessible aux membres de l'équipe qui parlent des langues différentes et améliore la collaboration.

生成一个计算斐波那契数列的 Python 脚本。用法语提供注释和文档。

Définir la structure du projet et la gestion des documents

Clarifier la structure du projet, y compris les noms de fichiers et les chemins d'accès, pour s'assurer que le code généré est bien organisé et facile à maintenir. Cela fournit des indications claires sur l'endroit où les nouveaux composants doivent être stockés dans le projet afin de maintenir une organisation cohérente des fichiers.

创建一个名为 'UserProfile' 的新 React 组件，并将其保存为 'components/user-profile.tsx'。确保它包括一个个人头像、用户名和简介部分。

 

Débogage et signalement des problèmes

Instructions de débogage

Suivez les étapes ci-dessous pour effectuer une mise en service systématique :

• reconnaissance des tâchesLes tâches à accomplir sont les suivantes : dresser la liste de toutes les tâches et les classer par ordre de priorité.
• l'audit interneLes solutions de gestion des risques : Validez votre solution en interne avant de la soumettre.
• rapportLa confirmation de chaque tâche accomplie par des résultats clairs et vérifiables.
• Validation DOMLes modifications doivent être rendues correctement dans le DOM. Fournir des balises DOM ou un retour d'information pour la validation.
• question tranchéeLes questions relatives à la sécurité sont traitées dans le cadre d'une procédure d'appel d'offres, et les incertitudes sont clarifiées avant de poursuivre.
• Gestion des erreurs et journalisationLes systèmes de gestion des erreurs sont robustes et les systèmes de gestion des erreurs sont détaillés. console.log. Ne jamais supprimer les journaux avant la mise en service.
• Gestion des outils de débogageLa mise en œuvre d'un commutateur global pour désactiver les outils de débogage dans l'environnement de production.
• Mise en œuvre du point d'arrêtLes erreurs liées à l'utilisation de GPT : ajouter des points d'arrêt pour isoler les erreurs liées à l'utilisation de GPT.
• paquet tiersLes bibliothèques réutilisables : vérifier la présence de bibliothèques réutilisables avant d'écrire un nouveau code.
• Utilisation des systèmes existantsLes fonctions existantes sont mises à profit pour assurer la cohérence.
• Examen du codeLes services d'appui à la décision : ils effectuent des analyses détaillées, documentent les problèmes et planifient des solutions avant que des modifications ne soient apportées.

processus de débogage

Étapes de débogage systématique :

1. Ajouter les cas de test qui ont échoué.
2. Isoler les problèmes et analyser les dépendances.
3. Enregistrer les résultats avant d'appliquer les correctifs.

这是失败的控制台日志。分析测试用例，调查认证流程中的错误，并在理解依赖关系后提出解决方案。

Retour d'information systématique

Lorsqu'il s'agit de signaler des erreurs ou de demander des modifications :

1. descriptionscomportement actuelet des questions.
2. esquisséeComportement attendu.
3. Ajouter des contraintes spécifiques.

Webhook 集成偶尔失败。调查为什么 JWT 验证切换会导致此问题并提出解决方案。

Soyez précis lorsque vous résolvez des problèmes

Les problèmes surviennent, les constructions échouent parfois et l'application qui en résulte n'est pas toujours conforme aux attentes. Des conseils efficaces peuvent vous aider à revenir sur la bonne voie. Là encore, la spécificité est cruciale.

Évitez les messages génériques ou très généraux

什么都不行，修复它！

Au contraire, soyez plus précis et plus détaillé.

Rendez vos conseils plus détaillés et plus clairs

现在屏幕变成空白了，之前我还能进行编辑。
能检查一下发生了什么吗？

Signaler des bogues à l'aide de la console du développeur

Si vous êtes plus calé en technologie et que vous rencontrez un problème, coller l'erreur enregistrée dans la console du navigateur peut s'avérer très utile.

Normalement, vous ouvrez le Outils du développeur et naviguez jusqu'à la console. Si des erreurs ou des notifications sont visibles, vous pouvez les copier et les coller sous forme de conseils.

Utilisation des outils de développement et des journaux de la console

我的应用程序不再工作了，屏幕是空白的。
这是从开发者工具控制台复制粘贴的内容，你能修复这个问题吗？
发生错误：
TypeError: Q9() is undefined at https://example.lovable.app/assets/index-DWQbrtrQQj.js
: 435 : 39117 index-DWQbrtrQQj.js:435:35112
onerror https://example.lovable.app/assets/index-DWQbrtrQQj.js:435

Exemple pratique de débogage

Un processus de débogage réel dans Lovable pourrait ressembler à ceci :

Étape 1: :

查看来自控制台的错误日志。确定认证流程中的根本原因。

Étape 2: :

现在隔离失败的测试并分析哪些依赖关系出了问题。

Étape 3: :

在隔离环境中测试认证修复后，提出永久解决方案。

Promesses adorables

Pour stimuler votre productivité, nous avons ajouté quelques conseils astucieux dédiés aux scénarios les plus courants.

Conseils en matière de collaboration et de processus

Pour le travail en équipe ou le débogage :

审查此 GitHub 项目的结构。评估流程、依赖关系，并提出有关可扩展性的改进建议。

débogage des erreurs

Petite erreur :

同样的错误仍然存在。暂时不要更改代码—需要彻底调查以找到确切的根本原因。深入分析日志、流程和依赖关系，并在完全理解问题后再提出解决方案。

Erreur de persistance :

错误仍未解决。停止操作，务必以 100% 的确定性找到确切的根本原因—不要猜测或假设。详细分析流程和依赖关系的每个方面，并确保在完全理解之前不要进行任何更改。

Erreur majeure :

这是解决此问题的最后尝试。停止所有更改，系统性地重新检查整个流程—身份验证、Supabase、Stripe、状态管理和重定向—从头开始梳理。找出问题所在及其原因，单独测试每个部分，在没有绝对确定性之前不要继续。

Nettoyer le journal de la console :

仔细移除不必要的 console.log 语句，同时不影响功能或设计。检查每条日志以确保其非关键性，并记录需要替代处理的日志。方法性地进行操作，彻底测试以确认应用程序的完整性。

reconstruire

Conseils pratiques pour le remaniement post-demande :

重构此文件，同时确保不更改 UI 或功能—所有内容的行为和外观必须完全相同。仅专注于改善代码结构和可维护性。记录当前功能，确保已进行测试，并逐步操作以避免风险或回归。

concevoir

Modifications de l'interface utilisateur :

仅进行视觉更新—不要以任何方式影响功能或逻辑。完全了解当前 UI 如何与应用程序集成，确保逻辑、状态管理和 API 保持不变。彻底测试以确认应用程序行为与之前完全一致。

Optimisation mobile :

在不更改设计或功能的情况下优化应用程序的移动端体验。分析布局和响应性以确定针对小屏幕和触摸交互所需的调整。在编辑任何代码之前，制定详细计划，并在各种设备上进行彻底测试，以确保应用程序的行为与当前一致。

Modifier les caractéristiques existantes :

更改此功能但不要影响核心功能、其他功能或流程。分析其行为和依赖关系以理解风险，并在进行操作之前沟通任何疑虑。彻底测试以确认无回归或意外影响。

Mises à jour sensibles :

此更新非常敏感，需要极高的精确性。在更改之前，彻底分析所有依赖关系和影响，并以系统性的方法测试以确保没有问题。避免捷径或假设—如果不确定，请暂停并寻求澄清。

Conseils avant la mise en œuvre

avant de mettre en œuvre des changements majeurs :

规划此功能的 API 流程。包括端点、参数，以及如何与数据库连接。

Expérimenter le mode chat

Le mode chat est une fonctionnalité expérimentale qui vous permet de changer la façon dont vous interagissez avec Lovable. Les modes de chat que nous lançons sont les suivants :

1. Mode par défaut : discuter et modifier votre projet.
2. Mode chat uniquement : chat uniquement, pas d'édition de votre projet.

Il est possible que nous introduisions d'autres modes de chat à l'avenir, ou que nous les supprimions pour expérimenter différentes façons d'interagir avec Lovable.

 

rendre un verdict

Lorsque vous combinez les invites incrémentielles, les commandes contextuelles et les nouvelles fonctions Promesses adorables Combinés, les conseils de Lovable sont encore plus puissants. Essayez, répétez et tirez parti de ces pratiques pour rationaliser les flux de travail, déboguer efficacement et créer des applications fiables.