Choose an agent
Use Framer’s Agent for work inside the canvas and CMS. Use an External Agent when the task also depends on files, data, APIs, scripts, or tools outside Framer. Both can review the project. For the full migration flow, start with the step-by-step guide.
Attach assets
A reference URL helps the Agent understand the page. Attach screenshots when the visual match matters, and attach the original images, SVGs, videos, and fonts when the result must use exact assets. For interactions, include both a screenshot and the live URL. Start with one section, review it, then expand the task.
Prepare the migration inputs
Give each task a small, complete source package: the live URL or a screenshot, the original assets, the relevant CMS export, and a URL map when routes are changing. Start with one representative section or page, review the result, then reuse the approved approach across the site.
Framer’s Agent
Framer’s Agent works directly in the project. Use short prompts that state the result, the reference, and anything that must be preserved.
Rebuild a section
Rebuild this section using [URL] as the reference. Keep the copy and content order. Use the attached assets.
Rebuild a page
Rebuild this page using [URL] as the reference. Keep the copy, structure, and content order. Create reusable components for repeated sections. Use the attached assets.
Create a CMS collection
Create a [COLLECTION NAME] collection with these fields: [FIELDS AND TYPES].
Import CMS content
Import this CSV into [COLLECTION NAME]. Match the columns to the existing fields.
Review dates, options, references, images, and formatted text after import. The CMS Agent guide covers collection creation and CSV imports.
Review the page
Review this page against [URL]. Check the copy, structure, spacing, assets, and responsive layouts.
External Agents
Connect an External Agent when the migration depends on prepared files, multiple collections, route maps, scripts, APIs, or other tools. Select the migration branch before starting. See Use External Agents with Framer.
Build from prepared files
Build this page in [SOURCE FILES]. Keep the copy, structure, and content order. Use the assets in [ASSET FOLDER].
Migrate related CMS content
Import these CMS files. Create matching collections and fields. Import referenced collections first.
Add redirects
Add the redirects from [URL MAP].
Review the migration
Review the page against [URL]. Check routes, copy, CMS content, links, assets, forms, SEO, interactions, and responsive layouts.
Optimize
Once the migration is in place, use Framer’s Agent or an External Agent to improve the site as a whole. Use the internal Agent for changes inside the canvas and CMS, or an External Agent when the review also depends on files, scripts, APIs, or other tools.
Make the site responsive
Make the entire site responsive. Set up tablet and mobile breakpoints, stack columns vertically on mobile, and resize text for readability.
Audit SEO basics
Audit the site for SEO basics. Check all pages have unique titles, descriptions, and proper heading hierarchy.
Add image alt text
Add alt text to every image on this site based on its context and surrounding content.
Review before launch
Treat the Agent’s result as a first build pass, not a finished migration. A person still needs to compare the result with the source and approve the copy, CMS content, assets, layouts, interactions, forms, SEO, and redirects.
Review after each small task so problems do not repeat across the site. Test the final result on the production domain before sending traffic to it. For search visibility, follow the SEO migration guide.
