カオスマップに戻る

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.

PlanMonthly (annual billing)AI creditsCMS collectionsPagesEditors
Free$0500 (trial only)230up to 3
Basic$101,000 per paid site230up to 10
Pro$303,00010150Unlimited
EnterpriseContactCustomCustomCustomCustom

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

公式サイト

使いこなし 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/)