AI agents for designing, updating, and improving sites
New sections
Add an FAQ section at the bottom of the homepage with 6 questions and answers about our product.
Add a testimonials carousel section between the features and CTA sections using 3 placeholder testimonials with photos, names, and roles.
Insert a banner at the top of every page announcing “Black Friday: 40% off all plans. Ends Monday.”
Animations & effects
Add a liquid gradient shader to the hero background with slow, ambient motion.
Set up staggered animations on the feature cards so each one fades in slightly after the previous.
Add scroll-triggered animations to every section so each one fades in and slides up as it enters the viewport.
Build new sites from scratch
The agent creates pages, navigation, sections, typography, colors, images, and layout from a description or reference.
From references
Here’s a screenshot of a competitor’s site. Build something similar but with our brand colors and logo.
Reference the layout and structure of example.com/contact as a guide for this page. Use our brand language for the copy.
Here’s my current WordPress site. Rebuild it in Framer with the same structure and content but a more modern design.
CMS and content
Migrate our WordPress blog posts into a Framer CMS Blog collection. Map the post title, body, date, and featured image.
Move our Contentful content model into Framer CMS. Here are the fields for each collection.
Import our old FAQ data from a spreadsheet and populate a new Framer FAQ collection.
Make your site responsive
The agent improves layouts, spacing, hierarchy, and breakpoints across your site for tablet and mobile screens.
Cleanups
Fix the hero section on mobile. The headline is too large, the image overlaps the text, and the CTA button is too small.
The mobile version looks off. Go through each section and fix any overlaps, text truncation, or layout issues.
Clean up spacing inconsistencies across breakpoints. Some sections have too much padding on mobile, others too little.
Build custom components
The agent builds custom components from creative interactions to practical tools, including animations, calculators, forms, and dynamic content.
Advanced code components
Build a cursor trail where images follow the mouse, getting smaller and fading out as they fall behind, with a soft delay so it feels smooth.
Build a 3D carousel that displays images in a draggable, rotating ring that speeds up on scroll and gently decelerates when released.
Add a confetti burst animation that fires when the waitlist form is submitted successfully.
Add SEO and gain analytics insights
The agent handles titles, descriptions, alt text, and Open Graph content, and surfaces analytics insights so every page is discoverable and measurable.
Analytics
What are my top traffic sources right now, and roughly how big is each one?
What’s my overall bounce rate on the pricing page this month? Compare it to last month.
Out of all my blog posts, which one is getting the most traffic this quarter?
Manage your CMS content
The agent creates collections, updates fields, imports content, and connects your CMS directly to pages on your site.
Content imports
Move every item from the “News” collection into “Articles”, and convert the Category text field into a dropdown using its existing values.
Import this CSV file into the Blog collection and match columns to the CMS fields Title, Slug, Author, Publish Date, and Body.
Migrate all the blog content from my old site into the CMS using this JSON file.
Fix and audit your site
The agent scans your site, catches broken links, accessibility issues, and inconsistencies, then fixes them.
Consistency & QA
Audit the site for consistency — heading sizes, button styles, and spacing should be uniform across all pages.
Find every page where body text is smaller than 16px and fix it.
Scan for any hardcoded colors that aren’t part of the design system and replace them with the correct tokens.
Using Xquik, find 12 recent tweets praising @framer, build a tweet card component in dark mode, and create a fading ticker section with the tweets.
Ensure every URL in this redirects spreadsheet has a redirect set up in Framer pointing to its new destination.
Import the “Changelog” Notion database into the CMS using the Notion API. Sync every hour and update changed rows.
Your toolkit for building with Agents
Contexts. Select layers on the canvas and add them as context to your chat.
Chats. Start a new one for each task to keep the agent focused.
Models. Choose between Sonnet, Opus, and GPT depending on the task.
Branches. Iterate safely by moving agent edits to a branch.
