Free Framer Agent Prompts

Review every section on this page, on every breakpoint, against a 4px spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96). List each gap or padding value that is off the scale, the layer it sits on, and the nearest allowed step. Do not change anything yet.

Rewrite this hero headline and subline for my site. Headline: six words max, saying what I offer and for whom. Subline: one sentence with the main benefit. No buzzwords, no exclamation marks. Give me three options, each with a different angle.

Create a phone breakpoint (390px) for this page. Switch horizontal stacks to vertical, reflow grids to one column (two for small items like logos), reduce section padding by about half, keep body text at 16px or larger, and keep at least 16px of side padding so nothing touches the screen edge.

List every color used on this page, group near-duplicates, and propose a palette of at most eight color styles, with light and dark values for each. Show which layers would change. Do not apply anything yet.

Write a meta title under 60 characters and a meta description under 155 characters for every static page on this site, with the main keyword first and the site name at the end of the title. Keep the key message in the first 120 characters. For CMS detail pages, suggest one title and description pattern using CMS variables like {{Title}} instead of writing each item by hand. Match the tone of the homepage copy.

Check every text layer on this page against its background in light and dark mode, including hover states and text on images. Flag body text under 4.5:1 and large text (24px+, or 18.7px+ bold) under 3:1, plus buttons, inputs and icons under 3:1. Suggest the closest passing color from my color styles.

Rename every layer on this page so the name says what it is, like Hero, Hero Heading, Feature Card, Pricing Grid or Footer Links. Use the same name for layers that do the same job. Keep component and variant names unchanged.

Find elements on this page that repeat with small differences, like cards, buttons, badges or list rows. For each group, propose one component with variants, the properties it needs (text, image, link, toggle) and which layers it would replace. Do not change anything yet.

Give every button, link and card on this page a hover state. Buttons and links: a small color or opacity change. Cards: a subtle border or background change, or a 2 to 4px lift. Use a 0.2s ease-out transition, and add the hover as a component variant where the element is a component.

List every font size, weight and line height used on this page. Group them into at most eight text styles (Heading 1 to 3, Body, Body Small, Label, Caption, Button) on a 1.25 type scale, with line heights around 1.1 to 1.2 for headings and 1.4 to 1.6 for body. Show which layers would move to each style, then create the styles and apply them.

Find repeated content on this page that is typed directly on the canvas, like team members, projects, testimonials, logos or FAQs. For each, propose a CMS collection with field names and types. After I confirm, create the collections, move the content in and replace the layers with collection lists that look exactly the same.

Create a detail page for my blog collection. Bind the title, date, cover image, author and rich text content to the CMS fields. Style headings, paragraphs, links, lists, quotes and images inside the rich text with my text styles, keep the text column around 65 to 75 characters wide, and add a list of three other posts at the bottom.

Add appear effects to the sections on this page: fade in with a 16 to 24px upward move, 0.4 to 0.6s, ease out, played once when the section scrolls into view. Stagger items in lists and grids by 0.05 to 0.1s. Skip the navigation and anything visible on first load, and keep all effects the same across sections.

List every image on this page without alt text. Write alt text for each, around 125 characters or less, describing what the image shows and why it is there. Leave the alt text empty for purely decorative images, and do not start with "Image of".

Check the heading structure on every page: exactly one H1 per page, and H2 to H6 in order without skipping levels. List each problem with the layer name, the current tag and the tag it should use. Only change the HTML tags, not the visual text styles.

Check the social image of every page, including CMS detail pages. Flag pages without one, pages that fall back to the site default and images that are not 1200 by 630px. For CMS pages, suggest which image field to use as the social image.

List every link and button on this page with its label and destination. Flag links without a destination, placeholder links like # or example.com, links to pages that do not exist, and vague labels like Click here or Learn more. Suggest a clearer label for each vague one.

Read this page and write six questions a visitor would ask before buying or contacting me, each answered in two or three sentences with the answer first. Add them as an FAQ section with an accordion, using my existing text and color styles.

Rewrite my 404 page: a short headline, one sentence saying the page does not exist, links to the three most useful pages on my site and a way to contact me. Keep it in the tone of my homepage and use my existing text styles.

Add a contact form to this page with name, email and message fields using Framer's form. Put a visible label above each input, mark required fields, show a clear error for an invalid email and a short success message after sending. Match my text and color styles.