/start bietet eine Canvas-basierte Oberfläche zur Erstellung von Anwendungs-Screens. Designe visuell mit tldraw und generiere dann produktionsreifen React-Code.
Oberflächen-Übersicht
Design-Spezifikationen
Konfiguriere dein Design vor der Generierung:Modus
- Wireframe
- HiFi
Schwarz-weiße strukturelle MockupsErstellt tldraw-Formen die dein UI-Layout repräsentieren. Perfekt für:
- Schnelle Konzept-Exploration
- Layout-Planung
- Stakeholder-Reviews
Seitentyp
| Typ | Beschreibung | Anwendungsfall |
|---|---|---|
| Normal | Standard Single-Viewport Screen | App-Screens, Dashboards |
| Landingpage | Multi-Section Scrolling-Seite | Marketing-Seiten, Homepages |
| Funnel | Multi-Step Conversion-Flow | Signup-Flows, Checkout |
Bildschirmgröße
Wähle aus voreingestellten Bildschirmgrößen:| Größe | Dimensionen | Beste Verwendung |
|---|---|---|
| Desktop | 1440 × 1024 | Standard Desktop-Apps |
| Desktop HD | 1920 × 1080 | Full HD Displays |
| Tablet | 1024 × 1366 | iPad und Tablets |
| Mobile | 375 × 840 | Smartphones |
Single Screen Generierung
Der Standard-Modus zur Generierung eines Screens auf einmal.Referenzbilder hinzufügen (optional)
Ziehe Bilder per Drag & Drop auf den Prompt-Bereich oder klicke das Büroklammer-Icon zum Hochladen.
Prompt-Verbesserung
Klicke den Verbessern Button (Zauberstab-Icon) um die KI deinen Prompt mit spezifischeren Design-Details erweitern zu lassen. Dies produziert oft bessere Ergebnisse für einfache Prompts.Flow-Generierung
Erstelle mehrere zusammenhängende Screens in einer Operation.Autoflow
Lass die KI die Screens für deine App planen:- Wechsle zum Create Flow Tab
- Gib deinen App-Kontext ein:
- Optional die Anzahl der Screens festlegen (leer lassen damit KI entscheidet)
- Klicke Autoflow
Manuelle Screen-Liste
Du kannst die Screen-Liste auch manuell erstellen und bearbeiten:- Drag zum Umsortieren der Screens mit dem Griff
- Namen bearbeiten durch Klick auf den Screen-Titel
- Prompts modifizieren im Textbereich
- Screens entfernen mit dem Minus-Button
- Alle löschen um neu zu beginnen
Flow generieren
Klicke Generate Flow um alle Screens gleichzeitig zu erstellen. Sie erscheinen nebeneinander auf dem Canvas.Erweiterte Optionen
Deep Design
Aktiviere Deep Design für verbessertes KI-Reasoning:- Gründlichere Prompt-Analyse
- Bessere Komponenten-Struktur
- Verbesserte Accessibility-Überlegungen
- Höhere Code-Qualität
Max Mode
Aktiviere Max Mode um das fähigste verfügbare KI-Modell zu nutzen:- Beste Code-Qualität
- Langsamere Generierung
- Höhere Kosten
Referenzbilder
Lade Bilder hoch um das KI-Design zu leiten:Drag & Drop
Ziehe Bilder direkt auf den Prompt-Bereich.
Klick zum Hochladen
Klicke das Büroklammer-Icon um Dateien auszuwählen.
Best Practices für Referenzbilder
Screenshots bestehender Apps
Screenshots bestehender Apps
Zeige der KI genau den Stil den du anstrebst.
Figma/Sketch Exports
Figma/Sketch Exports
Nutze hochwertige Mockups für pixelgenaue Ergebnisse.
Farbpaletten
Farbpaletten
Inkludiere Farbfelder um Markenfarben zu matchen.
Komponenten-Beispiele
Komponenten-Beispiele
Zeige spezifische UI-Patterns die du verwenden möchtest.
Mit generierten Screens arbeiten
Auf dem Canvas
Generierte Screens erscheinen als Frames auf dem tldraw Canvas:- Pan: Space gedrückt halten und ziehen, oder Zwei-Finger-Scroll
- Zoom: Scrollen oder Pinch zum Zoomen
- Auswählen: Auf einen Screen klicken um ihn auszuwählen
- Verschieben: Ausgewählte Screens ziehen zum Repositionieren
Code ansehen
Klicke auf einen generierten HiFi-Screen um seinen React-Code zu sehen. Nutze den Copy Button um den Code zu kopieren.Mit KI bearbeiten
Öffne das Sandbox-Panel und nutze den KI-Coder um:- Spezifische Komponenten zu modifizieren
- Neue Features hinzuzufügen
- Probleme zu beheben
- Styling zu ändern
Projekt herunterladen
Klicke den Download-Button im Sandbox-Panel um eine ZIP-Datei zu erhalten mit:- Allen Quelldateien
package.jsonmit Abhängigkeiten- Vite-Konfiguration
- Bereit zum lokalen Ausführen
Generierungs-Historie
Klicke den History Button (Uhr-Icon) um vorherige Generierungen zu sehen:- Alle vergangenen Prompts anzeigen
- Screen-Dimensionen und Modus sehen
- Use Prompt klicken um einen früheren Prompt wiederzuverwenden
Tipps für beste Ergebnisse
Einfach starten
Generiere erst grundlegende Layouts, dann iteriere mit KI um Komplexität hinzuzufügen.