Skip to main content

​
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

​
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

​
Seitentyp

​
Bildschirmgröße

​
Prompts schreiben

Dein Prompt steuert die Generierung. Sei so spezifisch wie du möchtest:
“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.”
“Dunkles Theme mit lila Akzentfarbe, Glasmorphismus-Karten, dezente Farbverläufe, Inter-Schrift, abgerundete Ecken.”
“Eine Preisseite ähnlich wie bei Stripe, mit drei Plan-Karten, Feature-Vergleichstabelle und FAQ-Akkordeon unten.”

​
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

​
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

Flow Generation

Komplette Multi-Screen-Apps generieren

Live-Vorschau

Die Sandbox-Umgebung verstehen