Figma Generate Design

This is the heavyweight workflow for building full Figma screens from code or descriptions while respecting your design system. Instead of drawing rectangles with hardcoded hex values, it discovers existing components through Code Connect files, searches library assets, and assembles pages section by section using proper component instances and variable tokens. The workflow is strict about sequencing: you discover components first, then build incrementally. It includes a parallel path for web apps that captures pixel-perfect screenshots via generate_figma_design while simultaneously building with proper components, then reconciles the two. The result is screens that stay linked to your design system rather than becoming one-off snowflakes. Expects you already have a published component library and knows you'll need figma-use loaded alongside it.

skills.sh installs: 6.4K
GitHub stars: 2.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add figma/mcp-server-guide --skill figma-generate-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Build / Update Screens and Views from Design System

Hard deliverable gate: Code-to-design output must recreate the UI as editable text, components, icons, and hierarchy. Treat any screenshot or flattened rendering of the complete UI only as a visual reference: never upload or import it into the deliverable, including as the wrapper fill or a child node, even if it exists in the repository or appears more pixel-accurate. Before completion, inspect the result; if the UI is not primarily represented by editable layers, rebuild it semantically or report failure. Repeated UI is delivered as instances of one main component, not as N copies of a frame.

SKILL.md on GitHub