About figma-generate-design
figma-generate-design is a skill for building or updating screens in Figma from code or descriptions, using design system components and design tokens.
Key features
- 01Build Figma screens from descriptions
- 02Translate app pages from code
- 03Use design system components
- 04Apply design tokens
Use cases
- 01Create app screens from descriptions
- 02Translate app pages into Figma
- 03Update existing Figma screens
MCP support
The skill is curated from Figma's MCP server guide. The README does not describe how it connects to or manages MCP servers.
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/figma-generate-designin Claude Code to confirm it loaded.
Details
From the project READMEfigma-generate-design
Curated from Figma's MCP server guide.
What it does
Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.
Source
- Upstream: https://github.com/figma/skills
- Category:
figma
How to use
This catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:
# Inspect the upstream README for exact paths
open https://github.com/figma/skills
Then ask the agent to invoke this skill by name (figma-generate-design) or with
one of the trigger phrases listed in this skill's frontmatter.