Builder.io

Builder.io 是什麼

Builder.io 是 Builder.io Inc. 所推出的 AI 可視化開發平台，目前其核心產品包括 Fusion 可視化 IDE 與 Publish 可視化 CMS。

Fusion 讓產品、設計和開發團隊能夠在現有的程式碼庫上，運用 AI 與繪圖工具一起進行開發；而 Publish 則讓內容和行銷團隊能在不修改業務程式碼的情況下，管理、發布並優化數位體驗。

Fusion 與 Publish 的差異

Fusion 空間用於代碼生成專案，Publish 空間用於內容、模型和數據；訂閱、成員和額度以空間為單位管理。

Fusion 主要功能

• 提示詞創建專案：描述所需的應用或功能，AI會在視覺化編輯器中生成初版，且可繼續對選定的元素或檔案進行修改。
• 連接代碼倉庫：可接入 GitHub、GitLab 和 Bitbucket，Enterprise 版還可使用 Azure DevOps 進行企業級的代碼託管。
• 理解現有代碼：平台索引項目結構、組件和設計規則，AI 可在現有技術堆疊內修改真實文件，而不是只輸出孤立的範例。
• 可視化程式碼編輯：在畫布上插入、選擇、調整和預覽介面，修改後再由 AI 轉換為程式碼，適合用於設計與工程的協同作業。
• Figma 轉代碼：透過 Figma 附加元件匯入設計並產生響應式介面，可選擇快速編譯或使用外部大型模型來提升代碼品質。
• 多種上下文：提示可附加圖片、截圖、PDF、文件、表格、程式碼檔案及其他資料，也可引用倉庫內特定檔案。
• 自訂規則：專案可儲存編碼偏好及檔案組織要求，程式碼庫亦可透過規則檔來約束 AI 的實作方式。
• AI 模型選擇：可使用自動選擇，或從 Anthropic、OpenAI、Google 等供應商的可用模型中選擇，模型品質與成本會影響 Agent Credits。
• 自動調試：在產生或執行時遇到錯誤時，可讓代理嘗試修復，但最終仍需進行測試及人工程式碼審查。
• 分支與評審：團隊方案可提供評論、同伴評審、活動記錄以及以密碼保護的預覽功能，用於控制 AI 變更進入主分支。
• MCP 整合：內建 MCP 伺服器，可連接外部服務；Team 支援自訂 MCP，Fusion MCP 亦能讓相容的用戶端啟動及追蹤代理任務。
• 本地與雲端環境：專案可以運行在雲端容器、本機或本地容器中；Enterprise 版可設定自訂的 Docker 映像，並有更嚴格的環境要求。

Publish 主要功能

• 可視化編輯器：內容團隊可在真實網站預覽中拖放區塊、編輯樣式與資料綁定，同時重複使用開發者註冊的自訂組件。
• 內容模型：Page 用於整個頁面，Section 用於可重複使用的頁面區塊，Data 用於結構化數據，便於將佈局與內容分開管理。
• 組件與設計系統：開發者將 React、Vue 等組件接入編輯器，非技術人員只能在允許的屬性範圍內進行組合與配置。
• 模板與符號：將常用的佈局儲存為模板，或重複使用內容單元，以減少在多頁面、多品牌及活動運作中的重複性工作。
• 定時發布：為內容設定開始與結束時間，適合促銷、活動、公告以及有固定上線時間的頁面。
• 定位與個性化：可按路徑、設備或企業自訂屬性選擇內容，不同能力受 Publish 合同和方案限制。
• 本地化：支援行內字段、整條內容及資料模型的多語言策略，可依據 locale 取得對應內容。
• A/B 測試：為 Builder 管理的頁面或區塊建立多個版本並追蹤轉化率，需正確接入測試與事件追蹤。
• 洞察與熱圖：可查看展示、點擊、轉化及頁面互動，用於發現內容問題，但資料採集需遵守隱私與 Cookie 規則。
• API 優先交付：應用仍由客戶託管，發布內容透過全球 CDN、Content API 或 SDK 送入現有網站和應用。
• 電商與外部數據：可連接 Shopify 等商務系統及第三方數據，於組件中顯示商品、庫存或行銷內容。
• CMS MCP：相容的用戶端可連接 Publish 或混合空間，以自然語言讀取及操作 Builder 內容。

輸入、輸出與工作方式

Fusion 使用教學

1. 建立 Fusion 空間時，可選擇從提示詞、Starter Template 或現有的 Git 仓库開始。
2. 連接到 GitHub、GitLab 或 Bitbucket，並僅授權所需的倉庫；設定主分支、安裝指令、開發端口以及環境變數。
3. 讓平台索引項目，補充框架、組件庫、設計令牌、測試命令和禁止事項等自訂規則。
4. 提交範圍清晰的任務，附上 Figma、截圖或相關文件，並直接標明需要修改的代碼位置。
5. 在可視化編輯器中檢查桌面與行動裝置的佈局，選擇特定的元素以持續進行迭代，不要一次要求無邊界的大規模改造。
6. 運行類型檢查、單元測試、端到端測試以及建構，並人工檢查權限、依賴關係、資料請求與錯誤處理。
7. 使用分支、評論和同伴審核確認差異，再依照團隊的代碼合併與部署流程發布。

Publish 接入教學

1. 建立 Publish 空間並定義 Page、Section 或 Data 模型，先明確哪些內容由 CMS 控制、哪些繼續保留在代碼中。
2. 選擇對應框架 SDK，用空間公開 API Key 取得已發布內容；私有模型與寫入操作使用服務端私鑰。
3. 將自有組件註冊給 Visual Editor，限制可編輯屬性、預設值和輸入類型，避免內容人員破壞業務邏輯。
4. 配置預覽地址，讓編輯器載入真實站點並即時顯示草稿變化。
5. 建立頁面或內容條目，檢查各斷點、語言、資料綁定、SEO 欄位及無障礙資訊。
6. 按需設定定時、定位、A/B 版本和轉化事件，再讓相關人員預覽及審批。
7. 發布內容並驗證 Content API、CDN 快取及實際網站；對關鍵內容的變更配置 Webhook 以觸發建構或清除快取。

框架、平台與擴展

Fusion 價格套餐

每個自助套餐包含 1 位付費用戶，增加用戶會產生額外席位費用；頁面上的金額、稅費、幣種及最終額度應以帳戶結算頁面為準。

免費額度頁面目前顯示為每日 15、每月 60，個別頁面曾出現不同數字；每日額度依 UTC 午夜重設，每月額度於每月第一天重設，以空間後台為最終標準。

Publish 價格與流量

Publish 的 Visual Views 統計是由可視化頁面或區塊中的追蹤像素計算而得，Data 模型則不依 Visual Views 來計數，但仍可能計量頻寬。

即使採用靜態生成、服務端渲染、用戶端快取或自託管內容，Publish的合約計費仍可能適用，選型時需向銷售確認流量和頻寬的計算方式。

取消與退款

• 每個空間需獨立訂閱，取消一個空間不會自動取消其他空間。
• 自助訂閱可在空間設定中取消，目前計費期結束前通常仍可使用，之後降至 Free。
• 透過 Shopify 安裝並購買的訂閱服務，需在 Shopify 中進行管理；若卸載該服務，則會取消續費，同時也會移除店鋪中的 Builder 內容與設定。
• 說明文件允許先取消後向支援團隊提交退款申請，並要求提供發票、原因以及公開的 API Key。
• 退款申請需要審核，並非自動批准；服務協議原則上規定預付費用不退款，只有合同明確的因故終止等例外。
• 合約終止後，客戶資料通常會有 30 天的時間可以以電子方式取得，之後則可能被刪除；而美國的 DPA 要求在合約終止後 90 天內刪除個人資料，但法律另有規定者除外。
• 條款、幫助中心與具體訂單的適用範圍不同，購買年付或遷移空間前應確認取消、退款、資料導出與降級限制。

API、SDK 與自動化

GitHub、SDK 與開源邊界

• 官方主倉庫採用 MIT 授權，包含多框架 SDK、範例、Starter Projects 和部分插件。
• SDK 開源讓開發者能夠審查及整合內容渲染代碼，同時也有利於為框架提供支援。
• Mitosis 等相關公開專案具備跨框架編譯能力，具體許可證仍應依每個倉庫分別確認。
• Builder.io的託管平台、視覺編輯器、帳戶系統、企業服務以及專有的AI模型，並未因此而全面開源。
• 將公開的 SDK 用於商業專案時，通常需要同時遵守 MIT 授權條款與 Builder 服務協議，而呼叫雲端服務時則還需受到套裝方案及 API 條款的約束。

隱私、安全與 AI 數據

• 安全附錄聲明，客戶資料傳輸時會使用 TLS 1.2 或更高版本，靜態資料則以 AES-256 進行加密，且密鑰會透過託管式金鑰服務來管理。
• 平台維持 SOC 2 Type 2 審查、最小權限、生產環境的多因素認證、季度訪問複核、漏洞掃描以及年度第三方滲透測試。
• 確認個人資料洩露後，須在 72 小時內通知客戶，而業務持續性目標則為 4 小時內恢復運作，以及 24 小時內恢復到正常狀態。
• AI 可能把提示、正在編輯的文字、內容或相關代碼發送給 OpenAI、Anthropic 等模型服務商，企業可獲得更強的模型與隱私控制。
• 免費方案的客戶數據可能用於訓練；自付費用帳戶應檢查 AI Training 開關，團隊版可選擇退出，企業版則預設不用於訓練。
• 各法律頁面對自助付費和 Team 的訓練表述並非完全一致，處理專有代碼前應核實空間設定與合約，而不是只依賴套餐名稱。
• AI條款稱，客戶在雙方之間保留輸入與輸出的所有權，但輸出不附帶準確性、非侵權或可商用的絕對保證。
• Enterprise Privacy Mode 提供客戶可控制的會話加密功能，以及近乎零資料保留的模式，但在處理過程中，平台與所選用的大型模型仍會暫時接觸到未加密的代碼。
• 客戶必須擁有上傳代碼、設計、素材和數據的權利，並對自己網站或應用程式中最終使用者的隱私告知、同意及合法處理負責。
• Publish 的分析、A/B 測試、熱圖與定向可能使用 Cookie 或本地儲存，部署地區的同意機制需要由客戶正確配置。

優勢

• Fusion 直接圍繞現有倉庫和設計系統工作，生成的結果更容易進入真實研發流程。
• 可視化畫布讓設計、產品和開發圍繞同一份代碼溝通，減少截圖與人工交接。
• Publish 將內容與代碼分離，行銷團隊可快速修改頁面，同時繼續使用開發者維護的品牌組件。
• SDK與API的適用範圍廣，適用於React、Vue、Angular、Svelte、Qwik、React Native等各種技術架構。
• Figma、VS Code、Desktop、Chrome、Git 與 MCP 組成了較完整的設計到開發的工具鏈。
• 公開 SDK 和範例倉庫便於評估實作細節，不必完全依賴黑盒用戶端。

能力邊界與限制

• Fusion並非能一鍵完成生產應用開發的替代團隊，AI改動仍需程式碼審查、測試、安全掃描和效能驗證。
• 大型倉庫索引、複雜的依賴關係、私有基礎設施以及企業級權限，可能需要額外的設定或企業級合約。
• Agent Credits 的消耗隨模型和任務變化，固定席位價之外還可能有額外額度成本。
• Publish 目前主要面向 Enterprise，Visual Views、頻寬、成員和空間的實際報價暫未公開。
• 自訂組件、預覽地址、SSR、緩存與定位需要開發者正確接入，內容團隊無法獨立完成全部技術配置。
• 不同 SDK 的功能並不完全一致，選框架前應檢查目前推薦的代際、SSR、A/B 測試以及自訂組件支援情況。
• 頁面或資料模型的預設公開讀取設定需謹慎檢查，敏感內容應使用私有模型和伺服器金鑰。
• AI訓練控制、第三方模型、保留期和退款規則在不同政策之間存在細微差異，敏感項目應以帳戶設定與簽署的合約為準。

總結

Builder.io 適合那些希望將 AI 生成的內容、可視化編輯功能、真正的程式碼庫以及無頭 CMS 整合到同一個協作體系中的產品、工程與內容團隊。

購買前應先判斷需要 Fusion、Publish 還是混合空間，再核算席位與 Agent Credits，並確認 Publish 價格、AI 訓練開關、資料保留及技術架構支援。