Trasforma pagine web e layout IA in mockup modificabili
Importa pagine web live, aree di pagina e layout generati dall'IA in Moqups come design hi-fi completamente modificabili o wireframe lo-fi.
Importazione di pagine web
Porta qualsiasi pagina web live in Moqups
Fai clic sull'icona dell'estensione per selezionare una pagina intera, un'area o elementi singoli. Incollali direttamente in Moqups come layout completamente modificabile con ogni oggetto pronto per la personalizzazione.
- Importa la pagina intera o seleziona un'area specifica
- Cattura elementi singoli usando la barra spaziatrice
- Incolla in un progetto esistente o aprilo in uno nuovo
Importa come visualizzazione desktop, laptop o telefono
Scegli la dimensione del viewport prima ancora di importare. In questo modo, il layout viene incollato in Moqups nel formato e nelle dimensioni esatte di cui hai bisogno, non solo ciò che viene visualizzato nel tuo browser.
Importazione di design IA
Cattura layout IA e rendili tuoi
Porta le bozze IA direttamente in Moqups. Modificale con il tuo team in uno spazio collaborativo – e risparmia anche token! Perfeziona il testo, regola i layout e correggi i dettagli che l'IA sbaglia. Poi esporta un PDF della versione rivista per il tuo prossimo round con l'IA.
- Fai clic sull'iframe per copiare il design
- Importa come design hi-fi o wireframe lo-fi
- Funziona con qualsiasi strumento IA che rende un iframe
Aiuta l'IA a rispecchiare il tuo brand e stile
Estrai lo stile visivo di qualsiasi finestra del browser aperta – colori, tipografia, stili dei pulsanti, stili degli input – e genera un brief di design strutturato. Incolla quel brief in un prompt IA affinché i layout generati riflettano accuratamente il tuo branding e il tuo sistema di design.
Importa design ad alta fedeltà – o trasformali in wireframe
Quando converti una pagina web o un layout IA, hai due opzioni: importare il design esattamente come appare – come layout hi-fi – o convertirlo in un wireframe lo-fi in scala di grigi. In entrambi i casi ottieni un mockup completamente modificabile – ma uno mette l'accento sul branding e lo stile, l'altro sulla struttura e il contenuto. La scelta è tua!
Ogni elemento è tuo da modificare
I design importati arrivano come layout completamente modificabili in modo che tu e il tuo team possiate iniziare a modificare, aggiornare e personalizzare in pochi secondi.
Modifica il testo
Fai clic su qualsiasi blocco di testo per aggiornare titoli, etichette e testi dei pulsanti.
Regola colori e font
Cambia colori e tipografia negli elementi selezionati o nell'intero layout.
Sostituisci le immagini
Sostituisci segnaposto e immagini con i tuoi asset dalla tua libreria di immagini.
Aggiungi componenti UI
Trascina pulsanti, form, modal e icone dalla libreria di stencil di Moqups.
Ridimensiona e riorganizza
Sposta, riordina e ridimensiona qualsiasi elemento usando guide e aggancio automatico.
Commenta e collabora
Lavora con il tuo team in tempo reale e lascia commenti e annotazioni sul design.
Riunisci il tuo team per lavorare meglio
Condividi idee e conversazioni significative – sia sincrone che asincrone – con cursori live, note adesive, annotazioni e commenti codificati per colore. Raccogli feedback, specifica requisiti, costruisci consenso e prendi grandi decisioni.
Domande frequenti
Quali browser supporta l'estensione?
L'estensione è disponibile per Chrome e Firefox. Gli utenti di Brave possono installare la versione Chrome direttamente. Un'estensione per Safari è in sviluppo e condivideremo un aggiornamento quando sarà pronta.
È gratuita?
Sì, l'estensione è gratuita da installare e usare. Per incollare i design importati in un progetto avrai bisogno di un account Moqups – che è anch'esso gratuito e non richiede una carta di credito.
Funziona con qualsiasi strumento IA?
Sì. L'estensione può importare qualsiasi design IA che si rende come iframe nel tuo browser. Questo include artefatti di Claude, ChatGPT, Gemini e altri. Fai clic sull'iframe per importare il layout completo, o usa la barra spaziatrice per selezionare un elemento specifico al suo interno.
Cos'altro può fare l'estensione?
Alcune altre funzionalità degne di nota: Screenshot: Cattura l'area visibile, una selezione personalizzata o la pagina intera e salvala direttamente nella libreria di immagini del tuo team Moqups. Utile per mood board, ricerche sui concorrenti e riferimenti rapidi. Nota: gli screenshot sono acquisizioni di immagini, non layout modificabili. Crea progetti istantaneamente: Fai clic sull'icona dell'estensione Moqups nel tuo browser per creare un nuovo progetto o accedere direttamente alla tua dashboard senza cambiare tab. Selettore colori: Per le versioni di Chrome precedenti alla 95, l'estensione attiva il nostro contagocce in-app in modo da poter campionare qualsiasi colore dal tuo browser e applicarlo agli elementi del tuo design.
Cosa significa 'completamente modificabile'?
Quando importi una pagina web o un design IA, non arriva come un'immagine piatta. Ogni componente – testo, pulsanti, immagini, elementi di navigazione, campi di input – arriva come oggetti separati nel tuo progetto Moqups. Puoi fare clic su qualsiasi elemento per selezionarlo, regolare colori e font, sostituire immagini, spostare elementi e aggiungere nuovi componenti UI dalla nostra libreria di stencil.
Ho già l'estensione Moqups. Devo aggiornarla?
No, si aggiorna automaticamente. Se l'hai installata in precedenza, le nuove funzionalità sono già disponibili.
Inizia a importare. Smetti di ricostruire.
L'estensione è gratuita e richiede circa dieci secondi per l'installazione.