​
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.
  • 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.
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.