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:- Die KI zeigt Karten mit Fragen (z.B. “Was für eine App baust du?”, “Wer ist deine Zielgruppe?”)
- Beantworte über Schnellauswahl-Buttons oder Freitext
- Die KI erstellt ein umfassendes Design-Brief aus deinen Antworten
- Klick Generieren aus Brief um Screens basierend auf dem Gespräch zu erstellen
- Weiterchatten zum Verfeinern möglich
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:Inhalt und Struktur beschreiben
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.”
Visuellen Stil angeben
Visuellen Stil angeben
“Dunkles Theme mit lila Akzentfarbe, Glasmorphismus-Karten, dezente Farbverläufe, Inter-Schrift, abgerundete Ecken.”
Bekannte Designs referenzieren
Bekannte Designs referenzieren
“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
| 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”
Nächste Schritte
Flow Generation
Komplette Multi-Screen-Apps generieren
Live-Vorschau
Die Sandbox-Umgebung verstehen