Trasforma un'immagine di riferimento in una pagina reale con Open Design (gratis tramite Gemini)

Questa guida riguarda un workflow di Open Design specifico e poco sfruttato: partire da un'immagine di riferimento. Trova un design che ti piace — uno shot di Dribbble, lo screenshot di un sito qualsiasi — inseriscilo, e Open Design costruisce una pagina reale in quel linguaggio visivo. E puoi eseguire l'intero processo gratis sul piano gratuito di un agente di coding. Segue la guida che Compile Future propone nel loro video, riscritta e aggiornata alla versione attuale. Guarda il video qui sopra, oppure continua a leggere 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.

Cos'è Open Design?

Open Design è una piattaforma di design open source e local-first — un'alternativa a Claude Design che gira sulla tua macchina. La differenza principale: invece di essere vincolato a un solo modello, pilota l'agente di coding che già usi — Claude Code, Codex, Cursor, Gemini, OpenCode e altri. Include una ricca libreria di skill e di sistemi di design di brand (Airbnb, Apple, Cursor, Ferrari, Figma e molti altri), così la generazione parte da un'estetica reale anziché da un prompt generico.

• Open source, Apache-2.0 — clonalo, fai self-hosting o scarica semplicemente l'app.
• Gira in locale — i tuoi progetti vivono sulla tua macchina.
• Qualsiasi modello — inclusi i piani gratuiti; nessuna GPU richiesta (il modello gira nel cloud tramite la tua CLI, non sul tuo hardware).

Passo 1 — Installa e collega un modello gratuito

Scarica l'installer da open-design.ai/download (DMG per macOS o .exe per Windows), oppure eseguilo dai sorgenti. Al primo avvio, scegli il tuo agente. Compile Future usa Gemini CLI perché il suo piano gratuito è generoso (tante richieste gratuite al giorno) — così l'intero workflow non costa nulla:

• Scegli Gemini nella configurazione. Se non viene rilevato, installa Gemini CLI (un comando dal suo sito) e accedi con un account Google.
• Preferisci qualcos'altro? Qualsiasi CLI rilevata funziona, oppure porta la tua API key.

Ecco perché «nessuna GPU»: il modello gira nel cloud tramite la tua CLI, quindi basta anche un laptop modesto.

Passo 2 — Costruire da un prompt testuale (la base)

Imposta un design system predefinito (a Compile Future ne piace uno audace), scegli Prototype, dagli un nome e seleziona high fidelity per il risultato migliore. Invia il tuo brief. Open Design pone alcune domande di discovery (singolo strumento / landing page / all-in-one? responsive? tono? contesto del brand?) e una direzione visiva (ad es. un look minimale in stile Vercel), poi costruisce una prima versione pulita. Puoi regolare i colori d'accento direttamente sulla pagina.

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

Passo 3 — Il workflow con immagine di riferimento (la parte buona)

Ecco la tecnica che vale il video. Invece di descrivere un look a parole, mostra il look a Open Design:

1. Trova un design che ti piace — sfoglia Dribbble (cerca ad es. «tools website») o un sito qualsiasi online per trarne ispirazione.
2. Salvane uno screenshot.
3. Torna in Open Design, crea un progetto in modalità free-form, allega lo screenshot e dai il prompt: «build my [site], use the design language from the image I shared.»
4. Rispondi alle domande di discovery, dicendogli di riprodurre la UI dell'immagine.

Open Design scrive una brand spec a partire dal riferimento (la mostra e ti chiede di confermarla), poi costruisce la pagina in quel linguaggio visivo — stessa resa di layout, colori e tipografia del tuo riferimento, applicati al tuo contenuto. È il modo più veloce per ottenere un risultato in linea con il brand quando riesci a vedere ciò che vuoi ma non a descriverlo.

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

Passo 4 — Modificare e pubblicare

Rifinisci in linguaggio semplice — «remove the sign-in button», «adjust the card radius» — e guardalo aggiornarsi. Visualizza il codice tramite Source, poi usa Share per scaricare uno ZIP, un PDF o un PowerPoint, esportare HTML autonomo, oppure deploy to Vercel con un clic (basta incollare un Vercel token) per ottenere un link condivisibile.

Consigli

• Esegui gratis sul piano gratuito di Gemini CLI (o qualsiasi CLI con piano gratuito) — niente abbonamento, niente GPU.
• Usa un'immagine di riferimento quando riesci a immaginare il look ma non a descriverlo — Dribbble o lo screenshot di un sito qualsiasi.
• La modalità free-form + «match the image» è lo schema di prompt che centra il riferimento.
• Conferma la brand spec che genera prima che costruisca, così la direzione è quella giusta.
• high fidelity per un risultato rifinito; itera con modifiche in linguaggio semplice.

FAQ

Mi serve una GPU? No. Il modello gira tramite la tua CLI (nel cloud), non sulla tua macchina — un normale laptop va bene.

Posso davvero usarlo gratis? Sì — puntalo a una CLI con piano gratuito come Gemini e potrai generare design senza costi; paghi solo se scegli un modello/API a pagamento.

Come progetto a partire da un'immagine che mi piace? Usa la modalità free-form, allega lo screenshot e digli di usare il linguaggio di design dell'immagine; estrae una brand spec e costruisce in quello stile.

È gratis e open source? Sì — Apache-2.0. Eseguilo in locale gratis; paghi solo per l'uso di modello/media di ciò che colleghi.

---

Questa guida scritta è basata sulla guida di Compile Future. Guarda il video completo qui sopra e iscriviti a Compile Future per altri workflow di IA gratuiti.