---
title: "Design Bridge MCP — Free Framer plugin · Best of Framer"
description: "Free Framer plugin · by Orange Lamp Studio · AI · ranked #30 among Framer plugins. Design Bridge MCP connects your project to AI assistants through the Model Context Protocol (MCP)."
canonical: "https://framer.elliotli.dev/plugin/design-bridge-mcp"
---

[Home](/)/[Plugins](/plugins)/[AI](/plugins/category/ai)/Design Bridge MCP

# Design Bridge MCP

AI canvas control via MCP

[View on Framer](https://framer.com/marketplace/plugins/design-bridge-mcp/?via=elliot-li)

![Design Bridge MCP preview image 1](https://framer.elliotli.dev/og/plugin/design-bridge-mcp/68d06531f76ad370/1600x1200.jpg)

## Summary

Design Bridge MCP connects your project to AI assistants through the Model Context Protocol (MCP).

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #30

## Details

- **Author**: Orange Lamp Studio
- **Published**: 2026-03-11
- **Updated**: 2026-10-21
- **Added**: 2026-03-10
- **Categories**: AI

## More across types

-   [Chatassist Chatbot](/template/chatassist-chatbot) — Gr8r Studio · Free — ChatAssist is an AI chatbot Framer template for customer service automation platforms, conversational AI products, and support tool SaaS…
-   [Skyroket](/template/skyroket) — Gr8r Studio · Free — SAAS, AI, Startup & Tech Website
-   [Solveo Black](/template/solveo-black) — Damir Cosic · Free — Solveo Black is a free Framer landing page and website template built for SaaS products, AI tools, and product-driven startups that need…

## More like this

-   [LayerRelay — AI Design to Framer](/plugin/layerrelay-ai-design-to-framer) — NOTHING · Free — AI Design to Framer
-   [Live Chat & AI — AskDolphin](/plugin/askdolphin) — AskDolphin · Free — Shopify Sync & QR Code Support
-   [FrameShift](/plugin/frameshift) — Pixels · Free — Export Framer layers as AI prompts
-   [AI Search](/plugin/ai-search) — Samuel Silva · Free — AI Semantic Search