Con quale agente di coding dovresti eseguire Open Design?

La prima vera decisione di Open Design non è cosa costruire, ma quale agente di coding lo guida. Questa guida si concentra su quella scelta: la (lunga) lista degli agenti supportati, come sceglierne uno e come configurare e costruire. Segue la guida pratica che Tony Xhepa propone nel suo video, riscritta e aggiornata alla versione attuale. Guarda il video qui sopra oppure prosegui la lettura per la versione scritta.

L'area di lavoro di Open Design: descrivi ciò che vuoi costruire, scegli una modalità e al resto pensa il tuo agente.

Perché l'agente è la scelta importante

Open Design non include un proprio modello: è una superficie open source, local-first, che gira su qualunque agente di coding tu abbia già. Quindi l'agente che scegli è il tuo motore di design: determina qualità, costo e velocità. Il bello è l'ampiezza. La lista degli agenti supportati di Tony è lunga: Claude Code, Codex, Devin for Terminal, Cursor, Gemini, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro — e altri. Qualunque cosa tu stia già usando, Open Design probabilmente la supporta, e se non ne hai nessuno installato puoi usare invece una chiave API Anthropic o OpenAI.

Come sceglierne uno

Un modo rapido per scegliere:

• Paghi già per una CLI di coding? Usala: Open Design si appoggia a quell'abbonamento, quindi niente seconda fattura.
• Vuoi il miglior risultato di design? Puntalo su un modello di primo piano (ad es. Claude Code su un modello capace) per la build iniziale.
• Lo vuoi economico o gratis? Il piano gratuito di Gemini CLI o i modelli inclusi in OpenCode funzionano bene; puoi anche portare la tua chiave.
• Ti importa della privacy/del locale? Qualsiasi CLI locale mantiene la generazione su credenziali che non lasciano mai la tua macchina.

Non sei vincolato: cambia l'agente attivo in seguito con un clic.

Passo 1 — Installare dai sorgenti

Open Design è un'app Next.js; il Quick Start è una manciata di 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 (una porta dinamica: non fissarla nel codice). Un punto che Tony sottolinea: richiede Node 24 — su Node 22 vedrai un avviso “unsupported engine”, quindi installa prima Node 24. Preferisci evitare il terminale? C'è un'app desktop su open-design.ai/download.

Passo 2 — Configurare la modalità di esecuzione (scegli il tuo agente)

Al primo avvio imposti la modalità di esecuzione: CLI locale, Anthropic API o OpenAI API. Scegli CLI locale e Open Design mostra quali agenti ha rilevato sulla tua macchina — Tony ha Codex, Gemini, OpenCode e Pi installati (Claude Code risulta non installato su quella macchina). Scegline uno (lui va di OpenCode), eventualmente scegli il modello, e Get started.

L'hub dei plugin: sfoglia il registry, importa i plugin e preparali per il tuo team.

Passo 3 — Crea il tuo primo design

Crea un Prototype, dagli un nome, scegli la fedeltà (alta) e parti da un brief suggerito (Tony sceglie una dashboard di analytics SaaS). Open Design esegue le domande di discovery (contesto del brand, fonte dati dei grafici, direzione visiva), tu rispondi, scegli una direzione e lui costruisce. L'artefatto finito ha un'anteprima, una vista del codice sorgente, i commenti e un menu Share — esporta come PDF, scarica, HTML autonomo, salva come template e altro.

La libreria di plugin: installa skill direttamente dal registry — comprese skill di design anti-slop.

Consigli

• Scegli l'agente per cui già paghi — nessun secondo abbonamento, ed è lui a fissare la tua qualità/costo.
• Installa prima Node 24 per evitare l'avviso di engine non supportata.
• Usa la modalità local CLI così che Open Design rilevi automaticamente gli agenti installati.
• Cambia agente quando vuoi — la scelta non è permanente; modificala con un clic.
• Nessuna CLI? Usa una chiave API (Anthropic o OpenAI).

FAQ

Quali agenti supporta Open Design? Tanti — Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen, GitHub Copilot CLI, Devin, Hermes, Kimi, Pi, Kiro e altri. Rileva automaticamente quelli installati sulla tua macchina.

Come ne scelgo uno? Usa la CLI per cui già paghi; scegli un modello potente per la build iniziale e uno più economico per l'iterazione; oppure usa un piano gratuito / la tua chiave API.

Perché l'avviso Node 24? Open Design richiede Node 24; su Node 22 vedrai un avviso “unsupported engine”. Installa Node 24 per eliminarlo.

È gratuito e open source? Sì — Apache-2.0, local-first. Eseguilo gratis; paghi solo per l'uso del modello dell'agente o della chiave che colleghi.

---

Questa guida scritta è basata sulla guida pratica di Tony Xhepa. Guarda il video completo qui sopra e iscriviti a Tony Xhepa per altri strumenti di sviluppo open source.