OpenCode 
OpenDesign Come progettare interfacce con OpenCode in OpenDesign: design.md vincolato prima che venga generato qualsiasi elemento, il provider scelto, un'attività a inbox condivisa dal brief al file revisionato, e i limiti da conoscere prima di iniziare.
“Una casella di posta condivisa costruita su
design.md, non su valori predefiniti.”
TRE MODI PER INIZIARE QUESTA GUIDA OPENCODE
Questa guida: brief, riferimenti, regole di design e un risultato HTML revisionato.
Leggi questa guida CONFIGURAZIONEEcco il percorso completo da una macchina pulita a un OpenCode in grado di costruire e verificare la UI.
Vai alla configurazione CONFRONTOIn cosa OpenCode differisce da Codex, Claude Code, Cursor per il lavoro di design, e quando scegliere un altro workflow.
Vedi il confrontoUn'Attività di Design OpenCode Completa
Un'unica attività, mostrata dall'inizio alla fine: il brief e i vincoli che consegnate, l'artefatto che ne risulta, e i controlli che eseguite comunque prima che sia completata. L'interfaccia sottostante è un esempio illustrativo creato per questa pagina, non una sessione OpenCode registrata.
BriefProgetta una casella di posta condivisa per il team: elenco delle conversazioni con owner, una vista thread e una colonna laterale destra con il contesto del cliente. Vincola il sistema design.md prima di generare. Desktop e telefono.
data-od-id stabiliScrivete il brief, selezionate il design system e definite i criteri di accettazione.
Pianifica il layout, scrive l'HTML, il CSS e il JavaScript e lo rivede su richiesta.
Fornisce il design system e lo skill, genera l'anteprima e salva ogni versione come file nel progetto.
Gerarchia visiva, spaziatura sulla griglia da 8px, entrambi i breakpoint e ogni interazione sono verificati prima della consegna.
Tre colonne sulla griglia da 8px; la colonna di contesto si comprime prima del thread.
Owner e oggetto in primo piano; l'accento segnala solo “in attesa di noi”.
Elenco, poi thread al tocco; la colonna di contesto diventa un foglio.
Filtri per owner, apre un thread, attiva/disattiva la colonna, invia una risposta.
Adeguatezza
Compatibilità
Questa guida riguarda OpenCode collegato tramite l'app desktop di OpenDesign. Riferimenti pubblicati verificati il 6 settembre 2026.
OpenCode è un agente di codice AI da terminale open source (MIT) — una TUI più superfici desktop e IDE — mantenuto da Anomaly (il team SST) su github.com/anomalyco/opencode. Questa pagina riguarda la progettazione di interfacce con OpenCode tramite OpenDesign, non l'interfaccia di OpenCode stessa. Le note di configurazione di OpenDesign elencano gli agenti disponibili.
Chiavi del provider tramite la configurazione di OpenCode (BYOK). OpenCode utilizza le chiavi del suo provider tramite la propria configurazione (BYOK) — nulla viene fatto passare da un proxy. Questa pagina non garantisce una quota o un prezzo.
Controlla la pagina di download per le build desktop. I requisiti Node.js e pnpm indicati nella guida rapida per l'esecuzione da codice sorgente si applicano all'esecuzione dal codice sorgente, non all'installazione di un pacchetto desktop. Versione minima compatibile di OpenCode: non verificata qui.
Segui le istruzioni di connessione mostrate dalla versione installata, quindi esegui un piccolo task. Verifica che OpenCode l'abbia gestito correttamente e che l'artifact si apra. Il solo download non garantisce una connessione funzionante.
Inizia con l’app desktop
Scarica prima, completa la configurazione di OpenCode per la versione installata, quindi verifica un piccolo risultato. Non è necessario compilare OpenDesign dal codice sorgente per seguire questo percorso.
Scegli il pacchetto per il tuo computer, installalo e apri l’app.
Scarica OpenDesignSegui le istruzioni di OpenCode nella versione installata. OpenCode utilizza le chiavi del proprio provider tramite la propria configurazione (BYOK) — nulla viene instradato tramite proxy.
# 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 keyDalle note di configurazione di OpenCode nella guida pubblicata; controlla la documentazione del fornitore per il comando attuale.
Usa un brief piccolo per poter valutare l’intero ciclo, inclusa una revisione.
Crea una schermata delle impostazioni con un modulo del profilo e una conferma di salvataggio. Usa le mie regole di design. Verificala a larghezza desktop e mobile.
Per eseguire OpenDesign dal codice sorgente, segui invece la guida rapida tecnica.
Il workflow di design di OpenCode
La stessa attività della posta in arrivo del team, seguita dal brief al file verificato. Ogni step elenca cosa fornisce lei, cosa fa OpenCode, cosa contribuisce OpenDesign e cosa verifica lei.
Linguaggio semplice, da tre a sei righe. Indichi il pubblico, la funzione della schermata e le piattaforme.
Un design system e alcune regole rigide. È ciò che distingue un risultato coerente con il brand da un aspetto generico.
OpenCode scrive un file HTML autonomo: layout, stili, interazioni e hook stabili.
Il file viene visualizzato all'interno di OpenDesign alle larghezze richieste. È qui che il design viene valutato.
data-od-id per commenti e modifiche.Richieda modifiche indicando gli elementi nella preview. Ogni revisione è un nuovo file; nulla viene sovrascritto silenziosamente.
Risorse
Tutorial, documentazione e walkthrough per progettare con OpenCode, come elencati nella guida pubblicata.
I tipi di artifact che OpenCode può produrre in OpenDesign, una skill per tipo.
Token di brand e componenti da collegare prima che OpenCode generi qualcosa.
Punti di partenza per presentazioni, landing page e schermate di prodotto.
Limitazioni
FAQ
Inizi con un task piccolo, valuti il ciclo di andata e ritorno, poi porti il brief reale. Scelga l'opzione che corrisponde alla Sua configurazione; la pagina non la rileva automaticamente.