The Framer Agent Playbook — copy the prompt, watch it build

THE FRAMER AGENT PLAYBOOK

Where every Framer Agent prompt lives

Copy the prompt, watch it build — 280 live examples across seven categories.

Browse the playbook

Featured prompts

View all

$ npx @framer/agent
✓ connected to canvas
generate a pricing table
generating nodes

live preview

GenerateBeginner~50 credits

Generate a section with context

Point the agent at existing content; get a matching section.

Create a new services section listing my 13 services. Each item: a heading, one-line description, a thin bottom border, generous spacing. Make it full width.

live preview

GenerateAdvanced~300 credits

Six hero explorations

Branch into a design page of variations.

Create a new design page with six drastically different layout explorations of this hero. Use only existing styles and colors.

pull

spin

flick

live preview

Components & CodeAdvanced~200 credits

Physics playground

Draggable, bouncing bodies.

Build a component where labels are draggable physics bodies that fall, collide, and can be tossed.

LONDON

live preview

Components & CodeIntermediate~150 credits

Working analog clock

A real, ticking React code component.

Turn this selected element into a functioning analog clock component, and add a custom property for the time zone.

live preview

Style & MotionIntermediate~100 credits

Liquid gradient hero

A real animated WebGL gradient.

Add a full-bleed hero background using a liquid gradient shader. Keep it dark with one lime accent, slow and calm, and add subtle grain.

live preview

Content & CMSAdvanced~150 credits

Build a CMS from files

Folder to relational CMS.

I attached a folder of CSVs, markdown, and images. Structure a relational CMS: create collections, define fields, map content, and set references.

●

✦

◇

■

✚

❋

◆

▲

●

✦

●

✦

◇

■

✚

❋

◆

▲

●

✦

live preview

External AgentsAdvanced~150 credits

Live data ticker

API to animated component.

Fetch the latest posts with a keyword, build a CMS collection list, and lay it out as an infinite animated ticker.

Tg.

live preview

Style & MotionIntermediate~100 credits

Animate every heading

Sitewide on-scroll text motion.

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

BUILT BY AN AGENT

Every section on this site was generated on the canvas.

See how

COPY-READY

280 hand-written prompts. One click to copy each one.

Browse the playbook

More to explore

Make the layout less dense

Layout

Set a single accent color

Style & Motion

Swap images in place

Content & CMS

Componentize repeated items

Components & Code

Connect Claude Code

External Agents

Apply a design.md

Design Presets

Rebuild from a screenshot

Generate

Theme for light & dark

Style & Motion

Link two collections

Content & CMS

Mobile nav open/close

Components & Code

Parallel site audit

External Agents

Re-theme to a new palette

Design Presets

Steal a prompt. Ship faster.

Open any category, copy the prompt, and paste it straight into Framer’s agent.

Browse the playbook

Get Framer