UXMagic Home

Libraries

TemplatesNew
Community Frames
Pricing
Affiliate

Resources

Follow us on:

connect uxmagic to yourfavorite ide with mcp

Design with UXMagic. Convert that design to code inside your IDE. The UXMagic MCP Server connects your favorite AI coding assistant to UXMagic, making your design and development workflow seamless.

ClaudeClaude
Codex
VSCode
AntigravityAntigravity
Cursor
Windsurf

Instant result

take your designsbeyond the canvas

Supported IDEs

compatible with the toolsyou already use.

Claude

Claude

Take UXMagic designs into Claude to generate implementation-ready code and workflows.

See the Claude setup guide

Codex

Use Codex with UXMagic to turn selected designs into implementation-ready prompts.

Antigravity

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. 1

    Choose your IDE

    Select your IDE

    ClaudeClaude
    Cursor
    Codex
    AntigravityAntigravity
    Windsurf
    VS Code

    Select 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. 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 Key
    Use your saved API key from settings, or generate a new one

    You 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. 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.

Without MCPWith UXMagic MCP
Copy designs and code between toolsAccess designs directly inside your IDE
Re-explain your project every timeAI understands your project context
Constant app switchingStay in one workflow
Export separatelyDesign and export from one place
Faq

got questions?we have answers.

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.

Join our community

Share work, seek support, stay updated and network with other UXmagic.ai

design where you already work.your next idea deserves to exist.

Connect UXMagic to your favorite IDE and turn ideas into production-ready UI without leaving your workflow.