Design Bridge MCP
Connect Claude AI to your Framer canvas via Model Context Protocol. Create frames, add text, insert images and SVGs, manage layers, and automate design tasks — all through natural language conversations with Claude Desktop or Claude Code.
About this Plugin
Design Bridge MCP connects your project to AI assistants through the Model Context Protocol (MCP). It gives Claude, Cursor, and other MCP-compatible tools direct access to your canvas with 63 automation tools.
What it does:
Canvas — Create and edit frames, text, images, and SVGs. Traverse the node tree, query by type, read bounding boxes.
Components — List project components and insert instances.
Design Tokens — Read and create color styles, text styles, and browse fonts.
Pages — List, create design pages and web pages.
Code Files — List, read, create, and update TypeScript/JSX code files.
CMS — Full CRUD for collections, items, fields, redirects, and enum cases.
Localization — Read locale settings, translation groups, and set translated values.
Project — Get project info, publish status, locales, and custom code.
How to use:
Install the plugin and open it in your project.
Copy the connection URL shown in the plugin.
Add the URL to your AI client's MCP configuration.
Start giving your AI instructions — it will read and modify your design directly.
Built and maintained by Orange Lamp Studio LLC.
Changelog
Renamed from "Framer MCP" to "Design Bridge MCP". Expanded from 15 to 63 tools across 9 categories: Nodes (14), Selection & Editor (4), Components (2), Project (4), Pages (3), Design Tokens (8), Code Files (4), CMS (20), Localization (4). Added text styling for TextNodes (color, font, size, weight, alignment). Improved WebSocket reconnection with heartbeat ping/pong and exponential backoff. Added reconnect button to UI. Fixed MCP tool name compliance.
