Che ne direste di trasformare il codice di una pagina web direttamente in un file Figma pronto per essere ritoccato? Sembra quasi magia, ma è la realtà grazie a un nuovo strumento basato sull’AI, fresco di lancio per mano di Meng To, un volto noto nel mondo tech. Pensato un po’ come l’ormai famoso plugin “html.to.design” per Figma, questo nuovo arrivato promette di fare proprio questo: prendere codice HTML e trasformarlo in livelli di design modificabili. E, a quanto pare, lo fa con una precisione notevole, toccando il 90% grazie all’aiuto del modello Claude 3.7. Questo significa convertire rapidamente il codice web in livelli di design, aprendo scenari interessanti per chi lavora sul web. Certo, l’accesso completo è per gli utenti Pro con un abbonamento, e sui social si parla già tantissimo del suo potenziale per cambiare il modo in cui designer e sviluppatori collaborano.
Ma cosa fa esattamente questo strumento? Semplifica un sacco il passaggio dal codice al design, usando l’intelligenza artificiale per creare un ponte efficiente tra chi scrive codice e chi crea interfacce. Dategli in pasto codice HTML/CSS, anche con Tailwind, e lui lo analizza per generare un file Figma con livelli, stili e un layout di base. Parliamo di un’accuratezza che sfiora il 90%! Non si limita a fare un semplice screenshot, ma interpreta gli elementi web – pulsanti, barre di navigazione – e li trasforma in veri livelli Figma, mantenendo font, colori e spaziature. Certo, non è perfetto: effetti complessi come lo sfondo sfocato (background blur) per ora non sono supportati. Quello che è interessante è l’integrazione con l’API di Figma tramite comandi JavaScript, che permette di mettere le mani sul design generato e modificarlo. E c’è già l’attesa per il futuro supporto all’Auto Layout. I design che ne escono sono già ad alta fedeltà, perfetti per creare prototipi veloci o presentazioni ai clienti. E sì, si possono anche esportare in SVG. Per ora, l’accesso completo è riservato agli utenti Pro con un abbonamento. I primi test sul campo raccontano di conversioni lampo, come quella di un componente React trasformato in Figma in pochi secondi, con pulsanti e testo stilizzati alla perfezione. Un bel boost all’efficienza, specialmente nelle fasi iniziali di un progetto.
Ma come fa? Dietro le quinte, c’è un mix potente: il modello Claude 3.7 di Anthropic, l’API di Figma e un po’ di magia nel parsing del codice front-end. Claude 3.7 è quello che “legge” e capisce l’HTML, il CSS (anche Tailwind), estraendone la struttura e gli stili. Poi, l’integrazione con l’API di Figma prende queste informazioni e le trasforma in livelli e componenti, cercando di mantenere tutto coerente, un po’ ispirandosi alla logica di strumenti come Builder.io Visual Copilot. È già bravo a gestire variabili CSS e classi Tailwind, e si guarda già ad aggiungere il supporto per le variabili di Storybook, per integrarsi meglio con i design system. La sua “comprensione” del contesto, grazie a Claude 3.7, aiuta a gestire anche strutture web complicate, riducendo la necessità di ritocchi manuali. E la bellezza è che l’architettura è pensata per essere aperta: gli sviluppatori possono aggiungere funzionalità, magari per supportare altri strumenti di design come Sketch, grazie alla documentazione open-source di Meng To. Insomma, prende l’idea di “html.to.design” e la porta avanti con un’intelligenza artificiale più profonda e un’integrazione Figma più spinta, riempiendo un vero vuoto nel prototyping rapido.
Ma a chi serve e in quali situazioni si rivela un asso nella manica? Beh, gli scenari sono tanti e tutti puntano ad accelerare la collaborazione tra chi disegna e chi sviluppa. I designer possono prendere un pezzo di web esistente o un prototipo in codice e trasformarlo in un file Figma su cui lavorare, creando prototipi fedeli alla realtà in un lampo, perfetti per mostrare le idee ai clienti o raccogliere feedback. Gli sviluppatori, dal canto loro, possono passare ai designer un prototipo in HTML/CSS senza che questi debbano rifare tutto da zero in Figma, un sogno per i team che lavorano in modo agile. È utile anche per chi impara: vedere come il codice si trasforma in un design visivo aiuta a capire meglio la struttura del web e i principi di UI design. Le aziende che pensano a un restyling possono importare il codice dei vecchi siti per avere una base di design su cui costruire rapidamente il nuovo look. E persino le community open-source possono usarlo per creare documentazione visiva del codice, rendendolo più accessibile. Abbiamo sentito di startup che, usandolo per convertire codice Tailwind in design Figma, hanno risparmiato decine di ore di lavoro manuale. Insomma, è uno strumento che aiuta a far dialogare meglio design e sviluppo.
Ok, e come si inizia a usarlo? Al momento, come dicevamo, è uno strumento per gli utenti Pro, disponibile sul sito di Meng To, designcode.io. Si accede tramite un abbonamento a pagamento (il costo esatto non è pubblico). Per provarlo, i passi sono semplici: vai su designcode.io, crea un account Pro e accedi. Poi carichi il tuo codice HTML/CSS o incolli degli snippet, magari con classi Tailwind. Configuri dove vuoi che finisca il design in Figma (l’artboard, gli stili) e lanci la conversione. In pochi istanti avrai il tuo file Figma da controllare e, se necessario, ritoccare. Da lì puoi esportare in SVG o continuare a lavorarci su in team. Un consiglio dalla community per ottenere i migliori risultati, specialmente con codice complesso, è avere una struttura CSS ben organizzata. E tenete d’occhio gli aggiornamenti per il supporto all’Auto Layout! Ah, e se siete utenti Free, per ora l’accesso non c’è, ma vale la pena dare un’occhiata al video demo sul sito designcode.io/demo per capire di cosa si tratta.
E cosa ne pensa chi l’ha già provato? L’entusiasmo nella community è palpabile. Molti sviluppatori lo definiscono un vero “game-changer”, capace di trasformare quella che prima era una conversione manuale e noiosa da HTML a design in un’operazione AI che richiede solo pochi secondi. Lo vedono benissimo per il prototyping veloce e per far lavorare meglio i team. Però, come in ogni novità, ci sono margini di miglioramento. Alcuni utenti hanno fatto notare la mancanza di supporto per effetti più elaborati (come quello sfondo sfocato di cui parlavamo) e per l’Auto Layout, che è fondamentale in Figma. Si spera anche nel supporto per le variabili di Storybook e per altri strumenti oltre a Figma. Meng To, dal canto suo, ha già rassicurato che l’Auto Layout sta per arrivare e che l’integrazione delle variabili è nei piani.
Guardando avanti, questo strumento di Meng To, con la sua capacità di “leggere” il codice grazie a Claude 3.7 e integrarsi così bene con Figma, segna una vera svolta. È un passo importante nel mostrare come l’intelligenza artificiale possa rivoluzionare il modo in cui designer e sviluppatori lavorano insieme. La sua precisione e la possibilità di espandere le sue funzioni non solo mettono in discussione gli strumenti più “tradizionali”, ma aprono la porta a un futuro dove il prototyping e l’iterazione diventano incredibilmente veloci. C’è già chi immagina workflow completi, dal codice al design fino alla messa online, integrando strumenti di questo tipo. A lungo termine, potremmo vedere versioni basate su cloud, con API aperte, che creano un vero e proprio ecosistema, un po’ come sta succedendo con altre piattaforme. Insomma, il viaggio del design e dello sviluppo web, guidato dall’AI, è appena all’inizio, e strumenti come questo ci mostrano dove stiamo andando.
