figma-generate-design

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in

Installs: 6.1K; on skills.sh
Stars: 2.1K; on GitHub
Files: 2; besides SKILL.md
Updated: Oct 2026; last repo commit

Install figma-generate-design

Claude Code

Copy this prompt.

Install the figma-generate-design skill in Claude Code. Run this command:

npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-design

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, form, dashboard, list, table, card, header, message preview, or other composed product UI in Figma from code or a description—even when the user calls that composed UI a component. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.

Sections in SKILL.md

HTML-to-Figma Exceptions
Skill Boundaries
Prerequisites
Parallel Workflow with generate_figma_design (Web Apps Only)
Required Workflow
Step 1: Understand the Deliverable
Step 2: Collect Component Keys, Variables, and Styles
Step 3: Create the Wrapper Frame
Step 4: Customize Covered Sections and Build Missing Sections
Step 5: Validate the Full View and Transfer Images
Step 6: Updating an Existing View
Reference Docs
Error Recovery
Best Practices

Information

updated Nov 2, 2026

Repository: figma/mcp-server-guide
Folder: skills/figma-generate-design

figma/mcp-server-guide skills.sh