Framer AI

Framer AI是什麼？

Framer AI是Framer視覺化網站設計與託管平台中所具備的人工智慧功能。使用者可以透過自然語言來創建網站、頁面和區塊，同時也能讓AI修改現有的佈局、撰寫文案、管理CMS內容、製作互動式程式碼元件，並協助進行本地化處理。

它的特點是，AI會直接在Framer Canvas及專案結構中進行操作，所產生的結果依然是可編輯的頁面、圖層、組件和內容。設計師可以繼續調整排版、間距、顏色、效果以及動畫等要素，而不必只接受一張靜態的圖片作為最終成果。

Framer Agent網站代理

目前，Framer AI以Agent為核心。使用者可描述所需的網站、頁面或更新內容，而Agent則能在專案中執行多個步驟的修改，包括建立結構、填入內容、調整視覺效果，以及操作CMS。

它適合從空白開始，也可用於持續維護已有項目。

代理執行範圍較大，提示應明確目標頁面、保留內容、品牌規則和驗收標準。重要站點最好使用分支或複製專案，審查變化後再發布。

從提示生成網站

使用者可以輸入企業、產品、目標受眾以及風格說明，AI會以此來生成可編輯的網站架構。生成之後，還可以在Canvas中重新排列各個元素、更換文字與圖片，並運用Framer的響應式佈局與組件來進一步完善網站。

首次生成主要解決視覺起點，域名、真實內容、表單去向、隱私說明和分析配置仍需人工處理。

頁面與區塊生成

Framer AI不僅能夠建立整個網站，還可以根據需求添加著陸頁、定價資訊、功能說明、案例介紹、團隊資料、常見問題解答以及聯絡資訊等頁面；或者只生成某個特定的頁面區塊。新加入的元素都會盡量與整個專案的設計風格相契合。

生成後要檢查圖層命名、組件重用、斷點和SEO層級。多個相似區塊最好合併成共享組件，避免維護重複內容。

Canvas可視化編輯

Framer提供類似設計工具的自由畫布，同時也具備用於網頁的Stack、Grid、斷點以及組件系統。由AI生成的佈局可以直接拖拽、重新排列，並進行細微調整，非常適合由設計師主導的品牌網站。

自由編輯可能造成固定尺寸和絕對定位問題。發布前應逐個檢查桌面、平板、手機和超寬屏幕，並驗證文字增長後的佈局。

響應式佈局與斷點

使用者可以為不同的寬度設定斷點，進而控制導航、列數、字體以及顯示規則。AI可以協助建立初始的響應式結構，但在真實裝置上的觸控功能、橫屏模式以及不同瀏覽器之間的差異仍需進行測試。

不要只在預覽中拖動窗口判斷。菜單、表單、Sticky元素、影片以及複雜的動畫，都應在手機瀏覽器中實際測試。

文案與視覺生成

Framer Agent可以創建和改寫標題、正文、CTA以及頁面視覺設計，讓設計與內容能在同一流程中不斷迭代。它很適合用來快速打造產品官網和活動頁面的初稿。

AI可能編造功能、數據、客戶評價或合規承諾。涉及價格、性能、客戶名稱和法律聲明的文案必須核實。

CMS創建與內容填充

代理人可以建立CMS集合、欄位以及內容，這些可以用於部落格、案例、職位資訊、成員資料、作品集以及目錄等。當CMS與Canvas連接後，設計好的模板就可以自動應用到每一則內容中。

應先設計穩定的數據模型和Slug規則，再批量生成內容。字段頻繁變動會影響模板、篩選和外部數據集成。

AI代碼組件

使用者可以描述互動或即時功能，讓 Framer AI 產生 React 代碼組件，例如計算機、輪播、視覺化元件、動態按鈕以及特殊輸入元件。這些代碼組件能夠接收屬性，並被整合到一般的頁面中。

生成代碼需要檢查依賴、效能、無障礙性、輸入驗證以及外部請求。第三方金鑰不能放入瀏覽器組件，敏感邏輯需要獨立的伺服器。

Workshop AI

Workshop提供針對程式碼組件的AI對話與編輯體驗，可根據需求生成或迭代組件。Workshop聊天會消耗AI credits，而複雜的組件則需要更多的額度。

Workshop適合補充Framer內建功能，但不應將未經測試的生成代碼直接放到高流量生產站點。

AI翻譯與本地化

Framer Localization可讓人建立多個語言版本，並運用AI來翻譯Canvas和CMS中的內容。Auto Translate則能在原文更新後自動同步翻譯，也可一次性翻譯所有內容，或僅處理指定的圖層和頁面。

本地化附加功能負責語言版本的管理，AI翻譯還會消耗AI credits。品牌詞、法律文本、價格、單位以及SEO元數據仍需由母語人員審核。

AI Style品牌語氣

AI Style允許為某個語言提供翻譯提示，指定專業、簡潔、活潑或技術化等語氣，使多語言內容更符合品牌。官方目前根據翻譯設定使用不同的OpenAI模型，底層模型可能隨產品更新而改變。

語氣指令無法解決事實與術語的問題。團隊應配合術語表及禁止翻譯清單來使用。

外部AI Agents

Framer支援外部代理預覽功能，讓Codex、Claude Code等工具在獲得授權後能連接到專案並執行設計或內容相關的任務。目前，Basic和Pro版本在試用期間可免費進行連接，但未來的規則可能會有所變動。

外部代理能擴大自動化範圍，也增加誤改和權限風險。應限定項目、分支與發布權限，並保留操作記錄。

協作與角色

Framer讓Workspace Owner、Editors、Content Editors和Viewers能夠一起協作。Viewer可以免費查看內容並留下評論，而Editor則負責設計、編輯內容並發布它們。Content Editor的主要任務則是更新CMS、處理本地化相關的問題，以及更新頁面內容。

角色應按最小權限分配。內容人員不需要完整的設計或發布權限，外部客戶也可先以評論方式審稿。

分支、預覽與Staging

Pro提供了Branching with Previews以及Staging Environment的功能，這些功能讓人能在不影響正式網站的情況下，測試各種變更、分享預覽版本。當使用AI代理進行大規模修改時，這些功能就顯得特別重要了。

預覽連結可能包含未發布的資訊，分享時仍需注意訪問範圍。合併前應檢查頁面、CMS、組件和SEO的變化。

SEO與AEO

Framer內建SEO設定，可管理標題、描述、語義結構、網站地圖、重導向以及效能。AI可協助生成內容，但頁面仍需圍繞真實的搜尋意圖與獨立價值來進行優化。

大量相似的 AI 頁面可能產生低品質或重複內容。應控制索引範圍，補充原創資料、結構化資訊及內部連結。

動畫與互動

Framer擅長處理轉場、滾動、懸停效果以及組件的各種變體，因此很適用於需要強烈視覺效果的網站、作品集以及產品發布頁面。在AI生成了初步的視覺效果之後，設計師還可以在Canvas中進一步調整互動細節。

動畫過多會影響載入速度、可訪問性以及低效能裝置的運作。應減少動態效果的數量，並避免因互動元素而妨礙閱讀與轉化流程。

託管、性能與域名

付費的Site plan服務支援連接自訂網域名稱，年度訂閱的Basic和Pro方案目前都包含一個免費的.com網域名。Framer提供全球託管、HTTPS以及發布流程等服務，而Pro方案則提供更多樣化的交付選項，並附有進階的託管附加服務。

域名續費、頻寬擴容以及高級託管服務可能需要額外費用。在正式遷移時，還需要設定DNS、重導向及分析代碼。

價格與版本對比

Free免費版

免費方案為0美元，可使用Framer域名發布，包含1GB頻寬與設計頁面，並提供每月500 AI credits用於體驗Agent等功能。

免費版適合學習和原型設計，但無法連接自己的正式網域名稱，站點規模及商業發布能力也有限。

基本價格

Basic的年度付費為10美元/月，包含免費的自定義網域名、2個CMS Collections、1000個CMS項目、30個設計頁面、50GB的月度頻寬、內建SEO功能，以及每月1000個AI點數。

Basic適合用於作品集和小型行銷網站。若需本地化，則需購買額外的語言版本，而額外的編輯人員和內容編輯也需另行付費。

Pro價格

Pro的按年付費價格為30美元/月，內含10個CMS Collections、2500個CMS項目、150個設計頁面、100GB的月度頻寬、重定向功能、Staging環境、分支預覽功能，以及每月3000個AI點數。

Pro可按量加購頁面、CMS Collections、CMS items和頻寬，適合內容更複雜且需要團隊發布流程的網站。

Enterprise價格

Enterprise可依需求報價，可配置額度、無限編輯者、企業安全、可用性保證、SCIM和SSO，並提供AI credits批量折扣等訂製條件。

企業採購應確認資料處理、審計、支援回應、域名、區域及外部代理權限。

編輯席位費用

Basic和Pro版本的額外編輯器費用為每月20美元，內容編輯器則為每月10美元，而查看器則免費使用。自助方案最多可支援10位具有編輯權限的使用者，至於Enterprise版本則可根據需求進行定制，且沒有使用人數限制。

Site plan的價格並非完整團隊價格。多人協作時應將站點費、編輯席位及附加產品合併計算。

本地化價格

Basic和Pro最多可添加20個翻譯Locale，每個Locale的費用為20美元。語言版本管理與AI翻譯額度是兩種不同的費用，而翻譯本身的處理則需要使用Workspace AI credits。

多語言站點費用會隨語言數量增長，應先確認需要獨立發布的市場，而不是為所有語言一次性購買。

AI credits如何工作？

Framer Agent聊天、Workshop聊天和AI翻譯會消耗credits；圖層自動命名、Tracking ID建議等輕量編輯助手不消耗。

一次請求使用的數量取決於複雜度與工作量。

Credits會依據Workspace來共享，每個專案的付費Site plan額度可以累加。例如，兩個Basic專案就會共同貢獻每月2000點。

額度在每個自然月1日重設，與訂閱續費日無關。

額度用盡與加購

當達到80%時，工作區管理員會收到提醒；一旦達到100%，則需要使用credits的功能將暫停，不過已經開始處理的請求仍可完成。

用戶可購買月度AI Credits附加包，啟用附加包後還能購買一次性Top-up。

取消月度附加包會立即移除相應額度，一次性Top-up在購買當月月底到期且不結轉。具體包量和價格以結算頁為準。

A/B測試與轉換率

Framer Convert是為A/B測試和漏斗優化所設計的附加產品，適用於符合條件的網站，例如Pro版網站。它不應被視為Pro版基本服務中已包含的無限功能。

實驗需要預先定義轉化事件和樣本量。AI可以生成變體，但結論仍需依據數據和統計顯著性。

模板、組件與插件生態

Framer擁有模板、組件和插件市場，可讓人快速引入導航、CMS展示、圖形以及工作流程相關的工具。開發者也可以自行創建插件和程式碼組件，以擴展編輯器的功能。

第三方資源的價格、許可、維護及資料存取權由作者決定。安裝前應查看權限與更新記錄。

GitHub與開源狀態

Framer網站建構器、AI Agent、編輯器以及託管平台並非開源產品。Framer及相關團隊在GitHub上公開了部分工具和開源專案；

著名的動畫庫Framer Motion現已發展為Motion，並採用MIT許可證，但它不等同於Framer建站平台的原始碼。

目錄中應將Framer AI標記為閉源SaaS。不能因為Motion或個別輔助倉庫是開源的，就主張可以將完整的Framer進行私有化部署。

Framer AI使用教學

完成一次基礎任務

1. 明確要在Framer AI中完成的代碼任務、倉庫範圍和驗收標準；
2. 連接或導入測試專案，並先備份當前分支；
3. 先使用Framer Agent網站代理生成計劃，再確認將修改的文件；
4. 使用從提示生成網站執行小範圍改動；
5. 運行測試、靜態檢查和建構，不直接接受未驗證的代碼；
6. 人工檢查權限、金鑰、依賴與異常處理後再合併；

建立可重複使用的專業工作流

1. 選取一個低風險真實專案作為模板；
2. 固定Framer Agent網站代理、從提示生成網站和頁面與區塊生成的使用順序；
3. 記錄環境、模型、提示和失敗條件；
4. 為寫入、部署和刪除動作設定人工審批；
5. 比較速度、成本、測試通過率及返工量；
6. 驗證穩定後再擴展到團隊或生產環境；

適合哪些用戶？

• 製作品牌官網、產品頁和活動頁的設計師；
• 需要快速發布作品集和個人網站的創作者；
• 運營博客、案例和目錄的CMS團隊；
• 需要多語言、分支和內容協作的市場團隊；
• 希望透過React程式碼組件擴展互動的開發者；
• 使用外部AI代理維護網站的专业團隊。

產品優勢

• AI可直接生成可編輯的頁面、區塊、CMS及組件；
• 自由畫布與響應式網頁結構結合；
• 視覺、內容、代碼、託管和發布流程一體化；
• Agent可修改現有項目而不只創建一次性模板；
• 支援AI翻譯、分支預覽和團隊角色；
• 免費版即可體驗每月500 AI credits。

限制與注意事項

• Framer更適合用於內容與展示型網站，而非通用的原生App建構工具；
• 複雜的資料庫、帳號系統和伺服器端業務通常需要外部服務或程式碼整合；
• 總成本可能包括Siteplan、編輯席位、本地化、轉換、高級託管和AIcredits；
• AI生成的頁面、文案和代碼都需要人工審核；

常見問題

Framer AI免費嗎？

有免費版，每月含500 AI credits並可用Framer域名發布；自訂域名和更高站點額度需要Basic或Pro。

Framer AI能生成完整網站嗎？

可以從提示創建頁面、區塊、文案和視覺，並繼續在Canvas編輯；域名、真實內容、表單、合規和測試仍需人工完成。

Framer多少錢？

年付版中，Basic版為10美元/月，Pro版則為30美元/月，Enterprise版則需另行詢價；此外，Editor版為20美元/月，Content Editor版則為10美元/月。

Framer AI積分會結轉嗎？

不會。Workspace的額度每個自然月的1日會重設，Top-up也在購買當月的月底到期。

Framer支援AI翻譯嗎？

支援Canvas和CMS翻譯、Auto Translate與AI Style，但需要Localization語言附加項，並消耗AI credits。

Framer AI是開源的嗎？

核心平台並非開源的。雖然Motion等相關工具是開源專案，但這並不意味著Framer編輯器、Agent或託管服務可以自行部署。