Zum Hauptinhalt springen

​
Allgemeine Konzepte

  • KI (Künstliche Intelligenz): Die Simulation menschlicher Intelligenzprozesse durch Maschinen, insbesondere Computersysteme, die Aufgaben wie Lernen, Schlussfolgern und Problemlösen ermöglichen.​
  • Eingabeaufforderung: Ein Text oder eine Eingabe, die KI-Modelle bei der Generierung von Ergebnissen oder der Ausführung bestimmter Aufgaben anleitet.​ Sie gehört zur Kernfunktionalität von Lovable; mit Eingabeaufforderungen erstellst oder veränderst du bestimmte Komponenten oder Elemente deiner Anwendung.

​
Lovable-spezifische Begriffe

  • Chat Mode: Lovable geht über das reine Generieren von Code hinaus und wird zu einem interaktiven Assistenten, der dich durch jede Phase der Entwicklung führt. Es hilft Gründer:innen, kritisch zu denken, effektiv zu planen, intelligent zu debuggen und mit Zuversicht zu launchen.
  • Edit Mode: Der Vorgang, Inhalte oder Code zu ändern oder zu bearbeiten.​
  • Edit: Ein Tool, das KI-gestützte Entwicklung mit Tailwind-nativen visuellen Steuerelementen für eine unkomplizierte Verfeinerung ermöglicht.
  • History: Das System zum Nachverfolgen und Verwalten von Änderungen an deiner App und deinem Code im Zeitverlauf.​
  • Knowledge: Erfasse wichtige Projektdetails in einem lebendigen Dokument, das sich gemeinsam mit deiner App weiterentwickelt.
  • Labs: Experimentelle Features innerhalb von Lovable, die dem Testen und Präsentieren neuer, innovativer oder sich in Entwicklung befindlicher Funktionen dienen.​ Diese können jederzeit geändert oder entfernt werden.
  • Remix: Du kannst ein bestehendes öffentliches Projekt oder eines deiner eigenen remixen. Remixen ermöglicht dir, den aktuellen Stand eines Projekts als Ausgangspunkt wiederzuverwenden und darauf aufzubauen. Es ist eine großartige Möglichkeit, neue Ideen zu erkunden, Anpassungen vorzunehmen oder mit verschiedenen Änderungen zu iterieren, während die ursprüngliche Version erhalten bleibt. Beachte, dass es nicht möglich ist, Projekte zu remixen, wenn Supabase verbunden ist.
  • Vorschau: Ermöglicht Nutzer:innen, Live-Inhalte oder Feature-Funktionalitäten interaktiv anzusehen oder zu erleben, bevor sie finalisiert oder veröffentlicht werden.
  • Diff: Ein Vergleich, der die Unterschiede zwischen zwei Versionen einer Datei oder von Code anzeigt.​
  • /index: Bezieht sich auf die Haupt- oder Standardseite einer Website oder App, die häufig „index.html“ oder „index.js“ heißt.
  • Lovable API - Build with URL: Das Lovable-API-Feature Build with URL ermöglicht es dir, Anwendungen programmgesteuert zu erstellen, indem du Eingabeaufforderungen und Bilder über URL-Parameter übergibst. So kannst du Lovable nahtlos in Websites, interne Tools oder Automatisierungsworkflows integrieren und Nutzer:innen Lovable-Apps mit nur einem Klick generieren lassen.

​
Produkt- und Entwicklungskonzepte

​
Produktmanagement & Strategie

  • MVP (Minimum Viable Product) – Eine Produktversion mit gerade so vielen Funktionen, dass sie frühe Nutzer:innen zufriedenstellt und eine Idee validiert, bevor mit der vollständigen Entwicklung begonnen wird.
  • Roadmap – Ein übergeordneter strategischer Plan, der die Vision, Richtung und geplanten Funktionen eines Produkts über einen bestimmten Zeitraum hinweg beschreibt.
  • Feature Request – Ein formeller oder informeller Vorschlag von Nutzer:innen oder Stakeholdern für eine neue Funktion in einem Produkt.
  • User Story – Eine kurze, einfache Beschreibung einer Funktion oder Anforderung aus Sicht der Endnutzer:innen.
  • User Journey: Die Abfolge von Schritten, die Nutzer:innen unternehmen, um ein bestimmtes Ziel innerhalb eines Produkts oder Services zu erreichen.​
  • Persona: Eine fiktive Darstellung einer Zielnutzerin bzw. eines Zielnutzers, basierend auf Recherche, um Design- und Entwicklungsentscheidungen zu unterstützen.​

​
Engineering-Konzepte

  • PRD (Product Requirements Document): Ein umfassendes Dokument, das die Ziele, Funktionen und Spezifikationen eines Produkts beschreibt, um die Entwicklung zu steuern.​
  • API (Application Programming Interface): Eine Möglichkeit für verschiedene Dienste, miteinander zu kommunizieren. Stell sie dir wie ein Protokoll vor, das festlegt, welche Art von Informationen du zwischen Systemen abrufen oder senden kannst. Die gängigsten Typen sind REST-APIs, die viele Websites verwenden, und GraphQL-APIs, die einen flexibleren Ansatz für Datenabfragen bieten.
  • Refactor: Der Prozess, bestehenden Code umzustrukturieren, ohne sein äußeres Verhalten zu ändern, um Lesbarkeit, Wartbarkeit oder Performance zu verbessern.
  • GitHub: Eine webbasierte Plattform für Versionskontrolle und kollaborative Softwareentwicklung mit Git.​

​
Daten & Analysen

  • A/B-Tests – Eine Methode zum Vergleich zweier Versionen einer Webseite oder Funktion, um anhand des Nutzerverhaltens zu bestimmen, welche besser abschneidet.
  • Conversion-Rate – Der Prozentsatz der Nutzer, die eine gewünschte Aktion ausführen, z. B. sich registrieren oder einen Kauf tätigen.
  • Churn-Rate – Der Prozentsatz der Nutzer, die ein Produkt innerhalb eines bestimmten Zeitraums nicht mehr nutzen.
  • Retention-Rate – Der Prozentsatz der Nutzer, die ein Produkt über einen längeren Zeitraum weiterhin nutzen.
  • Event-Tracking – Das Überwachen bestimmter Nutzeraktionen (z. B. Button-Klicks, Formularabschickungen), um Einblicke in Verhalten und Engagement zu gewinnen.

​
UI/UX- und Frontend-Entwicklungsleitfaden

​
Frontend-Entwicklung

  • Frontend: Der Teil einer Softwareanwendung, mit dem Nutzer direkt interagieren und der die Elemente der Benutzeroberfläche und des Benutzererlebnisses umfasst.​
  • React: Eine von Facebook entwickelte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, insbesondere für Single-Page-Anwendungen.​
  • Gradient: Ein allmählicher Übergang zwischen zwei oder mehr Farben oder Farbtönen im Design (Farbverlauf).
  • Tailwind CSS: Open-Source-CSS-Framework nach dem Utility-First-Prinzip mit einem umfassenden Satz vordefinierter Klassen, mit denen Entwickler benutzerdefinierte Designs direkt in ihrem HTML erstellen können, indem sie diese Utility-Klassen auf Elemente anwenden.
  • Design-Systeme: Eine Sammlung wiederverwendbarer Komponenten, Richtlinien und Standards, die Konsistenz und Einheitlichkeit im Design eines Produkts oder einer Marke sicherstellen.

​
UI/UX-Designkonzepte

  • Akzentfarbe: Ein markanter Farbton, der verwendet wird, um Schlüsselelemente in einem Design hervorzuheben und der häufig mit der Primärfarbe der Marke übereinstimmt oder sie ergänzt, um das visuelle Interesse zu steigern.​
  • Theme: Eine stimmige Auswahl an Designentscheidungen, einschließlich Farben, Schriftarten und Layouts, die die gesamte Ästhetik und Nutzererfahrung einer Anwendung oder Website definiert.​
  • Responsives Design: Ein Ansatz im Webdesign, bei dem sich Inhalte nahtlos an unterschiedliche Gerätegrößen und -ausrichtungen anpassen und so eine optimale Nutzererfahrung bieten.​
  • Above the Fold: Der Bereich einer Webseite, der für Nutzer sichtbar ist, ohne zu scrollen, und der entscheidend ist, um Aufmerksamkeit zu gewinnen und wesentliche Informationen sofort zu vermitteln. ​
  • CTA (Call to Action): Eine Handlungsaufforderung, oft in Form eines Buttons oder Links, die Nutzer dazu ermutigt, eine bestimmte Aktion auszuführen, beispielsweise „Registrieren“ oder „Mehr erfahren“. ​

​
Seitenstruktur & Navigation

  • Überschriften (Headings): Textelemente, die Inhaltsabschnitte einleiten und strukturieren, typischerweise mit verschiedenen Ebenen (z. B. H1, H2), um eine klare Inhaltshierarchie herzustellen.​
  • Footer: Der untere Bereich einer Webseite, der häufig ergänzende Informationen wie Kontaktdaten, Navigationslinks und rechtliche Hinweise enthält. ​
  • Breadcrumb: Eine Navigationshilfe, die die aktuelle Position des Nutzers innerhalb der Seitenhierarchie anzeigt, meist als horizontale Liste von Links dargestellt. ​
  • Favicon – Ein kleines Symbol, das im Browser-Tab, in Lesezeichen und in Suchergebnissen angezeigt wird und typischerweise eine Marke oder Website repräsentiert.
  • Meta Title (Title Tag) – Der Titel einer Webseite, der in Suchmaschinenergebnissen und Browser-Tabs angezeigt wird und sowohl SEO als auch die Klickrate beeinflusst.
  • Meta Description – Eine kurze Zusammenfassung des Inhalts einer Webseite, die in Suchmaschinenergebnissen angezeigt wird und darauf abzielt, Auffindbarkeit und Nutzerinteraktion zu verbessern.
  • Canonical URL – Ein Tag, das verwendet wird, um die bevorzugte Version einer Webseite anzugeben und so Probleme mit doppelten Inhalten bei der Suchmaschinenindizierung zu vermeiden.
  • URL Slug – Der Teil einer URL, der eine bestimmte Seite in einem lesbaren Format identifiziert (z. B. example.com/product-name).
  • Sitemap – Eine strukturierte Datei (XML oder HTML), die eine Liste der Seiten einer Website bereitstellt und Suchmaschinen hilft, diese effizient zu indexieren.
  • Navigationsleiste (Nav Bar) – Ein horizontales oder vertikales Menü mit Links zu wichtigen Bereichen einer Website für eine einfache Navigation.
  • Skip Links – Versteckte Links, mit denen Nutzer wiederkehrende Inhalte überspringen und direkt zum Hauptinhalt springen können, was die Barrierefreiheit verbessert.
  • Pagination – Eine Methode, Inhalte auf mehrere Seiten aufzuteilen, die häufig in Blogs, Suchergebnissen und Produktlisten verwendet wird, um die Nutzererfahrung zu verbessern.
  • Ankerlink – Ein Hyperlink, der Nutzer zu einem bestimmten Abschnitt innerhalb derselben Seite führt, anstatt eine neue Seite zu laden.
  • 404-Seite – Eine benutzerdefinierte Fehlerseite, die angezeigt wird, wenn ein Nutzer versucht, auf eine nicht vorhandene URL zuzugreifen, und ihn zurück zu relevanten Inhalten führt.

​
Benachrichtigungs- & Feedback-Elemente

  • Toast: Eine kurze, unaufdringliche Benachrichtigung, die vorübergehend erscheint, um Nutzer*innen über das Ergebnis einer Aktion zu informieren oder einfaches Feedback zu geben. ​
  • Snackbar – Ähnlich wie ein Toast, aber typischerweise am unteren Rand des Bildschirms mit optionalen Aktionen (z. B. „Rückgängig“ bei einem gelöschten Element).
  • Tooltip – Ein kleines Pop-up, das zusätzliche Informationen anzeigt, wenn ein Element fokussiert wird oder der Mauszeiger darüber schwebt.
  • Badge – Ein kleines visuelles Kennzeichen, das häufig auf Icons oder Buttons verwendet wird, um Benachrichtigungen, Zählerstände oder Statusupdates anzuzeigen.
  • Loading Spinner (Loader) – Ein visueller Indikator, der einen laufenden Prozess darstellt, z. B. das Laden einer Seite oder das Absenden eines Formulars.
  • Progress Bar – Ein horizontaler Balken, der den Fortschritt einer Aufgabe oder eines Prozesses in Prozent anzeigt.
  • Skeleton Loader – Eine Platzhalter-Oberfläche, die das Layout des finalen Inhalts nachahmt, während dieser geladen wird, und so die wahrgenommene Performance verbessert.

​
Overlays & Pop-ups

  • Popover: Ein temporäres Overlay, das zusätzliche Informationen oder Optionen zu einem bestimmten UI-Element anzeigt und typischerweise bei einer Benutzerinteraktion erscheint. ​
  • Dialog (Modal): Ein Fenster, das vor dem Hauptinhalt erscheint, um die Aufmerksamkeit der Benutzer auf sich zu lenken und häufig eine Aktion erfordert, bevor zur primären Oberfläche zurückgekehrt werden kann.
  • Drawer (Sidebar Panel) – Ein Panel, das von der Seite in den Bildschirm hineinfährt, um Navigationsoptionen oder Einstellungen anzuzeigen, ohne den Hauptinhalt zu unterbrechen.
  • Lightbox – Ein modales Fenster, das Bilder oder Medien vergrößert darstellt und den Hintergrund abdunkelt, um den Fokus darauf zu legen.
  • Alert Box – Ein systemgeneriertes oder von der Anwendung ausgelöstes Meldungsfenster, das Benutzer über wichtige Informationen wie Fehler oder Warnungen informiert.
  • Button: Ein anklickbares Element, das eine Aktion oder ein Ereignis auslöst, z. B. das Absenden eines Formulars oder das Öffnen eines Dialogs.​
  • Switch (Toggle): Ein Umschaltelement, mit dem Nutzer*innen zwischen zwei Zuständen wechseln können, z. B. an oder aus, häufig einem physischen Schalter nachempfunden. ​
  • Tabs – Eine Komponente, die Inhalte in separate Ansichten innerhalb einer Oberfläche organisiert und es Nutzer*innen ermöglicht, zwischen Bereichen zu wechseln, ohne die Seite zu verlassen.
  • Stepper (Wizard) – Eine Komponente für mehrstufige Prozesse, die den aktuellen Schritt anzeigt und Nutzer*innen durch den Abschluss des Prozesses führt.
  • Pagination – Ein UI-Muster, das Inhalte auf mehrere Seiten aufteilt, häufig verwendet für Suchergebnisse oder inhaltsreiche Anwendungen.
  • Breadcrumb – Eine Navigation, die die aktuelle Position der Nutzer*innen innerhalb der Seitenhierarchie anzeigt, oft dargestellt als horizontale Liste von Links.
  • Accordion – Ein auf- und zuklappbarer Bereich, der Inhalte dynamisch ein- oder ausblendet.
  • Dropdown Menu – Eine Optionsliste, die erscheint, wenn Nutzer*innen auf einen Button oder ein Feld klicken oder mit der Maus darüberfahren, häufig genutzt für Navigation oder Auswahl.

​
Formulare & Eingabeelemente

  • Form: Eine strukturierte Sammlung von Eingabefeldern, über die Nutzer Daten übermitteln können, z. B. Kontaktinformationen oder Suchanfragen.​
  • Radio Group: Eine Gruppe zusammenhängender Optionsfelder, mit der Nutzer genau eine Option aus mehreren Auswahlmöglichkeiten wählen können.
  • Checkbox: Ein interaktives Kästchen, das Nutzer aktivieren oder deaktivieren können, um eine Option aus- oder abzuwählen; erlaubt mehrere Auswahlmöglichkeiten innerhalb einer Gruppe.​
  • Text Field (Input Field) – Ein grundlegendes UI-Element, in das Nutzer Text eingeben können, z. B. in Suchleisten, Login-Formularen oder Kommentarfeldern.
  • Text Area – Ein größeres Eingabefeld für mehrzeilige Texteingaben, das häufig für Nachrichten oder Feedback-Formulare verwendet wird.
  • Select (Dropdown Select Box) – Ein UI-Element, mit dem Nutzer eine Option aus einer vordefinierten Liste auswählen können, oft als Dropdown dargestellt.
  • Date Picker – Ein UI-Element, mit dem Nutzer ein Datum über einen Kalender auswählen können, anstatt es manuell einzugeben.
  • Slider (Range Selector) – Ein Steuerelement, mit dem Nutzer einen Wert innerhalb eines Bereichs festlegen, indem sie einen Regler entlang einer Leiste verschieben.
  • File Upload Field – Eine Komponente, mit der Nutzer Dateien von ihrem Gerät auswählen und hochladen können.
  • Autocomplete (Typeahead Search) – Ein Texteingabefeld, das während der Eingabe dynamisch passende Ergebnisse vorschlägt und so die Benutzerfreundlichkeit bei Suchvorgängen verbessert.
Du kannst diese Begriffe in jeder deiner Eingabeaufforderungen verwenden, um einen bestimmten Stil zu beschreiben, den du erreichen möchtest.
  • Neobrutalism: Ein Webdesign-Trend, der sich durch rohe, unpolierte Elemente, markante Typografie und hohe Kontraste auszeichnet und von der brutalistischen Architektur der Mitte des 20. Jahrhunderts inspiriert ist. ​
  • Retro: Ein Designstil, der Stile, Motive und Elemente aus vergangenen Jahrzehnten aufgreift und Nostalgie sowie eine Vintage-Ästhetik hervorruft.​
  • Hacker: Eine Ästhetik, die die DIY- und Open-Source-Kultur widerspiegelt und häufig durch dicktengleiche Schriftarten, dunkle Hintergründe und terminalartige Oberflächen geprägt ist.​
  • Glass (Glassmorphism): Ein Designstil, der halbtransparente, matt-glasartige Elemente mit subtilen Schatten und Rahmen verwendet, um Tiefe zu erzeugen.​
  • Nudy: Ein minimalistischer Designansatz, der Nude- oder neutrale Farbpaletten nutzt, um eine weiche, zurückhaltende Ästhetik zu schaffen.​

​
Design- und Asset-Ressourcen

  • 21st.dev: Ein Open-Source-Community-Verzeichnis mit minimalistischen, modernen und wiederverwendbaren React-UI-Komponenten auf Basis von Tailwind CSS und Radix UI, das Design-Engineers dabei unterstützt, hochwertige Benutzeroberflächen effizienter zu veröffentlichen.
  • Dribble: Eine führende Online-Community, in der Designer und Kreativprofis ihre Arbeiten präsentieren, Design-Inspiration finden und mit potenziellen Kunden oder Projektpartnern in Kontakt treten.
  • Noun Project: Eine Plattform mit einer umfangreichen Sammlung kostenloser Icons und Stockfotos, die es Nutzern ermöglicht, auf visuelle Ressourcen für verschiedene Projekte zuzugreifen.
  • SVG Repo: Eine umfassende Bibliothek mit über 500.000 frei lizenzierten SVG-Vektoren und -Icons, die es Nutzern ermöglicht, Grafiken für unterschiedliche Projekte zu suchen, zu erkunden, zu bearbeiten und herunterzuladen.
  • Google Fonts: Eine kostenlose Bibliothek weboptimierter Schriften, die Designern und Entwicklern eine große Auswahl an Typografie-Optionen bietet, um ihre Projekte aufzuwerten.
  • Typewolf: Eine Ressource, die Designer dabei unterstützt, die perfekten Schriftkombinationen für ihre Projekte auszuwählen, indem sie angesagte Schriftarten vorstellt und kuratierte Schriftlisten anbietet.

​
Backend-Entwicklung & Datenbanken

​
Backend-Grundlagen

  • Backend: Die serverseitige Infrastruktur einer Anwendung, die Datenverarbeitung, Speicherung und Geschäftslogik übernimmt.​
  • Supabase: Eine Open-Source-Backend-as-a-Service-Plattform, die eine Postgres-Datenbank, Authentifizierung, sofort verfügbare APIs und Echtzeitfunktionen bereitstellt.
  • Webhooks – ereignisgesteuerte HTTP-Callbacks, die externe Anwendungen benachrichtigen, wenn bestimmte Aktionen ausgeführt werden.

​
Datenbankverwaltung & Abfragen

  • CRUD (Create, Read, Update, Delete): Die vier grundlegenden Operationen, die auf Daten in einer Datenbank oder Anwendung ausgeführt werden.​
  • SQL (Structured Query Language): Eine domänenspezifische Programmiersprache zur Verwaltung und Manipulation relationaler Datenbanken, die Aufgaben wie Abfragen, Aktualisieren und Organisieren von Daten ermöglicht.
  • PostgreSQL – Eine leistungsstarke relationale Open-Source-Datenbank, die für ihre Skalierbarkeit, Erweiterbarkeit und ACID-Konformität bekannt ist.

​
Supabase-spezifische Konzepte

  • Edge-Funktion: Serverseitige TypeScript-Funktionen, die global am Edge – in der Nähe deiner Nutzer – ausgeführt werden. Du kannst sie z. B. verwenden, um auf Webhooks zu reagieren oder dein Supabase-Projekt mit Drittanbietern wie Stripe, Anthropic oder Resend zu integrieren.
  • RLS (Row-Level Security): Eine Datenbankfunktion, mit der der Zugriff auf bestimmte Zeilen in einer Tabelle anhand von Benutzerrollen oder -attributen gesteuert werden kann. Damit kannst du feingranulare Autorisierungsregeln definieren und komplexe SQL-Regeln schreiben, die zu deinen individuellen Geschäftsanforderungen passen.
  • Storage: Ein Dienst oder System zum Speichern und Verwalten von Daten wie Bildern, Videos, Dokumenten und beliebigen anderen Dateitypen.
  • Bucket: In Supabase Storage ist ein Bucket ein eigenständiger Container, der Dateien und Ordner organisiert, das Zugriffsmodell (öffentlich oder privat) festlegt und Upload-Beschränkungen wie maximale Dateigröße und erlaubte Inhaltstypen definiert.
  • Endpoint: Im Kontext von Supabase bezeichnet ein Endpoint eine bestimmte URL, über die Clients mittels RESTful-API-Aufrufen mit der Datenbank interagieren können, um Vorgänge wie Erstellen, Lesen, Aktualisieren oder Löschen von Daten durchzuführen.
  • Authentication Provider: Ein Dienst, der Benutzeranmeldedaten überprüft und so einen sicheren Zugriff auf Anwendungen oder Systeme ermöglicht. Im Kontext von Supabase umfassen Authentication Provider verschiedene Methoden wie passwortbasierte Logins, Magic Links, Einmalpasswörter (OTP), Social Logins und Single Sign-On (SSO)-Integrationen und ermöglichen so eine flexible und sichere Benutzerauthentifizierung.

​
Sicherheit und Authentifizierung

  • OAuth – Ein weit verbreitetes Authentifizierungsprotokoll, mit dem sich Nutzer:innen über Drittanbieter-Dienste wie Google, Facebook oder GitHub bei Anwendungen anmelden können.
  • Zwei-Faktor-Authentifizierung (2FA) – Eine Sicherheitsmaßnahme, bei der Nutzer:innen zwei Formen der Identifikation angeben müssen, bevor sie auf ein Konto zugreifen können.
  • CORS (Cross-Origin Resource Sharing) – Eine Sicherheitsrichtlinie, die steuert, welche Websites oder Anwendungen auf Ressourcen eines Servers zugreifen dürfen.