Figma To Generateblocks
Automatically converts your Figma designs into GenerateBlocks website templates, saving time and streamlining web development workflows.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add figma-to-generateblocks npx -- -y @trustedskills/figma-to-generateblocks
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"figma-to-generateblocks": {
"command": "npx",
"args": [
"-y",
"@trustedskills/figma-to-generateblocks"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill allows AI agents to import designs directly from Figma files and convert them into GenerateBlocks components. It facilitates the creation of website sections and landing pages by automating the process of translating visual designs into code-ready blocks. The skill streamlines design workflows, enabling faster prototyping and development cycles.
When to use it
- You have a Figma design for a new website section or landing page.
- You want to quickly generate GenerateBlocks components from existing Figma files.
- Your team uses Figma for design and needs a way to easily integrate those designs into their web development process.
- You are prototyping a new website and need to rapidly translate visual concepts into functional blocks.
Key capabilities
- Imports designs from Figma files.
- Converts Figma designs into GenerateBlocks components.
- Automates the creation of website sections and landing pages.
Example prompts
- "Import this Figma file [link to Figma] and create GenerateBlocks components."
- "Generate a GenerateBlock component from the 'Hero Section' design in this Figma file [link to Figma]."
- “Can you convert all artboards in this Figma file [link to Figma] into GenerateBlocks?”
Tips & gotchas
- Ensure the Figma file is accessible and shared appropriately for the AI agent to access.
- The skill’s output quality depends on the complexity of the Figma design; very intricate designs may require manual adjustments after conversion.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.