Vibe coding e prototipi
Come sta cambiando il modo di progettare i prototipi dei prodotti digitali grazie al vibe coding
Ciao,
questa è l’edizione #56 di Designabile, l’appuntamento mensile dedicato al product design digitale. Arriva con qualche giorno di ritardo per colpa delle vacanze di Pasqua e dei ponti festivi.
Questo numero è dedicato al vibe coding che non solo sostituirà (senza rimpianti) il no-coding, ma diventerà uno strumento fondamentale per la prototipazione dei prodotti digitali. Insomma, uno strumento da designer!
Buona lettura 📖
👨💻 APPROFONDIMENTO
Cos’è il vibe coding
Vibe coding significa scrivere codice grezzo ma concreto in modo rapido. Non mira a costruire un prodotto perfetto, ma a far vivere un'idea attraverso un minimum viable product (MVP) completo di interazioni e animazioni.
Funziona come i più diffusi strumenti di intelligenza artificiale (LLM). A differenza dei più datati “no-code”, non c’è un intefaccia grafica con cui interagire, ma un’area di testo per i prompt e un’area di preview.
A cosa serve
I prototipi interattivi creati con strumenti di design hanno un limite fondamentale: sono astrazioni del prodotto, non il prodotto stesso.
Per valutare l'efficacia di una scelta progettuale è invece fondamentale toccarla con mano: scrollare, cliccare, navigare, osservare come il prodotto risponde alle nostre azioni.
Il vibe coding permette di creare una versione quasi finale del prodotto che può essere testata in condizioni reali invece che simulate, eliminando così i lunghi cicli di design, sviluppo, revisione, correzione e nuovo sviluppo.
Anche se il codice generato non è ottimale, gli sviluppatori possono usarlo come punto di partenza, migliorarlo e trasformarlo in un prodotto completo. Questo metodo riduce notevolmente il divario tra design e sviluppo.
Addio no-code
Come evidenzia Kenneth Auchenberg in questo articolo, il no-code non ha mantenuto le sue promesse: non è riuscito né a sostituire la programmazione tradizionale, né a democratizzare veramente la creazione di software.
Non c'era bisogno di "meno codice", ma di un modo più semplice per scriverlo.
Ora, grazie agli LLM (Large Language Models) e agli strumenti di vibe coding, possiamo generare vero codice — semantico e conforme agli standard — usando il linguaggio naturale.
Invece di lavorare all'interno di ecosistemi chiusi (Webflow, Framer, Wix, ecc.), oggi chiunque può produrre codice aperto, modificabile e distribuibile ovunque, senza vincoli di piattaforma.
Questa transizione segna una vera liberazione: il vibe coding permette a tutti di costruire esperienze realistiche senza essere vincolati a piattaforme proprietarie, combinando l'agilità del design con la concretezza del coding.
Il problema con i prototipi
Per anni, creare un prototipo ha previsto:
Creare una bozza delle prime idee
Creare wireframe di una o più soluzioni in Figma (o simili)
Raccogliere feedback dal team di prodotto e sviluppo
Sviluppare i mockup ad alta fedeltà
Creare un prototipo interattivo
Consegnare i design "definitivi" agli sviluppatori
Scoprire che il prodotto implementato deviava dal design originale
I problemi principali di questo approccio:
Spreco di tempo: settimane dedicate a micro-modifiche su Figma
Scarso realismo: vincoli tecnici individuati troppo tardi durante lo sprint
Manutenzione onerosa: design token non aggiornati che compromettevano l'intero sistema
Focus errato: discussioni incentrate su dettagli di implementazione mentre il prodotto soffriva di problemi concreti
Un nuovo approccio
Perché il vibe coding è particolarmente adatto ai designer:
Consente di creare prototipi realistici utilizzando il linguaggio naturale
È possibile allegare immagini, anche molto grezze, per spiegare il risultato desiderato
Crea un ponte tra design e sviluppo, fornendo codice che può essere utilizzato come base per la versione finale
Non si tratta quindi di uno strumento di pura programmazione, ma di un mezzo per trasformare rapidamente le idee di design in realtà tangibile.
Una delle caratteristiche più interessanti è che il codice iniziale, seppur grezzo, può essere migliorato dai developer. Gli sviluppatori possono prendere questi prototipi, ottimizzarli, modularizzarli e portarli in produzione senza ripartire da zero.
Questo approccio elimina efficacemente il divario tra design e sviluppo, creando un flusso di lavoro più fluido e concreto.
Kevin Weil, Chief Product Officer di OpenAI, ha recentemente colto il punto durante un intervista:
"We should show live demos instead of files. Build a proof in thirty minutes and test ideas fast."
I principali vantaggi
Iterazioni lampo: idee → codice → test → correzione in poco tempo.
Autonomia: se sai anche solo un minimo di HTML o CSS , ti costruisci il tuo prototipo senza doverlo spiegare a qualcun altro.
Prototipi reali in poco tempo: puoi davvero simulare come si comporterà il prodotto finale.
I principali problemi
È necessario spiegarsi bene: i prompt devono essere chiari, specifici per funzionalità;
Non sempre il codice è riutilizzabile: Il passaggio alla produzione potrebbe richiedere comunque interventi professionali.
Serve un minimo di skill tecnica: la conoscenza di HTML e CSS può essere utile per migliorare l’output finale.
Gli strumenti da provare
Se vuoi iniziare a sperimentare, questi sono i tool che sto usando o esplorando:
Lovable — crea qualunque cosa partendo da prompt descrittivi, web-based, si integra con GitHub e supporta database;
v0 — il tool progettato da Vercel, ha praticamente le stesse funzionalità di Lovable;
Bolt: Supporta importazione mockup da Figma;
Replit — a differenza degli altri, rilasciato come IDE online, con AI assistita per aiutarti anche se non sei uno sviluppatore esperto.
Cursor — IDE installabile sul proprio computer, come VS Code, con AI assistita, integrazione con GitHub.
⭐️ NOVITÀ
L’ultima versione di Penpot support i Design Tokens
Penpot, l'open source design tool alternativo a Figma, ha rilasciato una nuova versione che supporta nativamente i design tokens. Questa funzionalità permette di centralizzare e gestire le variabili di design direttamente all'interno del tool, facilitando la comunicazione tra designer e developer. Una funzionalità molto attesa dalla community che rende Penpot ancora più competitivo nel panorama degli strumenti di design.
Leggi l'annuncio completo sul blog ufficiale di Penpot →
🎪 EVENTI
Accessibility Days 2025
È uscito il programma ufficiale degli Accessibility Days 2025 che si terranno all’Istituto dei Ciechi di Milano. Due giorni di sessioni e workshop da non perdere.
Giovedì 15 maggio, ci sarò con i colleghi del Dipartimento per un intervento legato alle recenti novità del design system .italia.
Ti aspetto!
—
Al prossimo numero 🙌
Ciao, Francesco