Framer AI Agent ：7 大實戰情境＋AI 點數費用解析

Agent 是什麼意思？如何運作？

Agent 就是住在 Framer 編輯器裡、能直接幫你動手改網站的 AI 代理，可以用自然語言告訴它要做什麼，它就能在畫布上幫你做出來或者代替你操作。

它跟一般「輸入一句話、生一個網站」的 AI 最大的差別，是它看得到你的整個專案。你網站裡的頁面、區塊、元件、文字樣式、CMS 資料庫、配色、排版邏輯甚至 SEO 設定，它都讀得到，所以它是在你既有的基礎上修改、延伸，而不是憑空生一個跟你網站無關的東西。這也是官方一直強調它「適合改進已經存在的網站」、而不只是「從零生成」的原因（當然他也做得到）。

所以你的設計系統越完整，Agent 就越好用。如果你的網站已經定義好色彩樣式、文字樣式、可重複使用的元件，它改起來會又快又準，因為有明確的依據；如果整站都是東一個顏色、西一個尺寸的硬寫值，它就只能用猜的，結果容易跑掉。所以比較好的順序是先把設計系統整理好，再放手讓 Agent 做。

操作介面在編輯器右側面板，分成 Style（樣式）和 Agent 兩個分頁，所有對話都在 Agent 分頁。它會即時在畫布上動手、標出改了哪些圖層，你隨時能用 Uudo / Revert 一次回復整個指令的改動。

七種實用情境

官方把 Agent 的能力分成幾項：

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

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

• 整理：管理 CMS 集合（Collections）與頁面、匯入並結構化內容、梳理色彩與文字樣式

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

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

我們改用「使用情境」重新整理，每個情境都附上官方示範的指令。

情境一：改既有網站

最常見的用法，像是批次的文字替換、版面重組、新增區塊，這些跨頁面的雜事交給它最省力。

範例指令：

• 把全站所有的「2025」換成「2026」

• 把定價頁的 Pro 方案從 $29/月 改成 $39/月，並新增一個客製報價的企業方案

• 在首頁的功能區和 CTA 區之間，加一個含三則推薦的見證輪播區塊

情境二：從零建站

給它一段描述或一張參考圖，它能生出含導覽列、區塊、字體、配色、圖片與排版的完整頁面，甚至多頁網站，而且會沿用你既有的樣式跟做好的元件。

範例指令：

• 幫一間叫 Ember Roast 的咖啡烘焙坊做一頁式網站，要有大圖 Hero Section、三款咖啡介紹、見證區和聯絡表單

• 幫一個 SaaS 產品做四頁網站：含功能區塊的 Landing page、三種方案的定價頁、串接 CMS 的部落格列表、更新日誌

• 做一個聯絡頁，放三個據點（舊金山、紐約、阿姆斯特丹），每個有城市、地址、Email，旁邊配一張橫幅城市照；Header 比照 @work 那頁，順便把缺的連結補到全站。

圖片也不用自己先準備，Agent 會自動生成適合的圖放上去，不滿意直接也可以再輸入指令更換，例如「把這張舊金山的照片換成更有代表性、霧氣再多一點的」。

🚀 小技巧：可以在對話框貼上一張截圖，請它「做一個結構類似、但換成我品牌色的版本」。它很擅長從一張圖重建出可用又可編輯的 UI，例如一個能運作的聯絡表單。

情境三：樣式與動態效果

不想一個一個元件慢慢調的時候，描述你要的感覺，讓它處理整站的顏色、字體、元件樣式與動態效果（自動轉換深色模式、各區塊加上動畫超省時間！）

範例指令：

• 把整站改成深色模式：深色背景、淺色文字，元件配色一併更新

• 幫每個區塊加上 scroll 觸發的動畫，進到畫面時淡入並向上滑

• 把所有色彩樣式調成偏冷一點、降低對比，不要純黑或純白

情境四：一鍵 RWD

響應式一直是新手最頭痛的部分，Agent 能幫你建立平板、手機斷點，並處理各尺寸下的排版。

範例指令：

• 幫整站做響應式：建立平板和手機斷點，手機版欄位改成垂直堆疊，文字大小調到好讀

• 功能網格在桌機是 3 欄、平板 2 欄、手機 1 欄

• 導覽列在平板和手機收合成漢堡選單

如果你還沒搞懂 Stack、 Fill 跟 Fit Content 這些響應式基礎觀念，可以先看看《認識 Framer Stack：響應式排版的核心工具》、《Framer 新手必修課：搞懂 Fill 與 Fit Content》、《版面又跑掉了？Framer 新手必修課：一次搞懂 Absolute 與 Relative 定位》，理解原理後再用 Agent，會更清楚它在改什麼。

情境五：做 Component 元件

從簡單的互動到進階的程式元件都能做。像 FAQ 手風琴、分頁切換；進階的甚至能寫出 3D 輪播、游標拖尾這類 code component。

範例指令：

• 把導航列做成 Component

• 做一個點擊展開 / 收合的 FAQ 手風琴，並且帶入六個問題

• 做一個可在月繳 / 年繳之間切換的分頁式定價區

• 做一個按鈕 / 表單送出成功時觸發彩帶噴發動畫

• 幫每個服務項目配一個最能代表它的 icon

情境六：管理 CMS 內容

Agent 也能直接建立 Collection（資料庫）、調整 Fields（欄位）、匯入內容，並把 CMS 串到頁面上。

範例指令：

• 建一個部落格 CMS 資料庫，欄位要有：標題、Slug、作者、分類（下拉選單）、發布日期、封面圖、內文、以及一個『是否精選』的開關。

• 把這個 CSV 匯入部落格資料庫，欄位對應標題、Slug、作者、發布日期、內文。

如果你對 Collection、Fields、Items 這些 CMS 名詞還不熟，建議搭配《Framer CMS 三部曲 Part 1》一起看，會更知道怎麼跟 Agent 描述你要的資料結構。

情境七：SEO 與網站檢查

Agent 能幫忙補 meta 資訊、圖片 alt text，也能掃描全站抓出問題。

範例指令：

• 幫每一頁設定 SEO：頁面標題、meta description。

• 根據每張圖的上下文，幫所有缺漏的圖片（包含內文圖片）補上 alt text。

• 掃描全站的外部連結，列出所有回傳 404 的失效連結。

Agent 也能當你的數據分析師

除了上面七種情境，Agent 還能回答你的網站數據問題。

傳統的後台儀表板只能回答「當初設計時就想到的問題」，但 Agent 是直接去查 Framer 追蹤到的真實原始數據，所以你可以用很自然的問法去問它：

• 我現在主要的流量來源有哪些？各佔多少？

• 這個月定價頁的跳出率比上個月高還是低？

• 我所有部落格文章裡，這一季哪一篇流量最高？

• 上週二上線新 landing page 之後，訪客數有沒有明顯上升？

• 這頁的 CTA / 轉換率 / SEO 可以怎麼改

Agent 不只做網站，也能在設計頁上工作

Agent 的能力不限於網站本身，在 Framer 的設計頁（Design Pages）上一樣好用，不管是輔助網站的設計稿，還是純設計、根本不是網站的專案。

幾個實用的用法：

• 在新的設計頁上，幫我整理一份完整的 style guide，把所有文字樣式和色彩樣式都列出來

• 做一張 sticker sheet，把專案裡的元件都排上去

• 在新設計頁上做六種差異很大的 hero 版面探索，只用現有的樣式和色彩，試不同的排版和背景、但顏色維持一樣

Agent 工具箱：讓指令更精準

光會下指令還不夠，Agent 介面裡有幾個工具可以應用，讓它更聽得懂你的話！

Skills（技能）：在對話框打 / 就能叫出聚焦的 AI 動作，例如 /cms、/component、/code，讓它針對特定任務執行

Mentions（提及）：打 @ 可以直接指定要它處理的頁面、CMS 資料庫、元件、樣式或素材。與其說「改那個區塊」，不如直接 @ 點名，準確很多

Contexts（情境）：在畫布上選取圖層，右鍵「Add To Agent」，就能把指定圖層加進對話引用，讓 Agent 清楚知道你指的是哪幾個東西

References（參考）：可以上傳圖片、檔案或網址當參考，例如丟一份 DESIGN.md 規範檔，請它依此調整全站的間距、按鈕和圖示

Models（模型）：可以在 Sonnet、Opus、GPT 之間切換，而且這會直接影響你消耗多少點數。依官方說法，較輕量的模型比較省點數，較強的模型更耗點數但能處理更難的工作。簡單任務用輕量模型、複雜設計再換強的，比較划算

Revert / Branches（回復與分支）：結果不滿意可以用 Revert 一次復原整個指令的改動；大範圍的改動則建議丟到一個獨立分支，檢查確認後再合併回正式網站

AI Credits（點數）大概怎麼算？

3.0 之後所有 AI 功能改用 AI Credits（點數）計費，這也是大家最常問的。先講一個觀念：官方並沒有公布「每個操作固定幾點」的對照表，因為一個指令用多少點數，是看請求的複雜度與 Agent 實際做了多少工。一個快速的文字修改花得很少，生成一整頁才是真正吃點數的地方。

官方給的量化參考是換算成頁數：以基礎模型計，免費版每天 500 點（每月最多 1,000 點），大約是一天兩頁 landing page 的量；Basic 每月 1,000 點約五頁、Pro 每月 3,000 點約十頁。所以日常的小修小改，內建額度其實很夠用，會不夠通常是因為你在大量生成整站、反覆重生，或做多語系翻譯。

網路實測點數消耗

官方沒公布細項，但網路上已經有人實際測過各種操作的點數消耗。以下整理自設計師 Ryan Hayward 公開分享的實測結果：（實測平均值、多數使用 GPT 5.5，會因內容複雜度而異，並非官方數據）

加購點數要多少錢？（以台灣定價為例）

額度不夠時可以加購 Credits Add-On。它是完全線性計價：每 1,000 點固定月繳 NT$474.80、年繳 NT$3,798.40，從最小的 1,000 點一路加到 400,000 點，每點單價都一樣。也就是說，加購沒有「買越多越便宜」的量價優惠，唯一能省的只有改年繳（約等於月繳的 67 折）。

以下是台灣帳號實際看到的完整階梯：

幾個實際使用上要知道的規則：

• 模型會影響消耗：較輕量的模型比較省點數，較強的模型更耗點數但能處理更難的工作

• 點數是工作區共用的：整個 workspace 一起算，會跨專案累加（例如兩個 Basic 專案就是每月 2,000 點），每月 1 號重置、不累積到下個月

• 快接近上限時會提醒：用到當月額度的 80% 時，工作區管理員會收到產品內提示與 Email 通知

• 超用了怎麼辦：用滿 100% 時，正在跑的指令會讓它跑完，但下一個要消耗點數的動作會被擋住，直到下次重置或你加購（加購最小 1,000 點起）。像圖層自動命名這類編輯器小幫手不算點數，照常能用

• External Agents 不吃點數：用 Claude Code 等外部工具做的事跑在你自己的 token 上，不消耗 Framer 點數

幾個讓 Agent 更省力的操作技巧

• 指令可以排隊：Agent 還在跑的時候，你再送一個指令它不會打斷，而是排到後面接著做。所以可以想到什麼就先丟，不用等它做完。

• 一個對話做一件事：每換一個任務就開新對話，Agent 比較不會被前面的脈絡干擾，結果更聚焦。

• 先建好設計系統：可以先用一些指令建立設計系統，後續 Agent 會改得更準。

• 結果不滿意可退點數：Framer 有提供「Mark as Bad」機制，當生成結果明顯不行時可以退回消耗的點數，也可以幫助 Framer 改進模型。

幕後：Framer 怎麼設計這個 Agent

Framer 有發一篇技術文章《Building Agents for Framer》，講他們怎麼把 Agent 做到又快又省。裡面幾個想法蠻有趣的：

• 用很精簡的方式表達修改：Framer 設計了一套很簡短的寫法，連屬性名稱都用縮寫（例如 backgroundColor 縮成 bg），能省則省，講得越精簡，它動作就越快、也越省點數。

• 聰明指定，而不是整包丟給模型：專案太大，不可能整個塞給 Agent，所以它會根據你正在編輯的頁面、你的選取、context 工具、以及之前的編輯，挑出相關的部分給模型。這也是為什麼「指好對象」（用 @、context 工具）會讓結果明顯更準。

• 他們賭 token 會變便宜：官方說現在 token 貴只是「暫時的」，認為有設計判斷力的 AI token 會比大家想的更快變得很便宜、甚至免費，所以現在的點數定價是貼著當前模型成本算的，不是固定的利潤結構。

結語

我實際用下來，覺得 Agent 真的很適合幫忙處理一些懶得處理的雜事，像是補全站圖片的替代文字 alt text，新增一個小功能按鈕等等，可以大幅提升我們架站的效率。也意識到，當工作流是跟 Agent 一起分工時，我們的角色就會往兩端走：前期的制定方向、發想創意，到後面檢查與把關，判斷做出來的東西好不好、該不該留。

如果你有實測出更好的應用方式，或者是想討論其他用法，歡迎來 Discord 群討論！