Framer: Create a professional website, free. No code website builder loved by designers.

The Agents Playbook.

What Framer Agents do best — with real prompts, real workflows, and real examples you can copy.

Start building

Browse by category

Start here

New to agents

Your first 10 minutes with Framer Agents

A guided walkthrough from blank canvas to published site.

Get started →

Already use Framer

What agents change for you

The skills you have still matter. Agents just move ten times faster.

What’s different →

Evaluating Framer

A tour of what agents can do

The full capability map — before you commit to anything.

Take the tour →

Localize

Localize a site in an hour, not a month.

Point the agent at any existing site. Tell it which languages you need. Watch it copy structure, translate copy, and wire up locale switching — without you touching a single layer.

Visual placeholder — short demo loop

What the agent does

Duplicates every page in the site, maps all text nodes to a locale-aware CMS collection, runs translation on all copy via a language model, and generates a language switcher component wired to each locale variant.

What stays with you

Review and approve each translation. Refine edge cases where tone matters. All pages remain fully editable — the agent generates the structure, you control the voice.

Try it

Localize this entire site into French, German, and Japanese. Duplicate the page structure for each language, translate all visible text, and add a language switcher to the nav that links to each locale.

More prompts for Localize

Translate only the homepage into Spanish and add a /es route.

Add a locale dropdown to the nav that switches between English and German versions.

Preserve the design exactly — only the copy should change for each locale.

Localize the CMS blog into Italian — translate title, body, and meta description fields.

Create a right-to-left Arabic version with mirrored layout and correct text direction.

Auto-detect browser language and redirect to the correct locale on first visit.

Create locale-specific pricing pages with regional currency formatting.

Add hreflang tags to all locale variants so search engines index the correct language per region.

See all Localize prompts →

Migrate

Move a site from Webflow, WordPress, or anywhere else.

Give the agent a URL. It reads the existing site, rebuilds the structure in Framer, maps the CMS, and preserves the visual design — without you copying and pasting a single thing.

Visual placeholder — short demo loop

What the agent does

Scrapes the source site, reconstructs the layout hierarchy in Framer’s canvas, imports images and fonts, rebuilds any CMS collections, and creates responsive breakpoints matching the original.

What stays with you

Final cleanup of typography and spacing. Any custom interactions or animations that didn’t exist on the source. The production decisions about what to keep and what to improve.

Try it

Migrate this Webflow site to Framer: [URL]. Preserve the layout, copy the content into a CMS collection, import all images, and rebuild the nav with the same links.

More prompts for Migrate

Migrate my WordPress blog to Framer, keeping all 40 posts in a CMS collection.

Rebuild this Squarespace portfolio in Framer. Keep the grid layout but make it faster.

Import this Figma file as a starting point and wire up all the nav links.

Replicate this landing page exactly, then improve the mobile layout.

Move this Wix site to Framer. Keep the brand colors and fonts.

Convert this static HTML/CSS site into an editable Framer project.

Migrate the site and upgrade the design — cleaner typography and more whitespace.

Take this Notion page and rebuild it as a proper marketing site in Framer.

See all Migrate prompts →

Build from scratch

From a brief to a site in one prompt.

Describe what you’re building. The agent picks a layout, chooses fonts, sets up the color system, builds every section, and publishes — start to deployed in a single session.

Visual placeholder — short demo loop

What the agent does

Plans a full page structure from the brief, selects and applies a type system, builds every section with real copy, adds responsive breakpoints, and configures publishing settings.

What stays with you

Strategic direction and brand voice. Photo and media decisions. Copy review and final tone. Any custom sections that need specific interaction patterns the agent didn’t anticipate.

Try it

Build a SaaS landing page for a project management tool called Relay. Dark theme, tight editorial typography, hero with a short value prop, features grid, pricing table, and footer. No images — use icons and typography for visual interest.

More prompts for Build from scratch

Build a portfolio for a product designer. Minimal, dark, case study grid.

Create a coming-soon page with an email waitlist form and countdown timer.

Build an agency site for a motion design studio. Bold, full-bleed layout.

Create a documentation site for an API product with sidebar nav and code blocks.

Build a personal blog site with a clean reading layout and post grid on the home page.

Make a legal services landing page. Professional, no dark patterns, trust-first layout.

Build a restaurant site with menu, reservations link, and location details.

Create a startup fundraising deck as a one-pager with scrolljack sections.

See all Build from scratch prompts →

CMS

Build a working CMS, populated with real content.

Schema design, collection setup, dummy data seeding, and a list view — all from a single description of what you’re building.

Visual placeholder — short demo loop

What the agent does

Designs a CMS schema from your description, creates all collections with the right variable types, seeds them with realistic placeholder items, and builds a collection list view with the right sorting and filtering.

What stays with you

Content strategy — what fields actually matter for your editorial workflow. Taxonomy decisions. And writing the actual content once the scaffold is ready.

Try it

Create a blog CMS with posts that have a title, cover image, author, tags, publish date, and rich text body. Seed it with 6 realistic placeholder posts and build a grid list on /blog with filters by tag.

More prompts for CMS

Create a product catalog CMS with categories, pricing, and availability status.

Build a team directory CMS — name, role, bio, headshot, and linked projects.

Create a case studies collection with client, industry, outcome, and featured image.

Add a changelog CMS to this site and show the 5 most recent entries on the homepage.

Create an events CMS with date, location, type, and registration link — with past/upcoming filtering.

Build a jobs board CMS with department, location, seniority, and open/closed status.

Add 20 realistic placeholder items to this existing product CMS.

Link the authors collection to the blog collection and show author name and photo on every post.

See all CMS prompts →

Design systems

Define a design system across an entire site.

Color tokens, text styles, spacing scales, and shared components — applied consistently to every page, not just the one you’re looking at right now.

Visual placeholder — short demo loop

What the agent does

Audits existing type and color usage across all pages, extracts repeating patterns, creates named color tokens and text style presets, and applies them globally — replacing ad hoc values site-wide.

What stays with you

Naming conventions that match your team’s mental model. Which tokens should be semantic vs. literal. Any edge cases where a specific page should intentionally break the system.

Try it

Audit this site and create a design system: extract all unique colors into named tokens, define text style presets for every heading level and body size, and apply them to every text node across all pages.

More prompts for Design systems

Create a light and dark token pair for every color currently used on this site.

Standardize spacing — every gap and padding on this site should use a 4px base scale.

Replace all hardcoded heading sizes with a consistent type scale using text style presets.

Create a shared button component used across all pages — replace all inline button styles with it.

Define a border-radius scale — 4, 8, 12, 24px — and apply it consistently to all cards and buttons.

Extract the nav into a shared component and update all pages to use it.

Add a dark mode to this site using color tokens. All existing colors should map to a dark variant.

Create link style presets for navigation, inline body links, and footer links — apply them site-wide.

See all Design systems prompts →

Code components

Interactive components, without writing code.

Describe the behavior. The agent writes the React component, exposes the right controls, and drops it into your page — ready to instance.

Visual placeholder — short demo loop

What the agent does

Writes a code component with the described behavior, exposes editable controls (colors, text, toggle states), and inserts an instance of it into the current page with sensible defaults.

What stays with you

Specifying what the component should actually do. Reviewing edge-case behavior. Deciding which properties should be exposed as controls vs. baked in to the implementation.

Try it

Build a code component called Marquee that scrolls a list of logos infinitely from right to left. Expose speed, gap, and direction as controls. Add it to the homepage below the hero.

More prompts for Code components

Create a tab switcher component with smooth animated underline indicator.

Build a real-time currency converter component. Pull live rates on mount.

Create an animated number counter that counts up when it enters the viewport.

Build a sticky progress bar that shows how far down the page the user has scrolled.

Create a password strength meter component with animated fill and label.

Build a multi-step form with client-side validation and animated step transitions.

Create a dark/light mode toggle that persists to localStorage and applies on load.

Build an image comparison slider with a draggable divider for before/after photos.

See all Code components prompts →

Responsive

Responsive passes across every page, in minutes.

You built the desktop. The agent builds tablet and phone — adapting layout, stacking columns, shrinking type, and checking every section for overflow or clipping.

Visual placeholder — short demo loop

What the agent does

Creates tablet and phone breakpoints from the desktop, adapts multi-column layouts to single column, scales typography, adjusts padding and spacing for smaller screens, and fixes any overflow or alignment issues.

What stays with you

Final QA on real devices. Any interactions or hover states that need touch equivalents. Decisions about what to hide on small screens vs. what to always show.

Try it

Add tablet and phone breakpoints to every page on this site. Stack all two-column sections vertically on mobile. Reduce all H2 sizes by 20% on phone. Fix any overflow issues you find.

More prompts for Responsive

Create a phone breakpoint for this page. Keep all text legible without zooming.

Fix the nav on mobile — replace the desktop links with a hamburger menu.

Convert the 4-column features grid to 2 columns on tablet and 1 column on phone.

Scale down the hero headline so it fits on a 390px viewport without wrapping oddly.

Add touch-friendly tap targets to all buttons — minimum 44px height.

On mobile, hide the secondary CTAs in the pricing section and show only the primary.

Reduce section padding from 120px to 64px on tablet and 48px on phone.

Make the footer stack vertically on mobile and center all links.

See all Responsive prompts →

Batch operations

Update a thousand things at once.

Find and replace. Rename every node matching a pattern. Change font sizes across all breakpoints. The agent treats site-wide operations as one prompt, not one click per element.

Visual placeholder — short demo loop

What the agent does

Traverses all nodes across all pages, applies the requested transformation to every match, and reports what changed — in one pass.

What stays with you

Scoping the operation correctly — which elements should be changed and which should be excluded. Reviewing the result to catch unintended matches.

Try it

Find every RichTextNode on this site that uses a hardcoded font size between 14–16px and replace it with the ‘Body’ text style preset. Don’t touch headings.

More prompts for Batch operations

Replace every instance of the old brand color #0052CC with the new blue #0055FF across all pages.

Rename all FrameNodes named ‘Container’ to match the section they’re in.

Add a missing alt text to every image on every page of this site.

Change all section padding from 80px to 96px across every page.

Find every button with the label ‘Learn more’ and change it to ‘See how it works’.

Increase the line-height of every body text block from 1.4 to 1.6.

Set opacity to 0.6 on every secondary text node that isn’t already styled.

Add appear-on-scroll animations to every H2 and H3 across all pages.

See all Batch operations prompts →

Brand refresh

Restyle an entire site without rebuilding it.

New primary color. New font pair. New section padding rhythm. The agent applies a complete visual direction to the existing site — without moving your content or structure.

Visual placeholder — short demo loop

What the agent does

Swaps font families, updates the color palette, adjusts spacing to the new rhythm, redraws any icon or button styles to match, and creates or updates color tokens to reflect the new brand.

What stays with you

Brand direction and the actual decisions about what the new identity should feel like. Final approval on tone, legibility, and whether the result matches the intent.

Try it

Refresh the visual design of this site. New font: switch all headings to GT Walsheim and body copy to Inter. New primary color: deep forest green #1A3A2A. Reduce the radius on all cards from 20px to 8px. Update all token values to reflect the new palette.

More prompts for Brand refresh

Change the entire site to a warm off-white background with charcoal text.

Switch all headings to EB Garamond with tight tracking.

Increase the visual density — tighter spacing, smaller font sizes, more content per scroll.

Apply the new brand guidelines from this URL to the entire site.

Make the design feel less ‘startup’ — more editorial, more restrained, less blue.

Add a subtle gradient to the background of each section alternating between two brand tones.

Make the footer and nav match the new brand direction without affecting page content.

Remove the border-radius from all buttons — make them squared off.

See all Brand refresh prompts →

Watch real workflows.

Screen recordings of real agent sessions — no editing, no cuts, no narration.