Design Bridge MCP — AI canvas control via MCP

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 67 automation tools.

⚠️ Beta — This plugin is under active development. See the roadmap below for known limitations we're addressing.

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

• Localization — Read locale settings, translation groups, and set translated values.

• Project — Get project info, publish status, locales, and custom code.

Roadmap:

• Fix connectivity issuesText styling (fontSize, color, lineHeight) — pending Framer SDK support

• Breakpoint-aware editing (Desktop/Tablet/Phone)

• Background images on frames

• Server API integration for expanded capabilities

How to use:

1. Install the plugin and open it in your project.

2. Copy the connection URL shown in the plugin.

3. Click "Show Setup Guide" for step-by-step instructions for Claude Code, Claude Desktop, or Cursor.

4. Start giving your AI instructions — it will read and modify your design directly.

Built and maintained by Orange Lamp Studio LLC.