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

# Projekte mit Design-Tools anpassen

> Verwende Design-Tools, um Themes anzuwenden und anzupassen, UI-Elemente zu verändern und ein konsistentes Branding in deinem Projekt zu gewährleisten.

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

<img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/images/changelog-design-view-11-26-25.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=08a6483a1839b8ed34bfb420913293df" alt="Changelog Design View 11 26 25 Pn" width="937" height="277" data-path="images/changelog-design-view-11-26-25.png" />

<div id="why-use-design-tools">
  ## Warum Design-Tools nutzen
</div>

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.

<div id="key-benefits">
  ### Wichtige Vorteile
</div>

* **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

<div id="common-use-cases">
  ### Häufige Anwendungsfälle
</div>

* 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

<div id="themes">
  ## Themes
</div>

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

<div id="key-capabilities">
  ### Zentrale Funktionen
</div>

* **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

<div id="visual-editing">
  ## Visuelle Bearbeitung
</div>

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.

<div id="key-capabilities">
  ### Zentrale Funktionen
</div>

* **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

<div id="quick-start">
  ## Schnellstart
</div>

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.

   <Tip>
     Für den schnellen Zugriff auf visuelle Bearbeitungen verwende den **Visual edits**-Shortcut im Eingabefeld der Eingabeaufforderung.
   </Tip>
3. **Vorschau ansehen und speichern**, sobald du mit dem Ergebnis zufrieden bist.

<Warning>
  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.
</Warning>