Figma Generate Design
- 1.8k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
How do I generate or update Figma screens automatically from code or descriptions?
About
This skill automates screen creation in Figma by translating code or natural language descriptions into visual designs using a project's design system components and tokens. Developers invoke it during frontend design phases to synchronize application pages with Figma prototypes, reducing manual design work. Key workflows include building new screens from code, updating existing designs, and maintaining consistency across design tokens.
- Generate Figma screens from code or text descriptions
- Uses design system components for consistency
- Applies design tokens to generated designs
- Updates existing screens without manual redesign
- Triggered via agent commands or natural language
Figma Generate Design by the numbers
- 1,773 all-time installs (skills.sh)
- +127 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #163 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
figma-generate-design capabilities & compatibility
- Capabilities
- generate figma screens from code descriptions · apply design tokens to generated designs · use design system components · update existing figma designs
- Works with
- figma
- Use cases
- ui design · frontend
- Platforms
- macOS · Windows · Linux
- Runs
- Remote server
- Pricing
- Free
What figma-generate-design says it does
Build or update screens in Figma from code or description using design system components.
Translate app pages into Figma using design tokens.
npx skills add https://github.com/nexu-io/open-design --skill figma-generate-designAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.8k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Generate or update Figma screens from code descriptions using design system components and tokens.
Who is it for?
Frontend teams using Figma with a defined design system who want to automate screen creation and maintain design consistency.
Skip if: Teams without a Figma design system, or projects not using Figma as the design tool.
When should I use this skill?
Building new UI screens, updating existing designs, translating wireframes to high-fidelity, maintaining design-to-code sync.
What you get
Developers generate Figma screens from code or descriptions, with designs automatically using design tokens and system components.
- Figma artboards/frames
- Screen designs using design tokens
- Updated design system instances
Files
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/skillsThen 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
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use figma-generate-design when output must land in Figma with design tokens; use artifacts-builder for in-chat HTML React prototypes.
FAQ
What design systems are supported?
The skill uses design tokens and components from the project's design system; exact supported systems are specified in the upstream Figma skills repository.
Does it update existing Figma files or create new ones?
It can both build new screens and update existing ones in Figma using design system components.
How does it stay in sync with code changes?
Regenerate screens by invoking the skill with updated code descriptions; designs automatically apply current design tokens.
Is Figma Generate Design safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.