---
title: "Framer AI 怎麼用？Agents、Workshop 到外部代理一次搞懂"
slug: framer-ai-agents-complete-guide
url: https://rar.design/posts/framer-ai-agents-complete-guide
published_at: 2026-06-22
modified_at: 2026-06-26
author: "設計師 Riven"
category: "AI 設計"
tags: ["AI 網站", "設計工具", "AI 工具", "Framer AI", "Framer"]
access: public_access
---

# Framer AI 怎麼用？Agents、Workshop 到外部代理一次搞懂

> 從 Wireframer 到 6 月剛上線的 Framer Agents，設計師該掌握的 Framer AI 全貌與實戰判斷

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-06-22

AI TOOLS · FRAMER · 2026 ▲ Framer 把 AI agent 直接放進畫布，這是 2026 年 Framer AI 最大的轉向。圖／Framer 官方 QUICK ANSWER Framer AI 是 Framer 內建的一整套 AI 功能，從生成頁面結構的 Wireframer、生元件的 Workshop、AI 翻譯，到 2026 年 6 月 Framer 3.0 上線的 Framer Agents。最大的差別在於：Agents 直接在畫布上幹活，改頁面、改 CMS、改 SEO 都是可編輯的原生內容，還能接上 Claude Code 從終端機驅動。它不只是「輸入提示生一個落地頁」，而是把 AI 變成你網站維運流程的一部分。 CONTENTS 01 Framer AI 到底包含哪些東西 02 為什麼這一次跟其他 AI 網站工具不一樣 03 Agents 與 Branching 怎麼運作 04 設計師的三個實戰用法 05 計價、限制，與一個藏在價目表裡的訊號 六月那一週，半個設計圈的時間軸都在洗 Framer。原因是 6 月 16 日 Framer 一口氣端出 3.0，把 AI agent 直接搬進畫布。我這幾年看過太多「輸入一句話、生一個漂亮落地頁」的工具，看完 demo 心跳加速，真的拿去做客戶案就熄火。所以這次我反而想先問一個更不浪漫的問題：Framer AI 到底有哪些東西、哪些值得你真的學、哪些只是 SERP 上的幻覺？ 這篇不講虛的。我會把整個 Framer AI 表面攤開，標出哪些是行銷頁的話術、哪些是真功能，然後告訴你身為設計師該怎麼判斷。先講結論：Framer AI 真正的轉折不在「生成得多好看」，而在「生成完之後你還能不能改」。 CHAPTER 01 · WHAT IS IT Framer AI 到底包含哪些東西 很多人以為「Framer AI」是單一功能，其實它是一整排工具的合稱。把行銷頁、更新日誌、外掛全部加起來，2026 年的 Framer AI 表面大概長這樣： 功能 它實際在做什麼 Framer Agents 畫布上的 AI 代理，能改頁面、元件、樣式、CMS、SEO 與發布流程。3.0 的主角。 External Agents 把 Claude Code、Codex、Cursor、Gemini CLI 接進你的 Framer 專案，從終端機驅動網站。 Workshop 在編輯器裡用對話生成複雜元件，反覆 iterate 直到合用，全程不離開 Framer。 Wireframer 從一句描述生出整頁的結構與排版，把線稿時間從幾天壓到幾分鐘。 AI Translate 一個專案多語系，支援超過 100 種語言，做國際站很省事。 AI Plugins 第三方外掛接 OpenAI／Anthropic／Gemini，做圖片生成、文案改寫、自動 alt text。 順手戳破兩個常見誤會。第一，網路上很多文章說 Framer 有「AI CMS」，那是把 AI Translate 跟外掛裡的內容生成混為一談，Framer 沒有第一方的 AI CMS。第二，「Framer AI 圖片生成」也不是內建功能，圖片生成住在第三方外掛裡，靠它呼叫別人的 API。這兩個都是搜尋結果養出來的幻覺，不是產品事實。知道這點，你找資料時就不會被帶偏。 CHAPTER 02 · WHY IT MATTERS 為什麼這一次跟其他 AI 網站工具不一樣 幾乎所有 AI 網站工具都死在同一個地方：demo 很猛，落地很慘。你打一句提示，它吐一個版面，看起來像那麼回事。然後你想把它變成真正能上線的東西——版面太通用、改不動、不符品牌、跟你既有的工作流完全脫節。生成一頁很容易，要 ship 卻得處理 RWD、內容結構、SEO、無障礙、一致性、協作與後續維運。這段「從 demo 到 production」的鴻溝，才是設計品質真正死掉的地方。 ▲ Framer 把設計、內容、協作、發布收在同一塊畫布上——AI 進來時，改的就是這些真實物件，不是一份要你自己拼回去的程式碼。圖／Framer 官方 Framer 的賭注剛好相反。它的 Agents 不是丟給你一坨 chat 輸出或一段要你自己解讀的程式碼，而是直接在你團隊每天用的同一塊畫布上動手。每一個改動都是原生的 Framer 物件，可以檢視、可以微調、可以分支、可以發布。為什麼這很重要？看 Framer 自己的數據就懂了。 53% 維運與修改 70% 專案被卡住延後 85% Superhuman 網站事務 根據 Framer 的 State of Sites 報告，網站工作有 53% 是維運跟修改，不是從零開新站；有 70% 的網站專案因為太慢或太難 ship 而被延後。Agents 瞄準的就是這塊現實。Framer 也搬出案例：Perplexity 整個官網零工程師就做出來，Superhuman 現在 85% 的網站事務靠設計與行銷團隊就能完成。這些數字真假可以再驗，但它指向的方向很清楚——AI 的價值不在開新站，在於讓你能持續改、持續維護你已經有的站。 「大多數 AI 設計工具給你的東西，不會寫程式就改不動。Framer Agents 比較像一個資深設計師——直接在畫布上，跟你來回，直到網站感覺對了。」 KOEN BOK · FRAMER 共同創辦人 CHAPTER 03 · HOW IT WORKS Agents 與 Branching 怎麼運作 Agent 住在 Framer 編輯器裡。你可以跟它對話、餵它當前專案的上下文、指向特定圖層，請它動工。關鍵是它看得懂你既有的站——頁面、區塊、元件、文字樣式、CMS 集合、配色、排版模式它都讀得到。所以它不是無中生有，而是站在你已經建好的設計系統上接著做。一句話：你請它生第一版、自己跳進畫布調細節、需要速度時再把活交回去。這個來回，就是它跟「一次性生成器」的根本差別。 ▲ Framer 3.0 官方發表影片，完整呈現 Agents、Branching 與新 Community。影片／Framer 官方 但畫布上有 AI 亂動，對正式站來說很危險。Framer 的解法是同步上線的 Branching——Git 那套分支邏輯搬到網站。你可以請 Agent 在一條獨立分支上改，審視差異、比對版本，確定 OK 再 merge 回主線，全程不碰 live 站。對接客戶案、改一半要給人看的人來說，這是讓 AI 真正能進 production 的那塊拼圖。 ▲ Branching 把 Git 的分支、比對、合併搬到網站維運。AI 在分支上改，你確認後才 merge 回主線。圖／Framer 官方 退一步看時間軸，Framer 的 AI 不是一夜長出來的。它是一路堆疊上來的： TIMELINE · FRAMER AI 2025 春 Wireframer 一句話生整頁結構 2025 秋 Workshop 編輯器內生複雜元件 2026 春 MCP 外掛 自帶 LLM 管 CMS、跑 SEO 2026 / 6 Framer Agents 畫布原生代理 + Branching CHAPTER 04 · IN PRACTICE 設計師的三個實戰用法 講完概念，落到桌面。如果你是接案或經營自己品牌站的設計師，這三個用法是我認為現階段最有價值的： 1 在分支上跑 A／B 版面 請 Agent 在分支生兩三個 hero 版本，分別發到不同 URL 接分析工具跑實驗。生成成本夠低，你才捨得測有意義的假設，而不是只敢改一個按鈕顏色。 2 把雜亂內容餵進 CMS 官方 demo 裡，外部 agent 吃進一整包亂七八糟的 CSV、markdown、圖片，自動建成結構化的 CMS——集合、欄位、項目、關聯、圖片、頁面全包。這種苦工以前要手刻一整天。 3 用 Claude Code 從終端機維護客戶站 透過 External Agents，你的 Framer 站能被 Claude Code、Cursor、Codex 驅動：從 Slack 改文案、從終端機觸發 CMS 更新、從 GitHub PR 發布。網站從一個你要進去點的 app，變成一個可被腳本呼叫的端點。 第三點對單兵作戰的設計師特別狠。我自己的所有東西本來就跑在終端機上，如果客戶的官網也能從同一個地方維護，那省下的不是幾分鐘，是整個 context switch 的成本。這是這次更新裡，我最想立刻試的一塊。 這裡要講一件我覺得比 Agents 本身更值得截圖的事。Framer 3.0 同時換了計價：所有 AI 功能改用 AI Credits 計算，而且 agent 面板裡多了一個下拉選單，讓你逐次選模型——選 Claude Sonnet 4.6 省點數，選 Claude Opus 4.8 每次操作貴 80%。 讀懂這個下拉選單，你就讀懂了整個產業的走向。Framer 把「用哪個模型」變成一筆你自己勾選的成本項。這代表生成本身正在商品化——真正的護城河不是模型多強，是那塊畫布、以及它讀得懂你既有設計系統的能力。模型可以換、可以比價，但「在對的地方動手、改完還能編輯」這件事很難複製。對設計師的啟示也一樣：模型會一直變便宜變強，你該累積的是判斷力，不是對某個工具的肌肉記憶。 “ 這是自 80 年代 MacPaint、PageMaker、Photoshop 定義標準以來，創意工具介面最大的一次改變。給它一週，你會覺得以前沒它怎麼設計的。 FRAMER 團隊 · BUILDING FRAMER AGENTS CHAPTER 05 · LIMITS & PRICING 計價、限制，與該有的冷靜 AI Credits 是新的計費單位。免費方案每天給 500 點（大約兩個落地頁，每日重置不累積），Basic 每月 1,000 點，Pro 每月 3,000 點。操作各有定價，大致是： 操作 約略點數 生成完整落地頁 ≈ 300 產生 RWD 版面 ≈ 150 大型編輯 ≈ 100 小型編輯 ≈ 50 幾個務實提醒。Framer 把編輯席位從每月 40 美元降到 20 美元，Content Editor 席位 10 美元，Basic 方案升級含 2 個 CMS 集合與 50GB 流量，原本的 Scale 方案退場，現在二選一在 Basic 跟 Pro 之間。生成結果不滿意時，有個「Mark as Bad」可以退還點數，算是有誠意。價格與限制 Framer 改得很勤，要下單前一定上官方 pricing 頁再對一次。 冷靜的部分：Framer 的 JS runtime 偏重、客戶端渲染對極致效能站不是最佳解、CMS 有 item 上限、原生沒有電商，要賣東西得外掛金流。它依然是設計取向的網站工具，不是萬能解。但對行銷站、作品集、落地頁這些「設計品質就是一切」的場景，Framer AI 現在產出的成果，在同類裡確實最有設計感。 CHAPTER 06 · TAKEAWAYS 所以，設計師現在該怎麼站位 我會這樣總結：Framer AI 走到 Agents 這一步，把問題從「AI 能不能生出漂亮的頁」換成「AI 能不能接手你網站的日常維運」。前者是表演，後者才是生意。當生成變便宜、模型變成可勾選的選項，設計師的價值就更純粹地落在判斷上——什麼版本該留、什麼改動該擋在分支外、什麼地方 AI 該閉嘴讓你親自動手。 工具會一直換。三個月後 Framer 自己都說，現在這版 agent 會顯得又慢又笨。但畫布上那個「人跟 AI 輪流動手、品味由你拍板」的工作模型不會過時。先把那塊肌肉練起來，工具誰勝出都跟你無關。 一分鐘懶人包 → Framer AI 是一整套工具，主角是 6 月上線、住在畫布上的 Framer Agents。 → 差別不在生成多好看，在於改動是原生可編輯內容，配 Branching 能安全進 production。 → External Agents 讓 Claude Code、Cursor、Codex 從終端機驅動你的站。 → 改用 AI Credits 計價、可逐次選 Sonnet 4.6 或 Opus 4.8——這是生成商品化的訊號。 → 該累積的是判斷力，不是對單一工具的肌肉記憶。 COURSE · RAR 設計攻略 Framer 網站設計課：從零開始 這篇談的是 Framer AI 的能力上限。這堂課帶你從零親手做出一個能上線的網站，補回工具背後的設計判斷。 看課程內容 → SUBSCRIPTION · AIWAKEN AI 覺醒設計應用攻略 像 Framer Agents 這種更新每週都在發生。我幫你過濾雜訊，只留對設計師真正有用的。 ✦ AI 工具實測與工作流 ✦ 設計師角度 Prompt 技巧 ✦ 每週 AI × 設計新知 了解訂閱方案 → 延伸資源 想看 Framer 3.0 這場發表的完整拆解，讀我寫的〈Framer 3.0 完整指南〉。還在猶豫該用 Figma 還是 Framer，看〈Figma vs Framer 2026〉。想把 AI 接進整套設計工作流、學怎麼判斷哪段交給 AI，看〈AI 設計工作流的判斷地圖〉。要親手試 Framer，從官方網站免費開始。 FAQ 常見問題 Q：Framer AI 免費可以用嗎？ A：可以。免費方案每天給 500 AI Credits，大約能生兩個落地頁，每日重置但不累積。想常用建議升 Basic（每月 1,000 點）或 Pro（每月 3,000 點）。 Q：Framer Agents 跟一般 AI 生網站的工具差在哪？ A：差在改動是不是原生可編輯。一般工具給你一份要自己拼回去的輸出，Agents 直接在 Framer 畫布上動手，每個改動都是能檢視、微調、分支、發布的原生物件，更接近真正能上線的工作流。 Q：可以用 Claude Code 或 Cursor 操作 Framer 嗎？ A：可以。透過 External Agents，Claude Code、Cursor、Codex、Gemini CLI 都能接進你的 Framer 專案，做批次匯入 CMS、跑 SEO 或無障礙稽核、從外部 API 拉資料等工作。畫布內建 agent 與外部 agent 是互補的。 Q：Branching 是什麼，為什麼重要？ A：Branching 把 Git 的分支邏輯搬到網站。你可以在獨立分支上讓 AI 或隊友改動、比對版本，確定 OK 再 merge 回 live 站。它讓 AI 能安全地進正式專案，不會一改就動到上線版本。 Q：Framer AI 適合取代 Figma 嗎？ A：兩者解決的問題不同。Figma 偏產品介面設計與協作，Framer 偏把設計直接變成可上線的網站。如果你的目標是 ship 行銷站、作品集、落地頁，Framer AI 很有競爭力；要做複雜產品介面，Figma 仍是主場。細節可看我的 Figma vs Framer 比較。 Q：Framer 有哪些限制要先知道？ A：JS runtime 偏重、CMS 有 item 上限、原生沒有電商（要外掛金流）、極致效能站不是它的強項。它是設計取向的網站工具，做行銷站很強，但不是每種專案的萬能解。