Generazione codice e wireframe
Übersicht
Sobald Sie Ihr Bild mit Begrenzungsrahmen annotiert und Verhaltensweisen zugewiesen haben, können Sie entweder funktionierenden Komponentencode oder ein Wireframe-Layout generieren. Die KI verwendet die Positionen der Begrenzungsrahmen, Elementtypen und Verhaltensanweisungen, um eine präzise Ausgabe zu erzeugen.
Barra laterale assistente IA
Das KI-Assistenten-Panel ist die rechte Seitenleiste, die zum Konfigurieren und Auslösen der Code- oder Wireframe-Generierung verwendet wird. Es enthält die folgenden Steuerelemente:
Vision-Modell-Auswahl
Wählen Sie, welches KI-Vision-Modell für die Analyse Ihrer Bilder und die Generierung von Ausgaben verwendet werden soll. Verschiedene Modelle können unterschiedliche Detail- und Genauigkeitsgrade erzeugen.
Framework-Auswahl
Wählen Sie das Ziel-Framework für die Codegenerierung (z. B. React, Vue, Svelte). Der generierte Code verwendet die Syntax und Muster des ausgewählten Frameworks.
Komponenten- / Wireframes-Tabs
Wechseln Sie zwischen der Generierung von Komponentencode (Komponenten-Tab) oder Wireframe-Layouts (Wireframes-Tab) aus Ihren annotierten Bildern.
Bildgruppen
Listet alle Ihre Bildgruppen für das aktuelle Reverse-Projekt auf. Wählen Sie eine Gruppe aus, um deren Bilder in der Vorschau anzuzeigen und die Generierung zu konfigurieren. Jede Gruppe zeigt ihre Bildanzahl.
Blöcke generieren
Klicken Sie, um den KI-Generierungsprozess zu starten. Die KI analysiert die Bilder der ausgewählten Gruppe zusammen mit allen Begrenzungsrahmen-Annotationen und Verhaltensweisen, um die Ausgabe zu erzeugen.
Modalita di output
Code generieren
Konvertieren Sie das annotierte Bild in funktionierenden Komponentencode für Ihr Ziel-Framework (React, Vue, Svelte usw.). Der generierte Code umfasst das Layout, die Gestaltung und alle Verhaltensweisen, die Sie auf den Begrenzungsrahmen definiert haben.
Wireframe generieren
Exportieren Sie das annotierte Bild als Wireframe-Layout, das im Wireframe-Tool geöffnet wird. Jeder Begrenzungsrahmen wird zu einem Wireframe-Element, das Sie weiter verfeinern, umordnen und mit anderen Bildschirmen verbinden können.
Funzionalita di generazione codice
Framework-Auswahl
Wählen Sie Ihr Ziel-Framework vor der Generierung. Unterstützte Frameworks umfassen React, Vue, Svelte, SolidJS, Angular und mehr.
Verhaltens-Mapping
Verhaltensweisen, die Begrenzungsrahmen zugewiesen wurden, werden in Event-Handler, Navigationslogik, Modals und anderen interaktiven Code in der Ausgabe übersetzt.
Layout-Genauigkeit
Die KI verwendet die Positionen und Größen der Begrenzungsrahmen aus dem Bild, um ein Layout zu erzeugen, das dem ursprünglichen visuellen Design genau entspricht.
In Blöcke speichern
Generierte Komponenten können direkt in Ihrer Block-Bibliothek zur Wiederverwendung über Projekte hinweg gespeichert werden.
Zum Projekt hinzufügen
Fügen Sie den generierten Code direkt als neue Komponentendateien in Ihr aktuelles Projekt ein.
Tipps
Für beste Ergebnisse verwenden Sie hochauflösende Bilder mit klaren UI-Elementen. Zeichnen Sie Begrenzungsrahmen eng um jedes Element für genauere Codegenerierung. Weisen Sie spezifische Verhaltensweisen zu statt vager Beschreibungen — „öffnet Anmeldungs-Modal" funktioniert besser als „macht etwas". Die KI arbeitet am besten mit Standard-Weblayouts und gängigen UI-Mustern.