Preface

Many teams have grown accustomed to the “design draft → code” workflow: select a Frame in Figma, then use MCP or Code Connect to map components to real code. The reverse path often gets stuck, however: when product or engineering teams modify the page structure first, the design file remains outdated; or after a landing page goes live, designers have to manually rebuild it in Figma using rectangles and hardcoded color values. The result is that design systems and code fall out of sync, and during reviews reviewers can only guess spacing by looking at screenshots.

What figma-generate-design solves is this reverse workflow: on the premise that you have connected Figma MCP, and the target file has (or can access) a published design system, it assembles application pages, views or multi-block layouts into maintainable Figma drafts using design system component instances and Tokens, rather than a pile of hardcoded hex color blocks.

What It Is

figma-generate-design is an Agent Skill that follows the universal SKILL.md format, and is included in the .curated directory of OpenAI’s openai/skills repository; Figma also provides identical capability descriptions and installation entry points in its MCP-related documentation and figma/mcp-server-guide. It is designed for tasks like “writing full-screen/multi-block views into Figma”, and must be used together with figma-use: the latter constrains the Plugin API usage of use_figma (such as color range 0–1, font loading, incremental calls, etc.), while this Skill specifies the workflow of “discover design system → assemble by blocks → screenshot verification”.

One-sentence positioning: Start from code or descriptions, reuse the published design system, and create or update complete pages (and multi-block containers such as modals, drawers, etc.) in Figma, instead of manually drawing primitive graphics.

The official boundaries are also clearly defined to avoid misuse with adjacent Skills:
- Use this Skill when the deliverable is a “Figma view composed of design system component instances”.
- When you need to generate code from Figma, use figma-implement-design instead.
- When you need to create new reusable components/variants, use figma-use directly.
- When you need to write Code Connect mappings, use figma-code-connect (or the corresponding figma-code-connect-components in openai/skills) instead.

Core Features and Highlights

Combined with the official SKILL.md (the overlapping consistent parts between openai/skills and Figma’s documentation), the capabilities can be summarized into the following sections.

  1. Find the design system first, then start drawing
    Through inspection of existing INSTANCEs on the screen, search_design_system (components / variables / styles), and Code Connect file parsing emphasized in the Figma version of the workflow, you can obtain component keys, color and spacing variables, text and effect styles. Prioritize using importComponentSetByKeyAsync, importVariableByKeyAsync, and importStyleByKeyAsync to bind Tokens instead of hardcoding color values and pixel spacing.

  2. Incremental assembly by blocks
    First create the outer Frame of the page (such as a wrapper with vertical Auto Layout), then only create one main block (Header, Hero, content area, footer, etc.) in each use_figma call, and attach the node to the wrapper. The official explicitly prohibits “building scattered nodes on the page root first and then moving them in with appendChild” — cross-call relocation will fail silently, leaving orphaned Frames.

  3. Parallel execution with generate_figma_design (Web only)
    For web applications that can be rendered in a browser, it is recommended (and even required when there are images) to run two workflows in parallel: this Skill builds the structure using design system instances; generate_figma_design captures pixel-level screenshots as visual references. Align the results and then delete the screenshot artifacts. For non-Web (iOS/Android) scenarios or partial updates only, follow the standard workflow.

  4. Can update existing screens
    Use get_metadata to view the structure, locate the blocks to be modified, perform variant replacement, copy/setProperties overrides, add or delete blocks, and then use get_screenshot for section-by-section acceptance testing, avoiding issues where low-resolution full-page screenshots hide problems such as cropped text and unchanged placeholder copy.

  5. Error recoverable
    Follow the figma-use convention: a failed use_figma call is atomic and will not leave semi-finished products; pause to read the error, use get_metadata / get_screenshot to check the current state if necessary, fix the script and retry.

Installation and Enablement

There are two hard prerequisites before using (official Prerequisites):
- You have connected Figma MCP (the remote server address is generally https://mcp.figma.com/mcp).
- The target Figma file has published design system components, or can access the team library; and you need to provide the file URL / fileKey, as well as the source code or description to be restored. If you do not yet have a file, you need to create one first (such as /figma-create-new-file or create_new_file), then use the returned fileKey for subsequent writing and screenshot operations.

Figma’s documentation recommends installing the official plugin in supported Agents, and configuring MCP and common workflow Skills (including capabilities like this Skill) at the same time.

Cursor (in Agent chat):

/add-plugin figma

Claude Code:

claude plugin install figma@claude-plugins-official

After installation, complete the Figma OAuth as prompted by the client, and use commands like /mcp (Claude Code) to confirm the connection is successful.

Codex: You can install the Figma plugin and authorize it in the Plugins section of the Codex App; or use the CLI:

codex mcp add figma --url https://mcp.figma.com/mcp

Install this Skill individually

If your tool has already connected MCP and only needs to supplement the Skill directory, the installation method provided by skills.sh is:

npx skills add https://github.com/openai/skills --skill figma-generate-design

You can also install the dependent figma-use as needed. The openai/skills repository previously provided the $skill-installer method for installing curated Skills by name for Codex; the repository’s README has prompted the overall migration direction, and for new environments it is more recommended to follow the official Figma plugin/documentation, the original Skill text can still be viewed from the aforementioned GitHub path.

Under the universal SKILL.md format, Cursor, Codex CLI, Claude Code and other tools that support Agent Skills can discover and load it; refer to the respective documentation for the plugin directories and enablement commands of each tool, do not hardcode unvalidated paths.

Typical Usage Examples

The trigger phrasing is clearly written in the Skill description, for example: “Write this page into Figma”, “Update the Figma screen according to the code”, “Build a landing page using the design system”. Below is a reproducible step compressed according to the official Required Workflow.

1. Understand the screen before touching the canvas
Read the page source code, list the large blocks (Header, Hero, content, FAQ, Footer, etc.) and the buttons, cards, navigation and other components used; if it comes from code, pay attention to the default props of the components (for example, the default is primary when variant is not specified).

2. Discover components / variables / styles
Prioritize scanning existing INSTANCEs on the screen to get an authoritative component map; if there is no existing screen, use search_design_system with broad keywords (button, nav, card, accordion, etc.). Note when searching for variables: figma.variables.getLocalVariableCollectionsAsync() returning empty does not mean there are no variables — remote library variables need to be searched with search_design_system and includeVariables: true.

3. Create the wrapper first, then write by blocks
Use a single use_figma call to create the outer Frame and return the wrapperId. Then use the ID to retrieve the wrapper at the start of each subsequent call, create blocks inside and appendChild them, and set properties like layoutSizingHorizontal = "FILL" after attaching the node to the parent. Include logging parameters when calling, for example:

// Pass in when calling use_figma (only for logging, does not affect execution)
// skillNames: "figma-generate-design"
// If loaded via MCP resource, it needs to be written as "resource:figma-generate-design"

Import component sets, bind variables, use setProperties to override instance copy (more stable than directly modifying characters) within the block, and take a get_screenshot after building each block to check for cropping and overlapping.

4. Parallel screenshot calibration for Web scenarios
Run generate_figma_design in parallel on the same fileKey, use the pixel draft to correct spacing and visuals, and delete the screenshot layer after confirmation. When the source code contains images, the Figma documentation emphasizes: use_figma cannot directly pull external link images, you need to copy the imageHash from the screenshot node.

5. Update existing drafts
For a specified button instance, use swapComponent to switch to a new variant, modify copy, add or delete blocks, and make local fixes instead of rebuilding the entire page.

A minimal “user-side” prompt example:

Please load figma-use and figma-generate-design.
Target file: https://www.figma.com/design/<fileKey>/...
Write the landing page of pages/Home in the repository into Figma using the existing design system components:
First create the Homepage wrapper, then write segment by segment in Header / Hero / Pricing / Footer order,
Take a screenshot for verification after each segment; if the page can be run locally, use generate_figma_design in parallel as a visual reference.

Applicable Scenarios and Notes

Applicable for:
- The design system has been published in Figma, the code-side components are generally aligned, and you need to synchronize new pages or revised results back to the design file.
- The product/frontend team releases a runnable page first, and designers need to conduct reviews based on real component instances instead of static screenshots.
- Maintain multiple screens in the same file, and require consistent naming, dimensions, and layout habits with existing screens.

Notes:
- Without a design system (or unable to access the team library), the value of this Skill will be greatly reduced — it deliberately opposes “drawing” a full screen with hardcoded color values.
- You must comply with the figma-use rules at the same time; skipping them will lead to repeated pitfalls in color range, fonts, FILL order and other issues.
- Only create one large block per use_figma call; trying to do too much at once is the most likely cause of layout and orphaned node issues.
- Reduced full-page screenshots are unreliable; you should take screenshots of each section by node ID.
- The copy in openai/skills and Figma’s mcp-server-guide will be iterated slightly (for example, the Figma version emphasizes Code Connect and parallel image capture); refer to the actual SKILL.md you have loaded.

Summary

figma-generate-design turns the “code/description → Figma” workflow into a repeatable Agent workflow: connect MCP, reuse the design system, write by blocks and close the loop with screenshots. For teams that have already suffered from “design drafts and online pages not matching”, it complements the reverse half of figma-implement-design.

Official address:
https://github.com/openai/skills/tree/main/skills/.curated/figma-generate-design

For Figma MCP and installation instructions, please refer to:
https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
https://github.com/figma/mcp-server-guide