Search
Create, refine, and publish with Framer AI.
Canvas
Site
·
main
Invite
Publish
Pages
Layers
Assets
Search…
Pages
Home
/awards
/submit
/winners
/blog
Blog Articles
/contact
/documentation
/gallery
Gallery Animations
/pricing
/product
/stories
/updates
Product Updates
Desktop
1200
Agent
Style
Landing Page
Change this landing page into dark mode. Adjust the UI as well to fit the theme.
Thinking...
Thinking...
Changing the page to dark mode, adjusting the UI to match.
Page updated. Here’s what I changed:
1.
Dark surfaces — page and section backgrounds switched to black and deep gray
2.
Text and UI contrast — body copy and labels updated so they stay legible on dark backgrounds
3.
Accents and borders — interactive elements and dividers adjusted to work with the dark theme
Add follow-up…
Sonnet 4.6
Canvas
Site
·
main
Invite
Publish
Pages
Layers
Assets
Search…
Pages
Home
/awards
/submit
/winners
/blog
Blog Articles
/contact
/documentation
/gallery
Gallery Animations
/pricing
/product
/stories
/updates
Product Updates
Desktop
1200
Agent
Style
Landing Page
Change this landing page into dark mode. Adjust the UI as well to fit the theme.
Thinking...
Thinking...
Changing the page to dark mode, adjusting the UI to match.
Page updated. Here’s what I changed:
1.
Dark surfaces — page and section backgrounds switched to black and deep gray
2.
Text and UI contrast — body copy and labels updated so they stay legible on dark backgrounds
3.
Accents and borders — interactive elements and dividers adjusted to work with the dark theme
Add follow-up…
Sonnet 4.6
Canvas
Site
·
main
Invite
Publish
Pages
Layers
Assets
Search…
Pages
Home
/awards
/submit
/winners
/blog
Blog Articles
/contact
/documentation
/gallery
Gallery Animations
/pricing
/product
/stories
/updates
Product Updates
Desktop
1200
Agent
Style
Landing Page
Change this landing page into dark mode. Adjust the UI as well to fit the theme.
Thinking...
Thinking...
Changing the page to dark mode, adjusting the UI to match.
Page updated. Here’s what I changed:
1.
Dark surfaces — page and section backgrounds switched to black and deep gray
2.
Text and UI contrast — body copy and labels updated so they stay legible on dark backgrounds
3.
Accents and borders — interactive elements and dividers adjusted to work with the dark theme
Add follow-up…
Sonnet 4.6
Canvas
Site
·
main
12
Invite
Publish
Pages
Layers
Assets
Search…
Pages
Home
/research
Research Pages
/commitments
/learn
/support
/news
/legal
/privacy
/terms
/try-bloom
News Pages
100%
Desktop
1200
Agent
Style
Vertical Hero Layout
Change the hero to a vertical stack layout, then replace the hero image with the image attached.
GPT 5.5
AI for every part of your site, you stay in control
Featured models
Petal 3.1
Builds and ships
Ember 4.7
Fast and efficient
Horizon 2.1
For complex work
Design with an agent
Start from a prompt and watch the agent generate layouts, sections, and visual style directly on your canvas. Refine typography, spacing, and color until it looks exactly right.
Featured models
Petal 3.1
Builds and ships
Ember 4.7
Fast and efficient
Horizon 2.1
For complex work
Design with an agent
Start from a prompt and watch the agent generate layouts, sections, and visual style directly on your canvas. Refine typography, spacing, and color until it looks exactly right.
CMS
Site
·
main
Invite
Publish
Collections
Fields
Plugins
Careers
Documentation
Articles
0
0
Learn
Models
News
Research
Add...
Title
Image
Category
Introduction
Quickstart guide
Guide
In this
Choosing a model
Tutorial
Motion
Data and privacy
Systems
In this
Cost optimization
Tips
We
Connect your data
Tutorial
Testing
Tokens explained
Guide
In this
Manage your CMS with AI
Set up collections, populate content, and keep everything organized. The agent works in your CMS directly to the canvas so content and design always stay in sync.
CMS
Site
·
main
Invite
Publish
Collections
Fields
Plugins
Careers
Documentation
Articles
0
0
Learn
Models
News
Research
Add...
Title
Image
Category
Introduction
Quickstart guide
Guide
In this
Choosing a model
Tutorial
Motion
Data and privacy
Systems
In this
Cost optimization
Tips
We
Connect your data
Tutorial
Testing
Tokens explained
Guide
In this
Manage your CMS with AI
Set up collections, populate content, and keep everything organized. The agent works in your CMS directly to the canvas so content and design always stay in sync.
ImageSlider
Code with an agent
Describe what you need and the agent builds it. From simple custom effects to complex interactions and live data, placed in your site and ready to use.
ImageSlider
Code with an agent
Describe what you need and the agent builds it. From simple custom effects to complex interactions and live data, placed in your site and ready to use.
Desktop
1200
News
/
Announcement
Introducing Bloom Horizon 2.1
Bloom Horizon 2.1 is here. Our latest forcasting model helps teams antitcipate risks across public health, education, and support, so decisions come earlier and with more confidance.
Olivia Lindqvist
•
Research Lead
Bloom®
Research
Commitments
Learn
News
Try Bloom ↗
Review and fix with an agent
Ask the agent to review your site and it will find issues before your users do. Contrast, typos, missing alt text, SEO gaps, inconsistent styles. Flagged and fixed.
Desktop
1200
News
/
Announcement
Introducing Bloom Horizon 2.1
Bloom Horizon 2.1 is here. Our latest forcasting model helps teams antitcipate risks across public health, education, and support, so decisions come earlier and with more confidance.
Olivia Lindqvist
•
Research Lead
Bloom®
Research
Commitments
Learn
News
Try Bloom ↗
Review and fix with an agent
Ask the agent to review your site and it will find issues before your users do. Contrast, typos, missing alt text, SEO gaps, inconsistent styles. Flagged and fixed.
Desktop
1200
Bloom®
Research
Commitments
Learn
News
Try Bloom ↗
Simple pricing based on your needs
Monthly
Yearly
Starter
$29/month
For solo builders getting started
Professional
$49/month
For growing teams that ship fast
Enterprise
$119/month
For organizations running analysis at scale
Analyze and improve with an agent
Ask the agent to read your traffic and it will turn the numbers into clear next steps. Top pages, drop-offs, search intent, conversion gaps. Summarized and ready to act on.
Desktop
1200
Bloom®
Research
Commitments
Learn
News
Try Bloom ↗
Simple pricing based on your needs
Monthly
Yearly
Starter
$29/month
For solo builders getting started
Professional
$49/month
For growing teams that ship fast
Enterprise
$119/month
For organizations running analysis at scale
Analyze and improve with an agent
Ask the agent to read your traffic and it will turn the numbers into clear next steps. Top pages, drop-offs, search intent, conversion gaps. Summarized and ready to act on.
Stack
Change the layout of this
section. Let’s try a horizontal stack with bigger images. Match the padding and gap to other sections of this page.
Thinking...
Thinking...
Created a design plan
2s
Done! This section is now a horizontal stack with three larger cards. I matched the padding and gap to the other sections so it stays aligned with the rest of the page.
Want me to tweak the image sizes or spacing any further?
GPT 5.5
The AI you already use, connected to Framer
Copy install prompt
Pull in live data
Run scripts and workers that refresh site content from live APIs.
What our users say
Name Sample
@NameSample
Our team went from spending half our Monday on manual updates to having everything ready before we even sit down. That kind of time back is priceless when you're a small team wearing a lot of hats.
Name Sample
@NameSample
Our team went from spending half our Monday on manual updates to having everything ready before we even sit down. That kind of time back is priceless when you're a small team wearing a lot of hats.
Name Sample
@NameSample
Our team went from spending half our Monday on manual updates to having everything ready before we even sit down. That kind of time back is priceless when you're a small team wearing a lot of hats.
Name Sample
@NameSample
Our team went from spending half our Monday on manual updates to having everything ready before we even sit down. That kind of time back is priceless when you're a small team wearing a lot of hats.
Initializing Agent environment...
└ Node.js detected · twitter-api-v2 loaded.
Skill(check-auth-status)
└ Authenticated with X API.
Bash(GET /2/tweets/search/recent --query "@keyframe -is:retweet" --max 100)
└ 187 returned · 27 passed like_count ≥ 100.
Bash(GET /2/users/:id × 6)
└ name, handle, avatar resolved.
27 posts live · refreshes every 5 min.
Pull in live data
Run scripts and workers that refresh site content from live APIs.
Migrate and import
Import from sources like Notion, WordPress, or other APIs into your CMS.
Import local files
Pull local files from your machine to fill in CMS content.
What our users say
Name Sample
@NameSample
Our team went from spending half our Monday on manual updates to having everything ready before we even sit down. That kind of time back is priceless when you're a small team wearing a lot of hats.
Name Sample
@NameSample
Our team went from spending half our Monday on manual updates to having everything ready before we even sit down. That kind of time back is priceless when you're a small team wearing a lot of hats.
Initializing Agent environment...
└ Node.js detected.
└ twitter-api-v2 loaded.
Skill(check-auth-status)
└ Authenticated with X API.
└ Authenticated with Framer API.
Bash(GET /2/tweets/search/recent --query "@keyframe -is:retweet" --max 100)
└ 187 returned · 27 passed like_count ≥ 100.
Bash(GET /2/users/:id × 6)
└ name, handle, avatar resolved.
27 posts live · refreshes every 5 min.
Pull in live data
Run scripts and workers that refresh site content from live APIs.
Migrate and import
Import from sources like Notion, WordPress, or other APIs into your CMS.
Import local files
Pull local files from your machine to fill in CMS content.
Explore more ways to boost your productivity with agents in Framer
All the control you need, right where you work
Skills
/cms
Write content
/component
With variants
/code
Custom component
GPT 5.5
Skills. Type / to run focused AI actions for layouts, CMS, styling, and more.
Skills
/cms
Write content
/component
With variants
/code
Custom component
GPT 5.5
Skills. Type / to run focused AI actions for layouts, CMS, styling, and more.
Agents
Agents
Sonnet 4.6
Agents
GPT 5.5
Agents
Agents
Sonnet 4.6
Agents
GPT 5.5
Contexts. Select layers on the canvas and add them as context to your chat.
Chats. Start a new one for each task to keep the agent focused.
Models. Choose between Sonnet, Opus, and GPT depending on the task.
Skills
/cms
Write content
/component
With variants
/code
Custom component
GPT 5.5
Mentions. Type @ to reference pages, CMS collections, styles, or assets.
Skills
/cms
Write content
/component
With variants
/code
Custom component
GPT 5.5
Mentions. Type @ to reference pages, CMS collections, styles, or assets.
DESIGN.md
Update the padding,
buttons, and icons on my site to match this file.
GPT 5.5
blog.csv
DESIGN.md
shader.mp4
data.json
component.tsx
screenshot.png
blog.csv
DESIGN.md
shader.mp4
data.json
component.tsx
screenshot.png
blog.csv
References. Upload images, files, or URLs to guide AI toward the exact result you want.
DESIGN.md
Update the padding,
buttons, and icons on my site to match this file.
GPT 5.5
blog.csv
DESIGN.md
shader.mp4
data.json
component.tsx
screenshot.png
blog.csv
DESIGN.md
shader.mp4
data.json
component.tsx
screenshot.png
blog.csv
References. Upload images, files, or URLs to guide AI toward the exact result you want.
DESIGN.md
Update the padding,
buttons, and icons on my site to match this file.
GPT 5.5
blog.csv
DESIGN.md
shader.mp4
data.json
component.tsx
screenshot.png
blog.csv
DESIGN.md
shader.mp4
data.json
component.tsx
screenshot.png
blog.csv
References. Upload images, files, or URLs to guide AI toward the exact result you want.
Branches. Iterate safely by moving agent edits to a branch.
Get started with Framer
Get started with Framer
Get started with Framer
