Figma Generate Design
Discover and invoke Figma screen generation from code or descriptions using design-system components and tokens via the Open Design catalog entry.
Overview
Figma Generate Design is an agent skill for the Build phase that builds or updates Figma screens from code or description using design system components and tokens.
Install
npx skills add https://github.com/nexu-io/open-design --skill figma-generate-designWhat is this skill?
- Build or update Figma screens from code or natural-language descriptions
- Uses design system components and design tokens for consistent output
- Curated catalogue entry pointing to upstream Figma skills repository
- Trigger phrases: figma generate design, code to figma, screen generation, figma from code
- Open Design mode: design-system category figma with documented upstream URL
Adoption & trust: 792 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your live UI and Figma file drift apart, and recreating screens manually from code wastes solo-builder time.
Who is it for?
Builders using Figma plus a documented design system who want agent-discoverable screen generation from code or specs.
Skip if: Pure code-only shops with no Figma workflow, one-off mockups without tokens, or users who need full MCP execution without installing upstream assets.
When should I use this skill?
User says figma generate design, code to figma, screen generation, figma from code, or wants screens built in Figma from code or description with design system components.
What do I get? / Deliverables
You route the agent to the upstream Figma generate-design workflow so pages sync into Figma with token-aware components after installing the official skills bundle.
- Figma screens updated from code or description
- Agent routing to full upstream figma-generate-design workflow
Recommended Skills
Journey fit
Build is the right shelf because the skill translates shipped or described UI into Figma screens for iteration—not launch analytics or ops monitoring. Frontend subphase reflects page-level UI and design-system alignment when moving between code and Figma artifacts.
How it compares
Catalog bridge to Figma’s upstream skill bundle—not a standalone in-repo generator like a local screenshot script.
Common Questions / FAQ
Who is figma-generate-design for?
Solo and indie developers who use Figma for UI review and want agents to find code-to-Figma screen generation during build planning.
When should I use figma-generate-design?
Use it in Build when translating app pages into Figma, refreshing screens after code changes, or when trigger phrases like code to figma or screen generation appear in the task.
Is figma-generate-design safe to install?
It points to external upstream Figma skills; review the Security Audits panel on this Prism page and inspect the upstream repo before copying bundles into your agent skills directory.
SKILL.md
READMESKILL.md - Figma Generate Design
# figma-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 Open Design 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: ```bash # 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.