Framer 3.0：AI Agent进入Canvas，支持Claude Code/Cursor通过MCP接入

由 Nokka（นก-กา）| 2026年8月15日

本文由 AI（DeepSeek V4 Pro）通过 Hermes Agent 撰写，经由人类 Nokka（นก-กา）质量监控

Framer 3.0 于2026年7月发布，带来了 Canvas 上的 AI Agents、面向团队的 Branching、社区 Marketplace 以及 Design Pages，将 Framer 从 Web Builder 彻底转变为"Design Tool"，并向 External Agents（Claude Code、Cursor、Codex）打开了通过 MCP 连接的大门。

"Today, we're introducing Framer 3.0 with Agents, Branching, Community, and an all-new design"，Framer 在 Updates 页面宣布[1]，"Agents bring AI to the canvas, and can design entire pages, iterate with you, make breakpoints, add effects, create components, write code, connect to the CMS, share site analytics, organize styles, and so much more"

Frameplate，领先的 Framer 评测网站，评价道："Framer 3.0 试图将 AI 直接引入 Canvas，让设计师可以在真实项目、真实布局、真实组件、真实 CMS 内容和真实网站中使用它"[2]

首先，Framer 是什么（给不熟悉的人看的）

如果你从未用过 Framer，这里有一个简单的解释：

Framer 最初是一款"Design Tool"，类似于 Figma，用于设计 UI/UX。但在过去 2-3 年里，它发展成了一款"Visual Website Builder"，你可以通过拖放来设计网页，然后立即发布，无需编写代码。

可以把 Framer 看作"Figma + Webflow 的结合体"，你可以在里面像 Figma 一样漂亮地设计，也可以像 Webflow 一样直接发布，并且内置 CMS、模板 Marketplace 和社区。

Framer 在设计师、代理商、初创公司和创始人中非常受欢迎，因为它让"非开发者"也能创建漂亮的网站，无需依赖开发者。

NxCode 将 Framer 列为 AI Website Builder 中"produces the most beautiful designs for portfolios"[3]，DigiJaws 在 G2 上基于 142 条评价给出了 4.5/5 的评分[4]。

Framer 3.0，新功能

1. AI Agents，Canvas 上的 AI（不仅仅是 Prompt → 网页）

这是最重要的功能——Canvas 上的 AI Agents，不仅仅是"输入 Prompt 就得到网页"，而是一款理解你的项目、理解组件、样式、CMS、布局，并与您协作的 AI。

Frameplate 解释道："The agent can understand your existing site. It can look at your pages, sections, components, text styles, CMS collections, colours and layout patterns. That means it is not just creating something from nothing. It can use the design system and structure you already have"[2]

你已有一个 SaaS landing page，
你想添加一个"Pricing page"，风格与现有页面一致

你："创建 Pricing page，使用与 Home 相同的颜色和 typography，
     包含 3 个 plans：Free、Pro、Enterprise，
     使用与 hero section 相同的组件，
     并连接到 CMS collection 'Plans'"

Framer Agent 会：
1. 查看 Home 页面，学习 design system
2. 创建 Pricing page，使用原有的颜色、typography 和组件
3. 连接到 CMS collection 'Plans'
4. 在 canvas 上展示，你可以继续调整
5. 你 publish，一切就绪

Frameplate 强调："Framer's AI Agent is not only for generating a full website from a prompt. It looks more useful for improving websites that already exist. That is how most people will probably use it"[2]

从 Prompt 或现有 design system 创建整个页面。

与你迭代——你修改 → Agent 继续修改，循环往复。

制作 breakpoints、responsive design，"make every page responsive"。

添加 effects、animations、transitions、scroll effects。

创建组件，全站可复用的 reusable components。

编写代码，需要时写 custom code。

连接 CMS，创建 collections、fields、items。

分享 analytics，查看和分析 site analytics。

管理样式，整理 color styles、text styles。

"You can ask the agent to build something, tweak it yourself, then ask the agent to continue based on your changes. That's a much more useful workflow than generating a random page from scratch and hoping for the best"，Frameplate[2]

2. Branching，实验不伤真实网站

Branching 是一个让你"分叉网站版本"的功能，就像 Git branches，但面向设计师。

Frameplate 解释道："Branching gives you a safe way to test changes without touching your live site. You create a separate version of your project, make changes there, review them, and then merge them back into the main version when you are happy"[2]

你想尝试 redesign Home 页面，
但不确定新设计是否比原来的好

你：
1. 创建 branch "home-redesign"
2. 让 Agent 进行更改，
   "将 hero section 改为 dark mode，
    添加 scroll 动画，
    将 typography 改为 serif"
3. 在 branch 中查看结果，
   与 main branch 对比
4. 如果喜欢 → merge 到 main → publish
5. 如果不喜欢 → delete branch，
   对真实网站毫无影响

Framer Blog 写道："Branching is also our answer to the trust problem. Agents can undo their changes, but they're new and they make a lot of edits at once, so people don't yet trust them the way they trust normal editing. So we added rollback on every message, and then went further"[5]

Branching 对以下场景特别有用：

团队，designer、marketer、content team，实验不伤真实网站。

客户项目，agencies，让 client 在 merge 前先看 branch 审核。

AI agents，让 agent 在 branch 中工作，人类在 merge 前先 review。

3. External Agents（MCP），连接 Claude Code、Cursor、Codex

Framer 3.0 不仅内置 Agent，还支持通过 MCP（Model Context Protocol）连接 External Agents，你可以使用 Claude Code、Cursor、Codex、Gemini CLI 来处理 Framer 项目。

Frameplate 报道："Framer is not only adding its own built-in agent. It is also opening the door to external agents. This means you can connect tools like Claude Code, Cursor, Codex and other AI workflows to Framer"[2]

你的文件夹里满是：
- CSV files（商品数据）
- Markdown files（文章）
- Images（商品图片）

你通过 terminal 使用 Claude Code：
"读取这个文件夹的数据，
 创建 Framer CMS collections，
 创建 fields、items、references，
 为每个 collection 创建 pages，
 并连接 images"

Claude Code 会：
1. 读取 CSV、MD、images
2. 通过 MCP 连接 Framer
3. 创建 CMS collections、fields、items
4. 创建 pages
5. 连接 images
6. 一切就绪，
   原本需要几个小时的工作，
   几分钟完成

Frameplate 补充道："That is the kind of task that would normally take a long time to do manually. This opens up a lot of possibilities"[2]

4. Design Pages，Freeform Canvas

Design Pages 是一个将 Framer 从 Web Builder 彻底转变为"Design Tool"的功能，"Introducing Design Pages, a new way to design and iterate in Framer. This update turns Framer from a web builder into a true design tool"[6]

Freeform canvas，自由设计，无需受 grid 束缚。

Vector editing，编辑 vector graphics。

All design tools，"all the tools you might need"。

这是 Framer 回归本源——它最初就是一款 Design Tool，而现在可以在同一个工具中完成设计和发布。

5. Community，Marketplace + Creators

Framer 3.0 带来了全新的 Community，供 creators 分享和赚钱，"we're launching an all-new Community for creators to share and earn"[1]

Templates，分享和出售 templates。

Components，reusable components。

Plugins，扩展 Framer 功能。

Remixes，fork 并修改他人作品。

对比，Framer 3.0 vs Webflow vs Figma

Framer 3.0 处于一个有趣的位置——它不仅仅是 Web Builder，也不仅仅是 Design Tool，而是"AI-powered website workspace"。

Framer 3.0 的优势很明显：Canvas 上的 AI Agents，不仅仅 Prompt → 网页，而是理解 design system；Branching，实验不伤网站，适合团队；External Agents（MCP），连接 Claude Code、Cursor、Codex；Design Pages，freeform canvas，回归 Design Tool 本源；Community，面向 creators 的 marketplace；Visual + AI，"You can still click, drag, edit, delete and adjust everything yourself"；以及 G2 上 4.5/5，142 条评价。

但也有局限性：AI Agents 还很新，"they're new and they make a lot of edits at once, so people don't yet trust them"；Branching 需要学习，如果你不熟悉 Git，可能会困惑；External Agents 需要设置，MCP configuration，不是即插即用；价格，Framer 不便宜，某些计划比 Webflow 更贵；以及 Learning curve，Framer 有学习曲线，不仅仅是 drag-and-drop。

Framer 3.0 适合：想自己发布网站的设计师，无需依赖开发者；代理商和初创公司，Branching + AI Agents，团队协作；需要漂亮 landing page 的创始人，AI Agents 帮忙创建；使用 Claude Code/Cursor/Codex 的团队，External Agents（MCP）；以及想在 Community marketplace 出售 templates 的 creators。

但不适合：需要完全控制代码的开发者，Framer 是 visual tool；需要复杂后端的项目，Framer 是 frontend-focused；以及需要免费工具的人，Framer 有价格。

总结

Framer 3.0 于2026年7月发布，带来了 AI Agents、Branching、Community、Design Pages 和 External Agents（MCP），将 Framer 从 Web Builder 转变为"AI-powered website workspace"。

AI Agents，Canvas 上的 AI，理解 design system，创建、迭代、修改，不仅仅是 Prompt → 网页。

Branching，Git-style branches，实验不伤网站，每条消息都可 rollback。

External Agents（MCP），连接 Claude Code、Cursor、Codex、Gemini CLI，处理 Framer 项目。

Design Pages，freeform canvas，vector editing，回归 Design Tool 本源。

Community，面向 creators 的 marketplace，templates、components、plugins。

Bottom line：Framer 3.0 是"Figma + Webflow + AI Agents"的合体，Frameplate 总结得好："AI code editors like Cursor are powerful, but they are still built around code. That workflow still feels too technical. Framer 3.0 gives you a more visual way to work with AI. You can ask for help, but you can also stay in control of the design. That feels like the sweet spot"，这就是 Framer 3.0 的优势——它是"设计师的 AI"，不是"开发者的 AI"，而这才是大得多的市场。

[1] Framer. "Framer 3.0". July 2026. https://www.framer.com/updates/framer-3

[2] Frameplate. "Framer 3.0: Everything You Need to Know (AI Agents, Branching and Community)". July 2026. https://frameplate.co/blog/framer-3-everything-you-need-to-know

[3] NxCode. "AI Website Examples 2026: 30+ Stunning Sites Built with AI". 2026. https://www.nxcode.io/resources/news/ai-website-examples-2026

[4] DigiJaws. "Framer Review (4.5/5): Features, Pricing & Verdict (2026)". 2026. https://digijaws.com/reviews/framer/

[5] Framer Blog. "Building Agents for Framer". 2026. https://www.framer.com/blog/building-framer-agents/

[6] Framer. "Design Pages". 2026. https://www.framer.com/updates/design-pages

本文分析来源：Framer、Frameplate、NxCode、DigiJaws 以及其他资源，数据截至2026年8月15日，Nokka。

个人观点

在我看来，Framer 3.0 是"AI 真正进入设计行业的时刻"，不仅仅是"AI 生成图片"或"AI 从 Prompt 生成网站"，而是理解 design system、在 Canvas 上工作、与设计师迭代、并连接到开发者使用的工具。Branching 是团队的 killer feature，因为它解决了"信任"问题——你不必担心 AI 会毁掉你的网站，因为一切都在 branch 中。External Agents（MCP）是对"没有 AI 能搞定一切"的承认——Framer 没有试图成为一切，而是开放让你在你熟悉的 workflow 中使用 Claude Code、Cursor、Codex。这就是"AI-powered design workspace"，不仅仅是"AI Web Builder"，这就是差异所在。

你用过 Framer 3.0 了吗？AI Agents 表现如何？与 Webflow 和 Figma 相比呢？欢迎在评论区分享你的体验。