Builder.io

Builder.io 是什麼？

Builder.io 是一個讓團隊與 AI 代理協作打造軟體的平台：工程師、設計師、產品經理和行銷人員在同一份正式環境程式碼上工作，而不是在不同工具之間來回傳遞檔案。

它以兩款可單獨使用、也可搭配使用的產品販售：Code 是在既有程式碼儲存庫內運作的視覺化 IDE，Content 是用於頁面、行銷活動和結構化內容的視覺化無頭 CMS。Builder.io 也把這兩款產品稱為 Fusion 和 Publish：前者是其面向產品、設計和工程團隊的 AI 開發平台，後者是其面向內容團隊的視覺化無頭 CMS。

公司由 Steve Sewell 和 Brent Locks 共同創辦，兩人曾在時尚零售商 ShopStyle 一起開發網頁應用程式。2021 年一篇關於該公司的報導，將其描述為一套拖放式視覺化編輯器加無頭內容管理系統，讓行銷人員、產品經理和設計師用既有元件建立內容、執行 A/B 測試並衡量轉換。

選擇方案前最該知道的是：AI 工作、託管以及由 Builder 管理的資料庫，全都在同一個共用的代理點數池中計量，而席位則按使用者計價。

核心功能

Code：建立在你程式碼儲存庫上的視覺化 IDE

• 理解程式碼的生成：Builder Code 以已連結的儲存庫及其元件、模式和專案規則為脈絡，建立應用程式、功能、原型和 UI。
• 視覺化程式碼編輯：版面配置、間距、樣式和文案都能在視覺化畫布上編輯，每次修改都會同步更新底層程式碼。
• Figma 轉程式碼：匯入 Figma 設計稿，並轉換成以團隊自有元件和設計系統建構的響應式 UI。
• 與程式設計代理交接：可以把 Cursor、Claude Code 或 Codex 中的分支推送到 Builder，讓設計師和產品經理潤飾，等準備好進行工程審查時再拉回。
• 平行雲端代理：據 Builder 表示，其每個平行代理都在獨立的雲端容器中執行，並配有完整的開發環境和瀏覽器預覽。
• MCP 整合：內建 MCP 伺服器把外部服務帶進程式碼生成，自訂 MCP 伺服器則可讓代理存取特定應用程式的資料庫或服務。

交付流程刻意維持傳統做法。核准的修改會成為拉取請求，沿著團隊既有的流水線推進；對於位在防火牆後方的程式碼庫，Builder 透過私人連線連接內部 Git、登錄庫和 API。因此，Code 比較像是疊加在既有儲存庫之上的協作層，而非獨立的應用程式產生器。

Content：視覺化無頭 CMS

• 代理式內容工作流程：透過提示詞就能建立頁面、更新內容、產生變體並完成常見的發布任務，不必向開發人員開工單。
• 結構化內容模型：可重複使用的內容透過模型、欄位、參照和 API 管理，一個項目就能支撐頁面、應用程式、店面及其他管道。
• 實驗與個人化：團隊可以在 CMS 中執行測試、建立變體、鎖定受眾並提供個人化體驗。
• 在地化：在同一個工作流程中管理各市場的在地化內容，同時讓結構、審核和品牌一致性保持完整。
• 發布管控：角色、權限、審核、預覽、環境和稽核軌跡共同規範誰可以發布什麼。
• 網頁版面匯入：Builder Chrome 擴充功能會從線上頁面複製版面配置，並在複製時調整瀏覽器大小，以便在多種螢幕尺寸下擷取版面。

Code 與 Content 如何串接

兩款產品雙向共用元件。在 Code 中建立的元件，可作為 Content 裡設計系統的一部分供整個團隊使用；在 Content 中建立的內容，也可拉進在 Code 中打造的應用程式和 UI。

AI 模型與點數

點數依輸入 token、輸出 token 以及所選模型的每 token 費率消耗。模型下拉選單以字母等級顯示每個模型的品質，並以基礎點數值的倍數顯示其成本，而基礎點數值以 Claude Haiku 4.5 為基準；成本為 0.1x 的模型，用同樣的點數大約可以送出十倍的提示詞。管理員可以限制哪些模型可用，並選擇「Auto」設定背後的預設模型。

使用指南

設定 Code 專案

1. 連結 GitHub、Azure、GitLab 或 Bitbucket 帳戶，授權存取全部或選定的儲存庫，再選擇要作為專案開啟的儲存庫。
2. 連結設計系統：在大多數方案中，它會以額外儲存庫的形式加入「專案設定」；企業方案則可以透過元件索引自動完成這一步。
3. 在「Generate」分頁中向代理下提示，並加入 Figma 設計稿、螢幕截圖、PDF 或 MCP 伺服器等脈絡。
4. 建立含有 .mdc 規則檔的 .builder/rules/ 資料夾來固定團隊慣例，再加上一份描述專案目的與架構的 AGENTS.md 檔案。
5. 以拉取請求的形式送出成果；拉取請求開啟後，任何團隊成員都可以在其中標註 @builder-bot，要求進一步修改程式碼。

Builder 的文件指出，調整這些規則可能需要開發人員協助。

使用情境與範例

• 原型設計：提示詞、想法和設計稿都能變成可運作的原型，團隊可在投入完整開發前審閱、測試，並與利害關係人一起驗證。
• 應用程式與功能開發：打造新應用程式、產品功能和內部工具時，團隊與代理共用從構想走到上線產品所需的脈絡。
• 行銷網站：以視覺化方式建立和更新到達網頁、活動頁面和網站內容，並內建品牌系統與審核工作流程。
• 電商內容：店面頁面以在電商平台中選定的商品和商品系列建構，因此標題、圖片和價格會與來源商品目錄保持連動。
• 在 Slack 或 Jira 中提出的需求：在團隊方案及以上方案中，在 Slack 標記 @Builder.io 或指派 Jira 工單，代理就能讀取脈絡並開始建構。

Builder 官網上的客戶案例是廠商挑選的推薦見證，而非獨立量測結果。在其中一則案例中，Zapier 的一位網站最佳化經理表示，團隊上線了 250 多個新頁面，平均每月吸引約 100 萬名訪客，而且現在能夠進行網站實驗。

適用人群

Builder.io 圍繞多個角色在同一份程式碼上協作而設計：

• 擁有既有程式碼庫的工程團隊：工程師可以在 Builder 或自己的 AI 工具中寫程式，再推送分支，讓設計師、產品經理和 QA 在真實應用程式中修飾像素、編輯文案並執行測試。
• 行銷與內容團隊：Builder Content 被定位為代理式 CMS，面向需要建立並最佳化符合品牌調性的頁面、行銷活動和個人化內容的內容團隊。
• 交付正式環境軟體的產品組織：Builder 表示自己為打造正式環境軟體的產品團隊提供協作與管控能力。
• 評估這個平台的個人：免費方案被描述為適合想探索這個平台的個人。

對於需要嚴格資料隱私控管、卻不想簽訂企業方案合約的團隊，它比較不適合，因為隱私模式是為需要嚴格資料隱私控管的企業客戶設計的。

支援平台

• 瀏覽器與桌面版：Builder 可以在瀏覽器中使用，也提供 Builder Desktop，這是一款適用於 macOS 和 Windows 的原生應用程式。
• 執行環境：Builder Desktop 提供三種執行模式，分別是雲端容器、本機和本機容器。
• 程式碼編輯器：VS Code 擴充功能可從 Visual Studio Code，以及 Cursor、Windsurf 等以 VS Code 為基礎的編輯器中啟動 Builder 的視覺化編輯器。
• Figma 匯入：匯入設計的首選方式是把 Figma URL 貼到提示詞中。Builder Figma 外掛程式仍可使用，但需要 Figma 席位以及對所匯出檔案的編輯權限。
• 框架：Code 可搭配 React、Next.js、Vue、Svelte 和 Angular 執行。Content SDK 可在以這些相同框架打造的網站、應用程式和店面中呈現 CMS 內容。
• Git 服務供應商：入門指南列出 GitHub、Azure、GitLab 和 Bitbucket 帳戶，而價格頁則把 Bitbucket Enterprise、GitLab Enterprise 和 Azure DevOps 連線列在企業方案之下。
• 電商平台：Content 可連接 Shopify、commercetools、BigCommerce、Salesforce Commerce 和 Magento，以及搜尋、評論、推薦和在地化等電商工具。
• Shopify 計費：從 Shopify App Store 安裝 Builder 時，訂閱透過 Shopify 管理，而非直接透過 Builder。
• 隱私模式入口：隱私模式設定只在桌面應用程式中提供，瀏覽器版本沒有。

價格套餐

Builder.io 價格方面，Code 按使用者計費，每個付費席位都附帶代理點數。下表反映的是 2026 年 10 月 6 日擷取時的 Code 自助方案。

每個 Pro 方案或團隊方案席位每月包含 500 個代理點數，額度每月在訂閱開始的日期重置。可按 500 個為單位加購點數，每份每月 $25。Pro 方案、團隊方案和企業方案中未用完的點數可結轉，上限為方案的每月容量。

在查核過的價格頁面上，沒有出現 Content（視覺化 CMS）的定價；Content 空間訂閱除了席位和點數之外，還會設定每月的瀏覽量和頻寬額度。Builder 指出，方案功能、價格和限制可能會變動。

Builder.io 替代方案

Builder.io 在 Code 一側與 AI 應用程式建構工具重疊，在 Content 一側與無頭 CMS 平台重疊，因此該拿什麼比較，取決於評估的是哪款產品。Builder 自己的比較頁面是廠商撰寫的定位說明，而不是獨立評測。

• Bolt.new：Builder 的比較把選擇框定為：用於快速原型的一體化瀏覽器執行環境，或是在你自己的儲存庫中進行協作式、正式環境等級的程式碼掌控。
• Lovable：Builder 的比較將 Lovable 描述為以速度為導向，適合想盡快讓 MVP 上線的獨立創辦人或小型團隊。
• Vercel 的 v0：v0 表示它能用 AI 在幾分鐘內產生可運作的應用程式，並在幾秒內發布為線上網站。
• Storyblok：在 Content 一側，Storyblok 是一款無頭 CMS，其平台以所有團隊都能使用的視覺化編輯器，以及 API 優先的無頭交付為核心。

注意事項

用量與方案限制

• 免費方案的重置時間各頁面說法不一：價格頁 FAQ 表示免費方案點數為每天 15 個、每月最多 60 個，每日點數在 UTC 午夜重置。點數文件則表示，免費每日上限在 PST 午夜 12 點重置。
• 免費方案無法選擇模型：免費使用者一律使用「Auto」模型設定。
• 託管會消耗點數：使用 Builder 託管發布，或加入由 Builder 管理的資料庫，會與 AI 使用共用同一個點數池。由於用量是每小時扣除，即使團隊中沒有人在 Builder 裡工作，餘額也可能減少。
• 免費託管上限：免費託管限制為每個空間一個已發布網站、每月 15 次部署；達到上限後，線上網站會繼續提供服務，但新的部署會被封鎖，直到下個月或升級方案為止。
• 降級：降級到免費方案的使用者，將無法再使用其結轉的點數。
• Content 像素：Content 訂閱要求在客戶的數位資產上放置一個像素，用來計算視覺化瀏覽量並決定應付費用。

AI 輸出與支援

Builder 不對 AI 輸出的準確性、完整性或可靠性提供任何保證，也不對其中的錯誤負責。輸出可能並非獨一無二，AI 可能會為其他客戶產生相同或相似的輸出。AI 輸出的解讀和提示詞最佳化不在技術支援範圍內，也不能作為點數退款的正當理由。

資料、隱私與安全

• 各頁面關於 AI 訓練的說法不一：首頁的企業區塊表示，資料會保持私密並與模型訓練分開。AI 使用文件表示，Builder 可能在免費方案上使用客戶資料來訓練和改進 AI。在自助付費方案上，只有開啟 AI 內容訓練時，客戶資料才可能被用於訓練。Builder 表示，它不會將企業方案帳戶的客戶資料用於 AI 訓練。價格比較表將 AI 訓練列為：免費方案和 Pro 方案為開啟，團隊方案可選擇退出，企業方案為關閉。同一份文件表示，Builder 使用的第三方 LLM 不會用客戶資料訓練。
• 禁止提交的資料：SaaS 條款禁止提交受 HIPAA 規範的健康資訊、18 歲以下兒童的個人資料、完整的支付卡號、政府身分證件號碼和生物辨識資料，除非 Builder 書面同意。
• 追蹤：Builder 的內容追蹤預設為開啟，會自動記錄內容項目的曝光次數和點擊次數。
• 安全承諾：Builder 維持 SOC 2 Type 2 審查，並可應客戶要求、在簽署 NDA 的前提下提供最新報告。它承諾在得知經確認的個人資料外洩後 72 小時內通知客戶。Builder 也聲明，其遵守 GDPR 和美國現行的資料保護法律。
• 隱私模式的範圍：隱私模式並非完全端對端加密；它透過由客戶端控制的加密和選擇性資料遮蔽來降低曝險。

FAQ

Q1. Builder.io 的 AI 產生的程式碼和內容歸誰所有？

根據 Builder 的 AI 條款，就 Builder 與客戶之間而言，客戶對其提供的輸入和 AI 產生的輸出都保有唯一所有權。Builder 可以使用這些輸出來提供服務。

Q2. Builder.io 使用哪些 AI 模型？

Builder 提供來自 Anthropic（Claude）、OpenAI（GPT）、Google（Gemini）及其他供應商的模型。「Auto」設定會為每項任務選擇模型，也是自助方案的預設設定。

Q3. Builder.io 訂閱取消或退款後會怎樣？

取消的訂閱會維持有效，直到目前計費週期結束，之後帳戶轉為免費方案。退款方面，支援團隊會逐一審查申請，並在確認方案變更後視需要辦理退款。相較之下，SaaS 服務協議規定，除該協議明確規定的情況外，所有費用一律不予退還。