## 概述 Webflow 在 2026 年 5 月把旧版 CMS 与 Business 套餐合并为单一的 Premier 方案，Workspace 按席位收费，一个小团队一年下来站点费加席位费轻松破万；Framer、Squarespace、Carrd Pro 同样按月抽成。与此同时，开源可视化建站生态正在以肉眼可见的速度追平商业产品的体验：本周仍保持高频提交的 Webstudio、Plasmic、Puck、Payload CMS、GrapesJS、Mitosis 与 Silex，已经能覆盖从"拖拽搭站—设计转代码—内容后端—白标编辑器 SDK"的完整链条。本文逐个拆解这七款工具的变现路径与训练营适配度，给出一份可直接落地的"砍年费+掘金"地图。 ## 筛选标准 | 维度 | 权重 | 说明 | |------|------|------| | 变现潜力 | 40% | 能否包装成付费产品/服务？目标用户与定价空间 | | 训练营适用性 | 25% | 2–4 小时能否教会？学员产出什么成果 | | 技术新颖度 | 20% | 是否代表前沿方向与差异化优势 | | 维护活跃度 | 15% | 近一周是否有 commit、Issue 响应速度 | > 数据口径：Star 数与最近提交时间经 GitHub API 于 2026-07-10 核验，均为可视化建站/页面构建方向。 --- ## 一、Webstudio — 最像 Webflow 的开源可视化建站器 **[webstudio-is/webstudio](https://github.com/webstudio-is/webstudio)** | ★ 8,708 | 最近提交：2026-07-10（今日）| TypeScript - **核心功能**：开源可视化网站构建器，定位 Webflow 的直接替代品，输出干净、可维护的代码，支持自托管。 - **上手难度**：⭐⭐（两星半，拖拽即可上手） **变现评估**：这是七款里"代运营变现"最顺手的。目标用户是中小企业、独立工作室、跨境卖家。可以包装成三档：① ¥299 落地页单页代建；② ¥1,990 企业官网定制（基于自托管 Webstudio，无月租）；③ ¥9,900/年 建站托管+维护套餐。相比 Webflow 每年几千到上万的订阅，对客户是肉眼可见的省钱，对你是一次性交付 + 续费维护费。 **训练营评估**：2 小时入门课 + 2 小时实战课即可结业，学员能带走的成果是"一个可绑定自有域名、完全免费托管的官网或作品集"。非常适合做 ¥99–¥199 的"零月租建站"训练营，或作为自媒体/副业课的引流爆款。 **差异化**：相比 Silex 偏静态、GrapesJS 偏框架，Webstudio 是成品级体验，最贴近 Webflow 的设计自由度，是教学和接单的甜区。 --- ## 二、Plasmic — 给你的代码库装一个无头可视化页面构建器 **[plasmicapp/plasmic](https://github.com/plasmicapp/plasmic)** | ★ 6,905 | 最近提交：2026-07-10（今日）| TypeScript - **核心功能**：面向 React 的开源可视化构建器，输出真实组件，可接入现有代码库，自带 Headless CMS、A/B 测试、内容协作。 - **上手难度**：⭐⭐⭐⭐ **变现评估**：变现逻辑是"卖给开发者团队和 SaaS"。非技术人员可在 Plasmic 里改页面、改活动落地页，不再排开发资源。可做：① ¥499/月 给中小企业部署一套可视化内容中台；② 给 SaaS 厂商做"白标页面编辑"集成项目，单项目 ¥3 万–¥10 万；③ 面向 Next.js 团队的私享课 ¥1,290。 **训练营评估**：偏进阶，适合 ¥399–¥599 的"React + Plasmic 可视化内容运营"中阶营，学员产出"一个营销团队可自助改版的落地页系统"。建议先讲 Next.js 集成，再讲 Headless CMS 与组件映射。 **差异化**：它的杀手锏是"设计产出真实 React 代码、组件可被开发者接管"，介于 Figma 与代码之间，不像 Webstudio 只管建站，而是融入工程流水线。 --- ## 三、GrapesJS — 可嵌入的可视化编辑器框架（白标 SDK 摇钱树） **[GrapesJS/grapesjs](https://github.com/GrapesJS/grapesjs)** | ★ 26,016 | 最近提交：2026-06-30 | TypeScript - **核心功能**：多用途开源网页构建框架，可白标嵌入任意应用，2026 版已内置 AI 辅助编辑，常用于邮件、落地页、网站与文档的可视化编排。 - **上手难度**：⭐⭐⭐⭐ **变现评估**：这是七款里"做产品"天花板最高的一款。因为它是 SDK，你可以把它嵌进自己的 SaaS：邮件营销平台、表单/问卷工具、商城装修后台。变现路径：① ¥99/月 给小商家提供"邮件+落地页可视化编辑"工具；② 把它做成行业垂直版（如教培机构的招生页编辑器）按席位收费；③ ¥6,800 的"如何给 SaaS 加白标编辑器"实战课。 **训练营评估**：4 小时进阶营，学员产出"一个能拖拽生成 HTML 的编辑器 Demo"。更适合有前端基础的开发者，而非纯小白。 **差异化**：Webstudio/Plasmic 是"产品"，GrapesJS 是"造产品的零件"。它的真正买家是"想自己做建站/编辑 SaaS 的人"——卖铲子逻辑，溢价空间最大。 --- ## 四、Puck — 给 React 设计系统装一个 Agentic 可视化编辑器 **[puckeditor/puck](https://github.com/puckeditor/puck)** | ★ 12,940 | 最近提交：2026-07-10（今日）| TypeScript - **核心功能**：面向 React 的可视化编辑器，口号是"不改代码即可上线页面"，2026 年强化为 agentic 编辑器，可基于设计系统快速拼装页面。 - **上手难度**：⭐⭐⭐ **变现评估**：定位"设计系统驱动的页面工厂"。适合卖给有组件库的中大型前端团队，让他们把营销页/活动页的上线权交给运营。变现：① ¥1,990 给团队搭一套基于 Puck 的自助页面发布台；② ¥499 的"Puck + 设计系统"主题课；③ 给品牌方做活动页快速复用方案。 **训练营评估**：3 小时中阶营，学员产出"一个由自己组件库驱动、运营可拖拽出页面的后台"。对已经有 React 组件库的学员吸引力极强。 **差异化**：与 Plasmic 都做 React 可视化，但 Puck 更轻、更强调"设计系统约束下的自助发布"，工程侵入性更低，适合已经有一套组件规范、只想把页面编辑权下放的团队。 --- ## 五、Mitosis — 一份设计，编译成任意框架的组件（Builder.io） **[BuilderIO/mitosis](https://github.com/BuilderIO/mitosis)** | ★ 13,880 | 最近提交：2026-06-05 | TypeScript - **核心功能**：组件编译器，编写一次组件，编译输出 React/Vue/Svelte/Angular 等多框架代码，背后是 Builder.io 的可视化设计转代码能力。 - **上手难度**：⭐⭐⭐⭐ **变现评估**：变现点是"跨框架交付"与"设计资产复用"。组件库作者、设计系统团队是核心买家。变现：① ¥1,290 的"用 Mitosis 做跨框架组件库"课；② 给企业把现有 UI 资产一次性编译成多框架版本，单项目 ¥2 万–¥8 万；③ 卖可复用的行业组件包（¥199/套）。 **训练营评估**：4 小时进阶营，学员产出"一个能同时输出 React 与 Vue 的组件库雏形"。需要学员有组件库意识。 **差异化**：其余六款解决"怎么搭页面"，Mitosis 解决"怎么把搭好的东西交付到任意技术栈"——这是组件库商业化的关键一环，护城河来自编译器本身的技术深度。 --- ## 六、Payload CMS — 建站栈的内容后端巨兽（Figma 已收购其生态关注度） **[payloadcms/payload](https://github.com/payloadcms/payload)** | ★ 43,501 | 最近提交：2026-07-10（今日）| TypeScript - **核心功能**：TypeScript 原生的开源全栈 Next.js 框架与 Headless CMS，内置数据库、Admin 面板、本地化、访问控制，自托管无限制。 - **上手难度**：⭐⭐⭐⭐ **变现评估**：七款里定价空间最大。它本质是"网站/应用的内容后端"，可与 Webstudio/Plasmic/Next.js 前端组合成完整方案。变现：① ¥9,900 起 的"企业官网+内容中台"全案交付（前端可视化 + Payload 后端 + 自托管）；② ¥699/月 维护与托管；③ ¥1,590 的"Payload 全栈实战"高阶营。 **训练营评估**：这是七款里唯一适合做"深度全栈营"的（¥999–¥1,999），学员产出"一个带后台、可多语言、自托管的内容站点"。学习路径清晰、上手快，是训练营教材的优选。 **差异化**：注意它不是 Notion/Confluence 式的"知识库"，而是面向对外网站/应用的内容后端。与前端可视化器组合后，等于自建了一套不收月租的"建站+CMS"商业栈。 --- ## 七、Silex — 真正免费、可导出静态站的零代码建站器 **[silexlabs/Silex](https://github.com/silexlabs/Silex)** | ★ 2,887 | 最近提交：2026-07-10（今日）| TypeScript - **核心功能**：AGPL 协议、承诺永久免费的开源可视化建站器，输出静态 HTML 站点，可自托管，曾获 OW2 最佳项目奖。 - **上手难度**：⭐⭐ **变现评估**：单价低但走量。最适合"批量起站"场景：本地商家官网、个人名片站、落地页矩阵。变现：① ¥99 一个静态站（含导出与部署）；② 帮本地商家批量做"地图+点评+官网"套餐；③ 作为免费引流工具，导流到你的建站付费课。 **训练营评估**：1–2 小时即可结业的入门营，学员产出"一个免费、可上线、SEO 友好的静态官网"。是钩子型训练营的最佳素材——门槛低、出成果快、口碑易传播。 **差异化**：它是七款里最"纯粹免费"的，AGPL 且无商业化绑架，定位是静态站与教育用途，恰好填补 Webstudio（偏动态/产品）与 Payload（偏后端）之间的轻量入口。 --- ## 可视化分布：门槛 × 变现潜力 ```mermaid quadrantChart title 七款开源建站工具：上手门槛 × 变现潜力 x-axis "低门槛" --> "高门槛" y-axis "变现潜力低" --> "变现潜力高" quadrant-1 "高价值专业服务" quadrant-2 "训练营易上手 / 高变现" quadrant-3 "薄利走量型" quadrant-4 "企业级深度定制" "Silex": [0.25, 0.5] "Webstudio": [0.35, 0.72] "Puck": [0.5, 0.66] "Plasmic": [0.5, 0.76] "Payload CMS": [0.55, 0.86] "Mitosis": [0.62, 0.7] "GrapesJS": [0.6, 0.82] ``` 读图要点：左上象限是"训练营甜区"（Silex、Webstudio），适合走量教学；右上象限是"高价值交付"（Payload、GrapesJS、Plasmic），适合做全案与 SaaS；右下的 Mitosis 偏技术深度，定价空间取决于组件库商业化能力。 --- ## 变现潜力 Top 5 排行榜 | 排名 | 项目 | 变现方向 | 预估定价 | |------|------|----------|----------| | 🥇 1 | Payload CMS | 企业官网+内容中台全案交付、全栈高阶营 | 全案 ¥9,900 起 / 课程 ¥999–¥1,999 | | 🥈 2 | GrapesJS | 白标可视化编辑器 SDK、行业垂直 SaaS | SaaS ¥99/月 / 实战课 ¥6,800 | | 🥉 3 | Plasmic | 嵌入式可视化内容台、给 SaaS 加页面编辑 | 部署 ¥499/月 / 集成项目 ¥3万–¥10万 | | 4 | Webstudio | 零月租建站代运营、落地页代建 | 单页 ¥299 / 官网 ¥1,990 / 训练营 ¥99–¥199 | | 5 | Mitosis | 跨框架组件库交付、设计资产编译变现 | 课 ¥1,290 / 项目 ¥2万–¥8万 | **组合建议**：把 Payload（后端）+ Webstudio 或 Plasmic（前端可视化）打包成"自托管、零月租"的建站全栈对外交付，是当前最具杀伤力的商业组合——客户省下 Webflow/Framer/Squarespace 的年订阅，你赚取一次性交付费与续费维护费，是典型的开源卖铲+服务化变现。 --- ## 参考来源 1. [webstudio-is/webstudio — Open source website builder, Webflow alternative](https://github.com/webstudio-is/webstudio) — 核心项目仓库，可视化建站定位与功能 2. [payloadcms/payload — Open-source fullstack Next.js framework & Headless CMS](https://github.com/payloadcms/payload) — 内容后端能力与自托管特性 3. [Webflow — Updated pricing and simplified plans for May 2026](https://help.webflow.com/hc/en-us/articles/51059955082387-Updated-pricing-and-simplified-plans-for-May-2026) — 2026 年 5 月 Webflow 新定价（Premier/Workspace/席位） 4. [Self-Hosted Visual Page Builders: GrapesJS vs Silex vs Vvveb](https://www.pistack.xyz/posts/2026-06-08-self-hosted-visual-page-builders-grapesjs-silex-vvveb-guide/) — GrapesJS 25k+ Star、Silex 静态站导出等横向对比 5. [Builder.io — v0 Alternatives for 2026](https://www.builder.io/blog/v0-alternatives) — Builder/Mitosis 在 AI 设计转代码赛道的定位与差异化 > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。