A step-by-step workflow for connecting Claude to your Framer site. Built for designers who want AI to actually understand their project - not just generate generic code.
<aside> 💡
Why this matters
When Claude can see your Framer project directly, it stops guessing. It reads your actual styles, components, and content - so every suggestion, edit, or code component it creates already matches your brand.
</aside>
Before we dive in, here are the terms you'll see in this guide. You can reference this section if something's unclear.
| Term | What it means |
|---|---|
| Terminal | The app on your computer where you type text commands instead of clicking buttons. On Mac it's called "Terminal". On Windows it's "PowerShell". |
| IDE | Stands for "Integrated Development Environment" - fancy name for a code editor like VS Code or Cursor. Think of it as Figma, but for code. |
| MCP | Model Context Protocol - the technology that lets Claude connect to external tools like Framer. It's the bridge between AI and your project. |
| Config file | A settings file that tells an app how to behave. Usually a text file with a specific format (like JSON). |
| npx | A tool that runs code packages without installing them permanently. You don't need to understand how it works - just copy the command. |
| URL | The web address (like https://example.com). In this guide, you'll copy a special URL that connects Claude to your Framer project. |
<aside> ⚠️
Required: Framer MCP Plugin must be open
The connection only works when the Framer MCP plugin is running inside Framer. Close the plugin = connection lost. You'll need to keep it open during your AI session.
</aside>
What you need:
This is the same for all setup methods.