Progetta con Open Design un sito in linea con il tuo brand esistente

Questa guida si concentra su un trucco di punta di Open Design: puntalo al tuo sito esistente e l'agente estrae il tuo vero brand — font, colori, tono — in una specifica, poi progetta con la tua voce. Copre anche l'installazione desktop in un clic e una lettura sincera del perché rivolgersi a un'alternativa aperta. Segue la costruzione pratica che Brendan O'Connell realizza nel suo tutorial, riscritta e aggiornata alla versione attuale. Guarda il video qui sopra per l'esecuzione dal vivo, oppure prosegui con la versione scritta.

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

Cos'è Open Design?

Open Design è una piattaforma di design open source e local-first che gira sopra l'agente di codice che già usi — Claude Code, Codex, Cursor, Gemini, OpenCode e altri — o con la tua chiave API. È in sostanza un'area di lavoro in stile Claude Design che esegui sulla tua macchina, senza restare vincolato al cloud di un singolo fornitore e senza i tetti d'uso di quello strumento. È Apache-2.0, arriva con un'ampia libreria di skill e design system e ci aggiunge sopra la generazione di media (immagini, video, audio).

Perché rivolgersi a un'alternativa aperta

La motivazione di Brendan è concreta e vale la pena ripeterla perché, per molti, è il fattore decisivo. Ha generato un singolo design system nello strumento cloud chiuso e si è mangiato circa il 75% del suo limite settimanale — lasciandolo bloccato fino alla settimana successiva. Quel limite è separato dalla normale quota del piano, il che rende il flusso di lavoro al limite dell'inutilizzabile per un'iterazione reale. Eseguirlo sul tuo abbonamento Claude Code (o qualunque altro) abbatte quel muro: non sbatti contro un tetto di design separato e non resti chiuso in un solo ecosistema.

Passo 1 — Installa (la via in un clic)

La strada più semplice, e quella che Brendan consiglia, è l'app desktop: vai su open-design.ai/download e scarica l'eseguibile per macOS o Windows. L'app è operativa in poco tempo e rileva automaticamente le CLI degli agenti già presenti sulla tua macchina — Brendan non ha configurato nulla; ha riconosciuto il suo abbonamento Claude Code ed era pronta all'uso.

Preferisci il terminale? Dai 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 una nel codice). Sulla destra trovi le impostazioni: gli agenti rilevati, oltre ai provider di media (OpenAI per le immagini, MiniMax per i video, ElevenLabs per la voce), i connettori (Composio MCP) e perfino i pet da desktop. Puoi anche usare la tua chiave per qualsiasi provider.

Passo 2 — Progettare a partire dal tuo brand esistente

Questo è il trucco che da solo vale il prezzo del biglietto. Crea un progetto, scegli alta fedeltà e, nel tuo brief, digli di progettare per il tuo sito esistente. L'agente dispone di uno strumento di recupero web, quindi andrà a leggere il tuo sito live e ne ricaverà una specifica di brand.

Nel video, Brendan lo punta al proprio sito e Open Design:

1. Recupera la pagina ed estrae i contenuti reali.
2. Scrive un brand-spec.md che cattura il suo font reale (ha riconosciuto correttamente Fig Tree), il suo colore e le sue scelte di design — «niente pulsanti a pillola, niente card completamente arrotondate, colore d'accento usato con parsimonia, spazi bianchi generosi» — oltre al suo tono di voce («niente marketing trafelato»).
3. Genera un DESIGN.md e costruisce la pagina con quella voce, fondendo il suo brand esistente con un layout più pulito.

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

Prima di costruire, Open Design esegue un breve modulo di discovery (una sola pagina o qualche pagina? direzione visiva? combaciare con il sito attuale? segnaposto realistici?) così da bloccare la direzione giusta. Il risultato conserva il suo slogan, il suo blu e il suo font, poi vi sovrappone un layout più incisivo — un output multipagina che puoi sfogliare cliccando.

Passo 3 — Rivedere l'autocontrollo anti-slop ed esportare

Mentre conclude, Open Design esegue un autocontrollo anti-slop — Brendan lo vede confermare «niente emoji, un solo carattere, un tocco decisivo, testi di posizionamento reali ovunque». È la barriera che impedisce all'output di sembrare generato.

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

Sfoglia le schede esempi e design system per trovare punti di partenza (ogni design system ti dà un DESIGN.md completamente modificabile) e, quando sei soddisfatto, esporta l'artefatto come HTML, PDF o uno ZIP. Poiché tutto gira localmente sul tuo agente, non c'è alcun tetto di design separato contro cui sbattere mentre iteri.

Consigli

• Puntalo al tuo sito live per ereditare i tuoi font, colori e tono reali — la via più rapida a un risultato fedele al brand.
• Usa l'app desktop per la via senza configurazione; rileva il tuo agente automaticamente.
• Esegui sul tuo abbonamento CLI per schivare il tetto settimanale di design separato degli strumenti chiusi.
• Leggi i brand-spec.md / DESIGN.md generati — sono file modificabili, quindi correggi tutto ciò che l'estrazione ha colto in modo errato.
• Investi un po' nel prompt — un brief più ricco produce una prima bozza nettamente migliore.

FAQ

Può davvero progettare a partire dal mio sito esistente? Sì — l'agente ha uno strumento di recupero web. Digli di progettare per il tuo sito ed estrarrà i tuoi font, colori, scelte di layout e tono in un brand-spec.md, poi progetterà con quella voce.

Devo configurare il mio agente? Di solito no. L'app desktop rileva automaticamente le CLI degli agenti già installate (Claude Code, Codex, Gemini e altri). Puoi anche usare la tua chiave.

Ha i limiti d'uso dello strumento chiuso? Nessun tetto di design separato — la generazione si appoggia a qualunque agente/abbonamento colleghi, quindi non vieni bloccato dopo un solo design.

È gratis? L'app è open source sotto Apache-2.0 e gratuita da eseguire localmente. Paghi soltanto l'uso di modello e media dell'agente e dei provider che colleghi.

---

Questa guida scritta è basata sul tutorial di Brendan O'Connell. Guarda il video completo qui sopra e iscriviti al canale di Brendan O'Connell per altre analisi di strumenti open source.