Framer AI
Overview
Framer started as a prototyping tool for designers and evolved into a no-code AI website builder. Framer 3.0 (June 16, 2026) put AI agents onto the design canvas: they can design pages, edit layouts, write copy, manage the CMS, and fix SEO, and everything they produce stays editable as ordinary design elements.
Key Features
Framer Agents
AI agents that carry out multi-step work from a prompt. They cover whole-page design, copywriting, CMS collection management, and SEO fixes.
AI Credits
Agents consume AI credits whenever they work, and every workspace gets a monthly allowance set by its plan. Small requests such as editing text use very few credits, while generating an entire page consumes many.
On-Page Editing
Edit live pages directly in the browser — no design-to-implementation roundtrip.
Built-In Features
- Responsive design
- CMS
- SEO optimization
- Custom domains
- Analytics
- Figma import
Template Marketplace
Rich selection of paid and free templates.
Pricing
The lineup is Free / Basic / Pro / Enterprise — the old Mini and Scale tiers are gone and editor seats got cheaper.
| Plan | Monthly (annual billing) | AI credits | CMS collections | Pages | Editors |
|---|---|---|---|---|---|
| Free | $0 | 500 (trial only) | 2 | 30 | up to 3 |
| Basic | $10 | 1,000 per paid site | 2 | 30 | up to 10 |
| Pro | $30 | 3,000 | 10 | 150 | Unlimited |
| Enterprise | Contact | Custom | Custom | Custom | Custom |
Extra seats cost $20/month for design editors and $10/month for content-only editors. Basic and Pro can buy additional credits anytime.
Strengths
- ✅ No-code full-featured sites
- ✅ AI agents from page design through SEO fixes
- ✅ On-Page Editing for instant updates
- ✅ Figma import
- ✅ Built-in CMS
- ✅ Designer-friendly UI
Weaknesses
- ❌ Not for large/complex sites
- ❌ Free credits are trial-only with no monthly refill
- ❌ Free/Basic cap out at 30 pages and 2 CMS collections
- ❌ Japanese fonts/SEO need extra effort
Official Resources
- Website: https://www.framer.com
- Pricing: https://www.framer.com/pricing
- Agents: https://www.framer.com/agents
使いこなし Tips
SNS・コミュニティで共有されている実践的な使い方
- In Framer, run `npx @framer/agent setup` in your terminal to connect external agents like Claude Code, Cursor, Codex, or Gemini CLI directly to your project's canvas and CMS (Source: https://www.framer.com/help/articles/how-to-set-up-framer-for-claude-code-codex-and-cursor/)