Claude MarketplacesSubmit
nexu-io avatar

Figma Generate Design

nexu-io/open-design

This turns code or design descriptions into actual Figma screens using your design system components and tokens. It's built to bridge the gap between implementation and design files, so when you have working UI code and need to sync it back into Figma, you don't have to manually rebuild everything. The skill comes from Figma's official MCP server repository, which gives it credibility but also means you'll need to wire up the full upstream workflow yourself. Most useful when you're maintaining design system parity across code and Figma, or when engineers are prototyping faster than designers can keep mockups updated. It won't magically fix messy component libraries, but it's a solid automation if your design tokens are already structured.

skills.sh installs
2.9K
GitHub stars
106.9K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill figma-generate-design --agent claude-code

Installs into .claude/skills of the current project.

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

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.

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/nexu-io/open-design
Categories
DevOps & CI/CD, Design & UI/UX
First seen
Jun 3, 2026

More from nexu-io/open-design

All 217

Recommended

More DevOps & CI/CD
1openai avatarfigma-generate-libraryopenai/skillsBuild or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set 2.9Kskills.sh installs
2dpearson2699 avatarswiftlintdpearson2699/swift-ios-skillsConfigures and enforces SwiftLint in Swift projects using build tool plugins, run scripts, and CI. Covers .swiftlint.yml configuration, disabled_rules, opt_in_r2.9Kskills.sh installs
3deanpeters avataropportunity-solution-treedeanpeters/product-manager-skillsBuild an Opportunity Solution Tree from outcomes to opportunities, solutions, and tests. Use when a stakeholder request needs problem framing before you decide 2.9Kskills.sh installs
4dynatrace avatardt-obs-servicesdynatrace/dynatrace-for-aiService performance monitoring with RED metrics (Rate, Errors, Duration) and runtime-specific telemetry for Java, .NET, Node.js, Python, PHP, and Go. Use when a2.9Kskills.sh installs
5elastic avatarkibana-auditelastic/agent-skillsEnable and configure Kibana audit logging for saved object access, logins, and space operations. Use when setting up Kibana audit, filtering events, or correlat2.8Kskills.sh installs
6hashicorp avatarazure-image-builderhashicorp/agent-skillsBuild Azure managed images and Azure Compute Gallery images with Packer. Use when creating custom images for Azure VMs.2.8Kskills.sh installs