ADDIO Claude Design! Questo è il MIGLIOR generatore di UI con IA open source

Questa guida è pensata per gli utenti Windows che vogliono eseguire Open Design sulla propria macchina — niente account cloud, nessun credito mensile da consumare. Segue il percorso adottato da AI Automation nella loro guida all'installazione su Windows, riscritta e aggiornata alla versione attuale così da poterla seguire comando per comando. Guarda il video qui sopra per la dimostrazione dal vivo, oppure prosegui con la versione scritta.

Open Design in esecuzione locale su Windows: uno spazio di lavoro di design open source e agent-native sotto il tuo pieno controllo.

Cos'è Open Design?

Open Design è una piattaforma di design open source e local-first — un'alternativa agent-native a Claude Design e Figma. Invece di vincolarti a un singolo fornitore di modelli, gira sopra l'agente di programmazione che già usi: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode e una dozzina di altri. È “porta il tuo agente” più che semplicemente porta la tua chiave.

Alcuni motivi per cui vale la pena dargli un'occhiata:

• Open source, Apache-2.0 — clonalo, ospitalo in autonomia, leggi ogni riga.
• Gira localmente — i tuoi progetti vivono nelle tue cartelle sulla tua macchina, non nel cloud di qualcun altro.
• Agente intercambiabile — sono supportati oltre 21 agenti di programmazione; scegli tu quale CLI guida la generazione, e la qualità del risultato segue il modello che selezioni.
• Più dei semplici prototipi — prototipi, artefatti dal vivo, presentazioni, layout in stile rivista, generazione di immagini e perfino video, tutto da un unico spazio di lavoro.
• Una libreria integrata di design system e template, così non parti da una tela bianca.

Se hai usato Claude Design, la sensazione ti sarà subito familiare — Open Design mantiene la stessa estetica pacata, poi vi aggiunge funzionalità (e la tua scelta del modello).

Prima di iniziare

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

Percorso	Ideale per	Requisiti
App desktop (Windows x64)	La maggior parte degli utenti Windows — zero configurazione	Nessuno. Scarica e apri.
Esecuzione da sorgente (WSL)	Sviluppatori che vogliono leggere o modificare il codice	WSL2 + Ubuntu, Node ~24, pnpm 10.33.x
Installazione nel tuo agente	Chi vive nel terminale	Una CLI di un agente di programmazione già esistente

Il video usa il percorso da sorgente tramite WSL, ottimo se vuoi muoverti dentro il repository. Ma per la maggior parte delle persone la build desktop nativa per Windows è il percorso consigliato — esiste un installer per Windows (x64) che non richiede WSL, né Node, né clonazione. Questa guida copre entrambi; la procedura WSL qui sotto è per quando vuoi specificamente il percorso da sorgente.

Passo 1 — Configura WSL

Se vuoi solo l'app desktop, salta al Passo 2, Opzione A. Se vuoi il percorso da sorgente, ti serve prima un ambiente Linux dentro Windows. È esattamente ciò che fornisce WSL (Windows Subsystem for Linux) — una vera shell Ubuntu in esecuzione affiancata a Windows, senza dual-boot e senza macchine virtuali da gestire.

1. Installa WSL e Ubuntu. Apri PowerShell ed esegui wsl --install — questo abilita WSL2 e installa Ubuntu per impostazione predefinita. Riavvia se Windows lo richiede, poi avvia Ubuntu dal menu Start e imposta il tuo nome utente e password Linux alla prima apertura. (Hai già Ubuntu da un altro strumento? Riutilizzalo — non c'è bisogno di ripetere questa operazione.)

2. Aggiorna i pacchetti di base. Dentro la shell Ubuntu, aggiorna l'indice dei pacchetti e installa l'essenziale:

sudo apt update && sudo apt install -y curl git

Suggerimento per la risoluzione dei problemi dal video: se un passaggio successivo genera uno strano errore, riavvia in modo pulito la tua istanza Linux — da PowerShell esegui wsl --shutdown, poi riapri Ubuntu. Un riavvio da zero risolve la maggior parte degli intoppi al primo avvio.

3. Installa Node 24. La build da sorgente punta a Node ~24. Una Ubuntu pulita non ha ancora nvm, quindi installalo prima, poi usalo per ottenere Node 24:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc            # carica nvm nella shell corrente
nvm install 24
nvm use 24
node --version              # dovrebbe stampare v24.x

Con Ubuntu configurato e Node 24 attivo, sei pronto a installare Open Design.

Passo 2 — Installa Open Design

Opzione A — App desktop per Windows (consigliata, zero configurazione)

Vai su open-design.ai e fai clic su Download desktop. Esiste una build nativa per Windows (x64) (insieme a macOS e Linux). Esegui l'installer, apri l'app e questa rileva automaticamente ogni CLI di agente di programmazione già presente nel tuo PATH, poi carica per te le skill integrate e i design system. Niente WSL, niente terminale — è il percorso più semplice su Windows.

Opzione B — Esecuzione da sorgente (dentro WSL)

Questo è il percorso che dimostra AI Automation. Lavorando dentro la tua shell Ubuntu con Node 24 attivo, clona il repository e avvia il runtime web:

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

corepack enable consente a Corepack di selezionare la versione di pnpm fissata nel repository (10.33.x), così non devi installare pnpm da solo. pnpm install scarica le dipendenze e compila le parti native — al primo avvio può richiedere un paio di minuti, il che è previsto, non un errore. pnpm tools-dev run web avvia poi il daemon locale e il server web.

Quando finisce, il comando stampa un URL locale — copialo e incollalo nel tuo browser Windows. WSL inoltra automaticamente la porta verso Windows, così l'app si apre senza problemi.

Importante: la porta viene assegnata dinamicamente all'avvio — leggi l'indirizzo effettivo che il comando stampa. Non dare per scontata una porta fissa; l'indirizzo può variare sulla tua macchina e tra un'esecuzione e l'altra.

Opzione C — Installazione nel tuo agente di programmazione (WSL)

Preferisci saltare la GUI e richiamare Open Design come server MCP dentro il tuo agente? Su WSL c'è prima un passaggio extra. Linux include già /usr/bin/od (lo strumento octal-dump), che oscura l'od di Open Design — quindi od mcp install … fallirebbe altrimenti con “file not found” per mcp/install. Aggiungi un piccolo wrapper che punta od al tuo clone e mettilo per primo nel PATH:

mkdir -p ~/.local/bin
cat > ~/.local/bin/od <<'EOF'
#!/usr/bin/env bash
repo="$HOME/open-design"     # il clone ~/open-design dell'Opzione B
cd "$repo" || exit 127
exec corepack pnpm exec od "$@"
EOF
chmod +x ~/.local/bin/od
export PATH="$HOME/.local/bin:$PATH"
hash -r
type -a od                   # ora dovrebbe vincere l'od di Open Design

Poi collegalo al tuo agente:

od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Poi, dentro l'agente, basta chiedere: Use open-design to generate a landing page with the Airbnb design system.

Primo avvio: collega il tuo agente di programmazione

La prima volta che lo spazio di lavoro si carica, Open Design analizza il tuo ambiente e mostra ogni CLI trovata. Poiché WSL è una vera macchina Linux, rileva gli agenti installati dentro Ubuntu — quindi una CLI Gemini o un altro agente che vive in WSL viene individuato lì. Fai clic su rescan se qualcosa non compare ancora.

• Scegli un agente e un modello predefiniti. Lascia che la CLI installata guidi la generazione, oppure puntala su un fornitore e un modello specifici. Come sottolinea il video, un modello più potente significa un risultato sensibilmente migliore, quindi affidati a uno capace quando il risultato conta.
• Aggiungi fornitori di media (facoltativo). Per generare immagini, video o audio, incolla le tue chiavi API — bring-your-own-key, solo per i fornitori che usi davvero.
• Collega i servizi MCP (facoltativo). Collega i connettori se vuoi che l'agente attinga ad altre fonti.
• Imposta le preferenze. Lingua, aspetto, notifiche — perfino un pet sul desktop. Puoi modificare tutto questo in seguito, quindi al primo giro mantieni la semplicità.

Esplora lo spazio di lavoro

Open Design mantiene il tuo lavoro circoscritto al progetto: quando lo esegui su una cartella, i design che crei vivono dentro la directory di quel progetto. Il tuo primo elenco di progetti sarà vuoto — è normale.

Dentro un progetto puoi creare prototipi, presentazioni, immagini, video e altro. Due punti di partenza fanno sparire la tela bianca:

La libreria di design system: scegli un vero look di brand — Airbnb, Airtable e molti altri — e Open Design porta i suoi token, colori e tipografia nel tuo design.

• I design system catturano il look di un brand come un DESIGN.md di token — colori primari e secondari, tipografia, spaziatura. Vedine l'anteprima e puoi costruirci direttamente sopra invece di definire una palette da zero.
• I template coprono prototipi, presentazioni e generazione sia di immagini sia di video. Filtra per tipo e fai il fork di uno qualsiasi come punto di partenza.

Template: punti di partenza per prototipo, presentazione, immagine e video — filtra per tipo e fai il fork per iniziare.

Puoi sfogliare l'intera libreria sul web su open-design.ai/plugins prima di installare qualsiasi cosa.

Crea qualcosa

Ecco il flusso che esegue AI Automation, riscritto per la versione attuale:

1. Scegli un design system. Scegline uno che ti piace — diciamo Airbnb — e aprilo per esaminarne il DESIGN.md e i token.
2. Importalo come punto di partenza. Usa Share → Download as ZIP, poi nel tuo progetto scegli Import flat design ZIP. Il design compare nello spazio di lavoro, pronto su cui costruire.
3. Indica la modifica che vuoi. Scrivi un brief in linguaggio naturale — “Puoi rendere lo sfondo scuro?” — e invialo. L'agente legge il design system, pianifica il lavoro e produce una nuova versione dell'artefatto.
4. Itera liberamente. Cambia i font, aggiungi o rimuovi un logo, carica i tuoi asset e falli posizionare nei punti giusti. Ogni prompt produce una nuova interpretazione da tenere o scartare.
5. Esporta quando sei soddisfatto. Premi Share e scarica il risultato come ZIP.

Il risultato è un design reale e modificabile guidato dal modello che hai collegato — quindi un agente capace ripaga direttamente in ciò che ottieni.

Consigli per sfruttarlo al meglio

• Scegli un modello potente. La qualità del risultato segue l'agente che colleghi — un modello gratuito va bene per imparare il flusso, ma per il lavoro vero vale la pena usarne uno capace.
• Leggi ogni volta l'URL stampato. L'indirizzo locale è dinamico; copia ciò che tools-dev stampa invece di riutilizzare un vecchio link.
• Installa i tuoi agenti dove Open Design cercherà. Esegui da sorgente in WSL? Installa le tue CLI dentro Ubuntu così lo spazio di lavoro le rileva; l'app desktop legge il tuo PATH di Windows.
• Non ti serve un design system per iniziare. Parti da uno integrato, importa uno ZIP o lascia che Open Design deduca i valori predefiniti. I tuoi design restano con la cartella del progetto, quindi organizza il lavoro eseguendolo sulla directory giusta.

FAQ

Open Design è gratuito? Sì — è open source sotto licenza Apache-2.0. Puoi eseguirlo localmente gratis; paghi solo per l'uso del modello/API di qualunque agente e fornitore di media colleghi.

Dovrei usare WSL o l'app desktop per Windows? Per la maggior parte delle persone, la build desktop nativa per Windows (x64) è più semplice — niente WSL, niente Node, niente clonazione. Usa il percorso da sorgente WSL quando vuoi specificamente leggere o modificare il codice. Nota che WSL2 è un percorso supportato in via primaria, mentre Windows-native è best-effort; se incontri attriti con uno, prova l'altro.

Quali agenti di programmazione supporta? Oltre 21 agenti, inclusi Claude Code, Codex, Cursor, Gemini, GitHub Copilot e OpenCode. Open Design rileva le CLI già installate sulla tua macchina — dentro WSL per il percorso da sorgente, o sul tuo PATH di Windows per l'app desktop.

In cosa è diverso da Claude Design? Stessa sensazione familiare, ma open source, local-first e con agente intercambiabile — quindi non sei vincolato a un solo modello né consumi un pool di crediti fisso. Va anche oltre i prototipi con presentazioni, layout in stile rivista, generazione di immagini e video.

---

Questa guida scritta è basata sulla guida all'installazione su Windows di AI Automation. Guarda il video completo qui sopra e iscriviti ad AI Automation per altri video pratici sugli strumenti di IA.