Dal prompt all’URL live — Modifica, ispeziona e pubblica con un clic con Open Design

Questa guida porta un prototipo dal prompt fino a un URL online: scegli un design system, genera, perfeziona con gli strumenti Edit e Inspect direttamente sulla canvas e poi pubblica subito su Vercel o Cloudflare Pages — senza mai uscire da Open Design. Si basa sulla demo che 01Coder realizza 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.

Lo spazio di lavoro di Open Design: descrivi ciò che vuoi costruire, scegli una modalità e il tuo agente fa il resto.

Che cos’è Open Design?

Open Design è una piattaforma di design open source e local-first che gira sopra l’agente di coding che già usi — Claude Code, Codex, Gemini, Hermes e altri — oppure sulla tua API key. Viene distribuita come app desktop (nessuna compilazione richiesta) e abbina una ricca libreria di skill a una ricca libreria di design system di livello brand, così parti da un’estetica reale invece che da una tela bianca.

• Open source, Apache-2.0 — clonalo, ospitalo in self-hosting o semplicemente scarica l’app.
• Gira in locale — i tuoi progetti vivono sulla tua macchina.
• Agente intercambiabile — cambia l’agente in basso a sinistra in qualsiasi momento.
• Design system di marchi reali — Apple, Airbnb, ElevenLabs e molti altri.

Passo 1 — Installa e scegli un design system

La via più semplice è l’app desktop da open-design.ai/download (macOS e Windows; Docker o pnpm se preferisci eseguirla dai sorgenti). All’avvio, l’angolo in basso a sinistra mostra l’agente attivo (01Coder usa Codex) — clicca per cambiarlo.

Crea un Prototype, dagli un nome e scegli un design system dal menu a tendina — ogni voce riveste l’output con il look di quel brand. Se hai già costruito qualcosa in Claude Design, importa qui il suo ZIP.

La libreria di plugin: installa skill direttamente dal registro — incluse skill di design anti-slop.

Passo 2 — Genera con la fase di discovery + una direzione visiva

Scrivi il tuo brief e invia. Open Design pone una breve serie di domande di discovery (per chi è, il tono del design, il contesto del brand, la lingua), poi propone un selettore di direzione visiva — 01Coder sceglie una direzione editoriale “FT Magazine”. Scegline una e costruirà la prima versione sulla destra.

Passo 3 — Rifinisci con Edit e Inspect

Qui è dove rifinisci senza rifare il prompt:

• Edit — clicca su qualsiasi elemento e cambiane il contenuto direttamente. 01Coder accorcia un’etichetta da “GitHub” a “GH” e riscrive una parola di un titolo, poi preme apply content. Puoi regolare i link allo stesso modo, e il pannello a sinistra mostra l’artefatto organizzato per livelli.
• Inspect — per lo stile visivo. La prima volta avverte che l’artefatto non ha tag data-oid; lascia che l’agente li aggiunga (è così che Open Design individua gli elementi in modo affidabile), poi ricarica. Ora cliccando su qualsiasi elemento (per esempio l’h1 dell’hero) puoi modificare colore, sfondo e dimensione del carattere, con un reset se esageri.

Per modifiche più grandi, torna nella chat per un editing conversazionale diretto — Edit/Inspect servono per le rifiniture rapide e chirurgiche.

Passo 4 — Pubblica su un URL live con un clic

Quando è pronto, il menu Share (in alto a destra) esporta in PDF, PPTX, ZIP o HTML autonomo — oppure pubblica su Vercel o Cloudflare Pages con un clic. Usando Cloudflare come fa 01Coder:

1. Clicca su deploy → Cloudflare, poi su get / create an API token.
2. Crea un token personalizzato con il permesso Cloudflare Pages, prosegui fino al riepilogo e crealo.
3. Incolla il token in Open Design, aggiungi il tuo account ID (copialo dalla dashboard di Cloudflare) e pubblica.
4. Apri il link che ti fornisce — se il primo caricamento sembra strano, aggiorna una o due volte mentre si propaga.

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

Non sei soddisfatto del risultato live? Torna nella chat, itera e ripubblica.

Consigli

• Parti da un design system così che la prima bozza sia già in linea con il brand.
• Lascia che l’agente aggiunga i tag data-oid prima di usare Inspect, poi ricarica l’anteprima.
• Usa Edit per i testi, Inspect per lo stile, la chat per la struttura — scegli lo strumento giusto per ogni modifica.
• Per il deploy su Cloudflare ti servono entrambi: un token API (con permesso Pages) e il tuo account ID.
• Aggiorna dopo il primo deploy se la pagina non si è ancora propagata.

FAQ

Posso davvero pubblicare su un URL pubblico da dentro Open Design? Sì — il menu Share pubblica su Vercel o Cloudflare Pages con un clic (il token del provider lo fornisci tu; Cloudflare ha bisogno anche del tuo account ID).

Che cos’è data-oid e perché Inspect lo richiede? È un attributo che Open Design aggiunge agli elementi per poterli individuare in modo affidabile. Lascia che l’agente lo aggiunga, ricarica e Inspect funziona.

Devo per forza eseguire dai sorgenti? No — scarica l’app desktop per macOS o Windows. Docker e pnpm dai sorgenti sono opzioni se preferisci.

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

---

Questa guida scritta si basa sulla demo pratica di 01Coder. Guarda il video completo qui sopra e iscriviti a 01Coder per altri approfondimenti sui prodotti IA.