Wireframe
Welcome
L'area Wireframe ti permette di progettare e prototipare i tuoi layout di interfaccia visivamente. Crea wireframe per pianificare la struttura della tua applicazione prima di programmare. Quando apri Wireframe per la prima volta, vedrai la schermata di benvenuto con una scheda Crea Wireframe per iniziare, oppure usa il pulsante + Nuovo Wireframe nell'angolo in alto a destra.
Key Features
Design manuale
Costruisci wireframe a mano usando l'editor canvas visivo — trascina e rilascia componenti per progettare le tue schermate.
Generazione con IA
Descrivi cosa desideri e lascia che l'IA generi documentazione wireframe e frame per te automaticamente.
Input vocale
Usa il pulsante microfono integrato o il clic centrale per dettare la descrizione del tuo wireframe con la voce.
Da wireframe a codice
Una volta pronto il tuo wireframe, invialo direttamente alla generazione di codice — passando dal design al codice funzionante in un unico flusso di lavoro.
Creating a Wireframe
Clicca su Crea Wireframe o + Nuovo Wireframe per aprire il dialogo di creazione. Inserirai un titolo, selezionerai la piattaforma di destinazione (Mobile, Desktop o Web), scriverai una descrizione del tuo wireframe e sceglierai tra la modalità Manuale o Con IA.
Project Setup Fields
Titolo
Dai un nome al tuo progetto wireframe in modo da poterlo identificare successivamente nell'elenco wireframe.
Piattaforma
Seleziona la piattaforma di destinazione — Mobile, Desktop o Web — per adattare il layout e i vincoli del wireframe.
Descrizione
Descrivi cosa vuoi costruire. Questo viene usato dalla modalita con IA per generare documentazione e frame. Supporta l'input vocale tramite il pulsante microfono.
Modalita
Scegli Manuale per passare direttamente all'editor canvas, o Con IA per far generare all'IA documentazione e frame per te.
Manual Mode
Quando selezioni la scheda Manuale e clicchi su Crea, verrai portato direttamente nell'editor canvas dei wireframe dove puoi iniziare a costruire le tue schermate immediatamente. Questa è l'opzione migliore quando hai già un'idea chiara del tuo design e vuoi il controllo totale fin dall'inizio.
Quando usare la modalita manuale
Hai un design specifico in mente e vuoi costruirlo tu stesso.
Vuoi abbozzare rapidamente un design preliminare prima di perfezionarlo.
Preferisci il controllo totale su ogni elemento fin dall'inizio.
AI-Powered Mode
Quando selezioni la scheda Con IA, appaiono opzioni aggiuntive. Puoi digitare o dettare la tua descrizione, opzionalmente definire frame individuali, selezionare il tuo modello di IA preferito dal menu a tendina in alto e poi cliccare su Genera per far creare la documentazione del wireframe dall'IA.
How It Works
Inserisci dettagli
Compila il titolo, seleziona una piattaforma e scrivi una descrizione del tuo progetto.
Definisci frame (Opzionale)
Passa alla scheda Definisci frame per specificare le singole schermate o viste che vuoi far generare all'IA.
Seleziona modello IA
Scegli il tuo modello IA preferito dal menu a tendina (es. Claude Code, Opus 4.6).
Genera
Clicca Genera per avviare la generazione della documentazione IA. Il progetto wireframe apparira nel tuo elenco mentre la documentazione viene creata.
Costruisci frame
Una volta completata la documentazione, puoi iniziare a generare ogni singolo frame dall'editor wireframe.
Migliora con l'IA
In modalità Con IA, cliccando sul pulsante Migliora con IA si apre un dialogo che ti permette di migliorare la tua descrizione usando l'IA. Questo prende ciò che hai scritto nel campo descrizione e lo migliora in base alle tue istruzioni — rendendolo più dettagliato, strutturato o completo prima di generare il wireframe.
Enhancement Options
Modello IA
Seleziona il modello IA da usare per migliorare la tua descrizione (es. Claude Code, Opus 4.6).
Istruzioni di miglioramento
Fornisci opzionalmente istruzioni specifiche su come l'IA dovrebbe migliorare la descrizione. Supporta l'input vocale.
Migliora descrizione
Clicca per eseguire il miglioramento. L'IA riscrivera e migliorera la tua descrizione basandosi sul tuo input e sulle istruzioni.
Documentation Generation
Dopo aver cliccato su Genera in modalità Con IA, il tuo progetto wireframe appare nell'elenco dei wireframe con lo stato Generazione Documentazione.... L'IA sta creando documentazione strutturata per il tuo progetto basandosi sul titolo, la piattaforma, la descrizione e i frame che hai definito.
What Happens Next
Generazione documentazione
L'IA crea un documento strutturato che definisce ogni schermata, componente e layout basandosi sulla tua descrizione.
Generazione frame
Una volta completata la documentazione, puoi aprire il wireframe e iniziare a generare ogni singolo frame dall'editor.
Perfezionamento
Dopo la generazione dei frame, puoi regolare manualmente, aggiungere o rimuovere componenti nell'editor canvas per perfezionare il design.