Der vollständige Leitfaden für die liebenswerte Programmierung von Stichwortwörtern und bewährte Praktiken

ausnutzen Liebenswert Führen Sie eine Checkliste für Design, Strategie und Methodik durch.

Um Ihnen dabei zu helfen, das Beste aus Lovable herauszuholen, haben wir eine Liste von Strategien und Ansätzen für die Gestaltung von Tipps zusammengestellt. Diese Strategien stammen zum Teil aus der Erfahrung unseres Teams und zum Teil von Community-Mitgliedern.

Was ist ein Cue-Design? Prompt-Design bezieht sich auf die textbasierte natürlichsprachliche Eingabe, die zur Interaktion mit Lovable verwendet wird. Stellen Sie es sich als eine Nachricht mit Anweisungen vor, die Sie Lovable geben.

Da Lovable auf großen Sprachmodellen (Large Language Models, LLMs) beruht, können wirksame Strategien für das Design von Stichwörtern die Effizienz und Genauigkeit erheblich verbessern. Außerdem empfohlene Lektüre Analysieren bolt.new System Hinweis Worte, generieren Front-End-Code Hinweis Tipps sind hier! .

Grundlagen

Aufforderungen sind die wichtigste Art, mit Lovable-Anwendungen zu interagieren:

1. Begrüßungsbildschirm: Beginnen Sie mit vorgefertigten Prompts oder erstellen Sie Ihre eigenen.
2. Benutzeroberfläche des BuildersIterieren Sie schnell über eine chatbasierte Schnittstelle.

Aufforderungen sind das Herzstück aller Interaktionen.

Queue-Design-Strategie

Je nach Anwendungsfall können diese Strategien oft kombiniert werden. Experimentieren Sie ruhig mit diesen Strategien, um herauszufinden, was für Sie am besten funktioniert. Lovable selbst kann zwar viele Aufgaben mit sehr einfachen und allgemeinen Tipps erledigen, aber die Verwendung dieser Strategien kann Ihnen helfen, bessere Ergebnisse zu erzielen.

Szenariobasierter Entwurf von Stichwörtern

Die Bereitstellung von Kontextinformationen hilft Lovable, den Gesamtumfang Ihrer Bedürfnisse zu verstehen. Kontextinformationen können verwendet werden, um bestimmte Aufgaben einzurichten, bevor sie angefordert werden.

Kontext einstellen

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

Ein weiteres Beispiel:

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

Ein weiteres Beispiel:

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

Progressives Queue-Design

Unsere Erfahrung hat gezeigt, dass es effektiver ist, kleine, schrittweise Änderungen vorzunehmen, als einen großen Hinweis zu geben und zu erwarten, dass die KI ihn vollständig übernimmt.

Tun Sie es nicht.::

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

Dies wird empfohlen::

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

Ein weiteres Beispiel:

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

Verwendung von Bildhinweisen

Wir haben vor kurzem Unterstützung für Benutzer hinzugefügt, die ein Bild mit einer Aufforderung hochladen und Lovable bitten, eine Lösung auf der Grundlage des Bildes zu erstellen.

Hier gibt es zwei Hauptmethoden. Die erste ist die einfache Hinweismethode.

Einfache Tipps zum Hochladen von Bildern

Sie können ein Bild hochladen und den folgenden Beispieltipp hinzufügen:

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

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

Oder Sie können der KI helfen, den Inhalt des Bildes und die spezifischen Informationen, die mit dem Bild verbunden sind, besser zu verstehen.

Bildanweisungen mit detaillierten Anweisungen Hervorragende Ergebnisse können erzielt werden, wenn einem hochgeladenen Bild spezifische Anweisungen hinzugefügt werden. Ein Bild sagt zwar mehr als tausend Worte, aber es ist besonders wichtig, einen Text hinzuzufügen, der die gewünschte Funktionalität beschreibt, da interaktive Informationen in statischen Bildern nicht immer sichtbar sind.

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

Integration von Rückmeldungen

Überprüfen Sie die Ergebnisse der KI und geben Sie gezieltes Feedback zur Verbesserung.

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

Vermeidung von Mehrdeutigkeit

Achten Sie darauf, dass Ihre Aufforderungen klar und unmissverständlich sind. Vermeiden Sie vage Begriffe und beschreiben Sie Ihren Bedarf so genau wie möglich.

Tun Sie es nicht.::

让这个应用更好。

etw. so machen::

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

Ein weiteres Beispiel:

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

Unspezifische Tipps

Vermeiden Sie unspezifische und allgemeine Aufforderungen

创建一个用户输入的表单

Hinzufügen von Beschränkungen

Manchmal kann das Hinzufügen von Einschränkungen der KI helfen, sich auf das Wesentliche zu konzentrieren und unnötige Komplexität zu vermeiden.

Hinzufügen von Beschränkungen

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

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

Fortgeschrittene Queue-Design-Strategien

Betonung der Barrierefreiheit

Fördern Sie die Erstellung von Code, der den Zugänglichkeitsstandards und modernen Best Practices entspricht. Dadurch wird sichergestellt, dass die Ausgabe nicht nur funktional, sondern auch benutzerfreundlich ist und den Zugänglichkeitsrichtlinien entspricht.

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

Verwendung vordefinierter Komponenten und Bibliotheken

Spezifizieren Sie die Verwendung bestimmter UI-Bibliotheken oder -Komponenten, um die Konsistenz und Effizienz des Projekts zu gewährleisten. Dadurch wird AI angewiesen, bestimmte Tools zu verwenden, um die Kompatibilität der Anwendung und eine einheitliche Designsprache zu gewährleisten.

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

Tipps zur Umsetzung von Chain Thinking (CoT)

Bei komplexen Aufgaben wird die KI ermutigt, das Problem schrittweise anzugehen, bevor sie eine Lösung liefert. Dieser Ansatz hilft, komplexe Aufgaben aufzuschlüsseln, um genauere und umfassendere Lösungen zu finden.

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

Mehrsprachige Tipps

Geben Sie die Zielsprache für Codekommentare und Dokumentation an, wenn Sie in einer mehrsprachigen Umgebung arbeiten. Dadurch wird sichergestellt, dass die generierten Inhalte für Teammitglieder, die verschiedene Sprachen sprechen, zugänglich sind und die Zusammenarbeit verbessert wird.

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

Definition der Projektstruktur und des Dokumentenmanagements

Klären Sie die Projektstruktur, einschließlich der Dateinamen und Pfade, um sicherzustellen, dass der generierte Code gut organisiert und leicht zu pflegen ist. Dies gibt klare Hinweise darauf, wo neue Komponenten im Projekt gespeichert werden sollten, damit eine konsistente Dateiorganisation beibehalten wird.

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

Fehlersuche und Problemberichte

Anweisungen zum Debuggen

Führen Sie die folgenden Schritte aus, um eine systematische Inbetriebnahme durchzuführen:

• AufgabenerkennungAlle Aufgaben auflisten und nach Prioritäten ordnen.
• InnenrevisionValidieren Sie Ihre Lösung intern, bevor Sie sie einreichen.
• BerichterstattungBestätigung jeder abgeschlossenen Aufgabe durch klare, überprüfbare Ergebnisse.
• DOM-ValidierungSicherstellen, dass die Änderungen im DOM korrekt wiedergegeben werden. Geben Sie DOM-Tags oder Feedback für die Validierung.
• eindeutiges ThemaKlären Sie alle Unklarheiten, bevor Sie fortfahren.
• Fehlerbehandlung und ProtokollierungRobuste Fehlerbehandlung und detaillierte console.log. Löschen Sie niemals Protokolle, bevor Sie live gehen.
• Verwaltung von FehlersuchwerkzeugenImplementierung eines globalen Schalters zur Deaktivierung von Debugging-Tools in der Produktionsumgebung.
• Haltepunkt-ImplementierungBreakpoints hinzufügen, um GPT-bezogene Fehler zu isolieren.
• Drittanbieter-PaketWiederverwendbare Bibliotheken suchen, bevor neuer Code geschrieben wird.
• Nutzung der bestehenden SystemeAufbauen auf bestehenden Funktionen, um Konsistenz zu gewährleisten.
• Code-ÜberprüfungDurchführung von detaillierten Analysen, Dokumentation von Problemen und Planung von Lösungen, bevor Änderungen vorgenommen werden.

Debugging-Prozess

Systematische Fehlerbehebungsschritte:

1. Fügen Sie fehlgeschlagene Testfälle hinzu.
2. Isolierung von Problemen und Analyse von Abhängigkeiten.
3. Halten Sie die Ergebnisse fest, bevor Sie Korrekturen vornehmen.

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

Systematisches Feedback

Wenn Sie Fehler melden oder Änderungen beantragen:

1. Beschreibungenaktuelles Verhaltenund Fragen.
2. skizziert.Erwartetes Verhalten.
3. Fügen Sie spezifische Beschränkungen hinzu.

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

Seien Sie bei der Problemlösung konkret

Es gibt Probleme, manchmal schlagen Builds fehl und die resultierende Anwendung entspricht nicht den Erwartungen. Wirksame Hinweise können Ihnen helfen, wieder auf den richtigen Weg zu kommen. Auch hier ist die Spezifität entscheidend.

Vermeiden Sie generische oder sehr allgemeine Aufforderungen

什么都不行，修复它！

Seien Sie stattdessen konkreter und detaillierter.

Machen Sie Ihre Tipps ausführlicher und klarer

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

Melden von Fehlern mit der Entwicklerkonsole

Wenn Sie technisch versierter sind und ein Problem haben, könnte das Einfügen des in der Browserkonsole protokollierten Fehlers sehr hilfreich sein.

Normalerweise würden Sie die Entwickler-Tools und navigieren Sie zur Konsole. Wenn Fehler oder Benachrichtigungen sichtbar sind, können Sie diese kopieren und als Tipps einfügen.

Verwendung von Entwicklerwerkzeugen und Konsolenprotokollen

我的应用程序不再工作了，屏幕是空白的。
这是从开发者工具控制台复制粘贴的内容，你能修复这个问题吗？
发生错误：
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

Praktisches Beispiel zur Fehlersuche

Ein tatsächlicher Debugging-Prozess in Lovable könnte folgendermaßen aussehen:

Schritt 1::

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

Schritt 2::

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

Schritt 3::

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

Liebenswerte Prompts

Um Ihre Produktivität zu steigern, haben wir einige nützliche Tipps für gängige Szenarien zusammengestellt.

Tipps zu Zusammenarbeit und Prozessen

Für Teamarbeit oder Fehlersuche:

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

Fehlerbeseitigung

Kleiner Fehler:

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

Persistenzfehler:

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

Großer Fehler:

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

Bereinigen Sie das Konsolenprotokoll:

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

rekonstruieren.

Nützliche Hinweise für das Refactoring nach der Anfrage:

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

entwickeln.

UI-Änderungen:

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

Mobile Optimierung:

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

Ändern Sie bestehende Merkmale:

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

Sensible Updates:

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

Tipps vor der Implementierung

bevor größere Änderungen vorgenommen werden:

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

Experimentieren mit dem Chat-Modus

Der Chat-Modus ist eine experimentelle Funktion, mit der Sie die Art und Weise, wie Sie mit Lovable interagieren, ändern können. Die Chat-Modi, die wir eingeführt haben, umfassen:

1. Standardmodus: Chatten und Ihr Projekt bearbeiten.
2. Nur-Chat-Modus: Nur Chat, keine Bearbeitung Ihres Projekts.

Es kann sein, dass wir in Zukunft weitere Chat-Modi einführen oder sie entfernen, um mit anderen Möglichkeiten der Interaktion mit Lovable zu experimentieren.

zu einem Urteil gelangen

Wenn Sie inkrementelle Eingabeaufforderungen, kontextbezogene Befehle und neu eingeführte Liebenswerte Prompts Kombiniert sind die Tipps von Lovable sogar noch leistungsfähiger. Probieren Sie diese Praktiken aus, wiederholen Sie sie und nutzen Sie sie, um Arbeitsabläufe zu optimieren, effizient zu debuggen und zuverlässige Anwendungen zu erstellen.