Send designs from Claude Code, Cursor and ChatGPT to Figma
Your coding agent can already write a screen. With the Outclass MCP server, it can hand that screen to you in Figma.
The Outclass MCP server lets AI agents send designs to Figma. Add it to Claude Code, Cursor, VS Code, Claude or ChatGPT, ask the agent to design a screen, and it returns a link to an Outclass project and a Copy to Figma page. One click puts the screen in Figma as editable layers with auto layout.
MCP, the Model Context Protocol, is the standard way AI assistants connect to outside tools. Outclass adds one tool to your agent, html_to_figma: the agent writes the screen in HTML and CSS, and Outclass turns it into a Figma design.
Why designers and developers use it
- Design where you already work. Prototype a screen in your editor's chat, then hand it to design in Figma without rebuilding it by hand.
- Get real layers. Text, auto layout, vector icons and named layers, the same as Outclass's own HTML to Figma conversion.
- Keep a project. Every design the agent sends is saved as a project in your Outclass account, where you can keep editing it.
Connect it
The server address is https://outclass.design/mcp. You sign in with your Outclass account the first time; there's no API key to copy.
Claude Code: run this in a terminal.
claude mcp add --transport http --scope user outclass https://outclass.design/mcp
Claude (desktop or web): Settings → Connectors → Add custom connector, name it Outclass and paste the server address. Leave client ID and secret empty.
Cursor: Settings → MCP → Add new global MCP server, and add an outclass entry with "url": "https://outclass.design/mcp".
VS Code: add a server with "type": "http" and the same URL in .vscode/mcp.json, then use it from Copilot Chat in Agent mode.
ChatGPT: add Outclass as a connector with the same URL, using developer mode.
Signed in to Outclass, the Integrations page shows each setup with a copy button.
Try a prompt
"Design a settings screen for a habit tracker app, 390 pixels wide, and send it to Figma."
The agent writes the screen, calls Outclass, and replies with two links: the project in Outclass, and a page where Copy to Figma puts it on your clipboard. Paste into any Figma file.
Good to know
- The Copy to Figma link stays valid for 7 days; the project stays in your account.
- Converting a design to Figma doesn't use credits. Only AI designing and editing inside Outclass does.
- The MCP server sends designs to Figma; it doesn't read your Figma files.
- Prefer to keep everything on your machine? The converter also runs as a local MCP server.
Questions
What is an MCP server for Figma?
It's a connector that gives an AI assistant a tool for working with Figma. The Outclass MCP server gives your agent a tool that turns HTML and CSS into Figma layers.
Can Claude Code send designs to Figma?
Yes. Add the Outclass MCP server with one command, ask Claude Code to design a screen and send it to Figma, then open the link it returns and click Copy to Figma.
Does it work with Cursor and ChatGPT?
Yes. It works with any MCP client that supports remote servers, including Cursor, VS Code, Claude and ChatGPT.
Is it the same as Figma's own MCP server?
No. Figma's own MCP server is built mainly to give agents your Figma designs as context for writing code. Outclass works the other way: it turns what your agent designs into Figma layers.
Do I need an API key?
No. You sign in with your Outclass account when you first connect, and approve the connection.