figma-generate-design
nexu-io/open-design
Build or update Figma screens from code or descriptions using design system components and tokens.
What is figma-generate-design?
This skill translates app pages and code into Figma designs using design system components and design tokens. Use it when you need to generate or update UI screens in Figma from code descriptions or existing application pages.
- Generate Figma screens from code or natural language descriptions
- Update existing Figma designs using design system components
- Translate app pages into Figma using design tokens
- Build screens leveraging curated design system components
How to install figma-generate-design
npx skills add https://github.com/nexu-io/open-design --skill figma-generate-design- Figma account and project access
- Design system components set up in Figma
- Design tokens defined for your design system
How to use figma-generate-design
- 1.Install the skill using the provided npm command
- 2.Ask the agent to invoke the skill using 'figma-generate-design' or trigger phrases like 'code to figma' or 'screen generation'
- 3.Provide code snippets or screen descriptions for the agent to process
- 4.Review and refine generated Figma screens as needed
Use cases
- Convert application code into visual Figma mockups for design review
- Generate UI screens from product requirements or descriptions
- Update Figma designs to match code changes automatically
- Create design system-compliant screens from code specifications
- Product designers working with developers
- Design system maintainers
- Frontend developers creating design documentation
- Teams translating code to visual designs
figma-generate-design FAQ
The skill uses design system components and tokens from your Figma workspace. It works with any design system you have configured in Figma.
Yes, the skill can both build new screens and update existing ones using design system components.
It accepts code snippets and natural language descriptions of screens to generate corresponding Figma designs.
The skill is curated from Figma's official skills repository at https://github.com/figma/skills
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: figma-generate-design description: | Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens. triggers:
- "figma generate design"
- "code to figma"
- "screen generation"
- "figma from code" od: mode: design-system category: figma upstream: "https://github.com/figma/skills"
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:
# 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.
Related skills
More from nexu-io/open-design and the wider catalog.
figma-generate-library
Build or update a professional-grade design system library in Figma from a codebase.
figma-implement-design
Translate Figma designs into production-ready code with 1:1 visual fidelity.
figma-use
Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work.
flutter-animating-apps
Implement animated effects, transitions, and motion in Flutter apps for native iOS/Android.
frame-data-chart-nyt
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
frame-flowchart-sticky
SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.