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 等组件接入编辑器，非技术成员只能在允许的属性范围内组合和配置。
• 模板与 Symbols：把常用布局保存为模板或复用内容单元，减少多页面、多品牌和活动运营中的重复工作。
• 定时发布：为内容设置开始与结束时间，适合促销、活动、公告和有固定上线窗口的页面。
• 定位与个性化：可按路径、设备或企业自定义属性选择内容，不同能力受 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 的托管平台、Visual Editor、账户系统、企业服务和专有 AI 模型并未因此整体开源。
• 把公开 SDK 用于商业项目通常需同时遵守 MIT 许可证与 Builder 服务协议，调用云服务还受套餐和 API 条款约束。

隐私、安全与 AI 数据

• 安全附录声明客户数据传输使用 TLS 1.2 或更高版本，静态数据使用 AES-256 加密，并通过托管密钥服务控制密钥。
• 平台维持 SOC 2 Type 2 审查、最小权限、生产多因素认证、季度访问复核、漏洞扫描和年度第三方渗透测试。
• 确认的个人数据泄露在知悉后 72 小时内通知客户，业务连续性目标为 4 小时恢复时间和 24 小时恢复点。
• AI 可能把提示、正在编辑的文字、内容或相关代码发送给 OpenAI、Anthropic 等模型服务商，企业可获得更强的模型与隐私控制。
• Free 方案的客户数据可能用于训练；自助付费账户应检查 AI Training 开关，Team 可选择退出，Enterprise 默认不用于训练。
• 各法律页面对自助付费和 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 改动仍需代码审查、测试、安全扫描和性能验证。
• 大型仓库索引、复杂依赖、私有基础设施和企业权限可能需要额外配置或 Enterprise 合同。
• Agent Credits 的消耗随模型和任务变化，固定席位价之外还可能有额外额度成本。
• Publish 当前主要面向 Enterprise，Visual Views、带宽、成员和空间的实际报价暂未公开。
• 自定义组件、预览地址、SSR、缓存与定位需要开发者正确接入，内容团队不能独立完成全部技术配置。
• 不同 SDK 的功能并不完全一致，选框架前应检查当前推荐代际、SSR、A/B 测试和自定义组件支持。
• 页面或 Data 模型默认公开读取的配置需要谨慎检查，敏感内容应使用私有模型和服务端密钥。
• AI 训练控制、第三方模型、保留期和退款规则跨政策存在细微差异，敏感项目应以账户设置与签署合同为准。

总结

Builder.io 适合希望把 AI 生成、可视化编辑、真实代码库和无头 CMS 放进同一协作体系的产品、工程与内容团队。

购买前应先判断需要 Fusion、Publish 还是混合空间，再核算席位与 Agent Credits，并确认 Publish 报价、AI 训练开关、数据保留和技术栈支持。