.svg){kind=logo}
Install it in your agent
Install one of our official plugins, or manually connect any MCP client.
2
Or add it manually
Create a .cursor/mcp.json in your project:
{
"mcpServers": {
"magic-patterns": {
"url": "https://mcp.magicpatterns.com/mcp"
}
}
}3
Enable and authenticate
Turn on magic-patterns in Cursor's MCP settings, then run /mcp to sign in.
See what others are building.
Over 1 million designs created by our community.
See what others are saying.
Join 500K+ others building their ideas.
Case study
Don't sleep on Magic Patterns! It's one of the most promising design system tools I've seen lately.
Dan MallFounder at Design System University
Frequently asked questions
Everything you need to know about running Magic Patterns inside your agent.
The plugin installs into Cursor from the marketplace, and the same MCP server works with Claude, Codex, VS Code, Windsurf, and any other MCP-compatible client.
Generate and iterate on UI from a prompt, import from Figma or a screenshot, and pull the resulting production-ready React components into your codebase — all from inside your editor.
Yes. Connect your design system and every screen is composed from your real tokens and components, so the generated code matches your product rather than approximating a look.
Your agent calls Magic Patterns over MCP and writes the components straight into your project as real files you can edit, review, and commit.
No. Add the plugin and start building for free — upgrade when your team is ready for more.
Build the best version of your product.