Framer 3.0 新功能解析：AI Agent、Branching、社群整合、計費調整…所有更新一篇文章搞懂！

Framer 3.0 到底更新了什麼？

這次更新主要分成五塊：

• Agents（AI 代理）：能直接在畫布上設計或調整版面、管理 CMS，甚至幫你處理 SEO、看數據

• External Agents（外部代理）：把你慣用的 Claude、Cursor、Codex 等 AI 工具直接接到 Framer 專案，不用自己架 MCP

• Branching（分支）：獨立的版本改動空間，可以改完確認沒問題再合併回正式網站，避免網站改壞修不回來

• Community（社群）/ Marketplace（市集）：整併變成更強調社群互動的空間，市集的模板上架方式也大改

• 方案計費大改：刪除 Scale 方案、新增 AI Credits（AI 點數）計費機制

• 介面調整：編輯器的模式切換、導覽選單都有調整

接下來就來帶大家一項項了解✨

Framer Agents：AI 直接進到畫布

Agents 是這次更新的主要亮點，跟其他的 AI 工具或是之前的 Workshop 功能（輸入 prompt 生成一個 Component）差在哪呢？我覺得差別在於「協作程度」！當 Framer Agents 調整了一項設計，你可以再隨時手動微調，不需要文字反覆來回；同時他也能處理你設計到一半的東西，把剩餘的瑣碎任務放心交給他！（同時你還可以跑去改其他區塊的設計，充分利用時間）

專案裡的頁面、區塊、元件、文字樣式、CMS 資料庫、配色、排版邏輯甚至 SEO 設定，它都看得懂，然後在已有的基礎上修改，而不是另外生一套跟你網站不搭的東西。所以 Agents 對「已經有完整設計系統」的網站來說會是非常強大的工具。Framer 曾訪談過許多設計團隊，發現網站工作有超過一半是後續的維護與修改，這正好是 Agent 最能幫上忙的地方。

操作上，編輯器右側面板現在分成 Style（樣式）和 Agent 兩個分頁，所有跟 AI 的對話都在 Agent 分頁進行。它會即時在畫布上動手、標出改了哪些圖層；結果不滿意的話，用 Revert 就能一次回復整個指令的改動。對話框上方還有一個模型選單可以切換模型，影響你消耗多少點數。

Agents 能做的事情很多，像是：

• 設計：從頭開始生成網頁、構建排版與區塊、處理響應式斷點、加入特效與互動

• 撰寫：撰寫草稿與改善文案內容、生成 SEO 中介資料

• 整理：管理 CMS 集合（Collections）與項目頁面、梳理色彩與文字樣式

• 分析：審查網站的損壞連結、無障礙空間問題以及不一致的樣式設定

• 在地化：將您的網站翻譯成其他語言

更詳細的實際用法，我整理在另外一篇文章《Framer AI Agent 教學：7 大實戰情境＋AI 點數費用解析》。

External Agents：用你自己的 AI 工具接 Framer

如果你有在用 Claude Code、Cursor、Codex 這類工具，現在你可以把它們直接連到 Framer 專案，讓其他 AI 讀取、修改你的畫布、元件、CMS 跟專案內容。

• 不用自己架 MCP：Framer 提供原生的連接方式，省去手動設定 MCP server 的麻煩。安裝方法是在 AI 工具裡輸入 npx @framer/agent setup 就可以了

• 支援範圍廣：官方列出 Claude Code、Codex、Cursor、Gemini CLI、Windsurf 等，基本上只要能跑終端機指令或呼叫工具的 AI 都能接

• 不吃 Framer 的點數：因為 AI 跑在你自己的工具上、用你自己的 token，這部分的用量不會消耗 Framer 的 AI Credits

• 權限可控、自動走分支：它只能存取你明確授權的專案，碰不到其他專案、帳號設定或帳單，隨時可以收回；而且改動都會自動產生版本分支，方便你檢視後再合併

安裝方法很簡單！ Claude Code 為例：

Step 1. 安裝 Framer 官方 Skills：在 Claude Code 輸入 npx @framer/agent setup，AI 就會自動幫你裝好

Step 2. 取得專案 ID：打開編輯器，在網址列複製專案網址（長得像 framer.com/projects/…，注意不是對外的網域喔！）或是右上角 Invite → Project link → Copy ，貼給 Claude 讓他抓出專案 ID

Step 3. 取得 Framer API 金鑰：Site Settings → General → API key → Add → 複製貼給Claude

剩下就可以交給 Claude 了，他會自動跑授權，跑完就可以下指令編輯網頁了！

⚠️ 不用金鑰、透過瀏覽器同意授權的方式目前還在 beta，我自己實測試會跳 Invalid authorization link 失敗，直接複製 API 金鑰比較穩定。要注意金鑰等於這個專案的操作密碼，記得當密碼保管、別外流。

Branching：給 AI 一個安全的沙盒環境

Branching（分支）功能是可以開一個獨立的版本分支，所有改動都先發生在分支上，確認沒問題再合併回主要版本。算是因應 Framer Agents 而有的功能，如果團隊要放手讓 Agent 做大改動，分支的功能就非常重要，可以讓預計影響範圍很大的指令，不會真正動到現有的正式版本，隨時可以復原回朔。

畫布頂端有一個「main」標籤，點開能看到所有分支跟建立者。如果有使用 Agent，會自動開一個新分支，按「Apply to main」就能把改動合併到主版本。

這裡也說明一下跟之前已有的 Staging（測試環境）功能分清楚，兩個可能很容易搞混：

• Staging 是正式網站的測試版預覽，重點在「發布前先給人看、確認沒問題再上線」

• Branching 是改動的隔離區，重點在「不影響主版本的情況下大膽嘗試，滿意才合併」

兩者使用的情境不一樣。Staging 決定要不要上線，Branching 決定這一版改動要不要採用。

Community / Marketplace 改版

Framer 這次把社群與市集整個合併，全部收進 Community 的分頁底下，左側分成兩區：探索類的 Feed（動態）、Hype（社群現在最受歡迎的內容）、Activity（活動紀錄），以及社群類的 Marketplace（市集）、Gallery（作品集）、Members（成員）、Contests（競賽）。創作者多了寫貼文分享作品、累積聲量的地方，企業則多了一個找人才、找靈感、找現成資源的入口。

這次改動裡，創作者最需要注意的是市集審核制度的調整。過去模板、外掛、元件要先通過官方審核才能上架，現在改成「發布後再 moderation（治理）」。創作者做好就能直接上架，審核團隊的角色從逐件審核，轉成治理精選內容、優化排序演算法。

Framer 的創作者生態規模其實不小：官方公布 2025 年付給創作者的金額達 650 萬美元、年增 200%，而且平台不抽成。蠻多人是依靠販售模板跟分潤維生的，所以這個改動也引起蠻多正反討論的聲音。

Framer 收費方案微調

完整的方案說明可以參考我之前寫過的《Framer 價格費用解析：2026 最新方案比較與挑選建議》，內文已經有全部更新了～在這裡我們只提 3.0 最主要的兩個變動：一個是 Scale 方案退場（付費方案現在只剩 Basic 和 Pro 二選一），以及新增 AI Credits（AI 點數）計費機制。

AI Credits（AI 點數）是指 Agent 每做一件事（生成頁面、重整 CMS、寫元件、翻譯）就消耗點數。免費版是每天 500 點、每月最多 1,000 點（每天重置、用不完不會累積）、Basic 每月約 1,000 點、Pro 每月約 3,000 點。點數是整個工作區共用、會跨專案累加；不夠用可以另外加購（最小 1,000 點起）。

編輯器介面也重新設計了

最後來提一下 3.0 不只是加功能，連編輯器介面都調整了，對使用習慣影響蠻大的，需要適應一下。

最明顯的是左上角。原本分散的功能現在收進一個統一的選單。整個專案分成五種「模式」，可以用快捷鍵直接切換：Canvas（畫布，Alt+1）、CMS（Alt+2）、Localization（多語系，Alt+3）、Analytics（分析，Alt+4）、Settings（設定，Alt+5）。

另一個值得注意的是 Quick Actions（快速操作）以前可以在最下面的面板找到，不過被移除了，可以改成按 Ctrl+K 叫出命令面板。

結語

Framer 3.0 以前的 AI 功能（Wireframer、Workshop）實在不太好用，這次的更新算是很有誠意！總算能讓 AI 真正變成工作流的一部分，官方對 Agent 的定位是「Agent 帶來速度與規模，你帶來品味、判斷與掌控」。AI 接手的是那些重複、繁瑣、跨頁面的雜事，而你的設計系統越完整，它做出來的東西就越準，所以設計過程的思考、邏輯梳理更加重要。

想看 Agent 實際怎麼操作，可以接著看《Framer AI Agent 教學：7 大實戰情境＋AI 點數費用解析》。使用上有什麼問題，也歡迎來 Discord 一起討論！