Open Design — un primo sguardo onesto (bug, soluzioni e configurazione con qualsiasi modello)

Questa guida è uno sguardo volutamente onesto a Open Design: le parti che funzionano subito e le spigolature in cui ti imbatterai, mostrate dal vivo anziché tagliate in fase di montaggio. Affronta anche un trucco davvero utile: collegare qualsiasi modello a basso costo tramite un provider compatibile con OpenAI. Si basa sulla prova pratica che Sasha (ИИШНЫЙ) registra nella sua guida video, adattata per questa guida scritta e aggiornata 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: descrivi ciò che vuoi costruire, scegli una modalità e il tuo agent fa il resto.

Che cos'è Open Design?

Open Design è una piattaforma di design open source e local-first — un'alternativa agent-native a Claude Design. Il problema della «pappa viola dell'IA» (ogni UI generata che si somiglia) è esattamente ciò che strumenti come questo cercano di risolvere, e la risposta di Open Design è girare sopra l'agent di programmazione che già usi invece di proporre un modello proprio. Rileva Claude Code, Codex, Cursor, Gemini, OpenCode e altri sulla tua macchina e li usa come motore. L'inquadramento di Sasha: ha raccolto decine di migliaia di stelle su GitHub nella prima settimana perché è gratuito, aperto e non vincolato a un singolo provider.

• Open source, Apache-2.0 — clonalo, leggilo, ospitalo in self-hosting.
• Gira in locale — i tuoi progetti sono cartelle sulla tua macchina.
• Qualsiasi agent, qualsiasi modello — inclusa la tua API key tramite qualsiasi provider compatibile con OpenAI.
• Una ricca libreria di competenze di design e design system integrata.
• Più dei prototipi — presentazioni, immagini, persino video.

Passo 1 — Installare e configurare

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 scriverla fissa nel codice). Preferisci zero configurazione? Scarica l'app desktop da open-design.ai/download. Al primo avvio la pagina delle impostazioni rileva le CLI degli agent sulla tua macchina — Sasha usa Codex — e ti permette di impostare un modello predefinito, aggiungere provider di media (MiniMax, OpenAI GPT Image e altri), collegare fonti dati, cambiare lingua e scegliere un tema.

Passo 2 — Usa qualsiasi modello tramite un provider compatibile con OpenAI

Questa è la pepita più utile della recensione di Sasha. Oltre alle CLI rilevate, Open Design ti permette di portare la tua key per qualsiasi API compatibile con OpenAI — il che significa che puoi instradare tramite un aggregatore come OpenRouter e usare quasi qualsiasi modello, spesso a costo inferiore:

1. Presso il tuo provider, crea una API key e copiala.
2. Nelle impostazioni di Open Design, scegli il tipo di provider OpenAI (OpenRouter e aggregatori simili parlano l'API OpenAI).
3. Incolla la key e, fondamentale, cambia la base URL con l'endpoint del tuo provider (ad es. la base URL di OpenRouter), poi scegli il modello desiderato.
4. Salva — la generazione ora viene instradata tramite quel provider.

Un inghippo in cui incappa Sasha: la selezione del modello cambia in modo globale, non per progetto, quindi se la generazione di media si rompe dopo il cambio, è perché il provider di immagini ha seguito il cambio di modello. Imposta in modo esplicito le key dei tuoi provider di media.

Passo 3 — Costruisci un prototipo (spigoli inclusi)

Crea un progetto, scrivi il tuo brief, scegli alta fedeltà e invia. Open Design esegue prima un modulo di scoperta — adatta le domande al tuo prompt (piattaforma di destinazione, per chi è, tono, animazione, vincoli), poi un selettore di direzione visiva (tipografia + palette), quindi costruisce. L'output è un prototipo vivo e interattivo con controlli integrati — l'app generata da Sasha ti permette di attivare le animazioni e cambiare il colore d'accento direttamente sulla pagina.

Un vero prototipo generato, renderizzato nell'anteprima — una landing page di agenzia scura e cinematografica.

Avvertenze oneste che Sasha mostra davanti alla telecamera (e come gestirle):

• Potrebbe scegliere di default la competenza sbagliata. Se inizia a costruire un «checkpoint/blog» quando volevi un'app mobile, diglielo esplicitamente: «usa la competenza mobile-app / front-end». Imposta la competenza prima di generare.
• Inspect ha bisogno dei tag data-oid. Lo strumento Inspect sulla tela richiede che l'artefatto sia taggato; se dice che non riesce a selezionare gli elementi, chiedi all'agent di «ricostruire il prototipo con i tag data-oid», poi ricarica.
• È giovane e rilascia in fretta. Aspettati glitch occasionali (la navigazione che scompare dopo una modifica, ecc.) — il progetto si aggiorna quasi ogni giorno, quindi rifai il pull spesso.

Passo 4 — Gli strumenti sulla tela (il vero richiamo)

Una volta taggato, il ciclo di modifica è il punto forte. Inspect ti permette di passare sopra qualsiasi elemento e regolare direttamente colore, dimensione e stile. Edit ti permette di riscrivere il testo inline (niente andirivieni con la chat per cambiare una sola parola). Comment/picker ti permette di selezionare un'area, disegnare e inviare una nota all'agent («trasforma questo menu in un carosello scorrevole con una barra di avanzamento»). È il ciclo di feedback rapido e visivo che è scomodo da riprodurre con un semplice agent in un terminale.

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

Quando hai finito, Share esporta in PDF, PPTX, HTML autonomo o markdown — oppure fa il deploy su Vercel con un clic. Il verdetto onesto di Sasha: per presentazioni e pagine lead-magnet è già un comodo mini-builder; per la prototipazione di app/siti complessi aspettati una vera iterazione. Dato che ha solo una settimana e si aggiorna di continuo, le fondamenta sono solide.

Consigli

• Collega OpenRouter (o qualsiasi provider compatibile con OpenAI) per usare modelli più economici o diversi — ricordati di cambiare la base URL.
• Imposta la competenza in modo esplicito prima di generare, così non sceglie di default il template sbagliato.
• Richiedi i tag data-oid se Inspect non riesce a selezionare gli elementi, poi ricarica.
• Affidati a Inspect/Edit/Comment per ritocchi visivi rapidi invece di rifare il prompt in chat.
• Rifai il pull spesso — il progetto rilascia correzioni quasi ogni giorno.

FAQ

Posso usare un modello diverso da Claude — e pagare meno? Sì. Punta Open Design verso qualsiasi CLI rilevata, oppure porta la tua key per qualsiasi provider compatibile con OpenAI (ad es. OpenRouter) impostando la key e la base URL — questo apre quasi qualsiasi modello.

Inspect/edit non seleziona gli elementi — perché? L'artefatto ha bisogno dei tag data-oid. Chiedi all'agent di ricostruire il prototipo con essi, poi ricarica l'anteprima.

È pronto per la produzione? È agli inizi e itera in fretta. È già ottimo per deck e pagine lead-magnet; per app complesse, tratta l'output come una solida bozza che affini.

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

---

Questa guida scritta si basa sulla recensione pratica di Sasha (ИИШНЫЙ). Guarda il video completo qui sopra e iscriviti a ИИШНЫЙ per altri test onesti e non montati di strumenti di IA.