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

# Visual Designer

> Der Canvas-Workspace zum Generieren von Screens, Wireframes, Landing Pages und Multi-Screen-Flows mit KI.

# Visual Designer

Der Visual Designer unter `/start` ist ein Canvas-basierter Workspace zur visuellen Screen-Generierung. Beschreibe was du willst, konfiguriere deine Einstellungen, und die KI erstellt produktionsfertige Designs.

## Workspace-Aufbau

| Bereich           | Funktion                                                                                 |
| ----------------- | ---------------------------------------------------------------------------------------- |
| **Top Header**    | Projektname, Sync-Status, Credits, Account-Einstellungen, Hell/Dunkel-Umschalter, Teilen |
| **Linke Sidebar** | Studio/Chat Tabs, Design Specs, Prompt-Eingabe, Generierungs-Steuerung                   |
| **Canvas**        | Unendlicher Workspace mit generierten Screens als Frames                                 |
| **AI Editor**     | Unteres Panel zum Bearbeiten ausgewählter Screens                                        |
| **Sandbox Panel** | Terminal, AI Coder, Git, Vite Logs                                                       |

## Studio vs. Chat Tabs

Die linke Sidebar hat zwei Modi:

* **Studio** — Der visuelle Generierungsmodus (Standard). Specs konfigurieren, Prompts schreiben, Screens generieren.
* **Chat** (Beta) — Ein Brainstorm-Modus, in dem die KI dir durch Fragen hilft deine Idee zu verfeinern.

### Chat / Brainstorm Modus

Wechsle zu **Chat** für eine geführte Ideenfindung:

1. Die KI zeigt Karten mit **Fragen** (z.B. "Was für eine App baust du?", "Wer ist deine Zielgruppe?")
2. Beantworte über Schnellauswahl-Buttons oder Freitext
3. Die KI erstellt ein umfassendes Design-Brief aus deinen Antworten
4. Klick **Generieren aus Brief** um Screens basierend auf dem Gespräch zu erstellen
5. Weiterchatten zum Verfeinern möglich

Ideal wenn du noch nicht genau weißt was du bauen willst.

## Design Specs

### Modus

| Modus         | Beschreibung                                       | Credit-Kosten |
| ------------- | -------------------------------------------------- | ------------- |
| **Wireframe** | Schwarz-weiß Struktur-Layout. Schnell und günstig. | 3 Credits     |
| **HiFi**      | Vollfarb-Design mit Live-Sandbox.                  | 6 Credits     |

### Seitentyp

| Typ              | Ideal für                                                   |
| ---------------- | ----------------------------------------------------------- |
| **Normal**       | Standard-Screens (Apps, Dashboards, Formulare)              |
| **Landing Page** | Lange scrollbare Seiten mit 3–20 konfigurierbaren Sektionen |
| **Funnel**       | Mehrstufige Conversion-Flows                                |

### Bildschirmgröße

| Preset     | Auflösung   |
| ---------- | ----------- |
| Desktop    | 1440 × 1024 |
| Desktop HD | 1920 × 1080 |
| Tablet     | 1024 × 1366 |
| Mobile     | 375 × 840   |

## Prompts schreiben

Dein Prompt steuert die Generierung. Sei so spezifisch wie du möchtest:

<AccordionGroup>
  <Accordion title="Inhalt und Struktur beschreiben">
    "Ein Projektmanagement-Dashboard mit linker Sidebar (Projekte, Aufgaben, Kalender, Team). Hauptbereich zeigt ein Kanban-Board mit Spalten: Zu erledigen, In Bearbeitung, Fertig. Jede Karte hat Titel, Bearbeiter-Avatar und Prioritäts-Tag."
  </Accordion>

  <Accordion title="Visuellen Stil angeben">
    "Dunkles Theme mit lila Akzentfarbe, Glasmorphismus-Karten, dezente Farbverläufe, Inter-Schrift, abgerundete Ecken."
  </Accordion>

  <Accordion title="Bekannte Designs referenzieren">
    "Eine Preisseite ähnlich wie bei Stripe, mit drei Plan-Karten, Feature-Vergleichstabelle und FAQ-Akkordeon unten."
  </Accordion>
</AccordionGroup>

## Referenzbilder

Lade Referenzbilder hoch, um die KI visuell zu leiten:

* Klick auf das **Büroklammer-Icon** unter dem Prompt
* Oder **Drag & Drop** direkt auf den Prompt-Bereich
* Bis zu 10 Bilder pro Generierung

## Enhance Prompt

Klick auf den **Zauberstab** (Enhance), damit die KI deinen Prompt verbessert — mit mehr Details, Struktur und Design-Angaben.

## Deep Design & Max Mode

| Toggle          | Effekt                                                      |
| --------------- | ----------------------------------------------------------- |
| **Deep Design** | KI denkt länger nach, produziert detailliertere Designs     |
| **Max Mode**    | Nutzt das leistungsfähigste KI-Modell für maximale Qualität |

## Generierte Screens bearbeiten

Nach der Generierung:

* **Screen anklicken** — öffnet den AI Editor unten
* **Canvas navigieren** — Zoomen und Schwenken zwischen Screens
* **Screens verschieben** — Per Drag & Drop auf dem Canvas

### AI Editor

Tippe eine Änderungsanfrage:

* "Mach den Header sticky"
* "Ändere die Button-Farbe zu Grün"
* "Füge eine Suchleiste oben hinzu"

Die KI ändert den Code und die Live-Vorschau aktualisiert sich sofort.

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Flow Generation" icon="diagram-project" href="/de/seemodo/flow-generation">
    Komplette Multi-Screen-Apps generieren
  </Card>

  <Card title="Live-Vorschau" icon="eye" href="/de/seemodo/sandbox">
    Die Sandbox-Umgebung verstehen
  </Card>
</CardGroup>