Codex voor design.

Wat OpenAI Codex precies is (en wat niet)

Eerst een verduidelijking die bijna iedereen die op “Codex” zoekt op het verkeerde been zet. De oorspronkelijke OpenAI Codex was een code-completion-model uit 2021 dat de vroege GitHub Copilot aandreef en in 2023 werd uitgefaseerd. Daar gaat deze pagina niet over. De Codex van vandaag is de agentic coding-tool van OpenAI — hij plant, schrijft, draait en verifieert code op basis van taken in natuurlijke taal.

De moderne Codex komt in vier vormen: een terminal-CLI (herschreven in Rust, gelicentieerd onder Apache-2.0), een IDE-extensie voor VS Code, Cursor en Windsurf, een cloud-/web-ervaring voor gedelegeerde async-taken, en een desktop-app met een ingebouwde browser en Computer Use.

• Standaardmodel: Vanaf medio 2026 is het aanbevolen model gpt-5.5, waarbij gpt-5.4 het model is dat OpenAI expliciet trainde voor frontend en computer use.
• Instructiebestand: Codex leest een AGENTS.md-bestand in je project (een cross-tool-standaard) voor projectregels — de natuurlijke plek om je designconventies vast te leggen.
• Sandbox: Hij draait in een sandbox op kernelniveau (standaard workspace-write), zodat een agent die je UI bewerkt niet buiten het project kan dwalen.

• Leverancier: OpenAI
• Credential: OpenAI API-key (BYOK) of ChatGPT-abonnement (Free / Go / Plus / Pro / Business / Enterprise)
• Licentie van de CLI: Apache-2.0, open source

Waarom Codex nu goed is in design

Begin 2026 kwamen drie dingen samen die van Codex een echte design-tool maakten in plaats van een generieke codegenerator.

• Een frontend-getraind model: OpenAI leverde GPT-5.4, het eerste mainline-model getraind voor frontend en computer use, met veel beter beeldbegrip over de hele design-workflow en sterkere zelfverificatie. Het kan zelfs mood boards en visuele opties genereren voordat het zich vastlegt op de definitieve assets.
• Een officiële frontend-skill: De openai/skills-catalogus levert een samengestelde frontend-skill die echte smaak afdwingt: cardloze layouts, full-bleed hero's, merk-eerste hiërarchie, ingetogen beweging, hooguit twee lettertypen en één accentkleur — en laat Codex een visuele these schrijven voordat hij bouwt.
• Browserverificatie: Met de Playwright-skill opent Codex een echte browser, herschaalt naar breakpoints en vergelijkt zijn output terug met de referentie in plaats van alleen te controleren of de build slaagt.

De les achter alle drie: Codex heeft standaard geen smaak. Hij levert goed design wanneer je hem beperkingen geeft — een design system, een esthetische skill en concrete referenties. Open Design verpakt precies die inputs, en daarom passen de twee samen (meer hieronder).

Codex voor designwerk opzetten, vanaf nul

Dit is het volledige pad van een schone machine naar een Codex die UI kan bouwen en verifiëren.

# 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

• Leg je designregels vast: Zet je tokens, primitives en conventies in AGENTS.md of een DESIGN.md en wijs Codex erop, zodat de output bij een merk past in plaats van terug te vallen op een generieke look.
• Kies het juiste reasoning-niveau: OpenAI merkt op dat laag-tot-gemiddelde reasoning-niveaus vaak sterkere frontend-resultaten opleveren dan de hoogste instelling.

De screenshot-naar-UI-workflow

De design-lus met de meeste hefboomwerking bij Codex is een referentiebeeld omzetten in werkende, responsieve UI en itereren tot het klopt. OpenAI's eigen richtlijnen komen neer op vijf stappen.

1. Begin met de helderste visuele referenties die je hebt — en neem meerdere states mee (desktop en mobiel, hover, leeg, laden), niet alleen één hero-shot.
2. Wees specifiek in de prompt; vage prompts leveren generieke UI op.
3. Bereid een design system voor en vertel Codex waar de tokens en canonieke primitives staan.
4. Schakel de interactieve Playwright-skill in zodat Codex in een echte browser rendert en naar breakpoints herschaalt.
5. Itereer door Codex zijn implementatie terug te laten vergelijken met de screenshots — niet alleen te bevestigen dat het bouwt.

Voer beelden in door een screenshot in de terminal te slepen of met de image-flag, en prompt dan met concrete beperkingen:

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

Draai een dev-server in een tweede terminal, houd prompts klein en gericht, en commit goede iteraties / draai slechte terug (vertel Codex wanneer je terugdraait) zodat elke ronde voortbouwt op een schone basis.

Codex + Figma: design ↔ code-round-trip

In februari 2026 kondigden OpenAI en Figma een officieel partnerschap aan, waarmee de eerdere Figma MCP-bèta een eersteklas, bidirectionele integratie werd. Hij werkt in beide richtingen.

• Design → Code: Kopieer de “link to selection” van een frame in Figma, plak die in Codex met get_design_context en vraag hem het design te implementeren met je bestaande componentbibliotheek.
• Code → Design: De generate_figma_design-tool (“Code to Canvas”) zet een live, draaiende UI terug om in bewerkbare Figma-frames — het hele scherm, een geselecteerd element of een heel bestand.

De Figma MCP draait als een remote server en is vrijgesteld van rate limits. Voeg hem eenmalig toe en hij is beschikbaar voor Codex, Claude Code, Cursor, VS Code en meer — precies het soort draagbare, multi-agent-capaciteit dat Open Design is gebouwd om te orkestreren.

Codex vs Cursor vs Claude Code voor design

Er is geen enkele winnaar voor designwerk — elke agent heeft een andere kracht, en ervaren teams stapelen ze. Een eerlijke samenvatting:

Het terugkerende oordeel van de community is dat smaak van mensen komt: alle drie vallen zonder skills, referenties en beperkingen terug op een generieke esthetiek. Dat is het echte probleem dat opgelost moet worden — en het heeft de vorm van een design-tool, niet van een model.

Valkuilen, en hoe je de “AI slop”-look vermijdt

De meest voorkomende klacht over door Codex gegenereerd design is dat het generiek oogt — zachte gradiënten, zwevende panelen, te grote afgeronde hoeken, dramatische schaduwen, een Inter-en-paars-sfeer die “schreeuwt dat een AI dit maakte.” Andere gemelde problemen zijn kapotte mobiele layouts, instructies die in de UI-tekst lekken en het snel bereiken van gebruikslimieten.

• Installeer een frontend-skill: Een samengestelde esthetische skill dwingt Codex zich op een echte richting vast te leggen in plaats van de standaard look.
• Schakel Playwright-verificatie in: Laat Codex renderen en zichzelf controleren over breakpoints heen, zodat layouts niet stilletjes breken op mobiel.
• Lever tokens en referenties aan: Echte design-tokens en referentie-screenshots zijn de grootste hefboom op de outputkwaliteit.
• Leg regels vast in AGENTS.md: Zet stijlregels als “geen hero cards, maximaal twee lettertypen, merk-eerste hiërarchie” daar waar de agent ze elke ronde leest.

Merk op dat elke remedie draait om het geven van een samengestelde designcontext aan de agent. Die context met de hand onderhouden, per project, is precies het sleurwerk dat Open Design wegneemt.

Designen met Codex binnen Open Design

Open Design is de open-source designlaag waar de workflow hierboven steeds om vraagt. Het behandelt Codex als een first-party adapter en omhult hem met een samengestelde bibliotheek van skills en design systems, een gestructureerde render-pipeline en een lokale desktop-UI — zodat de designcontext die Codex goed maakt er vanaf de eerste run is, niet elke keer met de hand samengesteld.

1. Installeer Open Design en kies Codex als je agent.
2. Authenticeer met je OpenAI API-key (BYOK) of ChatGPT-abonnement — credentials blijven op je machine en worden nooit via ons doorgesluisd.
3. Kies een design system en een skill, en genereer vervolgens decks, prototypes en landingspagina's met consistente smaak.
4. Elk artefact en DESIGN.md-bestand staat in je eigen repo, niet in een gehoste cloud.

Dezelfde Codex-agent, dezelfde key — plus een echte, draagbare, open-source design-workflow eromheen. Het is local-first en Apache-2.0, dus niets over je werk of je credentials verlaat je machine.

Veelgestelde vragen

1. 01 Kan OpenAI Codex echt designwerk doen? +

   Ja — met een frontend-skill, een design system en echte referentiebeelden in context produceert Codex (zeker op GPT-5.4) responsieve UI van productiekwaliteit en kan hij die in een browser verifiëren. Zonder die context neigt hij naar een generieke look, en dat is de kloof die Open Design dicht.

2. 02 Is dit de OpenAI Codex Product Design-plugin? +

   Nee. Open Design is een onafhankelijk open-source project dat Codex integreert als agent. Het vult OpenAI's eigen tooling aan met een local-first, open bibliotheek van skills en design systems.

3. 03 Heb ik een ChatGPT-abonnement nodig om te designen met Codex? +

   Je kunt zowel een OpenAI API-key (BYOK) als je ChatGPT-abonnement gebruiken. Inloggen met ChatGPT geeft doorgaans ruimere limieten; Open Design sluist je credentials hoe dan ook nooit door.

4. 04 Codex of Claude Code voor frontend-design? +

   Beide zijn sterk. Claude Code staat bekend om specifieke, codebase-bewuste designbeslissingen; Codex heeft sterke visuele afwerking na GPT-5.4 en blinkt uit in gedelegeerde, gesandboxte builds. Veel teams gebruiken beide — met Open Design wissel je van agent zonder je design-workflow te veranderen.

5. 05 Hoe verbind ik Codex met Figma? +

   Voeg de officiële Figma MCP-server toe (codex mcp add figma --url https://mcp.figma.com/mcp). Je kunt dan Figma-frames in code implementeren met get_design_context en een draaiende UI terugduwen naar bewerkbare Figma-frames met generate_figma_design.

6. 06 Hoe vermijd ik de generieke “AI slop”-esthetiek? +

   Installeer een frontend-skill, lever echte design-tokens en referentie-screenshots aan, leg merkregels vast in AGENTS.md en schakel Playwright-verificatie in. Open Design levert deze als een samengestelde bibliotheek, zodat je de setup per project overslaat.

7. 07 Is Open Design gelieerd aan OpenAI? +

   Nee. Codex is een product van OpenAI; Open Design is een onafhankelijk open-source project dat hem ondersteunt als first-party adapter. OpenAI en Codex zijn handelsmerken van OpenAI.

8. 08 Zijn mijn bestanden en credentials veilig? +

   Ja — Open Design is local-first. Je bestanden, artefacten en DESIGN.md blijven in je eigen repo, en je OpenAI-credentials worden direct gebruikt door je agent, nooit via Open Design-servers geleid.