Figma Generate Design Skill: Code to Figma Screens

What does figma-generate-design do?

The skill's most pointed rule is about order: create a wrapper frame first, then build each section directly inside it, because moving nodes across use_figma calls with appendChild silently fails and leaves orphaned frames.

It builds a Figma screen from code or a description by reusing a published design system: components, variables and text or effect styles are found with search_design_system and imported, not redrawn with hex colors.

The workflow in four moves

1. Understand the screen by reading the source and listing sections and the components each one uses.
2. Discover components, variables and styles, preferably by inspecting existing screens in the file first.
3. Create the page wrapper frame in its own call and return its ID.
4. Build one section per call inside the wrapper, then check each with get_screenshot.

A web app shortcut

For web apps that render in a browser, the skill suggests running generate_figma_design in parallel to capture the live page. Use that capture as the layout target, keep the component instances from your own build, then delete the capture.

Scope and handoffs

Use it when

• The deliverable is a Figma screen made from design system instances.
• The target file has a published design system or team library access.
• You have source code or a description of the page to build or update.

Use something else when

• You want code from a Figma design. The skill points to figma-implement-design.
• You want new reusable components, which the skill sends to figma-use.
• You want Code Connect mappings. The skill points to figma-code-connect-components.

Use it with UiChemy

This skill goes from code to Figma, the opposite direction of UiChemy Figma to WordPress, which converts a finished Figma design into an editable WordPress page. A screen assembled here from design system parts can feed that step. Click Get Started on uichemy.com. Related pages: Figma MCP server, UI UX design system and design systems MCP.

How to install Figma Generate Design Skill: Code to Figma Screens

$skill-installer figma-generate-design

1. Open Codex

   The repository README documents $skill-installer as the way to install curated skills inside Codex.

2. Install by name

   Run $skill-installer figma-generate-design. Curated skills install by name and default to the skills/.curated folder.

3. Install figma-use as well

   The skill says to load figma-use before any use_figma call, so load that skill as well.

4. Restart and connect Figma

   Restart Codex so it picks up the skill, then connect a Figma MCP server and point the agent at a file with a published design system.

Check that it loaded

Ask the agent to build a pricing page in a Figma file that has a design system. It should list sections, search for components and variables, then create a wrapper frame before any section.

Read the official instructions on GitHub

Key features

• Design system reuseFinds published components, variables and styles and uses them instead of drawing boxes with hardcoded colors and pixel values.
• Existing screen inspectionWalks the instances and bound variables of a frame already in the file to get an exact component and variable map.
• Broad design system searchFalls back to search_design_system with many short terms and synonyms, with options to include components, variables or styles.
• Library variable warningNotes that local variable lookup returns only the current file, so an empty result does not prove no variables exist.
• Wrapper frame firstCreates the page frame in its own call and builds sections inside it, avoiding the silent failure of reparenting across calls.
• One section per callBuilds each section separately, imports components by key and binds variables for padding and fill instead of literal values.
• Text override with propertiesFills placeholder text through each component's TEXT properties with setProperties, including on nested instances.
• Screenshot checkValidates every section with get_screenshot, watching for clipped text and overlapping elements.
• Web app parallel capturePairs the build with a generate_figma_design capture for layout accuracy, then removes the capture.

Frequently asked questions