Codex per il design: crea UI con OpenAI Codex

Cos'è realmente OpenAI Codex (e cosa non è)

Prima, una disambiguazione che inganna quasi tutti quelli che cercano "Codex". L'originale OpenAI Codex era un modello di completamento del codice del 2021 che alimentava i primi GitHub Copilot ed è stato deprecato nel 2023. Non è di questo che parla questa pagina. Il Codex di oggi è lo strumento di coding agentico di OpenAI, pianifica, scrive, esegue e verifica codice a partire da compiti in linguaggio naturale.

Il Codex moderno è disponibile su quattro superfici: una CLI da terminale (riscritta in Rust, con licenza Apache-2.0), un'estensione IDE per VS Code, Cursor e Windsurf, un'esperienza cloud/web per task asincroni delegati e un'app desktop con un browser integrato e Computer Use.

• Modello predefinito: A metà 2026 il modello raccomandato è gpt-5.5, con gpt-5.4 come modello che OpenAI ha addestrato esplicitamente per il frontend e il computer use.
• File di istruzioni: Codex legge un file AGENTS.md nel tuo progetto (uno standard cross-tool) per le regole di progetto, il posto naturale dove codificare le tue convenzioni di design.
• Sandbox: Gira in una sandbox a livello kernel (workspace-write di default), così un agente che modifica la tua UI non può vagare al di fuori del progetto.

• Fornitore: OpenAI
• Credenziale: chiave API OpenAI (BYOK) o abbonamento ChatGPT (Free / Go / Plus / Pro / Business / Enterprise)
• Licenza della CLI: Apache-2.0, open source

Perché ora Codex è bravo nel design

Tre cose sono convergute all'inizio del 2026 per rendere Codex un vero strumento di design anziché un generatore di codice generico.

• Un modello addestrato per il frontend: OpenAI ha rilasciato GPT-5.4, il suo primo modello mainline addestrato per il frontend e il computer use, con una comprensione delle immagini molto migliore lungo tutto il flusso di design e un'auto-verifica più solida. Può persino generare mood board e opzioni visive prima di impegnarsi sugli asset finali.
• Un frontend design skill ufficiale: Il catalogo openai/skills offre un frontend design skill curato che impone gusto vero: layout senza card, hero a tutto schermo, gerarchia incentrata sul brand, movimento misurato, al massimo due caratteri e un solo colore d'accento, e obbliga Codex a scrivere una tesi visiva prima di costruire. Aggiungere questo frontend design skill è la singola leva più rapida per migliorare l'output di Codex.
• Verifica nel browser: Con la skill Playwright Codex apre un browser reale, ridimensiona ai breakpoint e confronta il proprio output con il riferimento invece di limitarsi a controllare che la build passi.

La lezione dietro tutte e tre: Codex non ha gusto di default. Produce buon design quando gli dai dei vincoli, un design system, una skill estetica e riferimenti concreti. Open Design impacchetta esattamente quegli input, ed è per questo che i due si combinano bene (più sotto).

Configurare Codex per il lavoro di design, da zero

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

Preferisci il percorso con un solo clic? Scarica l'app desktop di Open Design, racchiude Codex insieme a una libreria curata di skill e design system, così basta scegliere Codex come tuo agent e iniziare a progettare senza alcuna configurazione della CLI. I passaggi qui sotto sono il percorso manuale, se preferisci collegare Codex da solo.

# 1. Installa la Codex CLI
npm install -g @openai/codex
# oppure: brew install --cask codex
# oppure: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Autenticati (accesso con ChatGPT consigliato per limiti più alti)
codex            # poi scegli “Sign in with ChatGPT”

# 3. Genera il contesto del progetto
codex            # nel tuo progetto, esegui /init per creare AGENTS.md

# 4. Aggiungi lo skill frontend ufficiale, poi riavvia Codex
# (nell'app Codex) $skill-installer frontend-skill

# 5. Collega il server MCP di Figma (opzionale, per l'handoff di design)
codex mcp add figma --url https://mcp.figma.com/mcp

• Codifica le tue regole di design: Inserisci i tuoi tokens, le primitive e le convenzioni in AGENTS.md o in un DESIGN.md e indirizza Codex verso di essi, così l'output rispetta un brand invece di ripiegare su un look generico.
• Scegli il giusto livello di ragionamento: OpenAI osserva che livelli di ragionamento da basso a medio spesso producono risultati frontend migliori rispetto all'impostazione più alta.

Il flusso di lavoro screenshot-to-UI

Il ciclo di design a maggior leva con Codex consiste nel trasformare un'immagine di riferimento in una UI funzionante e responsive e iterare finché non corrisponde. Le linee guida di OpenAI si distillano in cinque passi.

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 Codex dove si trovano i tokens e le primitive canoniche.
4. Abilita la skill interattiva Playwright così Codex renderizza in un browser reale e ridimensiona ai breakpoint.
5. Itera facendo confrontare a Codex la propria implementazione con gli screenshot, non limitarti a confermare che la build funziona.

Fornisci le immagini trascinando uno screenshot nel terminale o con il flag image, poi formula il prompt con vincoli concreti:

codex -i reference-desktop.png -i reference-mobile.png \
  "Implementa questo design in React + Vite + Tailwind + TypeScript.
   Riutilizza i miei componenti e token del design system esistenti.
   Rispetta spaziatura, layout e gerarchia; rendilo responsive.
   Usa lo skill Playwright per verificare che la UI corrisponda ai
   riferimenti e itera finché non combacia."

Esegui un dev server in un secondo terminale, mantieni i prompt piccoli e mirati e fai commit delle buone iterazioni / revert di quelle cattive (avvisando Codex quando fai revert) così ogni passaggio si costruisce su una base pulita.

Codex per il frontend e il design della UI

Trasformare un singolo screenshot in una pagina è la demo; consegnare un frontend reale è il lavoro vero. Il lavoro di design UI con Codex diventa buono quando lo tratti come la costruzione di un sistema, componenti riutilizzabili, layout responsive e ogni stato di interazione, e non un singolo hero shot. La migliore comprensione delle immagini e l'auto-verifica di GPT-5.4 rendono tutto questo praticabile, ma la struttura viene ancora da te.

• Prima i componenti: Chiedi a Codex di costruire componenti atomici e riutilizzabili (bottoni, input, card, nav) sui tuoi tokens prima di comporre intere pagine, così il frontend resta coerente invece che una tantum.
• Responsive per impostazione predefinita: Fornisci riferimenti desktop e mobile e dai un nome ai breakpoint; fai ridimensionare Codex in un browser reale e correggere i layout che si rompono, invece di fidarti di un singolo viewport.
• Ogni stato di interazione: Esplicita gli stati hover, focus, active, empty, loading ed error, gli stati che fanno sembrare finita una UI e che l'output generico dell'IA di solito salta.
• Markup accessibile: Richiedi HTML semantico, controlli etichettati, focus ring visibili e contrasto adeguato, e chiedi a Codex di verificarli come parte della build.

Formula esplicitamente il prompt per un componente e i suoi stati, poi lascia che Codex verifichi rispetto al riferimento:

codex "Costruisci una sezione pricing responsive in React + Tailwind + TypeScript.
   Riutilizza i tokens del mio design system e i componenti Button/Card.
   Includi gli stati hover, focus e mobile-stacked.
   Usa la skill Playwright per verificarla rispetto a pricing-desktop.png
   e pricing-mobile.png a 375px e 1280px, e itera finché non corrisponde."

Il pattern che distingue un buon output frontend dalla “sbobba dell'IA” è la verifica: Codex renderizza la UI, la confronta con i tuoi riferimenti sui vari breakpoint e itera, invece di limitarsi a confermare che la build passa.

Creare un design system con Codex

Un design system è la leva più grande sulla qualità dell'output, è così che Codex conosce i tuoi colori, la scala tipografica, la spaziatura e i componenti invece di ripiegare sul look generico Inter-e-viola. Dai a Codex un design system su cui lavorare e ogni schermata che produce eredita lo stesso gusto.

• Definisci i tokens: Cattura colore, tipografia, spaziatura, raggio e ombra come tokens con un nome, il vocabolario che Codex riutilizza invece di inventare valori a ogni schermata.
• Cattura le primitive: Indica a Codex i tuoi componenti canonici (Button, Input, Card, Modal) così li compone invece di ridisegnarli ogni volta.
• Scrivilo dove Codex lo legge: Codifica le regole in un file AGENTS.md o DESIGN.md che l'agente carica a ogni esecuzione: niente hero card, al massimo due caratteri, un solo colore d'accento, gerarchia brand-first.
• Applica a ogni passaggio: Chiedi a Codex di verificare ogni nuova UI rispetto al sistema e segnalare le derive, così il design system resta reale invece di decadere dopo la prima schermata.

Puoi anche lavorare nella direzione opposta: consegna a Codex qualche schermata di riferimento e chiedigli di estrarre un design system di partenza, tokens più primitive, che poi affini. In ogni caso, il sistema è l'artefatto che rende i risultati ripetibili.

Codex + Figma: round-trip design ↔ codice

Nel febbraio 2026 OpenAI e Figma hanno annunciato una partnership ufficiale, trasformando la precedente beta del Figma MCP in un'integrazione bidirezionale di prima classe. Funziona in entrambe le direzioni.

• Design → Codice: Copia il "link to selection" di un frame in Figma, incollalo in Codex con get_design_context e chiedigli di implementare il design usando la tua libreria di componenti esistente.
• Codice → Design: Lo strumento generate_figma_design ("Code to Canvas") trasforma una UI live, in esecuzione, in frame Figma modificabili, l'intera schermata, un elemento selezionato o un intero file.

Il Figma MCP gira come server remoto ed è esente dai rate limit. Aggiungilo una volta ed è disponibile per Codex, Claude Code, Cursor, VS Code e altri, esattamente il tipo di capacità portabile e multi-agente che Open Design è costruito per orchestrare.

Codex vs Cursor vs Claude Code 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 e tre, 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.

Confronto dei plugin di design per Codex (Open Design incluso)

La capacità di design di Codex deriva quasi interamente da ciò che gli colleghi. Ecco i principali plugin e strumenti di design che oggi puoi usare con Codex, e dove si colloca Open Design tra questi:

Come scegliere: se vuoi il flusso di design proprietario di OpenAI dentro Codex, il Product Design plugin copre l'esplorazione delle direzioni, la verifica dei flussi e la prototipazione da un URL live. Per la qualità grezza dell'output, la frontend design skill è l'aggiunta con la leva maggiore. L'integrazione con Figma ufficiale è essenziale se il tuo team vive in Figma, ed è portabile, quindi puoi abbinarla a una qualsiasi delle altre, inclusi Claude Code e Cursor.

Open Design è l'unica opzione open source, local-first e BYOK dall'inizio alla fine. Avvolge Codex in una skill e una libreria di sistemi di design curate, una pipeline di rendering strutturata e una UI desktop locale, così il contesto di design che rende Codex valido è presente fin dal primo avvio, senza doverlo assemblare a mano in ogni progetto, e ogni artefatto resta nel tuo repository.

Codex per i designer che non programmano

Non devi essere un ingegnere per progettare con Codex. L'agente prende un intento in linguaggio semplice e riferimenti reali e restituisce una UI funzionante e responsive, il che ne fa uno strumento vero per designer e product people, non solo per gli sviluppatori frontend. Il trucco è guidarlo come un brief di design, non come una sessione di coding.

• Descrivi in linguaggio semplice: Di' cosa vuoi in termini di design, layout, gerarchia, tono, la sensazione, e lascia che Codex lo traduca in markup.
• Parti dai riferimenti: Inserisci screenshot, una moodboard o il sito di un brand; riferimenti concreti battono qualsiasi quantità di prosa per azzeccare il look.
• Anteprima in un browser reale: Lascia che Codex renderizzi e apra il risultato così lo giudichi con i tuoi occhi, lo ridimensioni e indichi cosa non va.
• Itera ed esegui revert in sicurezza: L'agente gira in sandbox, così puoi provare una direzione, tenere i passaggi buoni ed eseguire il revert di quelli cattivi senza rompere nulla.

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

La lamentela più comune sul design generato da Codex è 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, istruzioni che trapelano nel testo della UI e il raggiungimento rapido dei limiti d'uso.

• Installa una skill frontend: Una skill estetica curata costringe Codex a impegnarsi su una vera direzione invece del look predefinito.
• Abilita la verifica con Playwright: Fai renderizzare Codex e auto-controllare 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. Mantenere quel contesto a mano, progetto per progetto, è la fatica che Open Design elimina.

BYOK: la tua chiave OpenAI, il tuo piano ChatGPT, i tuoi limiti

Codex è bring-your-own-key (BYOK): ti autentichi con la tua chiave API OpenAI o con il tuo abbonamento ChatGPT, e le tue credenziali appartengono a te. Questo conta per il controllo dei costi e per la privacy, niente della tua chiave o del tuo lavoro deve passare attraverso terze parti.

• Scegli il livello di reasoning giusto: OpenAI osserva che un reasoning da basso a medio spesso dà risultati frontend migliori dell'impostazione più alta, e costa meno.
• Mantieni i prompt piccoli e mirati: Task brevi e specifici usano meno token e producono diff più puliti di un unico prompt gigantesco.
• Fai commit delle buone iterazioni: Salva i passaggi che funzionano ed esegui il revert del resto, così non paghi per rigenerare una base pulita ogni volta.

Progettare con Codex dentro Open Design

Open Design è il layer di design open-source che il flusso di lavoro qui sopra continua a richiedere. Tratta Codex 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 Codex è presente fin dalla prima esecuzione, non assemblato a mano ogni volta.

1. Installa Open Design e seleziona Codex come tuo agente.
2. Autenticati con la tua chiave API OpenAI (BYOK) o il tuo abbonamento ChatGPT, le credenziali restano sulla tua macchina e non vengono mai instradate tramite noi.
3. Scegli 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 Codex, stessa chiave, 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 OpenAI Codex può davvero fare lavoro di design? +

   Sì, con una skill frontend, un design system e immagini di riferimento reali nel contesto, Codex (specialmente su GPT-5.4) produce UI responsive di qualità da produzione e può verificarla in un browser. Senza quel contesto tende a ripiegare su un look generico, ed è il divario che Open Design colma.

2. 02 Questo è il plugin Product Design di OpenAI Codex? +

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

3. 03 Mi serve un abbonamento ChatGPT per progettare con Codex? +

   Puoi usare sia una chiave API OpenAI (BYOK) sia il tuo abbonamento ChatGPT. L'accesso con ChatGPT in genere offre limiti più generosi; in ogni caso Open Design non instrada mai le tue credenziali.

4. 04 Codex o Claude Code per il design frontend? +

   Entrambi sono forti. Claude Code è noto per decisioni di design specifiche e consapevoli della codebase; Codex ha una forte rifinitura visiva dopo GPT-5.4 ed eccelle nelle build delegate e in sandbox. Molti team usano entrambi, Open Design ti permette di cambiare agente senza modificare il tuo flusso di lavoro di design.

5. 05 Come collego Codex a Figma? +

   Aggiungi il server Figma MCP ufficiale (codex mcp add figma --url https://mcp.figma.com/mcp). Potrai poi implementare i frame di Figma in codice con get_design_context e riportare una UI in esecuzione verso frame Figma modificabili con generate_figma_design.

6. 06 Come evito l'estetica generica da "sbobba dell'IA"? +

   Installa una skill frontend, fornisci tokens di design reali e screenshot di riferimento, codifica le regole del brand in AGENTS.md e abilita la verifica con Playwright. Open Design li include come libreria curata, così salti la configurazione progetto per progetto.

7. 07 Open Design è affiliato a OpenAI? +

   No. Codex è un prodotto di OpenAI; Open Design è un progetto open-source indipendente che lo supporta come adattatore di prima parte. OpenAI e Codex sono marchi di OpenAI.

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 OpenAI vengono usate direttamente dal tuo agente, mai instradate attraverso i server di Open Design.

9. 09 Codex può costruire una UI frontend responsive? +

   Sì. Con riferimenti desktop e mobile e la skill Playwright, Codex costruisce una UI frontend responsive, la renderizza in un browser reale a ogni breakpoint e itera finché non corrisponde, componenti, layout e stati di interazione inclusi. Dargli i tokens del tuo design system è ciò che mantiene l'output coerente invece che generico.

10. 10 Come do a Codex un design system? +

    Codifica i tuoi tokens (colore, tipografia, spaziatura) e i componenti canonici in un file AGENTS.md o DESIGN.md che Codex legge a ogni esecuzione, e chiedigli di costruire su di essi. Open Design include una libreria di design system curata così puoi scegliere un sistema invece di scriverne uno da zero, e Codex poi costruisce ogni schermata su di esso.

11. 11 Posso usare Codex per il design se non so programmare? +

    Sì. Codex trasforma brief in linguaggio semplice e immagini di riferimento in una UI funzionante, così designer e product people possono usarlo senza scrivere codice. L'app desktop di Open Design elimina del tutto il terminale e il setup, scegli un agente, un design system e una skill, poi generi e visualizzi l'anteprima in una UI locale.

12. 12 Open Design supporta il BYOK con Codex? +

    Sì. Open Design è bring-your-own-key: autentica Codex con la tua chiave API OpenAI o il tuo abbonamento ChatGPT, e la credenziale è usata direttamente dal tuo agente, mai fatta passare tramite Open Design. È local-first, così i tuoi file e il DESIGN.md restano nella tua repo.

13. 13 Come aggiungo un frontend design skill a Codex? +

    Installa il frontend design skill ufficiale dal catalogo openai/skills: nell'app Codex esegui l'installer di skill per il frontend-skill, poi riavvia Codex. Il frontend design skill fa sì che Codex si impegni con un'estetica vera, layout senza card, gerarchia incentrata sul brand, al massimo due caratteri e un solo colore d'accento, invece dell'aspetto generico predefinito, ed è la leva più grande sulla qualità di design di Codex.