2026年6月17日 上午 1:18
AI 設計AI TOOLS · DESIGN · 2026
QUICK ANSWER
Framer 3.0 在 2026 年 6 月推出，帶來四個重點：Agents、Branching、Community 與全新介面。最大的改變是 Agents——把 AI 直接放進設計畫布上工作，能設計整頁、改元件、寫 CMS、調 SEO、看數據，而且每個更動都是能編輯、能上線的原生物件，不是改不動的圖。它還能外接 Claude、Cursor 等你慣用的 AI 工具。對設計師來說，這是 AI 第一次真正住進「做網站的地方」。
CONTENTS
過去兩年，每一個號稱能幫你做網站的 AI 工具，都有同一個尷尬的地方：它給你的東西，你其實動不了。生出一張漂亮的 mockup，但你想挪一個區塊、改一行字、換個斷點，就得退回去重新下指令，或者乾脆自己跳進程式碼。設計師被晾在旁邊看 AI 表演，唯獨不能上場。
這幾天 Framer 把 3.0 端了出來，正面去碰這個問題。它沒有再做一個「幫你生圖的聊天框」，而是把 AI 直接放進你平常做設計的那塊畫布上。這個位置的差別，比聽起來大得多。
CHAPTER 01 · WHAT IS IT
先給全貌。這次更新有四根柱子，彼此是扣在一起的，不是各做各的。Agents 是引擎，把 AI 帶進畫布；Branching 是安全網，讓你敢讓 AI 動手；Community 是出海口，讓做出來的東西能被看見、被變現；全新介面則是把整個畫布重畫了一遍，更乾淨也更寬。
FRAMER 3.0 · 四大支柱
AGENTS · AI 進駐畫布
直接在畫布上動手
設計整頁、改元件、寫 CMS、調 SEO、修 RWD、看數據
BRANCHING · 安全實驗
在副本上工作
不碰 live 站，滿意才合併，不滿意整個丟掉
COMMUNITY · 創作者經濟
分享與變現
作品集、Marketplace、競賽、社群，平台不抽成
NEW DESIGN · 全新介面
重畫一遍的畫布
更乾淨、更寬敞，為 AI 與協作重新設計的工作區
CHAPTER 02 · WHY IT MATTERS
關鍵字只有一個：可編輯。市面上多數 AI 設計工具給你的，是靜態圖、斷掉的程式碼、或丟完即棄的原型——看起來很快，但要把它變成能真的上線的網站，往往比自己從頭做還累。Framer 的 Agents 不一樣，它動的就是你的真實專案，改出來的頁面、元件、樣式、CMS 內容、SEO 設定，全都是原生的 Framer 物件，可以被檢視、微調、分支、上線。
這讓整個流程從「對話」變成「協作」。你可以叫 Agent 先生出第一版，然後自己跳進畫布把細節喬到對，再把工作交還給它要速度的地方。AI 負責它最強的部分——生選項、鋪想法、做大範圍更新、管 CMS、處理重複性勞動；你守住真正需要品味與判斷的地方。這個分工，才是設計師願意把 AI 放進日常的前提。
而且這不是一個小眾實驗。Framer 官方公布的數字，能感覺到這套東西背後的體量。
188K
使用企業
14x
一年成長
4M+
已發布網站
364M
每月造訪
Perplexity、Miro、Cal.com、Superhuman、Dribbble、Zapier 都用 Framer 在跑網站。其中 Perplexity 整個官網是零工程師做出來的，Superhuman 有 85% 的網站工作，光靠設計與行銷團隊就完成了，不需要排進工程的隊伍。這就是 Agents 想解的真實情境：不只是從零生新站，而是幫你持續改、維護、擴張你早就上線的那些頁面。
CHAPTER 03 · AGENTS
Agents 的能力範圍蓋了一個網站的完整生命週期。建新站、生版面、改舊頁、寫文案、管 CMS、補 SEO metadata 與圖片 alt、做程式元件、把版面調成 RWD，甚至幫你巡一遍——抓死連結、無障礙問題、對比度不足、樣式不一致。它不是只會「畫」，是會「維護」。
真正讓我覺得這步走對的，是 External Agents。Framer 知道模型的能力一週一個樣，與其自己追，不如把門打開——讓你把慣用的 AI 工具接進來，包括 Claude Code、Codex、Cursor、Gemini CLI，直接在 Framer 專案裡建立、編輯、稽核、管理。你拿到的是最前線的模型能力，作品卻還是留在 Framer 那個能看見、能改、能發布的環境裡。對已經把 Claude Code 接進工作流的設計師，這幾乎是無痛接軌。
多數 AI 設計工具給你的成果，不會寫程式就改不動。Framer Agents 更像一位資深設計師：直接在畫布上，跟你一來一回，直到網站對了為止。
KOEN BOK · FRAMER 共同創辦人暨 CEO
CHAPTER 04 · BRANCHING
Branching 看起來低調，其實是讓 Agents 能落地的關鍵。問題很實際：AI 一次會改很多東西，人類還沒學會像信任自己手動編輯那樣信任它。Framer 的解法是，你和 Agent 永遠在專案的「副本」上工作，碰不到 live 版本。滿意就 merge 合併回去，不滿意就整個丟掉。副本很便宜、切換是即時的，所以你可以放膽亂試，完全不必擔心把線上的站搞壞。
BRANCHING WORKFLOW
STEP 01
開分支動工
Agent 在副本上改，不碰 live
STEP 02
比對審核
看清楚改了什麼，每則可 rollback
STEP 03
合併上線
滿意才 merge，不滿意整個丟
這套設計背後其實是對「品味在哪裡發生」的理解。AI 能很快給你第一版，難的是把它做對。而設計師喬東西的方式，是用手指指、來回比、把元件挪來挪去，在某個瞬間感覺到「對了」。這件事不會發生在一個文字輸入框裡。
設計的畫布，是品味現身的地方，所以那也是 AI 該待的地方。
JORN VAN DIJK · FRAMER 共同創辦人
CHAPTER 05 · COMMUNITY
第三塊是 Community，一個給創作者分享作品、累積聲望、靠作品賺錢的地方——Marketplace、藝廊、獎項、競賽、社群功能都在裡面。數字很有說服力：已經有超過 7,000 位創作者在 Marketplace 上賣模板與元件，光 2025 一年，Framer 就直接付了 650 萬美元給創作者，而且平台不抽成，這還不算他們靠 Framer 接案賺到的。對想把設計變成資產、而不只是接案時數的人，這是一條清楚的路。
不過這塊也是這次爭議最大的地方。新版 Marketplace 拿掉了模板評論機制，社群裡不少人擔心，少了評論這道篩子，市集會被抄襲與低品質模板灌爆，模板的價值會被稀釋。定價模型也重做了一套、主打 canvas-native AI 的新計價方式，有人嫌貴、嫌吃記憶體。一個平台從工具長成生態系，這種拉扯幾乎是必經的。值得關注後續它怎麼補上品質與可發現性的機制。
CHAPTER 06 · WHAT IT MEANS
把鏡頭拉遠一點看，Framer 3.0 真正押的賭注，是「網站工作正在變成一件連續的事」。根據 Framer 自家的 State of Sites 報告，網站工作有 53% 是維護與修改，而 70% 的網站專案因為太慢、太難交付而被擱置。Agents 就是為這個現實設計的——它要解的不是「做一個新網站很酷」，是「你那一堆早該更新卻一直拖著的頁面」。
對照其他工具的路線也有意思。Figma 用 Make 把 AI 接到本地程式碼，走的是設計到程式的橋；Framer 則是讓 AI 與設計師在同一塊畫布上輪流動手，做出來的東西本身就是能上線的網站。沒有對錯，是兩種對「AI 該住在哪裡」的不同想像。
我自己的看法是：這類更新一再把同一件事推到設計師面前——工具會一直變強，但會留下來的人，是那些把判斷力練到位的人。AI 把第一版的成本壓到趨近於零，於是「能不能分辨什麼是好的」這件事，反而變成稀缺。Framer 把 AI 放進畫布、把最後的收斂權留給你，本質上是在賭設計師的眼光還重要。我覺得這個賭，押對了。對「AI 會不會取代設計師」這個老問題，這也是一個夠具體的答案——取代的從來不是設計師，是不願意升級的工作方式。
▼ Framer 官方發表影片，完整看一遍三大更新
TAKEAWAYS
→
Agents 把 AI 放進畫布，改出來的是能編輯、能上線的原生物件，不是改不動的圖。
→
External Agents 能外接 Claude、Cursor、Codex、Gemini，把最前線的模型能力接進 Framer。
→
Branching 讓你在副本上放膽實驗，滿意才合併，這是 AI 工作流能用在正式網站的前提。
→
工具一直變強，留下來的是把判斷力練到位的人——AI 讓「分辨好壞」變成稀缺能力。
FAQ
A：2026 年 6 月正式發表。Agents、External Agents、Branching 與全新 Community 都已經上線可用。
A：差在「可編輯」。多數工具給你靜態 mockup 或斷掉的程式碼，Agents 動的是你真實的 Framer 專案，改出來的頁面、元件、CMS、SEO 全是原生物件，能直接微調與上線。
A：可以。這次推出的 External Agents 支援外接 Claude Code、Codex、Cursor、Gemini CLI，讓你慣用的 AI 工具直接在 Framer 專案裡建立、編輯、稽核、管理。
A：讓你和 Agent 在專案副本上工作，不會動到 live 網站。可以比對版本、逐則 rollback，滿意才合併上線，不滿意整個丟掉。它是 AI 工作流能安全用在正式網站的關鍵。
A：可以。整個設計就是建立在視覺畫布上，Agents 還能幫你補 SEO、改 RWD、巡死連結。實際案例裡，Perplexity 的官網就是零工程師做出來的。
A：主要是新版 Marketplace 拿掉了模板評論機制，社群擔心品質與抄襲問題；新的計價模型也有人覺得偏貴。生態系從工具長大的過程裡，這類拉扯算常見，後續值得觀察。
RESOURCES
官方
想自己試試這次的更新，從這裡進去最完整：Framer 官方網站。
延伸閱讀
把 AI 接進設計工作流，可以接著看 Claude Code 給設計師的完整指南，以及 Figma Make 的本地程式碼 beta。
看完這篇，如果你想從零把 Framer 練成能接案、能上線的實力——下面這門課，是我把整條路整理成的完整課程。
