Instant result
take your designsbeyond the canvas
Supported IDEs
compatible with the toolsyou already use.
Claude
Take UXMagic designs into Claude to generate implementation-ready code and workflows.
Codex
Use Codex with UXMagic to turn selected designs into implementation-ready prompts.
Antigravity
Integrate Antigravity with UXMagic for a seamless design-to-development workflow.
VS Code
Access UXMagic projects directly from Visual Studio Code using the UXMagic MCP Server.
Cursor
Connect Cursor to UXMagic with MCP and build from your designs without leaving your editor.
Windsurf
Connect Windsurf to UXMagic and continue building with your design context intact.
What is Model Context Protocol (MCP)?
Model Context Protocol (MCP) is an open standard that lets AI assistants securely connect with external tools like UXMagic.
Instead of manually copying prompts or switching between apps, your IDE can communicate directly with UXMagic to access and export production-ready UI.
With UXMagic MCP, your AI assistant understands your design context - so every output becomes production ready.
Instant Access
Connect directly to your UXMagic workspace.
Design Context
AI understands your design system.
Production Ready
Generate ready-to-use prompts.
Secure by Default
Encrypted API keys.
Connect in 3 simple steps
connect your idein minutes.
- 1
Choose your IDE
Select your IDE
ClaudeCursorCodexAntigravityWindsurfVS CodeSelect your preferred AI coding assistant — Cursor, VS Code, Claude, Windsurf, Codex, Antigravity, and more. UXMagic automatically prepares the right MCP configuration for your chosen IDE.
- 2
Generate your API key
Generate your API Key
You already have an active API key. Copy it from settings or generate a new one below.
Your API KeyGenerate KeyUse your saved API key from settings, or generate a new oneYou can configure this anytime in the settings page.
Generate a secure API key with one click to authenticate your IDE with UXMagic. Your API key stays private and gives your IDE secure access to your UXMagic workspace whenever you need it.
- 3
Configure MCP & export designs
Paste the generated MCP configuration into your IDE and start building from your UXMagic designs. Export frames, generate implementation prompts, and turn your UI into production-ready code.
Why use UXMagic MCP
why teamsmake the switch.
有疑问？我们来解答。
Model Context Protocol (MCP) is an open standard that allows AI assistants to securely connect with external applications. The UXMagic MCP Server lets your AI coding assistant communicate directly with UXMagic, making it easy to move from design to development without losing context.
UXMagic currently supports Cursor, VS Code, Claude, Windsurf, Codex, Antigravity, and other MCP-compatible AI coding assistants. New integrations are added regularly.
Simply choose your IDE, generate your API key, and copy the MCP configuration into your IDE. Once connected, you can export UXMagic designs directly to your AI coding assistant.
No complex setup is required. UXMagic generates the MCP configuration for your selected IDE. Simply copy the configuration, paste it into your IDE's MCP settings, and you're ready to go.
Yes. Your API key securely authenticates your IDE with your UXMagic account. It remains private, and you can regenerate or revoke it at any time from your account settings.
Yes. Select the frames you want to build, choose your preferred tech stack—including React, Flutter, Webflow, WordPress, or HTML/CSS—and UXMagic generates implementation-ready prompts for your AI coding assistant.
Yes. UXMagic MCP enables designers to hand off selected screens directly to developers by generating implementation-ready prompts that preserve your design context.
Yes. Select one or multiple frames from your UXMagic project and generate a single implementation prompt that your AI coding assistant can use to build the complete experience.
UXMagic MCP is designed for UI/UX designers, frontend developers, product designers, founders, and product teams who want a faster workflow from design to production.