App Webstudio 开源可视化建站与Webflow替代

做网站的人常在两个极端间摇摆：要么手写代码、灵活但慢；要么用闭源建站平台、快却把数据和锁定一起交给别人。Webstudio 想给第三种选择——开源的视觉化建站工具，你拥有数据、组件与基础设施，还能导出干净的代码。

Webstudio 是一个开源的可视化开发平台，定位是 Webflow 的开源替代。它面向开发者、设计师和跨职能团队，支持所有 CSS 属性、可对接任意 headless CMS，并能托管到任何地方。

项目基本信息

一、项目介绍

Webstudio 把“所见即所得”的视觉编辑和真正的所有权结合起来：核心功能完全开源（AGPL-3.0），你可以用官方托管，也可以完全自托管。它内置 Radix UI、兼容 Remix，输出的是可被导出的标准前端代码，而非黑盒。

二、核心优势

• 完全所有权：数据、组件、基础设施都归你。
• 全 CSS 支持：不阉割样式能力。
• 可对接任意 headless CMS，能托管到任何地方。
• AGPL-3.0 开源，可自托管。

三、适用场景

• 设计师与开发者协作交付网站。
• 想把站点从 Webflow 等闭源平台迁出。
• 需要可导出、可自托管的建站方案。

四、安装教程

# 自托管/本地开发（需 Node 环境）
git clone https://github.com/webstudio-is/webstudio.git
cd webstudio
pnpm install
pnpm dev

常见报错：依赖较多，建议用 pnpm 而非 npm 以避免幽灵依赖；首次 pnpm install 较慢，耐心等待。快速体验也可直接用官方托管版，无需本地安装。

五、使用示例

本地启动后打开编辑器，拖拽组件即可搭建页面，样式面板直接写 CSS。示意工作流：

新建项目 → 拖入 Container/Text → 绑定 CMS 集合
→ 发布到自有域名或导出代码

六、常见问题

• Q：和 Webflow 区别？ A：核心开源、可自托管、可导出代码，不被锁定。
• Q：能商用吗？ A：AGPL-3.0，需注意该协议的传染条款；另有部分可选包为专有。
• Q：必须会代码吗？ A：可视化即可完成大部分，代码用于进阶。

七、总结

Webstudio 给“想用建站工具又不想被绑架”的人一个务实答案：开源、可托管、可导出。AGPL 协议下的完全所有权，是它区别于闭源平台的最大底气。