Framer Agent prompts to try today

These are the exact prompts I run on my own site with the new Framer Agent. Steal them.

I used the Framer Agent to build and maintain my real prompt library — new sections, CMS structure, responsive passes, all the production work that usually eats my day. Below are the prompts that actually moved the needle, ordered from simple to complex. Paste them straight into the Agent on your own project.

Try the Framer Agent yourself: Framer

One rule that changes everything: the more context you give, the better the result. Point the context tool at the exact frame you mean, name a specific page, or attach a screenshot. Vague prompt, vague output.

1. Quick wins

Single edits. Good for your first five minutes with the Agent.

• Add a new services section to this page. List six services, each with a heading and a one-line description. Thin bottom border, generous spacing, full width.

• Add an icon to each item that best represents it. Match my existing style.

• Label this section and add a "See all" link that matches my other sections.

• Change this button to match the primary buttons on the rest of the site.

2. Build pages from anything

Whole pages, real layouts, in one prompt — then iterate in plain language.

• Create a contact page with three office locations: [city], [city], [city]. Include address and email, with a landscape city photo beside each.

• Replace this image with a more iconic photo of [city]. (then keep going: "more foggy", "warmer tones")

• Add a contact form that matches this. (attach a screenshot)

• Build an FAQ page from these questions, styled like the rest of the site. (paste your list)

3. Lock in your design system

Consistency at scale — the stuff that's painful to do by hand.

• List every text layer that isn't bound to a style. Exclude layers sized to fit. Then apply the closest matching style to each.

• Refine the contrast between my heading sizes using the nearest major third intervals.

• Theme the site for light and dark mode. Keep the current values for dark, create new ones for light. Leave static colors alone.

• Clean up my colors. Merge styles that are too similar and create any that are missing.

4. CMS at scale

Where the Agent saves the most time. Structure, references, cleanup.

• Turn these items on the page into a CMS collection. Connect this section to it and show only six.

• Add a multi-reference field on the Work collection that links each project to the team members who worked on it.

• Rename these CMS items with clear, polished titles based on their content.

• Simplify the slugs on this collection and redirect the old URLs to the new ones.

5. Motion & polish

Animation across the whole site without touching code.

• Add a subtle staggered appear effect to the hero. One-second duration, stagger each element by 0.1 second, top to bottom.

• Make sure no parent frame clips this animation.

• Add a subtle heading animation across all pages. Trigger on scroll into view, animate by word, move up, and fade in.

6. Production & QA

The heavy lifting. Run these before launch.

• Make every page responsive across the whole site. Create variants for any component that needs an alternate layout, like the footer.

• Which adjective shows up most in my copy site-wide? (then) Replace some of them with synonyms that match my tone.

• Rewrite any passive copy in a more active voice.

• Turn these repeated list items into one component with variables, then replace each with an instance.

• Set SEO titles, meta descriptions, and image alt text across every page.

7. Code components — interactive hero

The Agent can build real, functional code components from a single prompt. This is the exact one I used to generate an interactive 3D infinite canvas hero — draggable, parallax, fully editable in the property panel.

Run the big ones safely — Branching

Before any site-wide change, create a branch. It's a sandbox: run the prompt, review exactly what changed, compare versions, and only apply to main when you're happy. Your live site stays untouched until then.

The pattern: create a branch → make every page responsive → review → apply to main.

Pro tips — how to actually work with the Agent

Less about prompts, more about workflow. These are the small habits that separate a clean result from a mess.

• Point, don't describe. Use the context tool to click the exact frame or layer you mean. It beats writing a paragraph trying to explain which element you're talking about.

• Nudge, don't re-prompt. Once it builds, just talk to it: "more foggy", "lose the blur", "these run too long, slow them down". You refine in plain language, you don't start over.

• Jump in by hand when that's faster. Sometimes dragging or deleting an element yourself is quicker than explaining it. The Agent keeps your manual changes and builds around them.

• One chat per task. Starting a new chat when you switch jobs keeps the context clean, so old instructions don't bleed into new work.

• Branch before anything site-wide. Responsive passes, theming, batch copy edits — run them in a branch, review, then apply to main. Never sweep across the whole site directly on the live version.

• Be specific with numbers. "One-second duration, stagger by 0.1 second", "show only six items", "nearest major third intervals". Specific inputs give you controllable output.

• Don't auto-generate styles from scratch. It just codifies the mistakes already in your file. Instead, ask it to find layers not bound to a style and apply the ones you already have.

• Hand it a screenshot for anything you can't describe. It rebuilds functional UI from a picture — forms, layouts, components — ready for your content.

• Answer its questions. When it asks how to map fields or handle an edge case, it's usually caught something real. Don't brush past it.