Ho sostituito Claude Design con questa alternativa open source!

Questa guida ti mostra come far girare Open Design interamente sulla tua macchina — senza account cloud, senza fatturazione per design, senza che nulla esca dal tuo portatile. L'idea è abbinare Open Design a un runner di modelli locali (qualcosa come Ollama) e agli agenti di coding da riga di comando che hai già installato, così che la generazione avvenga in locale e il tuo lavoro resti privato. Segue il percorso adottato da AI Automation Station nel loro tutorial di configurazione locale, riscritto e aggiornato per allinearsi 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 in esecuzione in locale — i tuoi progetti, il tuo agente, la tua macchina.

Cos'è Open Design?

Open Design è una piattaforma di design open source e local-first — un'alternativa agent-native a Claude Design e Figma. Ciò che rende possibile una configurazione completamente locale è la sua architettura di base: invece di essere cablato a un singolo fornitore di modelli, Open Design gira sopra l'agente di coding che già usi. Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode e altri si collegano tutti. È "porta il tuo agente" anziché soltanto "porta la tua chiave".

Questo conta per questo tutorial perché, se l'agente che scegli gira in locale — un agente da riga di comando aperto che guida un modello locale tramite un runner come Ollama — allora l'intero ciclo resta sulla tua macchina. Nessun credito bruciato, nessun prompt spedito a un'API remota.

Alcune cose che vale la pena sapere:

• Open source, Apache-2.0 — clonalo, auto-ospitalo, leggi ogni riga.
• Gira in locale — i tuoi progetti vivono nelle tue cartelle, non nel cloud di qualcun altro.
• Agenti collegabili — sono supportati 21+ agenti di coding; scegli tu quale CLI guida la generazione.
• Più che prototipi — prototipi, artefatti live, presentazioni, layout da rivista, generazione di immagini e persino video, il tutto da un'unica area di lavoro.
• Punti di partenza reali integrati — design system modellati su marchi noti (Airbnb, Airtable e altri), oltre a template e preset di immagini, così da non ritrovarti mai davanti a una tela bianca.

Se hai usato Claude Design, la sensazione ti sarà familiare. Open Design mantiene quella stessa estetica pacata e gira nel browser proprio come Claude Design — poi però apre il motore sottostante così da poterci inserire qualunque agente preferisci.

Prima di iniziare

Hai tre modi per installare Open Design. Scegli quello che fa per te:

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

Il video prende la via dell'esecuzione dal sorgente, ma l'app desktop è il percorso consigliato oggi — non richiede né Node, né pnpm, né alcun clone.

Per una configurazione completamente locale, prima di iniziare vorrai avere installato anche un agente da riga di comando in grado di girare in locale — per esempio OpenCode, che include modelli gratuiti integrati e può puntare a un runner locale come Ollama. Open Design lo rileverà automaticamente non appena sarà nel tuo PATH.

Passo 1 — Installare Open Design

Opzione A — App desktop (consigliata, zero configurazione)

Vai su open-design.ai e clicca su Download desktop. Sono disponibili build per macOS (Apple Silicon e Intel), Windows (x64) e Linux (AppImage). Dopo l'installazione, l'app rileva automaticamente ogni CLI di agente di coding già presente nel tuo PATH e carica per te le skill e i design system integrati.

Opzione B — Eseguire dal sorgente

Per eseguirlo direttamente dal repository — come fa il video — ti bastano pochi comandi:

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

Poi apri l'URL locale che stampa nel terminale. Ti servono Node ~24 e pnpm 10.33.x; Corepack sceglierà per te la versione di pnpm fissata. La porta viene assegnata dinamicamente, quindi usa l'indirizzo che il comando mostra invece di indovinarne uno.

Opzione C — Installare nel tuo agente di coding

Per guidare Open Design dal terminale — richiamandolo come skill o server MCP all'interno del tuo agente, senza GUI — esegui:

od mcp install <agent>
# od ships with Open Design; <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Poi chiedi, all'interno dell'agente: Use open-design to generate a dense analytics dashboard with the Airbnb design system.

Primo avvio: collega il tuo agente locale

La prima volta che avvii Open Design, esso scansiona la tua macchina e mostra ogni agente da riga di comando che ha trovato — Claude Code, OpenCode, Codex, Gemini e altri. È questo il momento che rende reale un flusso di lavoro solo-locale: scegli quale agente genera i tuoi design.

• Scegli un agente locale per non spendere crediti. Claude Code è eccellente, ma attinge ai tuoi crediti Claude. Scegliere invece un'opzione gratuita e locale come OpenCode significa che la generazione gira sulla tua macchina gratis. OpenCode raggruppa diversi modelli gratuiti (MiniMax tra questi) e può collocarsi davanti a un runner locale come Ollama, così che il modello non lasci mai il tuo computer.
• Aggiungi chiavi API dei fornitori solo se vuoi. C'è un punto dove incollare le chiavi per Anthropic, OpenAI, Azure e Google Gemini se mai volessi ricorrere a un modello ospitato. Per un'esecuzione completamente locale, puoi saltare del tutto questo passaggio.
• Aggiungi fornitori di media (opzionale). Se vuoi generare immagini, video o audio, aggiungi le tue chiavi per quei fornitori. È questa la parte "porta la tua chiave" — ed è facoltativa.
• Attiva skill e design system. Abilita solo le capacità che ti servono per il lavoro che hai davanti.

Tutto qui può essere modificato in seguito, quindi mantieni semplice il primo passaggio: scegli il tuo agente locale e vai avanti.

Esplora l'area di lavoro

Open Design tiene il tuo lavoro circoscritto al progetto — i design che crei vivono dentro la cartella di progetto in cui stai lavorando. Cambia cartella e cambi progetto.

Avvia un nuovo prototipo (il video ne chiama uno "Tube Analytics") e ti si presenta subito una scelta: partire da un design system oppure lavorare a formato libero. Non sei obbligato a definire prima un design system. Puoi scegliere uno dei sistemi integrati — il sistema Claude/Anthropic, Airbnb, Airtable e altri — oppure importare uno ZIP di Claude Design così che tutti i tuoi token e componenti esistenti vengano portati con te.

La libreria di design system: punti di partenza reali di marchi che puoi visualizzare in anteprima, di cui puoi prendere il DESIGN.md e che puoi incastrare in qualsiasi progetto.

Qui c'è più dei soli sistemi di marca. Open Design include una galleria di design d'esempio che puoi visualizzare in anteprima prima di usarli — clicca su uno e si apre un'anteprima live insieme al prompt che lo ha prodotto. Premi Use prompt per partire da lì. Accanto a questi ci sono template di immagini che puoi forkare come punto di partenza.

Design d'esempio e template di immagini — visualizza in anteprima uno qualsiasi, poi forkalo o riusa il suo prompt.

Costruisci qualcosa — in locale

Ora la parte che dimostra che il ciclo locale funziona. Nel video, il creatore apre una dashboard di analytics SaaS e chiede a Open Design di estenderla.

1. Avvia il prototipo. Scegli un design system (o il formato libero) e, facoltativamente, importa il tuo ZIP di Claude Design così che l'agente abbia il contesto completo del tuo design esistente.
2. Allega un riferimento. Trascina o incolla immagini come riferimento visivo, oppure digita @ per allegare un file del progetto — per esempio un file "SaaS Analytics dashboard".
3. Scrivi il brief. Dagli un prompt concreto: "Build out the remaining tabs in the dashboard using your design system." Ottieni il familiare layout diviso — la conversazione a sinistra, l'anteprima live e i file di design a destra.
4. Guardalo girare sul tuo agente. Open Design richiama la CLI che hai scelto — OpenCode, nel video — e costruisce le nuove schermate. Poiché gira in locale tramite i modelli gratuiti di OpenCode, questo costa zero crediti: nulla viene addebitato a Claude, Gemini o Codex. Compaiono nuove schede (tendenze, generatori di script di contenuto, trascrizioni, commenti), stilizzate in modo da combaciare con il sistema esistente.
5. Esporta o esegui il deploy. Quando il design è pronto, chiedigli di scaricarlo come ZIP per consegnarlo alla tua codebase, oppure di eseguire il deploy direttamente su Vercel dall'interno di Open Design — qualcosa che Claude Design non offre. Per reintegrare le modifiche nella tua app, trascina lo ZIP in un agente di coding come Claude Code e di' "implement these design changes using the ZIP file."

Il risultato è un design reale e interattivo — costruito da cima a fondo sulla tua macchina, con il tuo agente, gratis.

Consigli

• Scegli un agente locale gratuito per una generazione senza costi. OpenCode con i suoi modelli gratuiti integrati (o un modello locale tramite Ollama) mantiene ogni esecuzione a zero crediti.
• Conserva le chiavi ospitate per quando ti servono. Incolla le chiavi Anthropic/OpenAI/Gemini solo se vuoi ricorrere a un modello premium; un agente locale non ne ha bisogno di nessuna.
• Non ti serve un design system per iniziare. Parti da uno integrato, importa uno ZIP di Claude Design oppure vai semplicemente a formato libero.
• I tuoi design restano con la cartella di progetto — organizza il lavoro eseguendo Open Design sulla directory giusta.
• L'esportazione è una consegna, non un lock-in. Scarica come ZIP, esegui il deploy su Vercel oppure dai in pasto i file a un agente di coding per integrarli nel tuo codice esistente.

FAQ

Posso davvero far girare Open Design senza alcun costo cloud? Sì. Open Design stesso è open source (Apache-2.0) e gratuito da eseguire. Se lo punti su un agente locale gratuito come OpenCode — eventualmente supportato da un runner locale come Ollama — la generazione avviene sulla tua macchina senza costi in crediti. Paghi solo se scegli di collegare un modello ospitato a pagamento o un fornitore di media.

Come mantengo tutto locale e privato? Scegli un agente da riga di comando locale durante il primo avvio anziché uno cloud. Poiché Open Design gira sopra l'agente che scegli, un agente locale e un modello locale fanno sì che i tuoi prompt e i tuoi design non lascino mai il tuo computer.

Quali agenti di coding supporta? 21+ agenti, tra cui Claude Code, Codex, Cursor, Gemini, GitHub Copilot e OpenCode. Open Design rileva le CLI già installate sulla tua macchina e ti lascia scegliere quale guida la generazione.

In cosa è diverso da Claude Design? La stessa sensazione familiare basata sul browser, ma open source, local-first e con agenti collegabili. Porti il tuo agente (locale o ospitato), non sei obbligato a definire un design system fin dall'inizio, e puoi fare cose extra che Claude Design non può — come il deploy diretto su Vercel e la generazione di slide, immagini e video dalla stessa area di lavoro.

---

Questa guida scritta si basa sul tutorial di configurazione locale di AI Automation Station. Guarda il video completo qui sopra e iscriviti ad AI Automation Station per altri tutorial pratici sugli strumenti di IA.