Open Design è il sogno di ogni vibe coder

Questa guida è un manuale operativo per vibe coder dedicato a Open Design: usa l'agente che già adoperi, scegli un design system così che il risultato non gridi “generato dall'AI”, struttura il prompt in modo che converta davvero, poi itera attraverso la conversazione. Segue le tre build consecutive che Sean Kochel realizza nelle sue demo pratiche — una landing page, un'app mobile e un'app desktop — riscritte e aggiornate alla versione attuale. Guarda il video qui sopra per la prova dal vivo, oppure continua a leggere per la versione scritta.

L'area di lavoro di Open Design — prototipi, presentazioni, immagini e video in un'unica tela ordinata e familiare.

Cos'è Open Design?

Open Design è una piattaforma di design open-source e local-first che gira sopra il coding agent che già usi. Rileva le CLI già presenti sulla tua macchina — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode e un paio di dozzine di altre — e lascia che sia quell'agente a guidare la generazione. Come dice Sean: c'è uno strato CLI dove configuri il tuo agente, un system prompt che governa la qualità, e poi le parti che lo rendono prezioso — il supporto alle skill e una libreria approfondita di design system. Gli output sono veri file HTML, quindi tutto ciò che crei finisce direttamente nel tuo progetto reale.

Perché i vibe coder se ne interessano:

• Porta il tuo agente e la tua chiave — nessun secondo abbonamento, nessun lock-in del provider.
• Gira in locale — l'output è HTML che puoi inserire direttamente nel tuo codebase.
• I design system eliminano l'aspetto da AI-slop — parti da un brand reale invece che da una tela bianca.
• Le skill sono personalizzabili — inserisci le tue regole di copywriting, i tuoi paradigmi UX o i tuoi processi.
• Open source, Apache-2.0 — leggilo, fai un fork, consegnaci lavori per i clienti.

I due problemi in cui incappa ogni vibe build

Sean imposta l'intero flusso di lavoro attorno a due modalità di fallimento, e vale la pena nominarle perché il resto del manuale è il modo in cui le eviti:

1. Sembra AI slop. Gradienti generici, lo stesso font serif, una zuppa di container — non piace nemmeno a te.
2. Non è strutturato per fare il suo lavoro. Una landing page che non converte, un'app il cui flusso non ha senso.

Un design system risolve il primo problema. Un prompt mirato con una struttura reale risolve il secondo. Tieni a mente entrambi per ogni build qui sotto.

Passo 1 — Installa e scegli il tuo agente

Hai tre modi per iniziare:

Percorso	Ideale per	Requisiti
App desktop	La maggior parte delle persone — zero configurazione	Nessuno. Basta scaricare e aprire.
Esegui dai sorgenti	Sviluppatori che vogliono leggere o modificare il codice	Node ~24, pnpm 10.33.x
Installa nel tuo agente	Chi vive nel terminale	Una CLI di coding-agent già esistente

Il percorso più rapido è l'app desktop — scaricala da open-design.ai/download; rileva automaticamente le CLI degli agenti già presenti nel tuo PATH. Per eseguire invece dai sorgenti:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Apri l'URL locale che stampa (usa una porta dinamica — non fissarla nel codice). Al primo avvio, indica a Open Design l'agente con cui vuoi guidare il lavoro, oppure usa la tua chiave API.

Passo 2 — Costruisci una landing page che converte

Questa è la prima demo di Sean, ed è il modello per tutto il resto:

1. Scegli un design system. Nella demo sceglie quello di Anthropic. È la tua barriera anti-slop — l'agente eredita la palette, la tipografia e il linguaggio dei componenti di quel brand.

La libreria di design system: ogni voce scompone un brand reale in palette, tipografia, componenti e atmosfera visiva che puoi riutilizzare.

2. Definisci nel prompt la struttura, non solo il mood. Sean specifica esattamente quali sezioni costruire — undici — e incolla l'executive summary del suo PRD (visione di prodotto, descrizione del problema, utente target, soluzione proposta, funzionalità principali) così che il testo abbia un contesto reale su cui lavorare.
3. Rispondi alle domande di scoperta. Proprio come Claude Design, Open Design pone domande di chiarimento prima di scrivere. Qui ricorre alla sua skill per landing page SaaS per l'esecuzione — e poiché le skill sono semplici file, potresti caricare al loro posto le tue linee guida di copywriting o la tua struttura di sezioni.
4. Lascialo lavorare. Circa cinque minuti dopo ha una prima bozza professionale — una vera struttura orientata alla conversione, una tabella comparativa pulita, una scheda case-study ben curata, una solida FAQ.

Vuoi un'atmosfera diversa? Sean rilancia lo stesso identico brief con un tono brutalista invece che editoriale e ottiene un design sensibilmente diverso — stessa struttura, pelle diversa, perché è il design system a fare il lavoro pesante.

Passo 3 — Costruisci un'app mobile, schermata per schermata

Per la demo mobile, Sean lavora una schermata alla volta. Mantiene lo stesso design system di Anthropic, poi per ciascuna schermata incolla un prompt costruito a partire dal suo PRD — un feed home, una schermata di raccomandazioni “colma le lacune”, un diario alimentare ad-hoc. L'agente pone le sue domande di chiarimento, abbozza un layout iOS e aderisce al design system scelto su tutte e tre le schermate.

La lezione: il modo in cui imposti nel prompt l'UX è gran parte del risultato. Quando riformula la stessa app come un'interfaccia di coaching chat-first, ottiene un insieme di schermate radicalmente diverso — ma comunque coerente. Il design system la mantiene in linea con il brand; il tuo prompt decide il paradigma.

La libreria di template: punti di partenza per prototipi, slide, immagini e video, filtrabili per tipo e pronti per un fork da cui iniziare.

Passo 4 — Passa al multimodale: dalle schermate all'app desktop

L'ultima demo mostra il trucco multimodale. Sean cattura screenshot delle sue tre schermate mobile, le inserisce in una nuova chat e formula una richiesta aperta: “abbozza una versione web app di questa funzionalità principale.” Cinque minuti dopo ha una pulita trasposizione desktop a tre pannelli — la navigazione a sinistra, la tela di lavoro al centro, una vista di avanzamento a destra — con anche le interazioni tramite slash-command abbozzate.

Persino un prompt vago più immagini di riferimento ti dà un punto di partenza utilizzabile. Con una specifica adeguata diventa più nitido, ma il concetto regge: puoi muoverti fluidamente tra le superfici.

Consigli

• Parti sempre da un design system. È la leva singola più potente contro l'aspetto da AI-slop.
• Definisci la struttura esplicitamente nel prompt. Elenca le sezioni o le schermate; incolla un contesto reale da un PRD così che il testo non sia vuoto.
• Appoggiati alle skill — e scrivi le tue. Le skill sono semplici file; carica le tue regole di copywriting o i tuoi paradigmi UX direttamente nel flusso di lavoro.
• Itera attraverso la conversazione. Inquadrature UX diverse producono risultati molto diversi; è una caratteristica, quindi provane qualcuna.
• Usa immagini di riferimento. Cattura screenshot di schermate esistenti e inseriscili per tradurre tra le superfici.
• Ricorda che l'output è HTML. È pensato per essere inserito in un progetto che hai già avviato.

FAQ

Devo usare un modello specifico? No. Open Design guida qualunque agente tu abbia configurato — Claude Code, Codex, Cursor, Gemini, OpenCode e altri — oppure la tua chiave API. Nessun lock-in del provider.

In cosa è diverso da Claude Design? Stessa sensazione familiare, ma gratuito, open-source, local-first, agnostico rispetto al modello e molto più personalizzabile — puoi aggiungere le tue skill e i tuoi processi. In più, generazione di immagini e video che uno strumento legato a un singolo provider non ti offre.

Posso unire ciò che costruisco in un'app esistente? Sì — gli output sono file HTML, quindi sono pensati per essere inseriti in un progetto che hai già avviato. Sean illustra i flussi di merge guidati dalla specifica in un video di accompagnamento.

È gratuito? L'app è open source sotto licenza Apache-2.0 ed è gratuita da eseguire in locale. Paghi solo per l'uso del modello e dei media dell'agente e dei provider che colleghi.

---

Questa guida scritta è basata sulle demo pratiche di Sean Kochel. Guarda il video completo qui sopra e iscriviti a Sean Kochel per altri workflow di build con l'AI.