Code & Wireframe Generation
Panoramica
Una volta annotata la tua immagine con bounding box e assegnati i comportamenti, puoi generare codice componente funzionante o un layout wireframe. L'IA usa le posizioni dei bounding box, i tipi di elementi e le direzioni dei comportamenti per produrre un output accurato.
AI Assistant Sidebar
Il pannello Assistente IA e la barra laterale destra usata per configurare e avviare la generazione di codice o wireframe. Contiene i seguenti controlli:
Selettore modello di visione
Scegli quale modello di visione IA usare per analizzare le tue immagini e generare l'output. Modelli diversi possono produrre livelli diversi di dettaglio e accuratezza.
Selettore framework
Scegli il framework di destinazione per la generazione del codice (es. React, Vue, Svelte). Il codice generato usera la sintassi e i pattern del framework selezionato.
Schede Componenti / Wireframe
Passa tra la generazione di codice componente (scheda Componenti) o layout wireframe (scheda Wireframe) dalle tue immagini annotate.
Gruppi immagini
Elenca tutti i tuoi gruppi di immagini per il progetto di reverse corrente. Seleziona un gruppo per visualizzare le sue immagini e configurare la generazione. Ogni gruppo mostra il suo conteggio di immagini.
Genera blocchi
Clicca per avviare il processo di generazione IA. L'IA analizza le immagini del gruppo selezionato insieme a qualsiasi annotazione bounding box e comportamento per produrre l'output.
Output Modes
Genera codice
Converti l'immagine annotata in codice componente funzionante per il tuo framework di destinazione (React, Vue, Svelte, ecc.). Il codice generato include il layout, lo stile e qualsiasi comportamento definito sui bounding box.
Genera wireframe
Esporta l'immagine annotata come layout wireframe che si apre nello strumento Wireframe. Ogni bounding box diventa un elemento wireframe che puoi ulteriormente perfezionare, riorganizzare e connettere ad altre schermate.
Code Generation Features
Selezione framework
Scegli il tuo framework di destinazione prima di generare. I framework supportati includono React, Vue, Svelte, SolidJS, Angular e altri.
Mappatura comportamenti
I comportamenti assegnati ai bounding box vengono tradotti in gestori di eventi, logica di navigazione, modali e altro codice interattivo nell'output.
Accuratezza layout
L'IA usa le posizioni e le dimensioni dei bounding box dall'immagine per produrre un layout che corrisponde fedelmente al design visivo originale.
Salva nei blocchi
I componenti generati possono essere salvati direttamente nella tua libreria Blocchi per il riutilizzo tra i progetti.
Aggiungi al progetto
Inserisci il codice generato direttamente nel tuo progetto corrente come nuovi file componente.
Suggerimenti
Per i migliori risultati, usa immagini ad alta risoluzione con elementi UI chiari. Disegna bounding box stretti intorno a ogni elemento per una generazione di codice piu accurata. Assegna comportamenti specifici piuttosto che descrizioni vaghe — 'apre il modale di registrazione' funziona meglio di 'fa qualcosa.' L'IA funziona meglio con layout web standard e pattern UI comuni.