Tutorials
Step-by-step guides on designing and prototyping with Codex, hand-picked from across the web.
GPT Image 2 inside Codex — a frontend workflow
An experience report on building UI with GPT Image 2 inside the Codex App: natural-language components, repo-aware brand reuse, and DOM-level commenting.
Hallmark — a design skill to fight AI-generated UI slop
A community Codex skill that installs in one command and aims to keep AI-generated UI consistent with your design taste.
Figma design-to-code: comparing MCP, Codex, and Kombai
A hands-on benchmark of three design-to-code approaches using the same Figma template across Figma MCP, Codex, and Kombai.
Turn Figma into React code using Codex
A practical step-by-step on using Codex to generate scalable React components from Figma, with refactor and accessibility checkpoints.
Codex Desktop — skills, plugins, automations
A complete tour of Codex Desktop's extension surfaces, including a section on integrating design tools like Paper into the workflow.
Designing delightful frontends with GPT-5.4
OpenAI's frontend art-direction guide: one-composition heroes, brand-first hierarchy, expressive typography, and dashboard restraint.
Build responsive frontends with Codex
OpenAI's official walkthrough on turning screenshots, briefs, and reference assets into responsive UI with Codex, including Playwright-driven visual iteration.
Building frontend UIs with Codex and Figma
Figma's blog on the MCP server beta — how to round-trip design context between Figma and Codex code generation.
Save workflows as reusable Codex skills
OpenAI's tutorial on capturing repeatable design and engineering workflows with the skill-creator pattern.
frontend-skill — OpenAI's curated design rules
The official frontend skill repository with hard rules for hero composition, dashboard restraint, and brand-first hierarchy.
Designing with Codex CLI — a designer's perspective
A designer-focused walkthrough on chaining Codex CLI, Figma MCP, and Code Connect to turn wireframes into production-ready UI.
Codex Agent Skills — official overview
OpenAI's reference on what Codex skills are, how SKILL.md is structured, and how to organize implicit and explicit skill invocation.