Structure & VisibilityAdvanced
JSON-LD Structured Data On Every CMS Item
Adds per-item schema.org structured data to a CMS detail template using field variables so every entry emits valid JSON-LD.
Help me add JSON-LD structured data to my Framer blog so every post emits valid schema.org markup.
Important context: Framer does NOT auto-generate JSON-LD. It must be added manually as custom code on the CMS detail-page template, where it scales to all items via field variables. Sitemap, robots, and meta/OG tags are automatic, but structured data is not.
1. Tell me exactly where to go in the Framer editor: open the CMS detail-page template, then add custom code to the End of <head> area in the page settings, since this is a UI / custom-code task you cannot fully complete in chat.
2. Generate a complete <script type="application/ld+json"> block for an Article/BlogPosting schema, using field variables for headline, description, image, author name, and category.
3. For dates, use the built-in Created and Updated page variables for datePublished and dateModified, and pass text values through the json filter so output stays valid.
4. Give me a second ready-to-paste block for a BreadcrumbList, plus an Organization block for the homepage.
5. List which CMS fields must exist for the variables to resolve, and flag any I am missing.
Finish by telling me to validate with Google's Rich Results Test, and remind me to place this on the template (not per item) so it auto-applies to every entry.
Structure & VisibilityIntermediate
Full SEO And Crawlability Pass
Runs a site-wide metadata, sitemap, robots, and heading audit so crawlers can index every page cleanly.
Run a complete SEO and crawlability pass on my Framer site and fix what you can.
1. Per-page SEO: confirm every static page and the CMS detail template has a unique, well-written Title and Meta Description plus Open Graph / social image tags. For CMS detail pages, wire Title and Description field variables so each item gets unique metadata at scale.
2. Heading hierarchy: check that each page has exactly one H1 and a logical H2/H3 structure, and fix any text layers using the wrong heading tag for machine parsing.
3. Verify Framer's auto-generated XML sitemap and robots file are enabled, and tell me where in Site Settings to confirm them, since that is a UI step.
4. Indexing hygiene: flag any pages that should be set to noindex (thin, staging, or duplicate pages) and apply noindex where appropriate, and identify pages that may need a canonical URL declared via custom code in the page's head.
5. Confirm clean, readable slugs across all pages and CMS items.
Produce a prioritized checklist of issues found, mark each as Fixed by you or Needs me in the editor UI, and apply the metadata and heading fixes you can do directly. Do not claim features Framer lacks; if something must be done manually, say so.
Structure & VisibilityAdvanced
Synced External Source To SEO Pages
Imports an external content source into a managed CMS collection and turns it into crawlable, schema-rich detail pages.
Turn my external content source into crawlable, SEO-ready pages in Framer.
Source: [Notion database / CSV export / WordPress export] of [CONTENT TYPE, e.g. product listings].
1. Import the source into a CMS collection, mapping each source column to a typed field (string, rich text, number, date, image, enum, etc.). For rich-text fields coming from Markdown, set the content type to markdown or auto so it converts to HTML correctly.
2. Prefer a managed/synced collection so the source stays the source of truth. If it is a Notion database, set up sync on a schedule that updates only changed rows, and explain that this runs via a plugin/sync flow and what I need to authorize.
3. Ensure every imported item gets a clean, human-readable slug for its detail-page URL.
4. Generate a CMS detail-page template that wires Title and Description field variables into the page metadata so each item has unique SEO tags, plus a Collection List archive page that links to all items.
5. Tell me where to add a JSON-LD block on the detail template via head custom code, since Framer will not generate structured data automatically.
Confirm the field mapping with me before importing, then report what synced, what needs me in the editor UI, and how to trigger or monitor future syncs.
Structure & VisibilityIntermediate
Machine-Readable CMS Content Model
Builds a normalized, reference-linked CMS structure so blog or resource content stays clean for crawlers and AI parsing.
Act as my Framer content architect. Build a normalized, machine-readable CMS for [SITE TYPE, e.g. a B2B SaaS blog].
1. Create a Posts collection with fields: Title (string), Slug (string), Excerpt (string), Body (rich text), Featured Image (image), Publish Date (date), Updated Date (date), Is Featured (toggle), and Read Time (number).
2. Instead of duplicating data, create separate Authors and Categories collections. Authors: Name, Bio, Avatar, Job Title. Categories: Name, Slug, Description.
3. Link Posts to Authors with a single collection reference, and Posts to Categories/Tags with a multi-collection reference, so shared data lives in one place and stays consistent.
4. Plan the full field schema now and keep field names and ids stable, since changing ids later breaks canvas bindings.
5. Backfill Read Time for every existing post by computing it from Body length.
6. Ensure every item has a clean, human-readable slug, since slugs drive CMS detail-page URLs.
Generate 3 sample posts wired to real Author and Category references so I can verify the relationships. Confirm the schema before creating, and tell me which steps you handled vs. anything I must finish in the Framer editor UI.
Structure & VisibilityAdvanced
Host An llms.txt File For AI Crawlers
Drafts an llms.txt discoverability file and gives the honest hosting path on Framer so LLM crawlers find your key pages.
Set up AI-crawler discoverability for my Framer site using an llms.txt file.
1. Draft a complete llms.txt following the emerging spec: an H1 with my site/company name, a blockquote summary, then markdown sections (## Docs, ## Products, ## Blog, ## About) with bulleted links and one-line descriptions pointing to my most important URLs. Use my real page and CMS URLs.
2. Be transparent that Framer has no native llms.txt field, so it must be hosted as a workaround. Give me the practical options and which is most reliable: (a) host the raw .txt file externally (e.g. on a static host or CDN) and add a redirect from /llms.txt to it in Framer's redirect settings, or (b) edit the well-known/custom files area in Site Settings if my plan exposes it. Note that a normal Framer page renders HTML, not plain markdown, so it is not a clean substitute for a true text file.
3. Tell me precisely where in the Framer editor to add the redirect or file, since this is a settings task you cannot fully complete in chat.
4. Pull my key pages and CMS collections (at-mention my Posts and Products collections) so the link list reflects actual content.
5. Recommend a cadence for regenerating the file as content grows.
Deliver the ready-to-paste llms.txt content plus exact placement steps. Be explicit about what is a manual workaround vs. native Framer behavior.
Structure & VisibilityIntermediate
Govern AI Bot Crawler Access
Configures custom robots directives to allow, throttle, or block specific AI crawlers and training bots site-wide.
Help me decide and implement an AI-bot access policy for my Framer site's robots directives.
1. First, interview me briefly: do I want AI search crawlers (the ones that surface my content in AI answers) to index me, and separately do I want to allow or block AI training crawlers? My current preference is [ALLOW SEARCH, BLOCK TRAINING / BLOCK ALL / ALLOW ALL].
2. Based on my answer, draft the exact robots.txt directives, with named user-agent groups for the major AI crawlers (e.g. GPTBot, OAI-SearchBot, ClaudeBot, Google-Extended, PerplexityBot, CCBot, Bytespider) plus a default group, including Allow/Disallow lines and a Sitemap line.
3. Explain placement clearly: Framer auto-generates the robots file but lets you add custom rules in Site Settings. Tell me exactly where to paste these, since you cannot edit that file directly from chat.
4. Warn me about the trade-offs: blocking training bots may also reduce visibility in some AI answer engines, and Disallow is a request that well-behaved crawlers honor, not a hard block.
Give me the copy-paste directive block and the precise placement steps. Flag anything that is a manual editor action.
Structure & VisibilityIntermediate
Semantic HTML And Accessibility Parsing Pass
Fixes tag semantics, landmarks, alt text, and link labels so screen readers and AI parsers understand the page.
Do a semantic HTML and accessibility pass across my Framer site so machines and assistive tech can parse it cleanly.
1. Tag semantics: ensure text layers use correct heading levels (single H1, ordered H2/H3) and that body text is paragraph text, not headings styled small. Fix mis-tagged layers you can edit.
2. Landmarks: confirm primary navigation, main content, and footer regions read as clear landmarks, and flag sections that render as anonymous divs.
3. Images: audit every image and CMS image field for descriptive alt text, write meaningful alt text where it is missing or generic, and mark purely decorative images appropriately.
4. Links and buttons: ensure link text is descriptive (no bare "click here") and that interactive elements have accessible names/labels.
5. Color and contrast: flag any text/background combinations likely to fail WCAG AA so I can adjust styles.
Return a findings list grouped by page, mark each item Fixed by you or Needs the editor UI, and apply the alt-text and link-text fixes you can. Where a fix requires Framer's layer or style settings, say exactly where to click.
Structure & VisibilityAdvanced
Redirect Map And URL Hygiene
Inventories URLs and builds a clean 301 redirect map after a restructure so no link or ranking signal is lost.
Audit and fix URL hygiene on my Framer site after a restructure.
1. Inventory current URLs: list all static page paths and CMS detail-page URL patterns, and flag near-duplicates, trailing-slash inconsistencies, and old paths from any recent restructure.
2. Build a 301 redirect map for every changed or retired URL pointing to its canonical destination, formatted as a clear from -> to table I can implement. Tell me exactly where in Framer's redirect settings to add these, since that is an editor UI step you cannot do from chat.
3. Slugs: standardize messy or non-descriptive slugs across pages and CMS items, and note that changing a published slug requires a redirect from the old URL so existing links and crawler bookmarks keep working.
4. For any duplicated or parameterized views that should not be redirected, recommend a canonical URL and give me the exact tag plus where to paste it in the page's head custom code.
5. Confirm the auto-generated sitemap will reflect the final canonical URLs.
Deliver the redirect table, the slug changes, and a clear split of what you changed vs. what I must apply in the editor UI.
Landing Pages & HeroesStarter
SaaS Hero That Converts
A focused above-the-fold hero with one clear value prop and a single primary CTA.
Build a complete, conversion-focused hero section for [product] — a [one-line description] for [target audience].
Structure, top to bottom:
1. A small eyebrow tag with a category or credibility cue.
2. An H1 of 6–9 words that leads with the single biggest OUTCOME the user gets — not a feature.
3. A one-sentence subhead naming who it's for and the main objection it removes.
4. A primary CTA button '[primary action]' paired with a lower-emphasis secondary link '[secondary action]'.
5. A thin trust strip (e.g. '[N] teams' or 5–6 grayscale logos).
6. A product visual anchored at the fold edge.
Style: center-aligned, one max-width container, generous vertical padding, large confident type with tight tracking on the headline, calm background — no rainbow gradients, one accent color used only on the primary CTA. Hierarchy must read headline → subhead → CTA. Responsive: stack and shrink the headline on mobile, full-width CTA under 480px. Add a subtle fade-and-rise on load for the headline, subhead and CTA, staggered ~60ms. Ensure AA contrast throughout.
Animation & EffectsIntermediate
Scroll Reveal Sections
Subtle fade-and-rise as each section enters the viewport.
Add a cohesive scroll-reveal system across the whole page so content animates in as the user scrolls.
For every top-level section: start its contents at opacity 0 and translated 24px down, then animate to full opacity and position when ~25% of the section enters the viewport. Use a 0.5s ease-out curve (cubic-bezier(0.16, 1, 0.3, 1)), and stagger direct children by 60–80ms so elements cascade instead of appearing all at once. Play each reveal only once — don't re-trigger on scroll up.
Rules: never delay the above-the-fold hero (it should be instant); when prefers-reduced-motion is on, drop the movement and keep a simple opacity fade; only animate transform and opacity for performance; keep distances subtle; and make sure nothing causes layout shift or a horizontal scrollbar on mobile. Apply it consistently to headings, paragraphs, cards and images so the page feels like one intentional system.
CMS & Dynamic ContentIntermediate
Blog From a CMS Collection
A full blog index and detail setup backed by a CMS collection.
Set up a complete, editable blog powered by the Framer CMS.
1. Create a 'Posts' collection with fields: Title, Slug (auto), Excerpt, Cover (image), Author, Date, Reading time, Tags (multi-option), and Body (rich text).
2. Build an index page at /blog: a responsive 3-column card grid (2 on tablet, 1 on mobile) sorted by Date descending. Each card shows the cover (16:9, rounded), tags, title, a 2-line-clamped excerpt, and an author + date meta row. Add a tag filter bar at the top.
3. Build a detail template at /blog/:slug: a centered reading column (max 720px), large title, meta row, cover, then the Body styled for long-form reading — comfortable line-height, generous paragraph spacing, styled headings, blockquotes, code blocks, and images that can break slightly wider than the text. End with previous/next post navigation and a back-to-blog link.
4. Add SEO: per-post title and meta description from the fields, plus an Open Graph image from the cover.
Seed 3 example posts so I can see it working end to end.
Copywriting & MessagingStarter
Rewrite Copy to Be Benefit-Led
Turn feature-heavy copy into outcome-focused messaging.
Audit and rewrite all the copy on this page so it's benefit-led and sharp, not feature-led or generic.
For each section, in order: (1) show me the current copy, (2) name the one outcome the reader cares about most, (3) rewrite it.
Rules: lead every section with the outcome or transformation for [target audience], then support it with the 'how'. Cut filler and hedging; ban empty adjectives like 'powerful', 'seamless', 'robust' and 'cutting-edge' unless proven. Prefer short, concrete sentences and specific nouns and numbers over vague claims. Make every CTA action-specific — never 'Learn more'; say what happens next. Hold one consistent voice: [confident but warm, plain-spoken].
Also: tighten the H1 to under 10 words, give each section exactly one job, and flag any two sections that say the same thing. Use smart quotes and em-dashes. Don't invent facts, testimonials or stats — mark anything needing a real number as [TODO]. Show me a before/after for each change.
SEO & PerformanceIntermediate
Set Up SEO Meta and OG
Per-page titles, descriptions, and social share images.
Do a full on-page SEO and social-sharing pass on this site.
For every page: write a unique title under 60 characters that leads with the primary keyword, and a compelling meta description under 155 characters. Set the canonical URL. Add Open Graph and Twitter (summary_large_image) tags — title, description, and a 1200×630 share image.
Structure and semantics: exactly one H1 per page with a logical H2/H3 outline; descriptive alt text on every meaningful image and empty alt on decorative ones; semantic landmarks (header, main, nav, footer).
Technical: generate sitemap.xml and robots.txt, set a favicon and apple-touch-icon, and make sure no important page is noindex by accident. Add JSON-LD where it fits — Organization on the home page, Article on blog posts, BreadcrumbList where relevant. Finish with a short per-page checklist of exactly what changed.
Forms & ConversionIntermediate
Pricing Table With 3 Tiers
A clean, scannable pricing section with a highlighted plan.
Build a polished, conversion-optimized pricing section with three tiers: Starter, Pro and Scale.
Each card shows the plan name, a one-line 'best for' description, the price with a '/mo' suffix in tabular numbers, a short feature list with checkmark icons, and a CTA button. Highlight Pro as recommended: a subtle accent border, a 'Most popular' badge, and a slightly elevated surface.
Add a monthly/annual toggle above the cards that updates every price and shows the annual saving (e.g. 'Save 20%'). Below the cards, add one reassurance line (e.g. 'No credit card required · Cancel anytime'). Layout: three equal-height cards in a row on desktop with consistent padding and radius; stack on mobile with Pro first. Use one accent color, only on the Pro highlight and the CTAs. Align feature rows across cards, keep the CTAs as the focal point, and meet AA contrast.
Responsive & MobileStarter
Fix Mobile Layout Overflow
Diagnose and fix horizontal scroll and cramped spacing on mobile.
Do a thorough mobile QA pass and fix everything broken at small sizes. Test at 390px and 320px wide.
Find and fix: (1) any horizontal overflow or sideways scroll — track down the offending element, usually a fixed width, a negative margin, or an image missing max-width 100%; (2) body text smaller than 16px; (3) tap targets under 44×44px; (4) multi-column sections that should collapse to one column; (5) sections with desktop-sized padding that feel cramped on mobile; (6) headings too large that wrap awkwardly; (7) the navigation — collapse it into a working hamburger/drawer if it doesn't fit.
Keep the desktop layout untouched and only adjust the relevant breakpoint(s), preserving visual order when stacking. Give me a per-section list of exactly what changed, and confirm there's no horizontal scroll at 320px.
Interactions & ScrollIntermediate
Sticky Nav With Scroll State
A header that turns solid after the user scrolls.
Turn the top navigation into a polished sticky header with a scroll-aware state.
At the top of the page (scroll = 0): transparent background, no border, full height, logo and links in their resting style. After scrolling past ~80px: animate to a condensed state — a blurred or solid background (backdrop-blur with a semi-opaque fill), a subtle 1px bottom border, slightly reduced height and logo size — transitioning smoothly over ~0.25s; never snap.
Behavior: the nav stays fixed at the top and sits above all content with the right z-index; highlight the link for the section currently in view (scroll-spy) and smooth-scroll on click. On mobile, collapse the links into a hamburger that opens an accessible drawer — focus-trapped, closes on Esc and on link tap, background scroll locked. Keep it a real nav element with full keyboard support and visible focus states.
Landing Pages & HeroesIntermediate
Above-the-Fold Story
An editorial opening that leads with a statement, not a sales pitch.
Create an opening section for [brand] that leads with one bold statement — a single large sentence — about the change you make for [customers], followed by a restrained supporting line and one text link. No stacked buttons, no stat row; let typography and space carry it. Left-align everything to a narrow column and keep the surrounding whitespace generous.
Layout & StructureStarter
Alternating Feature Rows
Alternating image/text rows that explain a product without clutter.
Add a features section with [3] alternating two-column rows. Each row has a short heading, one supporting paragraph, a 3-item benefit list, and a visual on the opposite side. Alternate the image side each row, keep a consistent vertical rhythm, align everything to one max-width, and stack to a single column on mobile with the image first.
Layout & StructureIntermediate
Bento Grid Section
A modern bento grid mixing feature tiles of different sizes.
Build a bento grid of [6] tiles in an asymmetric layout: one large tile spanning 2 columns, the rest standard. Each tile has an icon, a short title and one line of copy on a subtle surface with a 1px border and a consistent radius. Keep the gaps even, balance the visual weight across the grid, and reflow it to a single column on small screens.
Animation & EffectsAdvanced
Magnetic Hover Buttons
Buttons that react gently to the cursor for a premium feel.
Give the primary buttons a refined hover state: scale to 1.03, lift 2px, and ease the background slightly lighter over 0.25s with a spring. Add a matching pressed state that scales to 0.98. Keep it tasteful — no big bounces or color flips — and disable the motion under prefers-reduced-motion.
SEO & PerformanceAdvanced
Speed and Image Audit
Find and fix what is slowing the page down.
Audit this page for performance: flag oversized images and export them at appropriate dimensions, lazy-load anything below the fold, remove unused fonts and weights, and point out heavy embeds or scripts. Give me a short prioritized list of fixes and the expected impact of each.
Forms & ConversionStarter
Newsletter Capture That Works
A focused email capture with a clear incentive and success state.
Add a newsletter section with a benefit-led headline ('[what they get]'), a single email field, and a subscribe button. Validate the email, show an inline success message after submit, and connect it to [email tool]. Keep it one line on desktop, stacked on mobile, with a small privacy reassurance under the field.
Design Systems & ThemingAdvanced
Design Tokens and Type Scale
Establish consistent color and type variables across the site.
Create a design system for this site: color tokens (background, surface, text, muted, border, accent), a modular type scale (display, h1–h4, body, caption), and a spacing scale. Apply them consistently to every section so styling is uniform. Use [accent] as the only accent color and make sure all text meets WCAG AA contrast.
Design Systems & ThemingAdvanced
Add a Real Dark Mode
A proper dark theme driven by shared color tokens.
Add a dark mode driven by color tokens, not hard-coded colors. Define dark values for every token (background, surfaces, text, borders), keep contrast at AA, and add a toggle in the nav that remembers the visitor's choice. Check that images and logos still read well on the dark background.
Interactions & ScrollIntermediate
FAQ Accordion Section
An accessible FAQ where one answer opens at a time.
Build an FAQ section from a list of [questions]. Each row shows the question with a +/− indicator; tapping expands the answer with a smooth height transition and rotates the icon. Use generous padding, a 1px divider between rows, allow only one open at a time, and make the whole thing keyboard accessible.
