Design Bridge MCP

Design Bridge MCP connects your project to AI assistants through the Model Context Protocol (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 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:

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.