Google AI Studio + Figma Make + Codex: a bundle in which design and code are no longer separate stages

## Bundle logic: three phases with one context

The old workflow looked like this: the designer does → passes to the developer → the developer asks → the designer explains again. Every transition is a loss of context and time.

The new one looks different

1. AI Studio – form an idea, design scripts and generate the first UI through Gemini
2. Figma Make - bring the visual, iterate inside the design system
3. Codex – Receives code from both sources, memorizes rules once, runs independently

At each step, the artifacts of one instrument become the inputs of the next. No "explain everything to me from scratch.".

## Step 1 – Google AI Studio: Scripts and the First UI

Google AI Studio is not a design tool in the usual sense. This is a Gemini environment where you can not only generate text, but also build interactive prototypes through Canvas, design user flows and immediately receive working code.

In practice, two things happen at the same time:

Design logic. Before drawing screens, it is convenient to work out scripts in AI Studio - what happens when the user presses the button, what states the component has, what error appears when incorrect input. Gemini keeps this whole context in the conversation and helps you not miss edge cases before you even open Figma.

Generating UI through Canvas. AI Studio Canvas allows you to get a working prototype of the interface right in the browser - with real code behind each element. This is not a picture for the designer. It is an HTML/CSS/JS that can be exported immediately or used as a reference for Figma Make.

There is no need for pixel accuracy at this stage. You need to answer the question: “Do I understand what this product should do?”

## Step 2 – Figma Make: From Draft to Design System

Figma Make is an AI agent inside Figma based on Claude Sonnet 4. Its task is not to generate from scratch, but to iterate on top of what is already there, within your design system.

There are two types of input data:

• Screenshots and descriptions from AI Studio – as a visual and semantic reference
• Direct context through Figma MCP – if AI Studio has already generated code, Figma Make sees its structure and can work with it rather than guessing

Figma Make can do what AI Studio can’t: keep a component architecture, work with Auto Layout, honor tokens, manage states. "Add a dark theme," "make a mobile version of this screen," "bring all the buttons to the same style" - all this Make does in the context of a real project, not an abstract canvas.

The result of this move is not just beautiful screens. It is a structured design with named components, correct layers and exportable code through Dev Mode. That's what Codex is getting into.

## Step 3 – Codex: Rules Once, Next

This is where the most important thing begins. Codex is an agent system that runs tasks in an isolated cloud environment with your repository inside. The task can take anywhere from one to thirty minutes; Codex returns logs and test results for validation.

Codex receives input from two sources:

• ** From Figma Make** – via Figma MCP Server, which gives Codex direct access to component hierarchy, design tokens, and Code Connect mapping of real codebase components. Neither PNG nor Zeplin annotations are living structures.
• From AI Studio - exported prototype code as structural reference and scenario description.

But a one-time transmission is not enough. The main thing is to fix the rules so that Codex remembers them.

### AGENTS.md: Agent's memory

AGENTS.md is a file at the root of the repository that Codex reads before each task. It captures all the conventions: code conventions, architectural rules, test requirements, and—importantly for design—visual rules.

Example of the design section in AGENTS.md:

## UI & Design System
- Follow ./DESIGN.md for all visual decisions
- Use only components from /src/components — never create inline styles
- Button variants: primary, secondary, ghost — no custom variants
- Spacing scale: 4, 8, 12, 16, 24, 32, 48 (no arbitrary values)
- Dark mode via CSS variables, not duplicate components

This does not need to be repeated in every prompt. Codex reads the file at the start of each task – the rules are always with it.

DESIGN.md in the same directory describes a visual system in tokens. AGENTS.md refers to it – and the agent works within your brand automatically.

### Skill for repetitive tasks

If a process is repeated – for example, “add a new screen according to the design system” – it can be packaged into Skill: the SKILL.md file plus optional scripts. Skill is downloaded by the agent and applied without additional instructions.

### Bidirectional cycle

Figma + Codex integration works both ways. If the development has changed the component, the changes can be returned to the Figma Canvas via generate_figma_design and checked in the design before the next iteration. Design and code remain synchronized not only at the start, but also during the work.

## What it looks like in practice

Specific case: do SaaS-dashboard from scratch.

1. In AI Studio, you talk to Gemini about the basic scenarios: what the user sees immediately after logging in, what actions are available, what an empty state looks like. Canvas generates a rough prototype, and it works logically.

2. Open Figma. Figma Make sees the structure through MCP, you finish the visual: colors from the design system, typography, the state of the components. The output is a ready-made screen with clean layers and Dev Mode.

3. Codex: Create AGENTS.md with rules once. Drop the code from Figma Make. Set the task: “Implement this screen, follow AGENTS.md”. Codex works in an isolated environment, returns PR with code and test logs.

4. You need a change – rule in Figma Make, pass the update to Codex via MCP. The context is not lost, there is no need to explain from scratch.

The overall time saving on handoff is significant. According to practitioners working with similar stacks, the cycle from design to working component is shortened from days to hours.

## Honestly, where the bundle is not perfect

Figma MCP requires customization. Dev Mode and Code Connect needs to be configured correctly – without it, Codex gets a less structured context. For teams with a well-established Figma organization, this is not difficult. For a new project, a small upfront cost.

AI Studio Canvas is not Figma. Exported code from Canvas is the starting point, not the final. Sometimes it requires cleaning before transferring to Codex.

AGENTS.md works just as well as it is written. A surface file with three rules gives a slight increase. Well-designed - changes the quality dramatically. Take the time once.

Codex is still better on tasks up to 30 minutes. He divides large refactorings into subtasks, but very long sessions require supervision.

## Who's this bundle for

Suitable:

• Designers who want to see their design in live code – not in handoff-speak
• Solo developers who need to shut down both design and implementation
• Small product teams without individual designer and frontender

Not suitable:

• Teams with well-established process-heavy workflow – there is too much change of habits at once
• Projects without basic Figma hygiene: named components, tokens, normal layers. Codex only works well with good input structure

## Conclusion

Three tools, one idea: context should not get lost in the transition between design and code.

AI Studio forms logic and draft UI. Figma Make brings visuals to production quality within the design system. Codex gets that result through MCP, memorizes the rules through AGENTS.md, and then builds code that matches the design — not because the developer keeps it in mind, but because the rules are fixed in the repository.

It’s not “design helps code” or “code helps design.” It's one continuous job.