Vollständige liebenswerte Programmierung Cue Word Design Guidelines und Best Practices

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 Eingabe in natürlicher Sprache, 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 mit diesen Strategien können Sie bessere Ergebnisse erzielen.

Szenariobasierter Entwurf von Stichworten

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.

Einstellung des Kontextes

Wir sind dabei, ein Projektmanagement-Tool zu entwickeln, das Teams bei der Verfolgung von Aufgaben unterstützt.
Das Tool sollte die folgenden Funktionen haben:
- Benutzerauthentifizierung
- Erstellung von Projekten
- Zuweisung von Aufgaben
- Berichtsfunktionalität
Die erste Aufgabe besteht nun darin, die Benutzeroberfläche für die Projekterstellung zu erstellen.

Ein weiteres Beispiel:

Ich benötige eine CRM-Anwendung mit Supabase-Integration und sicherem Authentifizierungsverfahren. Richten Sie zunächst das Backend ein.

Ein weiteres Beispiel:

Wir entwickeln eine E-Commerce-Plattform mit Schwerpunkt auf umweltfreundlichen Produkten. Erstellen Sie eine Seite mit Produktlisten mit Kategorie- und Preisfiltern.

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.::

Erstellen Sie eine CRM-Anwendung mit Supabase, Authentifizierung, Google Sheets-Export und Datenerweiterungen.

Dies wird empfohlen::

1. ein CRM-Backend für die Verbindung mit Supabase einrichten. 2.
2. einen sicheren Authentifizierungsprozess mit Benutzerrollen hinzufügen. 3.
3. integrieren Sie Google Sheets für den Export von Datensätzen.

Ein weiteres Beispiel:

1. die Datenbankstruktur für Benutzerinformationen einrichten.
2. einen API-Endpunkt für den Abruf von Benutzerdaten entwickeln.

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:

Erstellen und implementieren Sie eine Benutzeroberfläche, die dem beigefügten Bild so ähnlich wie möglich ist.

Dieser Screenshot zeigt ein Layout-Problem auf dem Handy. Passen Sie die Ränder und die Auffüllungen an, um die Seite responsive zu machen und dabei die gleiche Designstruktur beizubehalten.

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.

Ich möchte, dass Sie eine Anwendung erstellen, die der im Screenshot gezeigten so ähnlich wie möglich ist.
Es ist im Wesentlichen ein Kanban-Klon.
Sie sollte die Möglichkeit haben, neue Karten (Aufgaben) zu jeder Spalte hinzuzufügen, die Reihenfolge dieser Karten innerhalb einer einzelnen Spalte zu ändern und sie sogar zwischen den Spalten zu verschieben.
Die Drag-and-Drop-Funktionalität kann mit dem npm-Paket Pangea home dnd implementiert werden.

Integration von Rückmeldungen

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

Das Anmeldeformular sieht gut aus, aber bitte fügen Sie eine Validierung für das E-Mail-Feld hinzu, um sicherzustellen, dass es eine gültige E-Mail-Adresse enthält.

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.::

Verbessern Sie diese App.

etw. so machen::

Refaktorieren Sie die Anwendung, um ungenutzte Komponenten zu bereinigen und die Leistung zu verbessern, aber ändern Sie nicht die Benutzeroberfläche oder die Funktionalität.

Ein weiteres Beispiel:

Erstellen Sie ein Benutzerregistrierungsformular mit den Feldern Benutzername, E-Mail und Passwort.

Unspezifische Tipps

Vermeiden Sie unspezifische und allgemeine Aufforderungen

Ein Formular für Benutzereingaben erstellen

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

Erstellen Sie eine einfache To-Do-Liste, die bis zu 3 Aufgaben gleichzeitig anzeigt.
Enthält die Möglichkeit, Aufgaben hinzuzufügen, zu bearbeiten und zu löschen.

Optimieren Sie diesen Code, aber achten Sie darauf, dass die Benutzeroberfläche und die Kernfunktionalität erhalten bleiben. Dokumentieren Sie jede Änderung.

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.

Erstellen Sie eine bewährte Praxis für die Barrierefreiheit Reagieren Sie Komponenten des Anmeldeformulars, einschließlich geeigneter ARIA-Beschriftungen und Unterstützung der Tastaturnavigation.

Verwendung von vordefinierten 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.

Erstellen Sie eine responsive Navigationsleiste mit der shadcn/ui-Bibliothek und gestalten Sie sie mit Tailwind CSS.

Tipps zur Umsetzung von Chain Thinking (CoT)

Bei komplexen Aufgaben wird die KI dazu angehalten, sich dem Problem schrittweise zu nähern, bevor sie eine Lösung liefert. Dieser Ansatz hilft, komplexe Aufgaben aufzuschlüsseln, um genauere und umfassendere Lösungen zu finden.

Lassen Sie uns Schritt für Schritt überlegen, wie wir ein sicheres Authentifizierungssystem einrichten können:
1. Welche Komponenten werden benötigt?
2. Wie sollten sie zusammenwirken?
3. Stellen Sie den Implementierungscode bereit.

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.

Erzeugt ein Python-Skript, das die Fibonacci-Reihe berechnet. Enthält Kommentare und Dokumentation auf Französisch.

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.

Erstellen Sie eine neue React-Komponente namens "UserProfile" und speichern Sie sie als "components/user-profile.tsx". Stellen Sie sicher, dass sie einen persönlichen Avatar, einen Benutzernamen und einen Profilabschnitt enthält.

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.

Dies ist das Konsolenprotokoll des Fehlers. Analysieren Sie Testfälle, untersuchen Sie Fehler im Authentifizierungsprozess und schlagen Sie Lösungen vor, nachdem Sie die Abhängigkeiten verstanden haben.

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.

Die Webhook-Integration schlägt gelegentlich fehl. Untersuchen Sie, warum der JWT-Authentifizierungsschalter dieses Problem verursacht und schlagen Sie eine Lösung vor.

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

Nichts funktioniert, reparieren Sie es!

Seien Sie stattdessen konkreter und detaillierter.

Machen Sie Ihre Tipps ausführlicher und klarer

Jetzt ist der Bildschirm leer, bevor ich ihn bearbeiten konnte.
Können Sie überprüfen, was passiert ist?

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 sie kopieren und als Tipps einfügen.

Verwendung von Entwicklerwerkzeugen und Konsolenprotokollen

Meine App funktioniert nicht mehr und der Bildschirm ist leer.
Dies wurde aus der Konsole der Entwicklertools kopiert und eingefügt. Können Sie dies beheben?
Es ist ein Fehler aufgetreten:
TypeError: Q9() ist undefiniert unter https://example.lovable.app/assets/index-DWQbrtrQQj.js
435 : 39117 index-DWQbrtrQQQj.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 wie folgt aussehen:

Schritt 1::

Sehen Sie sich die Fehlerprotokolle auf der Konsole an. Ermitteln Sie die Grundursache im Authentifizierungsprozess.

Schritt 2::

Isolieren Sie nun die fehlgeschlagenen Tests und analysieren Sie, welche Abhängigkeiten fehlerhaft waren.

Schritt 3::

Schlagen Sie eine dauerhafte Lösung vor, nachdem Sie eine zertifizierte Lösung in einer isolierten Umgebung getestet haben.

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:

Überprüfen Sie die Struktur dieses GitHub-Projekts. Bewerten Sie Prozesse und Abhängigkeiten und schlagen Sie Verbesserungen für die Skalierbarkeit vor.

Fehlerbeseitigung

Kleiner Fehler:

Der gleiche Fehler tritt weiterhin auf. Ändern Sie den Code vorerst nicht - eine gründliche Untersuchung ist erforderlich, um die genaue Ursache zu finden. Analysieren Sie Protokolle, Prozesse und Abhängigkeiten eingehend und finden Sie erst dann eine Lösung, wenn Sie das Problem vollständig verstanden haben.

Persistenzfehler:

Der Fehler bleibt ungelöst. Stoppen Sie den Vorgang und stellen Sie sicher, dass Sie die genaue Ursache mit 100% Sicherheit finden - keine Vermutungen oder Annahmen. Analysieren Sie jeden Aspekt des Prozesses und der Abhängigkeiten im Detail und stellen Sie sicher, dass keine Änderungen vorgenommen werden, bevor sie nicht vollständig verstanden sind.

Großer Fehler:

Dies ist der letzte Versuch, dieses Problem zu beheben. Stoppen Sie alle Änderungen und überprüfen Sie systematisch den gesamten Prozess - Authentifizierung, Supabase, Stripe, Statusverwaltung und Umleitung - und gehen Sie ihn von Grund auf durch. Finden Sie heraus, was falsch ist und warum, testen Sie jeden Teil einzeln, und fahren Sie erst fort, wenn Sie sich absolut sicher sind.

Bereinigen Sie das Konsolenprotokoll:

Entfernen Sie sorgfältig unnötige console.log-Anweisungen, ohne die Funktionalität oder das Design zu beeinträchtigen. Prüfen Sie jedes Protokoll, um sicherzustellen, dass es nicht kritisch ist, und zeichnen Sie Protokolle auf, die eine alternative Verarbeitung erfordern. Gehen Sie methodisch vor und testen Sie gründlich, um die Integrität der Anwendung zu bestätigen.

rekonstruieren.

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

Überarbeiten Sie diese Datei und stellen Sie dabei sicher, dass keine Änderungen an der Benutzeroberfläche oder der Funktionalität vorgenommen werden - alles muss sich genau gleich verhalten und aussehen. Konzentrieren Sie sich nur auf die Verbesserung der Codestruktur und der Wartbarkeit. Dokumentieren Sie die aktuelle Funktionalität, um sicherzustellen, dass sie Schritt für Schritt getestet wird, um Risiken oder Regressionen zu vermeiden.

entwickeln.

UI-Änderungen:

Nur visuelle Aktualisierungen, die sich in keiner Weise auf die Funktionalität oder Logik auswirken. Verstehen Sie genau, wie die aktuelle Benutzeroberfläche in die Anwendung integriert ist, und stellen Sie sicher, dass die Logik, die Zustandsverwaltung und die APIs gleich bleiben. Testen Sie gründlich, um zu bestätigen, dass sich die Anwendung genauso verhält wie zuvor.

Mobile Optimierung:

Optimieren Sie das mobile Erlebnis der Anwendung, ohne das Design oder die Funktionalität zu verändern. Analysieren Sie Layout und Reaktionsfähigkeit, um zu ermitteln, welche Anpassungen für kleine Bildschirme und Touch-Interaktionen erforderlich sind. Erstellen Sie einen detaillierten Plan und testen Sie gründlich auf einer Vielzahl von Geräten, bevor Sie den Code bearbeiten, um sicherzustellen, dass das Verhalten der App mit dem aktuellen konsistent ist.

Ändern Sie bestehende Merkmale:

Ändern Sie diese Funktion, ohne die Kernfunktionalität, andere Funktionen oder Prozesse zu beeinträchtigen. Analysieren Sie das Verhalten und die Abhängigkeiten, um die Risiken zu verstehen, und teilen Sie alle Bedenken mit, bevor Sie fortfahren. Führen Sie gründliche Tests durch, um sicherzustellen, dass es keine Rückschritte oder unbeabsichtigten Auswirkungen gibt.

Sensible Updates:

Diese Aktualisierung ist sehr sensibel und erfordert äußerste Präzision. Analysieren Sie alle Abhängigkeiten und Auswirkungen gründlich, bevor Sie Änderungen vornehmen, und testen Sie systematisch, um sicherzustellen, dass es keine Probleme gibt. Vermeiden Sie Abkürzungen oder Annahmen - wenn Sie unsicher sind, halten Sie inne und bitten Sie um Klärung.

Tipps vor der Implementierung

bevor größere Änderungen vorgenommen werden:

Planen Sie den API-Ablauf für diese Funktion. Fügen Sie Endpunkte, Parameter und die Verbindung zur Datenbank hinzu.

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 verschiedenen Möglichkeiten der Interaktion mit Lovable zu experimentieren.

ein Urteil fällen

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.