Will's manual on "using Codex(an AI Agent) through Figma MCP to write real designs directly to the Figma canvas" operation manual. The core is not "letting AI output images for you", but letting AI build editable Frames, components, variables, and Auto Layout in Figma just like a designer— the output is a real design draft that can be further modified, inspected, and delivered, not a flattened screenshot.
When to open this:
- You want Codex / Claude Code / Cursor to directly operate Figma, but don't know how to connect MCP or which skill to install
- You vibe-coded a product and want to retroactively produce Figma design drafts / a design system
- You want to draw flowcharts in Figma, generate PPT inner pages, or batch replace icons with a single-line prompt
- You can't tell what figma-use / figma-generate-design / prototype-to-figma each do
Division of labor with newtype · AI Coding Practice and Tool Stack Evolution division of responsibilities: that article is a panorama of "how to choose an AI Coding tool stack and the mindset of vibe coding"; this article focuses solely on the "design/prototype engineering" segment— down to the use cases, prompts, and pitfalls of each Figma skill. Overlapping parts (Codex's role in the newtype stack) are cross-referenced and not repeated.
0. One-sentence mental model (Why this set is worth learning)
Think of the entire chain as "equipping AI with a designer's hands that can actually operate":
- Agent(Codex / Claude Code / Cursor) = the AI's brain, which proactively completes goals (writing code, planning, operating interfaces), not a chatbot that only replies.
- MCP(Model Context Protocol) = the "interface/hands" attached to the brain. AI cannot touch Figma on its own; MCP enables it to operate Figma: creating a two-way connection between code and design.
- Skill(Skill) = a plain text file that stores "the long string of instructions you have to repeat every time" as a template. For example: "Open the design system → generate pages according to component rules → lay out with Auto Layout" can be encapsulated as a skill, which is triggered later with a single phrase
/figma-useor prompt. Figma has released official skills that can be used directly.
EN gist: An Agent (Codex) is the brain that acts on goals; MCP is the hands that let it reach into Figma; a Skill is a reusable text template that packages a repetitive multi-step instruction. The payoff: AI writes real, editable Figma layers (frames, components, variables, auto-layout) using your design system as source of truth — not a flattened screenshot.
Anti-pattern (the single most critical pitfall): Do not use tools like "browser screenshot/HTML to image" to import interfaces into Figma — the output is a flattened image with no layers, no design system components, and no annotations, which is exactly what this workflow aims to eliminate (see Rule 0 of prototype-to-figma).
1. Environment setup: Equip Codex with Figma's "hands" (MCP) + "skills" (Skill)
Before using the whole set, you must first understand three materials, otherwise you will go off track on basic concepts later:Skill(what to do), Figma link(who to do it to), attachments (Html / PRD / DRD / image, provide reference materials).
1.1 Connect to Figma MCP (Grant Codex permission to operate Figma)
There are two installation methods, remote version is preferred:
▸ Remote Figma MCP server (recommended)
- Open the top-left corner of the Codex app Plugins
- Click the button next to Figma
+→ Install Figma - Enter the authorization flow, click Allow access to let ChatGPT connect to your Figma account
- Return to Codex; you can use it once you see the Figma plugin is connected
▸ Desktop Figma MCP server (local version)
- Enable the MCP server in Figma desktop app Start the MCP server
- Configure the MCP server in Codex: Name =
figma,URL =http://127.0.0.1:3845/mcp,Save
For connection methods for other clients (VS Code / Cursor / Claude Code / Gemini CLI), see the official guide: uniformly add an HTTP MCP server with the URL
https://mcp.figma.com/mcp. For Claude Code, one line ofclaude plugin install figma@claude-plugins-official(installs the official plugin with MCP configuration + skills); for manual setup,claude mcp add --transport http figma https://mcp.figma.com/mcp.
Why provide both: The remote version is worry-free (cloud authorization works out of the box), while the desktop version is suitable if you want to locally convert Figma selections to code without going through the cloud.
Key pitfalls (permission/seat restrictions): “Capabilities that actually modify Figma, such as "Write to canvas" (Write to canvas), are only available for Full seat / Dev seat on paid plans; moreover,Dev seats can only write in drafts. Read-data tools have a hard limit of 6 calls per month for Starter / View seats. In other words: if you want AI to actually write designs into formal files, you need a paid Full seat.
EN gist: Prefer the remote MCP (Plugins → + → Install Figma → Allow access). Desktop alternative: enable MCP in Figma desktop, then add
http://127.0.0.1:3845/mcpin Codex. Write-to-canvas needs a paid Full/Dev seat; Dev seat is drafts-only.
1.2 Install / Manage Figma Skills
▸ Batch install (multiple skills in one zip)
- Unzip the zip, select the folder in Codex
- Prompt: "Please help me check all the Skills in this folder. Ignore the already installed ones, and help me install the ones that are not installed."
▸ Individual install (one .md file)
- Start a new Codex conversation, click
+, select Skill (.mdfile) - Prompt: "Please help me install this Skill."
▸ Management: Codex desktop client → left sidebar Plugin → top Tab Skills.
Community skills (third-party extensions): Capabilities beyond official skills are available at figma.com/community/skills, and can be taken as needed.
Why skills instead of typing manually every time: Skills encapsulate a fixed SOP (scan design system → build pages according to component rules → Auto Layout layout) into reusable templates. When triggered, AI strictly follows the process; stability comes from "clear metadata" rather than ad-hoc performance — the same principle as newtype · AI Coding Practice and Tool Stack Evolution §6.4 "Making models reliable relies on metadata constraints".
2. Three materials for preparing prompts + selecting the target object (Figma link)
Every prompt that asks Codex to operate Figma essentially combines three attributes:
| Attribute | What it is | How to provide it |
|---|---|---|
| Target object | Which page/layer to operate on | Figma link(see below) |
| Work to be done | What to do | /Skill or natural language |
| Attachment materials | What to reference | Html / PRD / DRD / image etc. |
How to get a Figma link (determines where AI operates):
- Select layer/Frame: Select any Frame or layer in Figma → right-click Copy link → paste into the Codex dialog box. Use case: let Codex modify this interface, or reference this interface's UI design system.
- Select Page: Select any Page → right-click Copy link → paste into the dialog box. Use case: let Codex modify the overall interface, or output the generated design to a fixed location(specify which page to draw on).
Why a link must be provided: The AI client cannot open this URL, but it can extract the node-id from it — MCP relies on this id to know which object to operate on. Without a link, AI does not know who to act on.
What a complete prompt looks like(Background: The Xiaohongshu "personal account page" is completed, and the new requirement is "enterprise account personal page"):
根据 PRD（小红书企业个人页）的需求，
使用 /Skill figma-use 在 [Figma Page link] 中生成小红书企业账户个人页面，
视觉风格与系统要求与 [Figma Frame link（小红书个人页）] 保持一致。
Output: Codex draws editable design drafts.
3. Figma Skill Quick Reference (Seven Core Capabilities)
For each skill below, we provide "Use case / When to use / Prompt template / Pitfalls".
3.1 figma-use — Write real content directly to the canvas (core capability)
Use case: Let Codex directly create/edit Frames, Components, Variables, Auto Layout, layout structures in Figma. Output is editable, inspectable, and further modifiable.
When to use: Any scenario where you want AI to directly operate Figma — creating new pages, building pages, modifying components, adjusting layouts, creating variables, modifying tokens, batch standardizing designs.
Prompt templates:
- "Use this Figma file
link, create a new page, and build a settings page based on existing components." - "Use this selection
link, add an empty state that conforms to the current design system." - "Use this Figma file
link, convert all raw color values in this frame to variables." (A common action in design systemization to batch collect hardcoded color values into variables)
Why: It is the foundation of other generative skills — the act of "writing real things to the canvas" itself is relied upon by all skills.
3.2 figma-use-slides — Operate Figma Slides, directly modify real PPTs
Use case: AI directly modifies real PPT content — adding slides, grouping slides, changing text/graphics, applying themes, writing speaker notes.
When to use: Throw content to Codex and let it interact with Figma Slides to directly output PPT inner pages.
Prompt templates:
- “
参考图SkillLinkUse the Skill to draw the content of the reference image on the new page, keeping the style consistent with the template." - "Use this slide
link, redo the layout of this page to make it consistent with the entire deck."
When not to use this and use something else: If you want to build an animated web-based presentation from scratch, use the
frontend-slidesskill; this one is specifically for operating "inside Figma Slides".
3.3 figma-generate-diagram — Text description → Editable diagrams
Use case: Directly turn any structured materials such as system descriptions / process descriptions / code / PRD / schema into real editable FigJam diagrams(Not images): Flowchart, Sequence Diagram, ER Diagram (Database Relationship Diagram), State Diagram, Gantt Chart.
Prompt template:
- “
PRD 附件SkillLinkBased on the attached content, create a user flowchart and place it on the corresponding Figma board.”
Why it is better than drawing tools: The output is editable real layers, not flattened PNGs; you can modify a node directly in Figma without going back to the drawing software to re-export.
3.4 figma-generate-design — Code/HTML → Complete Figma UI
Use case: Code → Real Figma UI. Feed it HTML, a specific page/view in code, a running web app, or existing project code → convert it into Figma UI.
When to use: Reverse-engineering design drafts for engineering products, syncing existing products to Figma, supplementing UI sources for legacy projects, Dev → Design workflow, rapid reconstruction of design pages.
Prompt template:
- “
HtmlSkilllinkBased on the HTML, generate the corresponding Figma page.”
3.5 figma-generate-library — Codebase → Design System Library
Use case: From a codebase (especially products built via vibe coding) or existing Figma files,reverse-generate/update the Figma Design System Library. It will: ① Scan the codebase or existing Figma → ② Generate color variables / spacing tokens → ③ Automatically build a standard design system structure (Cover / Getting Started / Foundations) → ④ Generate color docs / typography docs → ⑤ Create component variants + auto layout → ⑥ Self-check (Code Connect mapping, accessibility check).It will ask for your confirmation at every step.
When to use: You already have a code product or a large number of Figma interfaces, and want to reverse-extract a set of design systems.
Prompt template:
- “
SkilllinkUse the Skill to generate the design system for the selected Page.”(The process requires multiple confirmations, and the final step is review)
Why this step is important: Vibe coding outputs are often "functional but lack a design system", and styles get out of control after scaling. Extracting tokens/component libraries in reverse first gives subsequent AI generation a "source of truth" to follow (referencing newtype · AI Coding Practice and Toolstack Evolution §9.3 Hidden risks of "vibe coding cleanup").
3.6 prototype-to-figma — Running prototype → Frame-by-frame Figma state drafts
Use case: Directly convert running code prototypes into editable Figma interface flows — split an interactive prototype into frame-by-frame state drafts, and map to design system components as much as possible. Open source address github.com/alima-max/prototype-to-figma-skill.
When to use: After vibe coding you have runnable pages and want to enter Figma for design optimization / review / delivery; or you want non-technical stakeholders to conduct asynchronous review of a prototype.
Prompt template:
- “
Html 或 vibecoding 产品 linkSkill/prototype-to-figmaFigma page linkRun the Skill to convert existing project code into editable Figma UI, and map to Design System components as much as possible.” - “
Skill/prototype-to-figmaPlayer DS linkBased on the existing Player DS design system, design a page for the new feature "[feature description]" and place it inFigma page link. ”
Internal logic of this skill (extracted from reading SKILL.md, engineering principles worth learning from):
- Rule 0 — Never use browser screenshots/HTML-to-image conversion: Must read source code (CSS modules / Tailwind / inline styles / React component tree) and use
use_figmaprogrammatic frame construction; screenshots only produce flattened images with no layers, no components, and no annotations. - Rule 1 — Never create new Figma components: For elements with no DS match, assemble them with primitives (frame/rectangle/text) and add a "DS Drift" annotation to explain what is missing, instead of polluting the design system.
- Rule 2 — Do not miss any visible element: Every visible element must appear in Figma (as a DS instance or primitive). "Skip if no DS match is found" is the number one cause of incomplete output.
- Rule 3 — Attach annotations to nodes, and only mark key flow points: Use
node.annotations=[...]attached to real layers (displayed on the correct element in Dev Mode), do not use floating text boxes; only mark Interaction (blue, state transitions / primary CTA / grouped controls) and DS Drift (orange, missing components / missing variants / unbound variables),2–4 items per frame, so reviewers can understand the entire flow in 30 seconds. - Complete 6-phase process: Phase 0 Define file + probe capabilities → 1a Read prototype source code (component list / interaction flow / layout / CSS measurements) → 1b Report scope for your selection (skip if ≤2 flows) → 2 Map components to the design system → 3 Plan page structure → 4 Build frames in Figma + bind variables + add annotations → 5 Add flow overview frame → 6 Self-check + deliver.
- Capability tiers: Clients are divided into four tiers by Inspect/Write/Code Connect capabilities: Full / Write / Inspect-only / None; when there is no Write capability, it degrades to producing a markdown specification document instead of a Figma file.
Pitfalls (tested by Will): There are bugs in spacing, but it is not a big problem — the greatest value is that it can extract every page from vibe coding output to generate Figma UI, splitting states frame by frame.
3.7 Community skills — Third-party extensions
Capabilities beyond official skills are available on figma.com/community/skills on demand.
4. Combined workflows (chaining multiple skills together)
Beyond individual skills, real productivity lies in "combination". The following five are practical recipes for chaining the above skills into end-to-end flows.
4.1 Code → Figma: Turn a running prototype into editable design drafts
Scenario: After vibe coding you have runnable pages and want to enter Figma for optimization/review/delivery.
Steps: ① Start the prototype locally (accessible at localhost) → ② Input in Codex /prototype-to-figma → ③ Let the Agent capture your localhost → ④ Open Figma to generate pages in flow order, wait until the entire flow is converted into design frames → ⑤ Modify the design directly in Figma → ⑥ Let the Agent, based on the revised Figma file,write back to code(update prototype based on this Figma design).
Why: Design↔code closed loop, no need to manually sync code when modifying designs.
4.2 Code Design System ↔ Figma: Two-way sync of design systems
Scenario: You have a real design system (dark mode / tokens / components) and want AI-generated code to strictly follow it instead of generating randomly.
Steps: ① Import code design into Figma (/figma-generate-design) → ② Import design tokens into Figma (/figma-generate-library) → ③ Adjust variables in Figma (primary color / dark mode palette / text contrast / spacing,no code changes needed) → ④ Push back to code, Agent updates the code design system.
Why: Turn "modifying the design system" from editing code into editing Figma variables; designers can operate independently and write back with one click after finishing.
4.3 Let AI output UI solutions in Figma (explore multiple solutions based on existing designs)
Scenario: You already have design drafts and want to quickly explore multiple directions without starting from scratch.
Steps: ① Input design problems (e.g., poor conversion of a module), user research, constraints, expected directions (in conjunction with the AI-assisted UX · Experience/UI Design Phase (Prompts and Processes for Using AI to Generate Beautiful UI · Design Systems · Color Schemes · Interaction States · Microcopy · UI-to-Code Figma · Responsive Design) Discover/Define/Ideate methods) → ② Input in Codex /figma-use(using your existing components / variables / styles) → ③ Agent directly outputs optimized solutions in Figma → ④ Manual refinement by designers.
4.4 Interaction framework / product prototype → New system UI interface
Scenario: Directly generate new design requirement pages based on interaction frameworks or prototypes; try multiple solutions.
Steps: ① Input the interaction framework (self-drawn or reference image) → ② Input in Codex /figma-use /figma-generate-design, with a prompt such as "Combine the interaction framework, text, and functional content of the reference image with the Figma link UI visual system to design a new interface.Keep the left sidebar, only generate the content of the right dashboard. Do not reference visual styles such as colors and rounded corners from the reference image.”→ ③ Agent directly outputs new solutions in Figma → ④ Manual refinement.
Why the prompt should say "do not reference colors/rounded corners": Let the AI only take the structure/information architecture from the reference image, and apply the design system you specify for visuals — to avoid it copying the visual style of the reference image as well.
4.5 Base image screenshot → Direct output of initial interface draft
Scenario: You have a base image/screenshot and want to generate an interface on top of it.
Steps: ① Prepare the interface image to be generated, upload it to the Codex dialog box → ② Input /figma-use /figma-generate-design, such as "Add HMI in-vehicle interface modules and interaction design (Figure 1) on top of the base image (Figure 2), use frosted glass translucent effect for the design language, output in page link”→ ③ Agent first scans the reference images, then creates the interface in Figma → ④ Manual refinement by designers (replace icons, replace PNG real-object images).
Note: You can also directly output Figma drafts based on interfaces produced by image2.
4.6 Scan local SVG icons, automatically semantically match and replace icons in the UI
Scenario (high-frequency pain point): AI has generated Figma drafts, but icons are of poor quality and low completion.
Steps: ① Prepare a local Icon folder (all SVGs inside) → ② Start a new conversation, select the target folder in the folder selector below → ③ Input /figma-use /figma-generate-design, such as "Find icons that match the semantics among all icons in the folder, and replace all icons in Page link this UI.”→ ④ Agent first scans the folder data, then replaces in Figma → ⑤ Manual refinement.
Note: Not just icons — the same method can replace real copy, real images, avatars, batch upgrading AI-generated "placeholder-level" content to real content.
Why: The weakest link in AI-generated UI is icons/placeholder content; letting it semantically match and replace from your real asset library brings completion to full in one step.
5. Anti-pattern summary
| ❌ | ✅ |
|---|---|
| Import interfaces into Figma using browser screenshots/HTML-to-image conversion | Read source code and programmatically build frames to produce real designs with layers/components/annotations |
| Create new components when no DS component is matched | Assemble with primitives + add DS Drift annotations, do not pollute the design system |
| Skip the element when no DS match is found | Every visible element must appear (as an instance or primitive) |
| Make annotations as floating text boxes | node.annotations Attach to real nodes, 2–4 items per frame only marking key flow points |
| Let AI freely decide visuals | Explicitly state in the prompt "only take structure, do not reference reference image colors/rounded corners" |
| Try to write to the canvas with a Starter/View seat | Writing to the canvas requires a paid Full/Dev seat; Dev seat only works for drafts |
| Scale vibe coding outputs without extracting a design system | First figma-generate-library Reverse-accumulate tokens/component libraries |
| Tolerate low-quality placeholder icons generated by AI | Scan local SVG library and auto-replace by semantics (§4.6) |
References and extensions
Primary references: sources/reference/will-ai-note/Codex + Figma/ All 16 leaf.md files + parent intro + two skill bundles (prototype-to-figma-skill 's SKILL.md / mcp-server-guide 's README.md).
Companion wiki:
- newtype · AI Coding Practice and Toolstack Evolution — AI Coding toolstack selection and vibe coding mindset (this article is the implementation of the "design/prototype engineering" section within it)
- AI-assisted UX · Experience/UI design phase (prompts and workflows for using AI to generate beautiful UI, design systems, color schemes, interaction states, microcopy, UI-to-code Figma, and responsive design) — End-to-end UX methodology in Will's notes (Discover/Define/Ideate; §4.3/4.4 research and divergence phases connect here)
History
- 2026-06-03 v1.0 created — ingest
Codex + FigmaAll 16 leaf md files in the area + parent intro; unzip 2 skill bundles to read SKILL.md/README.md. 5 sections: mental models / environment setup (MCP+Skill) / quick reference for seven core skills / six combined workflows / antipatterns. Bilingual.