Codex per il design.

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.
• Una skill frontend ufficiale: Il catalogo openai/skills include una skill frontend curata che impone vero gusto: layout senza card, hero a tutto schermo, gerarchia brand-first, movimento contenuto, al massimo due caratteri e un colore d'accento — e fa scrivere a Codex una tesi visiva prima di costruire.
• 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.

# 1. Install the Codex CLI
npm install -g @openai/codex
# or: brew install --cask codex
# or: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Authenticate (ChatGPT sign-in recommended for higher limits)
codex            # then choose “Sign in with ChatGPT”

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

# 4. Add the official frontend skill, then restart Codex
# (in the Codex app) $skill-installer frontend-skill

# 5. Wire the Figma MCP server (optional, for design handoff)
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 \
  "Implement this design in React + Vite + Tailwind + TypeScript.
   Reuse my existing design-system components and tokens.
   Match spacing, layout, and hierarchy; make it responsive.
   Use the Playwright skill to verify the UI matches the
   references and iterate until it does."

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 + 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.

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.

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.