Design Bridge MCP
Connect Claude AI to your Framer canvas via Model Context Protocol. This beta lets you create frames, add text, insert images, and manage layers — 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 70 automation tools.
What it does:
Canvas — Create and edit frames, text, images, and SVGs. Full layout control with stack and grid (columns, rows, spans, alignment), padding, gap, border, borderRadius, opacity, overflow, aspect ratio, and text truncation. Traverse the node tree, query by type, move nodes between parents, read bounding boxes.
Components — List project components and insert instances.
Design Tokens — Read, create, update, and delete color styles and text styles. 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. Create new collections. Rich text (formattedText) fields supported.
Localization — Read locale settings and translation groups.
Project — Get project info, publish status, locales, and custom code.
Roadmap (coming soon):
Text styling (fontSize, color, lineHeight) — pending Framer SDK support
Breakpoint-aware editing (Desktop/Tablet/Phone)
Background images and gradients on frames
Server API integration for expanded capabilities
How to use:
Install the plugin and open it in your project.
Copy the connection URL shown in the plugin.
Click "Show Setup Guide" for step-by-step instructions for Claude Code, Claude Desktop, or Cursor.
Start giving your AI instructions — it will read and modify your design directly.
Built and maintained by Orange Lamp Studio LLC.
Changelog
Added grid layout support (gridColumnCount, gridRowCount, gridColumnWidth, gridRowHeight) and grid item positioning (columnSpan, rowSpan, alignment).
Added new tools: move nodes between parents, get canvas root, and create CMS collections.
Fixed CMS rich text — formattedText fields now work in cms_addItems.
Added per-axis overflow control, aspect ratio, text truncation, and image rendering properties. Improved connection stability by fixing SSE stream handling. 70 tools total.
