Zum Hauptinhalt springen
Design-Tools bündeln alles, was du brauchst, um dein Projekt visuell anzupassen – von übergeordneten Themes bis hin zu detaillierten visuellen Anpassungen. Du kannst das Gesamtbild deines Projekts über Themes steuern oder mit Visuellen Anpassungen schnelle, gezielte Änderungen vornehmen – ohne Code zu schreiben oder Credits zu verwenden. Um auf die Design-Tools zuzugreifen, gehe zur Design-Ansicht über die +-Schaltfläche neben der Vorschau. Changelog Design View 11 26 25 Pn

​
Warum Design-Tools nutzen

Design-Tools ermöglichen es allen – Designer:innen, Marketingverantwortlichen und nicht-technischen Teammitgliedern –, visuell Änderungen am Design vorzunehmen, die Markenidentität zu wahren und schneller zu arbeiten.

​
Wichtige Vorteile

  • Konsistentes Branding: Nutze gemeinsame Themes, die die Identität deiner Marke widerspiegeln
  • Schnellere Iteration: Aktualisiere Layouts und Text visuell – ganz ohne Code oder Eingabeaufforderungen
  • Einfache Bearbeitung: Nicht-technische Nutzer können sicher Designänderungen vornehmen
  • Live-Vorschau: Sieh jede visuelle Änderung in Echtzeit, bevor du veröffentlichst

​
Häufige Anwendungsfälle

  • Designer, die Marken­konsistenz über mehrere Projekte hinweg sicherstellen
  • Marketer, die neue Kampagnenseiten erstellen, ohne gegen Markenrichtlinien zu verstoßen
  • Product Manager, die Layouts und Texte direkt anpassen
  • Teams, die schnell Prototypen und Varianten mit einheitlichen visuellen Stilen erstellen

​
Themes

Themes definieren das zentrale Designsystem deines Projekts – Farben, Schriftarten, Abstände und Eckenrundungen – und bilden die Grundlage deiner Markenidentität.

​
Zentrale Funktionen

  • Anwenden: Wähle aus integrierten Lovable-Vorlagen oder verwende ein benutzerdefiniertes Theme
  • Erstellen: Generiere ein Theme aus deinem aktuellen Projekt
  • Importieren: Lade eine benutzerdefinierte CSS-Datei (wie index.css oder globals.css) hoch, um daraus ein Theme zu machen
  • Anpassen: Bearbeite Farben, Typografie und Abstände direkt in der UI
  • Teilen: Themes stehen allen Mitgliedern in deinem Arbeitsbereich zur Verfügung
  • Vorschau: Teste Änderungen live, bevor du sie übernimmst

​
Visuelle Bearbeitung

Der Modus Visuelle Bearbeitung ermöglicht es dir, dein Projekt direkt auf der Seite visuell zu verändern. Er ist für schnelle, intuitive Anpassungen mit voller Kontrolle über Layout und Abstände ausgelegt.

​
Zentrale Funktionen

  • Mehrere Elemente auswählen für Massenbearbeitungen, indem du ⌘ Command (Mac) oder ⊞ Win (Windows) gedrückt hältst.
  • Layout-Steuerelemente für Ausrichtung und Positionierung
  • Ränder und Abstände anpassen an den einzelnen Seiten von Containern
  • Text, Farben und Schriftarten bearbeiten direkt in der Seitenleiste
  • Erweiterte Textformatierung mit Zeilenumbrüchen und Inline-Formatierung
  • Bilder ersetzen, indem du Dateien hochlädst oder Bild-URLs hinzufügst
  • KI-Bilder generieren, indem du Bilder mit Eingabeaufforderungen bearbeitest

​
Schnellstart

  1. Öffne die Design view über die +-Schaltfläche neben der Vorschau.
  2. Wechsle zwischen den Registerkarten Themes und Visual edit, um im linken Bereich am Design deines Projekts zu arbeiten.
    • Gehe zu Themes, um ein Theme auszuwählen oder dein eigenes zu erstellen und auf das Projekt anzuwenden.
    • Gehe zu Visual edits, um Elemente in der Live-Vorschau auszuwählen und sie visuell zu bearbeiten.
    Für den schnellen Zugriff auf visuelle Bearbeitungen verwende den Visual edits-Shortcut im Eingabefeld der Eingabeaufforderung.
  3. Vorschau ansehen und speichern, sobald du mit dem Ergebnis zufrieden bist.
Die visuelle Anpassung deines Projekts verbraucht keine Credits, außer wenn:
  • du Änderungen an dynamischen Elementen vornimmst.
  • du den Lovable Agent per Eingabeaufforderung bittest, das Design zu ändern. Verwende stattdessen die Design-Tools.