Connect via MCP and get instant access to production-ready design systems. Ship any style in minutes — right from your editor.
{
"mcpServers": {
"figr": {
"command": "npx",
"args": ["figr-mcp"],
"env": { "FIGR_API_KEY": "figr_sk_..." }
}
}
}How it works
Add Figr to your editor's MCP config with your API key. Works with Claude Code, Cursor, Windsurf, and any MCP-compatible tool.
Tell your AI "use the shortsmaker design" or "give me the curly style" — it fetches the full design system instantly.
The AI builds your page with the exact design system — colors, components, animations, tailwind config. Done in minutes.
Features
Real design systems from real products, delivered via MCP.
Real-world design systems extracted from production sites. Not generic templates — actual styles that ship.
Works with Claude Code, Cursor, Windsurf, and any MCP-compatible editor. Just connect and start building.
Every design includes navbar, hero, cards, pricing, footer, and more. Copy-paste ready JSX with Tailwind.
Get the exact tailwind.config, global CSS, color tokens, and animations. Drop it in and it just works.
Choose from dark, light, or mixed-theme designs. Proper color tokens that work across both modes.
New design systems added regularly. Request a style you like and we'll extract it into the library.
Live Preview
Click a style and watch the UI transform instantly
The fastest way to ship your next project with a beautiful, production-ready design system.
Shortsmaker — Dark theme with indigo accents & glassmorphism
Pricing
Try it out
For builders who ship fast
For agencies & teams