Progetta con la qualità di Claude Design senza bruciare token

Questa guida affronta il tema del costo di petto: se hai usato uno strumento di design cloud chiuso, conosci la magia, e sai quanto in fretta finiscono i token. Open Design ti permette di progettare con una qualità simile facendo girare il lavoro attraverso qualsiasi modello tu voglia — l’agente che già paghi, o la tua chiave — così non devi razionare un budget di design separato. Segue la costruzione che Roy Shavit esegue nella sua dimostrazione, riscritta in inglese e aggiornata alla versione attuale. Guarda il video qui sopra per la prova dal vivo, o continua a leggere per la versione scritta.

La galleria HyperFrames: contenuti di motion e video guidati dal codice, da forkare e remixare.

Che cos’è Open Design?

Open Design è una piattaforma di design open source e local-first. Come lo strumento cloud chiuso, gli dai un prompt e ricevi un artefatto reale — una landing page, un’app o un deck — sotto forma di HTML modificabile su cui puoi continuare a lavorare in VS Code o nel tuo editor. Tre cose lo distinguono, e le prime due sono il motivo per cui costa meno gestirlo:

• È open source (Apache-2.0) — leggi il codice, fanne un fork, ospitalo tu stesso.
• Gira sul tuo computer — i file restano sulla tua macchina; nulla va su un cloud di terze parti.
• Usa qualsiasi modello tu voglia — Codex, Claude o oltre 15 altri modelli tramite la tua CLI esistente, o la tua chiave API (BYOK).

La questione del costo: smetti di razionare i token

L’impostazione di Roy è schietta ed è proprio il punto: uno strumento di design cloud chiuso brucia la sua dotazione di token molto in fretta, così finisci per razionare il tuo lavoro di design. Open Design rimuove quel tetto perché la generazione gira attraverso l’agente/abbonamento che hai già, o una chiave che controlli tu. Decidi tu il compromesso costo/qualità per ogni progetto — un modello economico per le bozze, un modello di punta per la passata finale — invece di essere contabilizzato dal tetto di design separato di qualcun altro. Il self-hosting significa anche che il lavoro avviene sulla tua macchina, il che mantiene tutto leggero.

Passo 1 — Installa e rileva i tuoi modelli

La via più semplice è l’app desktop: vai su open-design.ai/download, scegli il tuo sistema operativo, scaricala e trascinala dentro. Preferisci i 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 (una porta dinamica — non fissarne nessuna nel codice). Nelle impostazioni, Open Design riconosce immediatamente i modelli installati localmente — Roy ha Codex e Claude, e rileverebbe anche OpenCode o altri. Imposta un modello predefinito, o porta la tua chiave da qualsiasi provider così da non aver nemmeno bisogno di una CLI installata. È questa l’unicità: non sei costretto a un unico fornitore.

Modalità presentazione: scegli una categoria di presentazione e fai il fork di un esempio come punto di partenza.

Passo 2 — Costruisci una landing page, itera a basso costo

Roy costruisce una landing page per un servizio di game streaming. Invia il brief, Open Design restituisce un modulo di scoperta (tipo di output, pubblico, direzione del brand, ambito, livello di movimento), lui risponde e lo costruisce — qui girando su Claude Opus perché è ciò che la sua CLI è impostata a usare. Il risultato è una solida prima versione: hero, numeri della demo, supporto alle piattaforme, una pagina prezzi, testimonianze, FAQ — responsive su desktop, tablet e telefono.

Gli strumenti di iterazione mantengono basso il costo delle modifiche: seleziona un’area e aggiungi una nota, lascia un commento, o fai editing inline per cambiare il testo direttamente. Passa alla vista codice per vedere l’HTML generato e i file di design. Quando sei soddisfatto, il pulsante Condividi esporta in PDF o fa il deploy diretto su Vercel o Cloudflare Pages (incolla il tuo token e il sito va online), oppure clicchi verso il sorgente e continui a lavorare in VS Code, Cursor o nel tuo editor.

Un vero prototipo generato, mostrato nell'anteprima: una landing page d'agenzia scura e cinematografica.

Passo 3 — Oltre le pagine: genera un video

Open Design non si limita al design statico. Roy usa la skill di motion hyperframes per generare un grafico a barre animato in stile New York Times — ci vogliono pochi minuti e produce un vero MP4 che puoi inserire in un video più lungo o usare come spezzone brandizzato. Ci sono inoltre oltre 170 plugin di design system tra cui scegliere (Apple, PlayStation e altri), e poiché la libreria è aperta, la community continua ad ampliarla.

Quando usare cosa (il giudizio onesto)

Roy è equo su questo. Affidati a Open Design quando vuoi flessibilità di modelli, costi più bassi o self-hosting — il lavoro resta sulla tua macchina e gira sul modello che scegli, compreso uno di terze parti. Affidati allo strumento cloud chiuso quando vuoi una configurazione minima, senza installazione, e il minimo sforzo per iniziare — e tieni presente che è ancora un po’ più rifinito out of the box. Stesso contenuto, una finitura leggermente superiore là; qui molto più controllo e costi di gestione inferiori.

Consigli

• Fai girare sull’agente che già paghi (o BYOK) per sfuggire a un tetto di token separato.
• Abbozza su un modello economico, rifinisci su uno potente — controlli tu la manopola costo/qualità per ogni progetto.
• Usa l’editing inline e i commenti per area per modifiche economiche e chirurgiche invece di rigenerazioni complete.
• Esporta in codice o fai il deploy su Vercel/Cloudflare direttamente da Condividi quando hai finito.
• Prova la skill hyperframes quando ti serve movimento/video, non solo pagine statiche.

FAQ

In che modo questo fa risparmiare token rispetto a uno strumento cloud chiuso? La generazione gira attraverso il tuo agente/abbonamento o la tua chiave API, quindi non c’è un budget di design separato contabilizzato da esaurire — scegli tu il modello e il costo.

Posso continuare a lavorare l’output nel mio editor? Sì — l’output è HTML/file modificabili. Clicca verso il sorgente e continua in VS Code, Cursor o qualsiasi editor, oppure fai il deploy su Vercel/Cloudflare Pages.

Può fare più delle sole pagine web? Sì — prototipi, deck, immagini e video (tramite la skill di motion hyperframes), oltre a una vasta libreria di design system.

È gratis? L’app è open source sotto Apache-2.0 e gratuita da eseguire localmente. Paghi solo per l’uso di modello e media dell’agente e della chiave che colleghi.

---

Questa guida scritta è basata sulla dimostrazione di Roy Shavit. Guarda il video completo qui sopra e iscriviti a Roy Shavit per altri contenuti pratici sulla costruzione con l’IA.