PLAYBOOK · GENERATE
Generate & Design
Turn a sentence into a section, and a screenshot into a full page.
PROMPT LIBRARY
40 prompts to generate & redesign
live preview
GenerateBeginner~50 credits
Generate a section with context
Point the agent at existing content and let it compose a new, on-brand section.
Create a Services section beneath the hero that lists all 13 services from my Services page. Render each item as a row with an H2 title, a one-line description, and a thin 1px bottom divider. Use 32px vertical padding per row, keep everything bound to my existing text and color styles, make the section full width, and add a subtle staggered fade-in as each row scrolls into view.
live preview
GenerateBeginner~100 credits
Rebuild from a screenshot
Drop in a reference image and get back fully editable native layers.
Recreate the attached contact form screenshot as native Framer layers — not an image. Match the field order, spacing, label placement, and button style as closely as possible. Use my existing input and button components if they fit, wire the submit button to the form, and make the whole thing responsive so it stacks cleanly on phone.
live preview
GenerateIntermediate~300 credits
Build a full page from a spec
Describe the content and structure once; get a complete, linked page.
Build a Contact page with three office locations — San Francisco, New York, and Amsterdam. For each, show the city, full address, and email in a column beside a landscape photo. Reuse the header and footer from my Work page, add any missing nav links across the whole site, and give every email a working mailto link.
Qo.
live preview
GenerateBeginner~50 credits
Rewrite the hero headline
Sharper, more concrete copy that still fits the layout.
Rewrite this hero headline and subhead. The headline must be under eight words, concrete, and free of buzzwords like 'seamless' or 'elevate'; the subhead should be one sentence that explains the actual benefit. Keep the existing type styles and make sure neither line creates an awkward widow when it wraps.
live preview
GenerateAdvanced~300 credits
A whole landing from a vibe
One paragraph of direction expands into a full, on-brand landing page.
Create a full landing page for a dark, technical developer tool with a single lime accent. Include a hero with one clear value proposition and a primary CTA, a four-item feature grid, a three-tier pricing section with the middle plan highlighted, a short FAQ, and a footer. Use only my existing color and text styles, and keep the spacing rhythm consistent between sections.
live preview
GenerateAdvanced~300 credits
Six hero explorations
Branch into a design page of bold, comparable variations.
Create a new design page with six drastically different layout explorations of this hero — vary the composition, alignment, and media treatment, not just the colors. Use only the styles and color tokens already in the project, experiment with different liquid-gradient shaders behind each, but keep the exact same palette so they read as one family.
NEW YORK
live preview
GenerateIntermediate~100 credits
Contact section with live hours
A contact block with a live, timezone-aware open/closed indicator.
Build a Contact section showing our address, an embedded map, and a contact email. Add a live analog clock set to our local timezone and a small label that reads 'Open now' in the accent color during business hours and 'Closed' otherwise. Lay it out two columns on desktop and stacked on phone, using existing styles.
live preview
GenerateBeginner~100 credits
Animated stats band
Turn a list of metrics into a clean, animated stats band.
Add a stats band directly under the hero with four key metrics. Render each as a large number with a short uppercase label beneath it, separated by thin vertical dividers on desktop and stacked on phone. Use tabular figures so the numbers align, and animate each value counting up from zero when the band scrolls into view.
grab
throw
snap
live preview
GenerateIntermediate~100 credits
Interactive physics hero
A playful hero where the keywords are draggable physics objects.
Build a playful hero where three or four keywords are draggable physics objects that fall in, collide, and settle at the bottom, with a clear static headline behind them. Keep the physics subtle and performant, make the objects tossable, and ensure the headline stays readable at all times. Fall back to a calm static layout on touch devices.
live preview
GenerateIntermediate~150 credits
Features grid from a list
A feature section generated from a plain list of features.
Add a Features section from these six features. Lay them out as a responsive grid that wraps from three columns to one, each card with an icon, a title, and a one-line description. Give the cards equal height with the description pinned to the bottom, a 1px border, and a gentle hover lift. Use my existing icon set and color styles.
Tg.
live preview
GenerateIntermediate~150 credits
About page in your voice
On-brand About page copy and layout in one pass.
Write and lay out an About page in my brand voice: a short origin story, three core values as a row of cards, and a small team strip. Keep the tone editorial and calm rather than salesy, constrain body text to a comfortable ~68-character measure, and use my serif display style for headings if one exists.
NEW YORK
live preview
GenerateAdvanced~200 credits
Coming-soon teaser
A focused, single-screen launch teaser.
Create a coming-soon page: a large teaser headline, one supporting sentence, an email signup field with a submit button, and a subtle animated gradient background. Keep it to a single viewport with no scroll and no navigation, center everything, and make the email field validate on submit with a clear success state.
live preview
GenerateBeginner~50 credits
CMS-backed blog index
A real, CMS-backed blog index — not hardcoded cards.
Create a blog index page backed by a Posts CMS collection. Show one pinned featured post large at the top, then a responsive grid of the remaining posts with thumbnail, title, date, and read time. Add load-more pagination, link every card to its detail page, and include a tasteful empty state for when there are no posts.
live preview
GenerateIntermediate~150 credits
Reuse an existing layout
Match an existing page's chrome so new pages feel native.
Match the header and footer layout from my Work page on this new page exactly — same components, same spacing, and the same navigation links in the same order. If any nav item points to a page that doesn't exist yet, create a simple stub for it first, then wire the link so nothing is broken.
✦
◇
■
✚
❋
◆
▲
●
✦
◇
✦
◇
■
✚
❋
◆
▲
●
✦
◇
live preview
GenerateBeginner~100 credits
Logo + gallery hero
An image-led hero with slowly rotating concentric rings.
Create a hero where my product images sit in two or three slowly rotating concentric rings behind a centered headline and CTA. Fade the outer ring toward the edges so the text stays legible, keep the rotation slow and calm, and pause the motion for visitors who prefer reduced motion.
live preview
GenerateAdvanced~150 credits
Audio hero with a waveform
An audio- or data-flavored hero with a living waveform.
Add a hero for an audio product with an animated waveform line flowing left to right behind the headline. Keep the line in the accent color over the dark background, make the motion smooth and seamless on loop, and ensure the headline and CTA in front keep at least 4.5:1 contrast.
live preview
GenerateIntermediate~150 credits
Loading & empty states
A polished loading and empty experience, not an afterthought.
Design the loading and empty states for my dashboard. Use skeleton placeholders that match the real layout's sizes rather than a generic spinner, and a composed empty state with a short heading, one line of guidance, and a primary action. Keep the skeleton shimmer subtle and the whole thing on-brand.
live preview
GenerateAdvanced~200 credits
Masonry testimonial wall
A masonry testimonial wall from a set of quotes.
Build a testimonials section as a masonry wall of quote cards with varied heights. Each card shows an avatar, name, role, and a short quote. Stagger the columns so it doesn't read as a rigid grid, give cards a 1px border and soft shadow, and collapse to a single column on phone.
$ npx @framer/agent
✓ connected to canvas
add a CMS blog
generating nodes
live preview
GenerateBeginner~50 credits
Recreate a site section
Recreate an external reference closely, in native layers.
Recreate the hero section from this URL as native, editable Framer layers. Match the layout structure, spacing ratios, type scale, and proportions precisely rather than loosely — including any borders, dividers, and overlap. Use my fonts and color styles, and rebuild it responsively for tablet and phone.
live preview
GenerateIntermediate~100 credits
Closing CTA band
A bold, full-bleed CTA band to close any page.
Add a closing call-to-action band at the bottom of this page: a large headline, one supporting line, and two buttons — a primary accent button and a secondary outline button. Make it full-bleed with a subtle animated gradient, center the content with a sensible max-width, and keep generous vertical padding.
live preview
GenerateAdvanced~300 credits
Pricing Tiers With Toggle
Three-tier pricing table with a monthly to annual billing switch
Build a pricing section with three equal-height tier cards laid out in a responsive grid: stack to one column under 810px, two columns on tablet, three on desktop. Add a monthly/annual billing toggle at the top that swaps the displayed price and shows an annual savings badge on each card. Highlight the middle tier as Most Popular with an accent border pulled from a color style. Each card lists features with check icons, a CTA button, and consistent vertical rhythm. Add a staggered fade-up reveal on scroll and respect prefers-reduced-motion.
live preview
GenerateAdvanced~250 credits
FAQ Accordion Section
Searchable accordion FAQ with smooth single-open expand behavior
Generate an FAQ section with a heading, a short intro, and a list of question rows that expand into answers. Build the accordion as a component with collapsed and expanded variants, animating height and a chevron rotation on toggle, allowing only one item open at a time. Pull questions and answers from a CMS collection so editors can add rows without touching the canvas. Constrain the column to a readable max-width, use a body text style for answers, and disable expand animation under prefers-reduced-motion.
live preview
GenerateAdvanced~350 credits
Bento Feature Grid
Asymmetric bento layout mixing large and small feature tiles
Create a bento-style feature section using a CSS-grid-driven layout: one large 2x2 hero tile, two wide tiles, and three small square tiles, all sharing a consistent gap and corner radius from a variable. Each tile holds an icon, a short headline using a heading text style, and a one-line description. Collapse the bento to a single column under 810px while preserving tile order. Add a subtle scale-and-lift hover on each tile and a staggered reveal as the section enters the viewport, gated by prefers-reduced-motion.
live preview
GenerateAdvanced~300 credits
Team Grid From CMS
Headshot grid of team members bound to a CMS collection
Build a team section that renders a responsive grid of member cards bound to a Team CMS collection with fields for name, role, photo, and a social link. Show four columns on desktop, two on tablet, one on mobile, keeping cards equal height. On hover, reveal the role and social icon with a soft cross-fade over the photo. Use a color style for the overlay tint and a text style for names. Add a staggered entrance and ensure focus states are visible for keyboard users and motion is reduced when requested.
live preview
GenerateIntermediate~200 credits
Newsletter Capture Band
Slim email-capture band with inline validation and success state
Generate a full-width newsletter signup band with a punchy headline, one supporting line, an email input, and a submit button arranged inline on desktop and stacked under 810px. Build the form as a component with default, focused, error, and success variants, animating a checkmark and a thank-you message on submit. Pull the background from a gradient color style and constrain content to a centered max-width. Keep the input label accessible, give the button a hover lift, and respect prefers-reduced-motion on all transitions.
live preview
GenerateAdvanced~400 credits
Scroll Timeline Story
Vertical timeline that reveals milestones as you scroll
Build a vertical company timeline where milestones alternate left and right of a center spine on desktop and stack to a single left-aligned column on mobile. Drive each milestone node and connector to draw in and fade up as it enters the viewport using scroll-linked reveals with a slight stagger between the dot, year, and description. Source entries from a CMS collection sorted by date, use a heading text style for years, and a color style for the spine. Fully disable scroll motion under prefers-reduced-motion, showing all items statically.
live preview
GenerateAdvanced~350 credits
Comparison Table Section
Feature comparison matrix of your product against competitors
Generate a comparison table comparing your product against two competitors across a list of feature rows, with check, dash, and cross marks per cell. Build it so the first column sticks while the table scrolls horizontally under 810px, and highlight your product column with an accent background from a color style. Pull rows and cell values from a CMS collection so the matrix stays editable. Use a compact body text style, alternate row tints for legibility, and add a subtle row-highlight on hover, keeping all motion off under prefers-reduced-motion.
live preview
GenerateAdvanced~300 credits
Animated Metrics Counter
KPI band where numbers count up when scrolled into view
Create a metrics band with four large KPI figures and labels in a responsive row that stacks to two-by-two on mobile. Build a counter component that animates each number from zero to its target when the band enters the viewport, easing out over about a second, then holds the final value. Use a display text style for the figures and a muted text style for labels, with thin divider lines pulled from a color style between stats. Stagger the counters slightly and render final values immediately under prefers-reduced-motion.
live preview
GenerateAdvanced~350 credits
Sticky Side Nav Page
Long page with a sticky in-page nav tracking the active section
Build a long-form content page with a sticky left sidebar nav listing anchor links to each section, and a main column of stacked sections with generous spacing. Wire the nav so clicking an item smooth-scrolls to its section and the active link highlights as you scroll using scroll position tracking. Collapse the sidebar into a horizontal sticky bar under 810px. Use a color style for the active indicator and a heading text style for section titles, and disable smooth scroll behavior under prefers-reduced-motion.
live preview
GenerateAdvanced~400 credits
Glassmorphism Pricing Hero
Hero with frosted glass cards over a vivid mesh gradient
Generate a hero section layered over an animated mesh gradient background built from blurred color blobs that drift slowly. Place a centered headline, subhead, and two frosted-glass cards using backdrop blur, semi-transparent fills, and a thin light border from a color style. Define the gradient stops as variables so the palette can be retuned globally. Keep the headline legible with sufficient contrast, stack the cards under 810px, slow or pause the blob drift under prefers-reduced-motion, and add a gentle hover glow on each glass card.
live preview
GenerateAdvanced~400 credits
Multi-Step Onboarding Flow
Three-step signup wizard with progress dots and transitions
Build a centered onboarding wizard with three steps, each in its own panel, plus a progress indicator of dots that fill as the user advances. Create the wizard as a component with a variant per step, sliding panels horizontally with a spring on next and back while validating required fields before advancing. Use a color style for the active dot and a text style for step titles, and keep the card a fixed comfortable width that becomes full-bleed under 810px. Replace slide transitions with instant swaps under prefers-reduced-motion.
◇
■
✚
❋
◆
▲
●
✦
◇
■
◇
■
✚
❋
◆
▲
●
✦
◇
■
live preview
GenerateAdvanced~350 credits
Localized Hero Variants
Hero that swaps copy and currency per language locale
Generate a hero section designed for localization: headline, subhead, and a price line that swap based on a locale toggle for English, German, and Japanese. Store each locale's strings as variables and bind the text layers to them so switching the toggle updates all copy at once, including currency symbol and number format on the price. Add a small flag-style language selector in the corner. Use a heading text style that supports the chosen fonts, keep line lengths comfortable across longer German strings, and cross-fade copy on switch while respecting prefers-reduced-motion.
live preview
GenerateAdvanced~400 credits
Case Study Detail Page
Editorial case-study layout with pull quotes and result stats
Build a case study detail page bound to a CMS collection with fields for client, hero image, challenge, solution, body, a pull quote, and three result figures. Lay it out as a single readable column with a full-bleed hero, an inset metrics band, and an oversized pull quote that breaks the grid. Use distinct heading, body, and quote text styles, and a color style for the metric accents. Add a subtle parallax on the hero image, reveal sections with a soft fade-up on scroll, and disable both effects under prefers-reduced-motion.
live preview
GenerateAdvanced~400 credits
Dark Mode Landing Page
Full landing page wired to a working light and dark theme
Generate a landing page with hero, features, and CTA sections, then wire a working light/dark theme. Define every surface, text, and accent color as a color style with paired light and dark values, and add a header toggle that flips a theme variable so all styled layers swap together. Ensure text keeps AA contrast in both modes and any imagery has an appropriate dark variant or overlay. Animate the toggle with a smooth icon morph, keep the switch keyboard-accessible, and skip the transition flash under prefers-reduced-motion.
✦
◇
■
✚
❋
◆
▲
●
✦
◇
✦
◇
■
✚
❋
◆
▲
●
✦
◇
live preview
GenerateIntermediate~250 credits
Logo Marquee Strip
Infinite-scrolling client logo ticker that pauses on hover
Create a trusted-by section with a single line of client logos that scrolls horizontally in a seamless infinite loop. Build it by duplicating the logo row and animating a continuous translate so there is no visible seam, pausing the motion on hover and on focus-within. Normalize every logo to a consistent height and a muted monochrome treatment using a color style, with a slight opacity lift on hover per logo. Add edge fade masks on both sides, keep the strip full-bleed, and freeze the loop entirely under prefers-reduced-motion.
live preview
GenerateAdvanced~400 credits
Product Detail From CMS
E-commerce product page bound to a products collection
Build a product detail page bound to a Products CMS collection with fields for name, price, gallery images, description, and variant options. Lay out a two-column structure: a sticky image gallery with thumbnail switching on the left and product info with a variant selector and add-to-cart button on the right, collapsing to a single column under 810px. Use a heading style for the name and a color style for the price accent. Add a fade between gallery images, a button hover state, and ensure selecting a thumbnail updates the main image without motion under prefers-reduced-motion.
live preview
GenerateIntermediate~200 credits
404 And Error Pages
Branded 404 and error states with playful animated illustration
Generate a branded 404 page and a generic error page sharing one layout: a large status code, a friendly message, a back-home button, and a small playful animated illustration like a drifting shape loop. Center everything in a full-viewport-height frame using a background color style and a display text style for the code. Keep the copy reassuring and specific to each state, make the home button the clear primary action, and pause the illustration loop under prefers-reduced-motion. Ensure layouts hold up from mobile to desktop with comfortable spacing.
live preview
GenerateIntermediate~250 credits
Split-Screen Hero
Half-text half-image hero that flips orientation on mobile
Build a split-screen hero with a left half holding an eyebrow, headline, subhead, and two CTA buttons, and a right half holding a full-bleed image or media. Keep the two halves equal width on desktop and stack to image-over-text under 810px. Vertically center the text block with generous padding, use a heading text style for the headline and a color style for the eyebrow. Add a slow Ken Burns zoom on the image and a staggered fade-up on the text elements, both disabled under prefers-reduced-motion, and ensure CTA focus states are visible.
drag
toss
drop
live preview
GenerateAdvanced~300 credits
Magnetic CTA Section
Closing CTA with a button that drifts toward the cursor
Create a closing CTA section with a bold centered headline and a single primary button that subtly drifts toward the cursor when it approaches, snapping back on leave with a spring. Build the magnetic behavior as a reusable override applied to the button, capping the offset so it never strays far, and keep the label perfectly centered. Use a display text style for the headline and a gradient color style for the section background. Ensure the button stays fully clickable and keyboard-focusable, and disable the magnetic motion under prefers-reduced-motion.
live preview
GenerateAdvanced~450 credits
Live Status Dashboard
Hero dashboard mockup with animated charts and live tickers
Generate a product hero featuring a stylized dashboard mockup: a card grid containing a line chart that draws in on load, a couple of KPI tiles whose numbers tick up, and a small status feed of rows that fade in sequentially. Build the chart and tickers as code components with property controls for their values, arranged in a responsive grid that simplifies to a stacked stack under 810px. Use color styles for chart strokes and tile accents, a mono text style for figures, and pause or settle every animation to a static frame under prefers-reduced-motion.