Magic Patterns: guida completa da prompt a prototipo e codice
Magic Patterns trasforma una descrizione o uno screenshot in un'interfaccia editabile con codice pronto. Ecco come usarlo dal primo prompt all'esportazione.
👁 116 letture
Magic Patterns trasforma una descrizione o uno screenshot in un’interfaccia editabile con codice pronto, e il team può lavorarci insieme su una board condivisa. Questa guida ti accompagna dal primo prompt all’esportazione del codice e del progetto in Figma, seguendo la documentazione ufficiale di Magic Patterns.
Prima di iniziare: prepara i materiali
Magic Patterns dà i risultati migliori quando ha una base su cui lavorare. Prepara screenshot del prodotto esistente, se la nuova schermata deve integrarsi con esso, e una lista degli elementi che devono comparire. Se l’azienda ha un design system in un repository o su un sito, collegalo subito, prima di iniziare a generare schermate.
Vale la pena anche annotare per chi è la schermata e cosa l’utente deve farci. Questa singola informazione cambia il layout più della descrizione dei colori.
Passo 1. Il primo prompt
Nella home page vedi un grande campo per il prompt. Nell’angolo è selezionato uno stile, di default quello base. Per bozze con meno dettagli puoi scegliere lo stile wireframe, mentre per schermate definitive resta su quello predefinito. Descrivi cosa deve essere creato, ad esempio una schermata di registrazione con campi per nome, email e password e un pulsante per il login con Google.
Invece di una descrizione puoi caricare uno screenshot di un’interfaccia esistente, e Magic Patterns la ricreerà come progetto editabile.
Passo 2. Modifiche a un singolo elemento
Questa è la funzione che fa risparmiare più tempo. Clicchi su un singolo elemento, ad esempio un pulsante o un titolo, e dai un comando solo per quello. L’AI modifica quell’elemento e lascia il resto del layout intatto. Non devi descrivere l’intera schermata da capo per cambiare il colore di un pulsante.
Per modifiche più ampie c’è la modalità planning, in cui prima concordi con l’agente cosa deve cambiare, prima che venga generato il codice.
Passo 3. Collegare le schermate in un prototipo
Puoi collegare diverse schermate in un prototipo cliccabile. Attivi la modalità prototipo dalla barra degli strumenti in basso o con il tasto P, passi il mouse su un elemento finché non si evidenzia in blu, lo clicchi, poi clicchi la schermata a cui deve portare. Con l’icona play avvii il prototipo e lo navighi come un utente.
Passo 4. Esportazione del codice
Il pulsante Export in alto a destra ti permette di scaricare tutto il codice in un archivio, sincronizzarlo con GitHub o inviare il progetto a Figma. Magic Patterns genera codice in React, Vue o con Tailwind. Se lavori in Cursor, puoi collegarlo a Magic Patterns tramite MCP e chiedere che costruisca un prototipo nel tuo progetto, seguendo le sue convenzioni.
Passo 5. Esportazione in Figma
Dopo aver selezionato l’esportazione in Figma, aspetti che il progetto si prepari, clicchi Copy e incolli in Figma. Il progetto appare sulla board. L’esportazione è un’istantanea di ciò che è sullo schermo, quindi se vuoi avere un menu aperto in Figma, aprilo prima dell’esportazione.
Passo 6. Design system personalizzato
Magic Patterns può lavorare nello stile della tua azienda. Colleghi un repository su GitHub, un pacchetto npm o un sito funzionante, e lo strumento legge colori, tipografia e componenti. Le nuove schermate vengono create nel tuo stile, non in quello predefinito. Un progetto esistente può essere convertito a un altro sistema con il pulsante di conversione, che crea una nuova versione e lascia l’originale.
Esempio: una nuova schermata in un’ora
Il team ha bisogno di una schermata impostazioni account. La designer carica uno screenshot della schermata profilo attuale per mantenere lo stile, e descrive le nuove sezioni: dati personali, notifiche, eliminazione account. Corregge due elementi con comandi separati, collega la schermata al profilo in un prototipo e lo mostra al team. Lo sviluppatore riceve il codice del componente, e la designer la versione in Figma per la documentazione.
In questo esempio, il maggior risparmio di tempo viene dal caricare lo screenshot della schermata esistente. La nuova schermata si integra da subito con il resto dell’applicazione, quindi non serve adattarla manualmente dopo. Quando l’azienda ha collegato un design system, il risultato è ancora migliore, perché lo strumento usa direttamente i componenti che usa il team di sviluppo, non solo il loro aspetto nello screenshot.
Errori più comuni
- Descrivere l’intera schermata da capo invece di correggere un singolo elemento.
- Esportare in Figma con menu chiusi che dovevano essere visibili.
- Lavorare senza design system, per cui ogni schermata appare diversa.
Come valutare il primo prototipo
Mostra il prototipo a qualcuno che non ha partecipato alla sua creazione, e chiedigli di completare un compito, ad esempio cambiare la password. Non dare suggerimenti. Il punto in cui esita è il punto da migliorare, e lo correggi con un comando su un singolo elemento.
Controlla anche il codice prima di passarlo allo sviluppatore. I componenti hanno nomi comprensibili, lo stile corrisponde al resto del progetto, non ci sono elementi superflui. Pochi minuti di revisione risparmiano ore di correzioni da parte del team.
More on this from NITIDO
magazine·Canva AI Redesign: ridisegna banner in 10 secondiLa nuova funzione AI Redesign di Canva trasforma i tuoi progetti in pochi secondi. Scopri come usarla per creare varianti di design senza ripartire da zero.