Codex 
OpenDesign Come progettare interfacce con OpenAI Codex in OpenDesign: la configurazione, un'attività completa dal brief al file revisionato e i limiti da conoscere prima di iniziare.
“Una bacheca progetti più tranquilla.
Priorità chiare. Spazio per concentrarsi.”
TRE PAGINE SU CODEX
Questa guida: brief, riferimenti, regole di design e un risultato HTML revisionato.
Leggi questa guida PLUGIN E INSTALLAZIONEEsplori i plugin di design o consulti le istruzioni di installazione di OpenDesign.
Vai alle risorse UN OUTPUT DIVERSOLe presentazioni hanno una guida separata con un proprio workflow.
Apri le slide CodexUn compito di design completo per Codex
Un singolo compito, mostrato dall'inizio alla fine: il brief e i vincoli che fornite, l'artefatto che ne risulta e i controlli che effettuate ancora prima che sia completo. L'interfaccia qui sotto è un esempio illustrativo creato per questa pagina, non una sessione Codex registrata.
BriefProgettate una bacheca di avanzamento del progetto per un piccolo team di prodotto. Mostrate a colpo d'occhio l'avanzamento generale, la prossima milestone e il lavoro bloccato. I task si spostano tra Da fare, In corso e Completato. La bacheca deve funzionare su desktop e su mobile.
data-od-id stabiliScrivete il brief, selezionate il design system e definite i criteri di accettazione.
Pianifica il layout, scrive HTML, CSS e JavaScript, esegue il file 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.
Sidebar, header, statistiche e colonne poggiano sulla griglia da 8px; nulla si sovrappone a 1440 o 390.
Avanzamento, prossima milestone e conteggio dei bloccati prevalgono sulle intestazioni di colonna; l'accento contrassegna solo un'etichetta di milestone.
Le colonne diventano un selettore segmentato; la barra delle milestone rimane; la sidebar si ripiega in una tab bar.
Passi da qui dall'anteprima desktop a quella mobile. Nel suo artefatto, apra un'attività e testi i filtri, la navigazione da tastiera e il comportamento del focus.
Adeguatezza
Compatibilità
Questa guida riguarda Codex locale. Le altre modalità prevedono configurazione e fatturazione diverse. Riferimenti pubblicati verificati l'11 settembre 2026.
OpenAI Codex, l’agente di codice — non il precedente modello di completamento del codice. Questa pagina riguarda la progettazione di interfacce con Codex, non l’interfaccia dell’app Codex stessa. Le note di configurazione di OpenDesign elencano Codex tra gli agenti disponibili.
Per Codex locale, accedi con ChatGPT oppure usa una chiave API OpenAI. Hanno implicazioni diverse in termini di fatturazione e policy. Segui le istruzioni di autenticazione di OpenAI; questa pagina non garantisce una quota o un prezzo.
Controlla la pagina di download per le build desktop. I requisiti di Node.js e pnpm indicati nel quickstart da codice sorgente si applicano all’esecuzione da sorgente, non all’installazione di un pacchetto desktop. Versione minima compatibile di Codex: non verificata qui.
Segui le istruzioni di connessione mostrate dalla versione installata, quindi esegui un piccolo task. Verifica che l’agente previsto lo abbia gestito e che l’artefatto si apra. Il solo download non stabilisce una connessione funzionante.
Inizia con l’app desktop
Scarica prima, completa la configurazione di Codex per la versione installata, poi verifica un piccolo risultato. Non è necessario compilare OpenDesign da codice sorgente per seguire questo percorso.
Scegli il pacchetto per il tuo computer, installalo e apri l’app.
Scarica OpenDesignSegui le istruzioni di Codex nella versione installata. Per Codex locale, completa l’accesso con ChatGPT o l’autenticazione tramite chiave API prima di inviare un task.
Legga le note sull'autenticazione di CodexUsa 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 il progetto dal codice sorgente, segua invece la guida rapida tecnica. Per installare il plugin in Codex, usi la voce di installazione qui sotto.
Il workflow di design di Codex
La stessa attività della progress-board, seguita dal brief al file verificato. Ogni passaggio elenca ciò che fornisce, ciò che fa Codex, ciò che OpenDesign contribuisce e ciò che deve verificare.
Linguaggio semplice, da tre a sei righe. Indichi il pubblico, la funzione della schermata e le piattaforme.
AGENTS.md del progetto; chiede chiarimenti quando qualcosa è ambiguo.Un design system e alcune regole rigide. È ciò che distingue un risultato coerente con il brand da un aspetto generico.
Codex 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
Un indirizzo in testo semplice con istruzioni di installazione destinate alla lettura da parte di Codex, non un tutorial visivo. Copi il prompt in Codex, che leggerà la voce autonomamente.
Installa OpenDesign in Codex leggendo https://open-design.ai/codex-plugin/ e seguendo le sue istruzioni di installazione. Chiedi conferma prima di modificare la configurazione.
Plugin frontend e per design system per Codex, ciascuno con la propria fonte e istruzioni di configurazione.
I tipi di artifact che Codex può produrre in OpenDesign, una skill per tipo.
Token di brand e componenti da collegare prima che Codex generi qualcosa.
I deck hanno una guida separata; l'output e il workflow differiscono da quelli per l'UI 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.