MCP server setup
Use the ready→made converter from Claude Code, Claude Desktop, Cursor, Windsurf or VS Code. Your assistant calls it as a tool and gets native Elementor, Gutenberg, Oxygen 6, Oxygen Classic, Etch or HTML layouts back. Included in Pro and Lifetime.
1. Get your two tokens
- ready→made MCP key. Open api.levels.dev/account/mcp, log in with your plugin account (the email and password you use inside Figma), click Create key, give it a name (for example "Cursor on my laptop") and copy it. It is shown once. You can have up to 5 keys and revoke any of them there.
- Figma personal access token. In Figma: profile menu → Settings → Security → Personal access tokens → Generate new token. Scope: File content: Read-only. Copy it (starts with
figd_).
No plan yet? MCP access is part of ready→made Pro (€19/month) and Lifetime (€250).
2. Connect your client
Replace rm_live_… and figd_… with your values. The server URL is always https://api.levels.dev/mcp.
Claude Code
claude mcp add --transport http readymade https://api.levels.dev/mcp \
--header "Authorization: Bearer rm_live_…" \
--header "x-figma-token: figd_…"
Check with claude mcp list; the server should show as connected.
Cursor
Settings → MCP → Add new global MCP server, or edit ~/.cursor/mcp.json:
{
"mcpServers": {
"readymade": {
"url": "https://api.levels.dev/mcp",
"headers": {
"Authorization": "Bearer rm_live_…",
"x-figma-token": "figd_…"
}
}
}
}
Windsurf
Cascade → MCP servers → Manage, or edit ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"readymade": {
"serverUrl": "https://api.levels.dev/mcp",
"headers": {
"Authorization": "Bearer rm_live_…",
"x-figma-token": "figd_…"
}
}
}
}
VS Code (Copilot agent mode)
Create .vscode/mcp.json in your workspace (or add the server in user settings):
{
"servers": {
"readymade": {
"type": "http",
"url": "https://api.levels.dev/mcp",
"headers": {
"Authorization": "Bearer rm_live_…",
"x-figma-token": "figd_…"
}
}
}
}
Claude Desktop
Claude Desktop connects header-authenticated remote servers through the mcp-remote bridge (needs Node.js). Settings → Developer → Edit Config:
{
"mcpServers": {
"readymade": {
"command": "npx",
"args": [
"-y", "mcp-remote", "https://api.levels.dev/mcp",
"--header", "Authorization:Bearer rm_live_…",
"--header", "x-figma-token:figd_…"
]
}
}
}
Restart Claude Desktop afterwards; the tools appear under the hammer icon.
3. Ask
In Figma, select the frame you want, right-click → Copy link to selection. Then, in your assistant:
- "Convert this Figma frame to Elementor and give me the JSON to paste: https://www.figma.com/design/…?node-id=12-345"
- "Inspect this Figma file, list the sections on the Landing page, then convert the hero to Gutenberg."
- "Convert node 12:345 to Oxygen 6, then to HTML, and tell me what differs."
The assistant returns the payload plus a one-line note on how to get it into your builder:
- Elementor: right-click the editor canvas → Paste from other site (Elementor 3.16+ and 4.x). Ask for
elementorFormat: "template"to get a file for Templates → Import instead. - Gutenberg: block editor → Code editor → paste → back to Visual editor. Core blocks only.
- Oxygen 6: select the parent element, paste. Oxygen Classic: right-click → Paste, or the companion plugin for whole pages.
- Etch: paste into an Etch HTML block or import as a component. HTML: save as
.html, CSS and images are inlined.
Tools
| Tool | What it does | Counts as |
|---|---|---|
list_targets |
The six output formats, each with a note on how to paste or import it. | free |
inspect_figma |
Outline of a file or frame: layers, sizes, text/image/vector counts, whether it fits in one conversion, and section-sized children to convert next. | free |
convert_figma |
One frame → one target. Options: elementorFormat (paste | template), assets (hosted | inline | none), includeSize, mode (mdl | default); refresh to bypass your cache. |
1 conversion |
Limits
- One frame per call. Convert sections (hero, features, footer), not whole pages: 4,000 layers and 6 MB of output per call, 90 seconds.
inspect_figmatells you when a frame is too large and which children to convert instead. - 30 tool calls per minute per key, 300 conversions per day per account, 5 active keys per account.
- SVG icons and logos are always inlined. Photos and other raster images are hosted on api.levels.dev for 24 hours and referenced by URL; Elementor copies them into your media library when you paste or import (tested on 3.25.4 and 4.2.1). Prefer self-contained output? Ask for
options.assets: "inline"(data URLs) or"none". Up to 8 MB per image, 200 MB hosted per account and day. - Figma-API friendly. Figma limits file reads hard on View/Collab seats (about 20 per month) and to 10 per minute on Starter Dev seats. ready→made fetches a frame once and keeps it in a cache that belongs to your account only (7 days, per file version, checked against Figma's cheap version endpoint). Measured on a typical session of one inspect and five conversions across three frames and two builders: 14 Figma API calls without the cache, 5 on the first session, 0 when you repeat or switch targets. Every result tells you whether it came from the cache and which file version; pass
refresh: trueto force a fresh fetch. - Figma's own API rate limits apply to your token. If Figma answers 429, wait a minute and retry.
Privacy
Your Figma token travels with each request, is forwarded to api.figma.com for that call, and is never stored or written to logs. Design content is processed in memory and not kept. We store a hash of your MCP key and, per tool call, the tool name, target, success flag, duration and payload size, so you can see your usage and we can keep the service healthy. Details: Data & telemetry.
Troubleshooting
- "Invalid or revoked API key": create a new key at api.levels.dev/account/mcp and update your client config.
- "This account has no active plan": your subscription ended. Reactivate on pricing; your keys keep working once it is active.
- "Figma is rate-limiting this token (429)": the message tells you how long to wait. Conversions of frames you already fetched keep working from your cache in the meantime.
- Headline wraps differently than in Figma: the font is not installed on your site. Every result lists the fonts it uses: Google fonts load automatically, a brand font must be registered in WordPress (theme or font plugin). Until then the layout falls back to a generic family of the same shape.
- "Figma rejected the token (403)": regenerate the Figma token with the File content scope and make sure your Figma account can open the file.
- "needs a frame, not a whole file": copy the link with Copy link to selection so it carries
node-id, or ask the assistant to inspect the file first. - Still stuck? su*****@****ls.dev and include the tool's error message.