Figma Generate Design

Build or update screens in Figma from code or description using design system components.

by nexu-io · Apache-2.0

The skill

Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.

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 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.

Use this skill

Connect your agent to the Skill Store MCP server and ask for it by ref: nexu-io/figma-generate-design-69287561660.

Download SKILL.md · Markdown version

Details

Publisher: nexu-io
Category: Software Development › Frontend & UI
License: Apache-2.0
Updated: 2026-10-16

References

Related skills

Figma Implement Design Translates Figma designs into production-ready application code with 1:1 visual fidelity.
Figma Integrate with Figma API for design automation and code generation.
Figma Generate Library Build or update a professional-grade design system in Figma from a codebase.
shadcn/ui Add and compose shadcn/ui components
Design Engineering Motion and interaction polish for interfaces