Interactive design and prototyping tool.
## Framer MCP Server: Interactive Design and Prototyping The **Framer MCP Server** integrates the powerful design and prototyping platform directly into Google Antigravity, enabling AI assistants to create interactive designs, manage components, and export production-ready code. This integration bridges design and development with code-backed design capabilities. ### Why Framer MCP? - **Code Components**: Create React components directly in the design tool with full code export - **Interactive Prototypes**: Build high-fidelity prototypes with real interactions and animations - **Design System**: Manage shared components and styles with automatic synchronization - **Responsive Design**: Create adaptive layouts that work across all screen sizes - **Direct Publishing**: Deploy designs directly as live websites with hosting included ### Key Features #### 1. Component Management ```python from anthropic import Anthropic client = Anthropic() response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "List all shared components in our design system and their usage across projects" }], tools=[{ "name": "framer_components", "description": "Manage design components" }] ) ``` #### 2. Code Export ```python # Export as React components response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Export this card component as production-ready React code with TypeScript" }], tools=[{"name": "framer_export", "description": "Export code from designs"}] ) ``` #### 3. Prototype Management ```python # Manage prototypes response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Create a shareable prototype link for the checkout flow with device frame" }], tools=[{"name": "framer_prototype", "description": "Manage prototypes"}] ) ``` #### 4. Site Publishing ```python # Publish to web response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Publish the landing page design to our staging subdomain" }], tools=[{"name": "framer_publish", "description": "Publish sites"}] ) ``` ### Configuration ```json { "mcpServers": { "framer": { "command": "npx", "args": ["-y", "@anthropic/mcp-framer"], "env": { "FRAMER_ACCESS_TOKEN": "your-framer-access-token" } } } } ``` ### Use Cases **Design-to-Code**: Export production-ready React components directly from design files. **Rapid Prototyping**: Create and share interactive prototypes for user testing and stakeholder review. **Landing Pages**: Design and publish landing pages without traditional development workflow. **Component Libraries**: Build and maintain design system component libraries with code synchronization. The Framer MCP Server brings interactive design capabilities directly into your development workflow, enabling seamless design-to-code transitions.
{
"mcpServers": {
"framer": {}
}
}