How to use Codex to create a complete interface or site design in Figma

With the release of Codex App (February 2026) and the integration of Figma MCP (Model Context Protocol), designers have gained superpower: one prompt → live prototype → ready-made editable frames in Figma.

## What you need before the start

1. Codex App (macOS) - download from the official OpenAI source (free for Free/Go, increased limits on Plus/Pro).
2. Figma MCP Server (remote) – connects in 1 click directly to Codex App via Skills → Figma.
3. Figma account with the right to edit in the desired workspace.

Okay. I don't need anything else.

## My checklist: How I do design in Figma via MCP

1. I receive introductory and references from the client.
2. I fix the visual language: colors, typography, grid, UI patterns (all in one prompt).
3. Using Codex App, I generate code → I run a local server → I send the entire UI to a new Figma file with one click.

## What is required

1. Link to Figma file with editing rights
2. **What we do: product type and main purpose of screen(s).
3. List of screens (you can just name them).
4. ** Style + 1-3 references** (Dribbble, Behance, competitor site).
5. Restrictions: brand colors, fonts, “what can’t”, text language, frame size (360×780, 1440×900, etc.).

## Which greatly accelerates and improves quality

• Ready texts for UI (or permission to write the draft yourself).
• Brand colors HEX, logo (SVG / PNG), icons in the set.
• Priorities: wow-visual/conversion/development speed.
• Technical frameworks: iOS / Android / Web / Tailwind / React + shadcn, etc.

## The client request template (just copy)

1. Product:
2. Purpose:
3. Screens:
(1)
(2)
(3)
4. Frame size: 360×780 (mobile) / 1440×900 (desktop)
5. Style: Modern minimalism / neumorphism / glassmorphism + references
6. Restrictions: brand colors #1A1A1A and #00FF99, Inter font, without animations in the first version, language - Russian
7. Interface text: I will add / write myself
8. Where to put in Figma: a new file in my workspace or here is the link.

## Step-by-step process

Step 1. Fixing visual language**

In Codex App I create a new project and write:

Create a design system for a fintech mobile application in the style of “quiet luxury + glassmorphism”.

Brand colors:
- Primary: #1A1A1A
- Accent: #00FF99
- Background: #0F0F0F with blur
- Text: #FFFFFF / #AAAAAA

Font: Inter, weights 400/500/600
Grid: 8px
16px for cards, 24px for large blocks
Effects: soft background-blur(20px), thin borderers 1px rgba(255,255,255,0.08)

Generate React + Tailwind components: Button, Card, Input, BottomNav, Header.
Make 3 options for each state.

Codex immediately creates a folder with components.

Step 2. Generating screens one by one**

Create an Onboarding 1 screen for an investment application.
Frame size: 375×812 (iPhone 14 Pro)
Status: First screen after splash

Composition:
- top logo + progress 1/4
Large illustration (flat minimal style, brand colors)
Title: "Invest in the future today"
Subtitle: "Simple Tools for Capital Growth"
CTA button: "Primary, full width"
- at the bottom, "Do you already have an account?"

Style strictly according to the design system from the previous step. Auto Layout is everywhere. Use the components.
After generation, run the local server and prepare to capture the UI in Figma.

Step 3. Send to Figma via MCP**

After generation, I write in Codex:

Run a local server on port 3000, open your browser and capture all UI into a new Figma file in my workspace "Client - InvestApp 2026". Name the file "InvestApp - Mobile Screens v1". Use remote Figma MCP.

Codex opens the browser, shows the capture toolbar – I click “Capture all” → 10 seconds later I get a link to the finished Figma file with all the layers, Auto Layout, components and variations.

Step 4. Iterations**

The customer says, “Make the button greener and add the wallet icon.”.

I'm just writing in Codex:

In Figma-file InvestApp - Mobile Screens v1, change the CTA button on the Onboarding screen 1: color #00CC77, add the wallet icon on the left. After the changes, update the code and make a new capture to the same file as Page "v1.1".

Done.

## Best Prompting Practices (To Make the Results Wow the First Time)

• Get the exact HEX colors, fonts, radii.
• Use components from the previous step – Codex remembers the context.
• For complex screens, do one by one: structure first, then visual, then states.
• Use the references in the prompt: "Style as in the reference https://dribbble.com/shot/12345678 but with our colors.".
• Do everything on Auto Layout + Variants + Local Variables.

## Conclusion

Codex App + Figma MCP is not a replacement for a designer, but a superpower. You still think about the user journey, psychology, conversion and brand.