---
name: framer-mastery
description: Ship polished, conversion-focused sites in Framer using AI for structure, copy, motion strategy, and launch optimization — faster than the traditional design-then-build cycle.
version: 1.0
date: May 2026
works-with: Claude, GPT-4o, Cursor
---

# Framer with AI

> Framer removes the gap between design and code. AI removes the gap between idea and Framer. Use both.

## When To Use This

- You are building a marketing site, product landing page, or portfolio in Framer
- You need help defining section structure, copy, and conversion flow before opening Framer
- You want AI to drive motion decisions so animations feel purposeful, not decorative
- You are iterating fast and need a system that doesn't break under speed

## Workflow

1. **Define the conversion narrative and section hierarchy before opening Framer.** What does the visitor believe when they arrive? What do they need to believe to convert? Map the narrative arc first.
2. **Build modular components for speed and consistency.** Reusable components in Framer are your velocity multiplier. Build them once, use them everywhere, update once if something changes.
3. **Use motion to reinforce meaning, not fill space.** Scroll-triggered reveals should appear at the moment the user is ready to understand something. Hover states should clarify, not surprise.
4. **Publish, then optimize from live behavior data.** Framer Analytics shows scroll depth and click patterns. Use real data — not gut feel — to decide what to change on the next iteration.

## Signal Prompt

```
I am building a Framer site for: [describe your offer, product, or portfolio].

Help me plan it:
1. Section structure with conversion rationale for each section
2. Hero headline and subheadline copy (3 variations)
3. Proof architecture — what social proof belongs where and why
4. Motion brief: which 3 elements deserve scroll-triggered animation and what each should do
5. A post-launch optimization checklist — what to measure in the first 2 weeks

Audience: [describe them]. Conversion goal: [what you want them to do].
```

## Expected Output

A complete Framer site brief — section plan, copy, motion notes, and a post-launch measurement checklist.

## Compatible With

Claude · GPT-4o · Framer AI · Framer CMS