Quickstart
Use the quickstart to connect your AI tool, migrate one page, and start a separate polish pass. Have your page URL and Framer project link ready.
1. Set up MCP
Connect your AI tool to Framer.
2. Install the skill
Paste in your AI chat, send, and wait.
Copy skill
Skill copied
3. Migrate your page
Paste, add both links, then send.
Copy prompt
Prompt copied
4. Polish your page
Paste in the same chat once done.
Copy prompt
Prompt copied
1. Set up MCP
Create a Framer project, then follow the MCP setup guide for your AI tool, then sign in to Framer and approve the connection. Check the guide’s supported tools and plan requirements. For a whole site, see Migrate a full site.
2. Install the skill
Click “Copy skill” to copy the instructions, then paste them into your AI tool. In a tool that supports saved skills, your agent can save the migration skill. If needed, open a new chat to load the saved skill.
If your tool cannot save skills, keep the instructions in the same chat. Ask the agent to confirm it can read them before sending the migration prompt.
3. Migrate your page
Click “Copy prompt” in step 3 of the quickstart. Add your links for [PAGE URL] and [FRAMER PROJECT LINK], then send it to your AI tool.
The prompt runs the migration skill from step 2. Your agent follows its instructions to inspect the original page and rebuild its layout, copy, images, components, and responsive layouts in Framer. It works on a branch, or on a new page if your plan doesn’t include branching. You decide when to publish the finished page.
4. Polish your page
After the first pass, paste the prompt from quickstart step 4 into the same chat. Your agent compares the rebuild with the original and checks content, interactions, responsive layouts, SEO, accessibility, and performance.
The prompt asks the agent to fix what it can without redesigning the page. Ask it to list any work it could not complete or verify, so you know what to check.
Check the result yourself
Before you publish, review the page in Framer and in a browser. A screenshot can show the layout, but it cannot prove that a form submits or a menu works.
Compare desktop, tablet, and phone layouts with the original.
Test links, buttons, menus, tabs, and carousels.
Check copy, replace placeholders, and upload missing assets and fonts.
Connect forms and integrations, add tracking, and test submissions.
Check audio and captions.
Test keyboard navigation, focus, and downloadable files.
Finish the agent’s “Needs a person” list.
For migration limitations and human checks, read What to expect. When you’re happy with the page, continue to Publish and launch.
