OpenCode per il design.

Cos'è realmente OpenCode

OpenCode è un agente di coding IA open-source costruito per il terminale, mantenuto dal team dietro SST (Anomaly Innovations). Legge la tua repository, esegue comandi, modifica file e parla con un modello linguistico di grandi dimensioni — ma, a differenza degli agenti legati a un fornitore, non include un proprio modello. Lo punti verso qualunque provider e modello vuoi e porti la tua chiave.

Gira come UI da terminale (TUI), con un'app desktop ed estensioni IDE sopra lo stesso motore. Sotto il cofano usa un'architettura client/server, così l'agente che fa il lavoro è disaccoppiato dalla superficie da cui lo guidi. Due agenti integrati — build e plan — si alternano con il tasto Tab.

• Agnostico rispetto al modello: Modelli e provider provengono da models.dev, un catalogo aperto. Li configuri in opencode.json con una stringa provider/model-id e puoi disabilitare i provider che non vuoi caricare — così lo stesso flusso di lavoro di design gira su Anthropic, OpenAI, Google, OpenRouter, modelli locali e altro.
• File di istruzioni: OpenCode legge un file AGENTS.md nel tuo progetto (lo standard cross-tool, compatibile anche con CLAUDE.md) per le regole di progetto — il posto naturale dove codificare le tue convenzioni di design. Esegui /init per generarne uno.
• Estendibile: Supporta l'integrazione LSP, i server MCP, i temi, le scorciatoie da tastiera e i comandi personalizzati, oltre a link di sessione condivisibili per la collaborazione.

• Manutentore: SST / Anomaly Innovations (progetto open-source)
• Credenziale: la/le tua/e chiave/i API di provider di modello — BYOK, senza vincoli di fornitore
• Licenza: MIT, open source

Perché un agente aperto e con qualsiasi modello è adatto al lavoro di design

OpenCode non ha un singolo "modello di design" come ce l'ha un agente di fornitore — ed è proprio il punto. Poiché è agnostico rispetto al modello e aperto, puoi eseguire lo stesso flusso di lavoro di design su qualsiasi modello sia attualmente il migliore nel frontend, cambiarlo in seguito o ripiegare su un modello locale, tutto senza modificare la tua configurazione.

Ma la scelta del modello da sola non compra il gusto. Come ogni agente di coding, OpenCode produce UI generiche a meno che non gli dia dei vincoli. Un buon output di design nasce da tre input che fornisci tu.

• Un design system: Tokens, primitive e convenzioni reali che l'agente riutilizza, così l'output rispetta un brand invece di ripiegare su un look generico.
• Una skill estetica: Una skill curata che impone vero gusto — movimento contenuto, gerarchia brand-first, al massimo due caratteri e un colore d'accento — e fa impegnare l'agente su una direzione prima di costruire.
• Riferimenti concreti: Immagini di riferimento reali e più stati (desktop e mobile, hover, vuoto, caricamento), non una singola immagine hero.

La lezione: OpenCode ti dà libertà di modello, ma il gusto continua a nascere da un contesto di design curato. Open Design impacchetta esattamente quegli input, ed è per questo che i due si combinano bene — entrambi sono open-source e local-first (più sotto).

Configurare OpenCode per il lavoro di design, da zero

Ecco il percorso completo, da una macchina pulita a un OpenCode in grado di costruire e verificare la UI.

# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode

# 2. Start the TUI in your project, then authenticate your provider
opencode          # then run /login and pick your provider + paste your key

# 3. Generate project context
opencode          # inside your project, run /init to create AGENTS.md

# 4. Pick your model (any provider, via models.dev)
#    set "provider/model-id" in opencode.json or switch in the TUI

# 5. Add an MCP server (optional, e.g. for design handoff)
#    configure it under the "mcp" key in opencode.json

• Codifica le tue regole di design: Inserisci i tuoi tokens, le primitive e le convenzioni in AGENTS.md (o in un DESIGN.md richiamato da esso) così l'output rispetta un brand invece di ripiegare su un look generico. L'opzione instructions in opencode.json può puntare a file di regole aggiuntivi tramite glob.
• Scegli un modello capace: Poiché OpenCode è agnostico rispetto al modello, scegli quale provider/modello sia attualmente il più forte nel frontend per il passaggio di design — e mantieni invariato il resto del tuo flusso di lavoro.

Il flusso di lavoro screenshot-to-UI

Il ciclo di design a maggior leva con qualsiasi agente consiste nel trasformare un'immagine di riferimento in una UI funzionante e responsive e iterare finché non corrisponde. La stessa struttura in cinque passi vale in OpenCode.

1. Parti dai riferimenti visivi più chiari di cui disponi — e includi più stati (desktop e mobile, hover, vuoto, caricamento), non solo un'unica immagine hero.
2. Sii specifico nel prompt; prompt vaghi producono UI generiche.
3. Prepara un design system e indica a OpenCode dove si trovano i tokens e le primitive canoniche (in AGENTS.md).
4. Esegui un dev server e fai renderizzare l'agente in un browser reale, ridimensionando ai breakpoint per controllare il risultato.
5. Itera facendo confrontare a OpenCode la propria implementazione con gli screenshot — non limitarti a confermare che la build funziona.

Richiama i file con @ nella TUI per una ricerca fuzzy della tua directory di lavoro, esegui comandi shell inline con un ! iniziale e guida le azioni con i comandi /. Poi formula il prompt con vincoli concreti:

opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, open it in a browser, and iterate until the
  UI matches the references across breakpoints.

Mantieni i prompt piccoli e mirati, fai commit delle buone iterazioni e revert di quelle cattive (avvisando OpenCode quando fai revert), così ogni passaggio si costruisce su una base pulita.

AGENTS.md, MCP e sessioni condivisibili

Tre punti di estensione rendono OpenCode pratico per il lavoro di design prolungato, e tutti e tre si mappano in modo pulito su un flusso di lavoro di design aperto.

• Regole AGENTS.md: Le regole di progetto vivono in un AGENTS.md nella root della repo (o regole globali in ~/.config/opencode/AGENTS.md). È la casa duratura per le tue convenzioni di design, letta a ogni esecuzione, ed è compatibile con i file CLAUDE.md usati da altri agenti.
• Server MCP: OpenCode supporta server MCP sia locali (command) sia remoti (URL), configurati sotto la chiave mcp — il modo portabile per portare contesto di design e strumenti esterni che funzionano su più agenti, non solo OpenCode.
• Sessioni condivisibili: Il comando /share crea un link pubblico a una conversazione per collaborazione o revisione, e /unshare lo revoca — utile per ottenere feedback su un passaggio di design.

Queste sono capacità portabili e multi-agente — esattamente il tipo di cosa che Open Design è costruito per orchestrare, invece di ricrearla progetto per progetto.

OpenCode vs Codex vs Claude Code vs Cursor per il design

Non c'è un unico vincitore per il lavoro di design — ogni agente ha un punto di forza diverso e i team esperti li combinano. Un riassunto equo:

Il verdetto ricorrente della community è che il gusto viene dagli esseri umani: tutti, senza skill, riferimenti e vincoli, ripiegano su un'estetica generica. È questo il vero problema da risolvere — ed è di forma da strumento di design, non da modello, ed è precisamente per questo che un agente aperto come OpenCode si abbina così bene a un layer di design aperto.

Insidie, e come evitare l'estetica da "sbobba dell'IA"

La lamentela più comune sul design generato dall'IA è che appare generico — gradienti soft, pannelli fluttuanti, angoli arrotondati esagerati, ombre drammatiche, un'aria da Inter-e-viola che "urla che l'ha fatto un'IA". Altri problemi segnalati includono layout mobile rotti e istruzioni che trapelano nel testo della UI. Nessuno di questi è esclusivo di OpenCode; sono ciò che accade quando qualsiasi agente gira senza un contesto di design curato.

• Aggiungi una skill estetica: Una skill di design curata costringe l'agente a impegnarsi su una vera direzione invece del look predefinito.
• Verifica in un browser reale: Renderizza e auto-controlla sui vari breakpoint così i layout non si rompono in silenzio su mobile.
• Fornisci tokens e riferimenti: Tokens di design reali e screenshot di riferimento sono la singola leva più grande sulla qualità dell'output.
• Codifica le regole in AGENTS.md: Metti regole in stile "niente hero card, al massimo due caratteri, gerarchia brand-first" dove l'agente le legge a ogni esecuzione.

Nota che ogni mitigazione consiste nel dare all'agente un contesto di design curato — indipendentemente da quale modello esegui. Mantenere quel contesto a mano, progetto per progetto, è la fatica che Open Design elimina.

Progettare con OpenCode dentro Open Design

Open Design è il layer di design open-source che il flusso di lavoro qui sopra continua a richiedere. Tratta OpenCode come un adattatore di prima parte e lo avvolge in una libreria curata di skill e design system, una pipeline di rendering strutturata e una UI desktop locale — così il contesto di design che rende bravo qualsiasi agente è presente fin dalla prima esecuzione, non assemblato a mano ogni volta. Entrambi i progetti sono open-source e local-first, il che rende l'abbinamento un'unione naturale.

1. Installa Open Design e seleziona OpenCode come tuo agente.
2. Autenticati con la tua chiave API di provider di modello (BYOK) — le credenziali restano sulla tua macchina e non vengono mai instradate tramite noi.
3. Scegli qualsiasi provider e modello, più un design system e una skill, poi genera deck, prototipi e landing page con un gusto coerente.
4. Ogni artefatto e file DESIGN.md vive nella tua repo, non in un cloud ospitato.

Stesso agente OpenCode, stessa libertà di modello — più un vero flusso di lavoro di design portabile e open-source tutt'intorno. È local-first e Apache-2.0, quindi nulla del tuo lavoro o delle tue credenziali lascia la tua macchina.

Domande frequenti

1. 01 OpenCode può davvero fare lavoro di design? +

   Sì — con una skill estetica, un design system e immagini di riferimento reali nel contesto, OpenCode produce UI responsive di qualità da produzione e può verificarla in un browser. Poiché è agnostico rispetto al modello, esegui qualsiasi modello sia attualmente il migliore nel frontend. Senza quel contesto curato tende a ripiegare su un look generico, ed è il divario che Open Design colma.

2. 02 Quale modello dovrei usare con OpenCode per il design? +

   Quello che preferisci — OpenCode è agnostico rispetto al provider tramite models.dev, così puoi eseguire Anthropic, OpenAI, Google, OpenRouter o modelli locali dietro lo stesso flusso di lavoro e cambiarli in qualsiasi momento. La qualità dell'output di design dipende molto più dalla tua skill, dal tuo design system e dai tuoi riferimenti che dal modello da solo.

3. 03 Open Design è realizzato dal team di OpenCode (SST)? +

   No. Open Design è un progetto open-source indipendente che integra OpenCode come agente. Completa OpenCode con una libreria di skill e design system aperta e local-first.

4. 04 Mi serve un abbonamento speciale per progettare con OpenCode? +

   No — OpenCode è BYOK. Porti la tua chiave API di provider di modello, e Open Design non instrada mai le tue credenziali. Non c'è alcun vincolo di fornitore.

5. 05 OpenCode o Codex o Claude Code per il design frontend? +

   Sono tutti forti, e molti team li combinano. Il vantaggio di OpenCode è essere completamente open-source e agnostico rispetto al modello; Codex eccelle nelle build delegate e in sandbox; Claude Code è noto per decisioni di design specifiche e consapevoli della codebase. Open Design ti permette di cambiare agente senza modificare il tuo flusso di lavoro di design.

6. 06 Come estendo OpenCode per il contesto di design? +

   Codifica le regole in AGENTS.md, aggiungi server MCP sotto la chiave mcp per strumenti e contesto di design portabili, e usa le sessioni condivisibili per la revisione. Open Design include una libreria curata di skill e design system, così salti la configurazione progetto per progetto.

7. 07 Open Design è affiliato a OpenCode o SST? +

   No. OpenCode è un progetto open-source mantenuto da SST (Anomaly Innovations); Open Design è un progetto open-source indipendente che lo supporta come adattatore di prima parte.

8. 08 I miei file e le mie credenziali sono al sicuro? +

   Sì — Open Design è local-first. I tuoi file, gli artefatti e DESIGN.md restano nella tua repo, e le tue credenziali di provider di modello vengono usate direttamente dal tuo agente, mai instradate attraverso i server di Open Design.