> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumi.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Glossar

> Verstehen Sie die Schlüsselbegriffe, um effektiv mit Lumi zu navigieren und zu entwickeln.

## Schlüsselkonzepte

* KI (Künstliche Intelligenz): Technologie, die es Maschinen ermöglicht, menschliche Intelligenz zu simulieren, sodass sie lernen, schlussfolgern und Probleme lösen können.
* Prompt: Ein textbasierter Befehl, um ein KI-Modell anzuweisen. Innerhalb von Lumi sind Prompts das grundlegende Werkzeug, das Sie verwenden werden, um jede Komponente Ihrer Anwendung zu erstellen und zu ändern.

## Lumi-spezifische Begriffe

* **Diskussionsmodus:** Mehr als nur ein Code-Generator, Lumi agiert als interaktiver Entwicklungspartner. Er führt Sie durch Planung, Debugging und Veröffentlichung und hilft Ihnen, mit Zuversicht zu entwickeln.
* **Bearbeitungsmodus:** Die Umgebung, um direkte Änderungen am Code und Inhalt Ihrer Anwendung vorzunehmen.
* **Bearbeiten:** Ein KI-gestütztes Werkzeug mit Tailwind-nativen visuellen Steuerelementen für präzise und intuitive Verfeinerung.
* **Remix:** Duplizieren Sie ein beliebiges Projekt, um es als neuen Ausgangspunkt zu verwenden. Remixen ermöglicht es Ihnen, mit Änderungen zu experimentieren und Ideen zu erkunden, während die Originalversion erhalten bleibt.
* **Vorschau:** Eine live, interaktive Ansicht zum Testen von Funktionen und Inhalten, bevor Sie Ihre Änderungen veröffentlichen.

## Produkt & Entwicklung

### **Produktmanagement & Strategie**

* **MVP (Minimum Viable Product):** Die einfachste Version eines Produkts mit gerade genug Funktionen, um frühe Nutzer anzuziehen und die Kernidee zu validieren.
* **Roadmap:** Ein übergeordneter Plan, der die Vision, Richtung und bevorstehende Funktionen eines Produkts im Zeitverlauf darstellt.
* **Feature-Anfrage:** Ein Vorschlag von Nutzern oder Stakeholdern für eine neue Fähigkeit oder Verbesserung.
* **User Story:** Eine kurze, einfache Funktionsbeschreibung aus der Perspektive des Endnutzers.
* **User Journey:** Der Weg, den ein Nutzer zurücklegt, um ein Ziel innerhalb Ihres Produkts zu erreichen.
* **Persona:** Ein detailliertes, fiktives Profil eines Zielnutzers, das aus Recherchen erstellt wird, um Design- und Entwicklungsentscheidungen zu leiten.

### **Entwicklungskonzepte**

* **PRD (Product Requirements Document):** Ein Dokument, das den Zweck, die Funktionen und die technischen Spezifikationen eines Produkts detailliert beschreibt, um das Entwicklungsteam zu leiten.
* **API (Application Programming Interface):** Eine Reihe von Regeln, die es verschiedenen Softwareanwendungen ermöglichen, zu kommunizieren und Daten auszutauschen. Gängige Typen sind REST- und GraphQL-APIs.
* **Refactor:** Der Prozess der Umstrukturierung von Code zur Verbesserung seiner Qualität und Wartbarkeit, ohne seine Funktionalität zu ändern.
* **GitHub:** Eine beliebte Plattform für Versionskontrolle und kollaborative Softwareentwicklung.

### **Daten & Analytik**

* **A/B-Testing:** Der Vergleich von zwei Versionen einer Webseite oder Funktion, um zu sehen, welche besser abschneidet.
* **Conversion-Rate:** Der Prozentsatz der Nutzer, die ein bestimmtes Ziel erreichen, wie z.B. eine Anmeldung oder einen Kauf.
* **Churn-Rate:** Der Prozentsatz der Nutzer, die Ihr Produkt über einen bestimmten Zeitraum nicht mehr verwenden.
* **Retention-Rate:** Der Prozentsatz der Nutzer, die Ihr Produkt im Laufe der Zeit weiterhin verwenden.
* **Event-Tracking:** Die Überwachung spezifischer Nutzeraktionen (wie Klicks oder Formularübermittlungen), um das Engagement zu verstehen.

## **UI/UX & Frontend-Entwicklung**

### **Frontend-Entwicklung**

* **Frontend:** Der Teil einer Anwendung, den Nutzer sehen und mit dem sie interagieren, einschließlich der Benutzeroberfläche und des gesamten Erlebnisses.
* **React:** Eine beliebte JavaScript-Bibliothek zum Erstellen dynamischer Benutzeroberflächen, insbesondere für Single-Page-Anwendungen.
* **Farbverlauf:** Ein sanfter Übergang zwischen zwei oder mehr Farben.
* **Tailwind CSS:** Ein Utility-First-CSS-Framework zum schnellen Erstellen von benutzerdefinierten Designs direkt in Ihrem HTML.
* **Designsystem:** Eine standardisierte Sammlung von wiederverwendbaren Komponenten und Richtlinien, die die Designkonsistenz über ein Produkt hinweg sicherstellt.

### **UI/UX-Designkonzepte**

* **Akzentfarbe:** Eine kontrastierende Farbe, die verwendet wird, um Schlüsselelemente wie Schaltflächen oder Links hervorzuheben.
* **Theme:** Das gesamte Erscheinungsbild einer Anwendung, definiert durch ihr Farbschema, ihre Typografie und ihr Layout.
* **Responsives Design:** Ein Ansatz, der sicherstellt, dass Ihre Anwendung auf jedem Gerät, von Desktops bis zu Mobiltelefonen, gut aussieht und funktioniert.
* **Above the Fold:** Der Inhalt, der auf einer Webseite ohne Scrollen sichtbar ist. Es ist erstklassiger Platz für wichtige Informationen.
* **CTA (Call to Action):** Eine Aufforderung, wie eine Schaltfläche oder ein Link, die Nutzer dazu ermutigt, eine bestimmte Aktion auszuführen (z.B. „Registrieren“, „Jetzt kaufen“).

### **Seitenstruktur & Navigation**

* **Überschriften:** Titel (H1, H2, etc.), die Inhalte strukturieren und eine klare visuelle Hierarchie schaffen.
* **Fußzeile:** Der Abschnitt am unteren Ende einer Webseite, der typischerweise Links, Kontaktinformationen und rechtliche Hinweise enthält.
* **Breadcrumb:** Ein Navigationspfad, der den aktuellen Standort eines Nutzers auf einer Website anzeigt (z.B. Startseite > Produkte > Laptops).
* **Favicon:** Das kleine Symbol, das Ihre Website in einem Browser-Tab oder in Lesezeichen darstellt.
* **Meta-Titel:** Der Seitentitel, der in den Suchmaschinenergebnissen und Browser-Tabs angezeigt wird und für SEO entscheidend ist.
* **Meta-Beschreibung:** Die kurze Zusammenfassung einer Webseite, die in den Suchergebnissen angezeigt wird, um Klicks zu generieren.
* **Kanonische URL:** Ein Tag, das Suchmaschinen die bevorzugte Version einer Seite mitteilt, um Probleme mit doppeltem Inhalt zu vermeiden.
* **URL-Slug:** Der benutzerfreundliche Teil einer URL, der eine bestimmte Seite identifiziert (z.B. `/ueber-uns`).
* **Sitemap:** Eine Datei, die alle Seiten Ihrer Website auflistet, um Suchmaschinen bei der effektiven Indexierung zu helfen.
* **Navigationsleiste (Nav Bar):** Das Hauptmenü, das Links zu den wichtigsten Abschnitten Ihrer Website bereitstellt.
* **Skip-Links:** Barrierefreiheits-Links, die es Nutzern ermöglichen, die Navigation zu überspringen und direkt zum Hauptinhalt zu springen.
* **Paginierung:** Ein System zur Aufteilung langer Inhaltslisten auf separate Seiten.
* **Ankerlink:** Ein Link, der den Nutzer zu einem bestimmten Abschnitt auf derselben Seite scrollt.
* **404-Seite:** Eine benutzerdefinierte Fehlerseite, die angezeigt wird, wenn ein Nutzer versucht, auf eine nicht existierende URL zuzugreifen.

### **Benachrichtigungen & Feedback**

* **Toast:** Eine kleine, temporäre Benachrichtigung, die kurzes Feedback zu einer Aktion gibt.
* **Snackbar:** Ähnlich wie ein Toast, erscheint aber oft am unteren Bildschirmrand und kann eine Aktionsschaltfläche enthalten (z.B. „Rückgängig“).
* **Tooltip:** Ein Pop-up-Feld mit zusätzlichen Informationen, das erscheint, wenn man mit der Maus über ein Element fährt.
* **Badge:** Eine kleine visuelle Markierung auf einem Symbol oder einer Schaltfläche, um eine Anzahl, einen Status oder eine Benachrichtigung anzuzeigen.
* **Lade-Spinner:** Ein animiertes Symbol, das anzeigt, dass ein Prozess im Hintergrund läuft.
* **Fortschrittsbalken:** Ein visueller Balken, der den Abschlussfortschritt einer Aufgabe anzeigt.
* **Skeleton Loader:** Eine Platzhalter-Benutzeroberfläche, die das Layout des endgültigen Inhalts nachahmt und so die wahrgenommene Ladegeschwindigkeit verbessert.

### **Overlays & Pop-ups**

* **Popover:** Ein Overlay, das zusätzlichen Kontext oder Optionen zu einem bestimmten Element bereitstellt.
* **Dialog (Modal):** Ein Fenster, das über dem Hauptinhalt erscheint und eine Nutzerinteraktion erfordert, um geschlossen zu werden.
* **Drawer (Seitenleiste):** Ein Panel, das von der Seite hereingleitet und typischerweise Navigation oder Einstellungen enthält.
* **Lightbox:** Ein modales Fenster, das Medien wie Bilder in einer fokussierten, vergrößerten Ansicht anzeigt.
* **Warnfeld:** Eine Systemnachricht, die Nutzer über kritische Informationen, Fehler oder Warnungen informiert.

### **Navigation & Auswahl**

* **Schaltfläche:** Ein klickbares Element, das eine Aktion auslöst.
* **Schalter (Toggle):** Ein Steuerelement, mit dem Nutzer zwischen zwei Zuständen, wie an und aus, wechseln können.
* **Tabs:** Eine Komponente, die Inhalte in verschiedene Ansichten organisiert, zwischen denen ein Nutzer wechseln kann.
* **Stepper (Assistent):** Ein geführter, mehrstufiger Prozess, der den Nutzern ihren Fortschritt anzeigt.
* **Akkordeon:** Eine Reihe von ausklappbaren Panels, die zur Organisation und Anzeige von Inhalten verwendet werden.
* **Dropdown-Menü:** Eine Liste von Optionen, die erscheint, wenn ein Nutzer mit einer Schaltfläche oder einem Feld interagiert.

### **Formulare & Eingabe**

* **Formular:** Eine Reihe von Feldern zum Sammeln von Nutzerdaten, wie z.B. ein Anmelde- oder Kontaktformular.
* **Radio-Gruppe:** Eine Gruppe von Optionen, bei der der Nutzer nur eine auswählen kann.
* **Checkbox:** Ein Steuerelement, das es Nutzern ermöglicht, eine oder mehrere Optionen aus einer Liste auszuwählen.
* **Textfeld:** Ein Standard-Eingabefeld für einzeilige Texteingabe.
* **Textbereich:** Ein größeres Eingabefeld für mehrzeiligen Text, wie Kommentare oder Nachrichten.
* **Auswahl (Dropdown-Auswahlfeld):** Eine Dropdown-Liste zur Auswahl einer Option aus einem vordefinierten Satz.
* **Datumsauswahl:** Eine Kalenderoberfläche, die es Nutzern ermöglicht, einfach ein Datum auszuwählen.
* **Schieberegler:** Ein Steuerelement zur Auswahl eines Wertes aus einem kontinuierlichen Bereich.
* **Dateiupload:** Eine Komponente, die es Nutzern ermöglicht, Dateien von ihrem Gerät hochzuladen.
* **Autovervollständigung:** Ein Eingabefeld, das Ergebnisse vorschlägt, während der Nutzer tippt.

### **Designstile & Trends**

Verwenden Sie diese Begriffe in Ihren Prompts, um die Ästhetik zu definieren, die Sie erreichen möchten.

* **Neobrutalismus:** Ein roher, kontrastreicher Designstil mit fetter Typografie und ungeschliffenen Elementen.
* **Retro:** Ein Design, das Nostalgie hervorruft, indem es Stile aus vergangenen Jahrzehnten verwendet.
* **Hacker:** Eine Ästhetik, die von Terminal-Oberflächen inspiriert ist und dunkle Hintergründe sowie Monospace-Schriftarten aufweist.
* **Glassmorphismus:** Ein Stil, der durchscheinende, milchglasartige Schichten verwendet, um Tiefe zu erzeugen.
* **Nudy:** Ein minimalistischer Ansatz, der weiche, neutrale Farbpaletten für ein zurückhaltendes Erscheinungsbild verwendet.

## **Backend-Entwicklung & Datenbanken**

### **Backend-Grundlagen**

* **Backend:** Die serverseitige Komponente einer Anwendung, die Daten, Logik und Kernoperationen verarbeitet.
* **Webhooks:** Automatisierte Nachrichten, die von Apps gesendet werden, wenn etwas passiert, und die einen Echtzeit-Datenaustausch ermöglichen.

### **Datenbankverwaltung**

* **CRUD (Create, Read, Update, Delete):** Die vier grundlegenden Operationen zur Verwaltung von Daten.
* **SQL (Structured Query Language):** Die Standardsprache zur Verwaltung und Abfrage von Daten in relationalen Datenbanken.
* **PostgreSQL:** Eine leistungsstarke, quelloffene relationale Datenbank, die für ihre Zuverlässigkeit und fortschrittlichen Funktionen bekannt ist.

### **Sicherheit & Authentifizierung**

* **OAuth:** Ein Authentifizierungsstandard, der es Nutzern ermöglicht, sich mit Drittanbieter-Konten wie Google oder GitHub anzumelden.
* **Zwei-Faktor-Authentifizierung (2FA):** Eine Sicherheitsschicht, die von Nutzern verlangt, zwei Formen der Identifikation zum Einloggen bereitzustellen.
* **CORS (Cross-Origin Resource Sharing):** Ein Sicherheitsmechanismus, der steuert, wie auf Ressourcen auf Ihrem Server von anderen Domains aus zugegriffen werden kann.