如果说2025年是 v0、Lovable、Bolt.new、Framer AI 把"对话生成网页"变成了人人都想尝鲜的付费订阅，那么2026年第二季度的趋势已经非常清晰——这一波红利正在被开源力量快速吃下。从截图直接还原整套前端代码的 screenshot-to-code（7.3万Star），到把无限画布变成 AI 应用工厂的 tldraw，再到本地化运行的 v0/Lovable 替代品 Dyad，以及真正能商业交付的 Webflow 平替 Webstudio，开源生态已经能拼出一条完整的"建站流水线"。对个人开发者和培训从业者来说，这意味着两件事：第一，中小客户"建个站"的预算，过去要付给 Wix/Webflow 的年费，现在可以被一套自建开源栈接管；第二，这条流水线每一个环节都清晰、可教学、可复刻，天然适合做成 2–4 小时的训练营。本文按变现潜力、训练营适用性、技术新颖度、维护活跃度四个维度，深度拆解 8 款值得关注的开源建站栈。
| 维度 | 权重 | 说明 |
|---|---|---|
| 变现潜力 | 40% | 能否包装成付费产品/服务（接单、白标、SaaS、培训），目标客户与定价空间 |
| 训练营适用性 | 25% | 学员能否在 2–4 小时内跑出可交付成果，路径是否清晰 |
| 技术新颖度 | 20% | 是否代表"对话生成/视觉编辑/截图还原"前沿，差异化是否明显 |
| 维护活跃度 | 15% | 近期 commit 频率、Issue 响应、是否仍在主分支推进 |
仓库地址：github.com/abi/screenshot-to-code
核心功能：丢一张截图（或任意网页 URL、手绘线框图），自动还原成干净的 HTML/Tailwind/React/Vue 代码，支持切换 GPT、Claude、Gemini 等多模型后端。它是整个"看图生站"赛道的开山项目，至今仍是 Star 数天花板。
上手难度：⭐⭐（前端有基础即可，Docker 一键起，关键在调模型与 Prompt）
变现评估：这是变现链路最短的一款。第一种玩法是做"截图还原"接单工具——很多设计师手里有大量 Figma/PSD，付费请人切图贵且慢，你能提供"截图→生产级 React 组件"的服务，单页 ¥300–800，企业站整套 ¥3000–8000。第二种是把多模型后端、企业模板库、组件规范打包成内部效率工具，卖给中小外包公司，年订阅 ¥2999–9999。目标用户覆盖设计师、外包团队、独立开发者。
训练营评估：极佳。2 小时入门营可以让学员"上传手绘稿→3 分钟出可运行页面"，震撼感强、成果立等可取；进阶 4 小时营可教"多模型对比 + Prompt 调优 + 接入私有组件库"。学员带走一个能立刻接单的成品。强烈推荐作为建站训练营的"开场爆款"。
竞品与差异化：商业对手 v0、21st.dev Magic 走订阅制、且代码托管在云端；screenshot-to-code 完全本地、代码归你、可换任意模型，这是它对私有性要求高客户的核心卖点。
核心功能：一套无限画布 SDK（React），官方在画布上演示的 "make it real"——把画布上的草图/便签/连线一键变成可交互应用——让它从纯绘图库升级成"AI 应用工厂"的底座。今天仍在高频更新。
上手难度：⭐⭐⭐⭐（SDK 灵活但概念多，需要理解画布渲染与自定义节点）
变现评估：tldraw 的价值在于"地基"。你能基于它做三类付费产品：白板协作 SaaS（对标 Miro 年费的轻量平替）、原型交互工具（设计师拖拽即出可点击原型）、以及垂直行业的"画流程图生成系统"（如把业务流程图自动转成审批应用）。定价空间大，企业版可到 ¥999–9999/月。它更偏 To B 和开发者，单价高、成单慢。
训练营评估：偏进阶。适合面向有 React 基础的开发者做"半天工作坊"，产出"无限画布 × AI 生成"的自定义工具雏形。对纯小白门槛偏高，不建议做入门引流营。
竞品与差异化：Excalidraw 更偏纯手绘、tldraw 更工程化且自带 AI "make real" 生态；商业白板 Miro/FigJam 不开放这种"画图即生成应用"的能力，tldraw 是目前唯一成熟的开源底座。
仓库地址：github.com/onlook-dev/onlook
核心功能：定位"The Cursor for Designers"——一个面向 React 应用的 AI 优先可视化设计工具，能直接在你真实的 React 项目里所见即所得地拖拽改样式、改文案、加组件，并用自然语言指挥 AI 改代码，改完写回源码。
上手难度：⭐⭐⭐（需懂 React 项目结构，但交互方式对设计师极友好）
变现评估：Onlook 卡在"设计师 + 前端"这个高净值交叉点上。变现路径：一是接"设计落地"外包——用 Onlook 把客户 Figma 设计稿快速变成可维护的 React 项目，比传统手写快数倍，单项目 ¥5000–2万；二是做企业内训，教设计团队"自己把稿子变成前端"，半天工作坊 ¥3000–8000/场。目标用户是中小设计公司、独立设计师转型者。
训练营评估：很适合做"设计师上前端"主题营。2–3 小时营可让设计师第一次自己改出一个上线的 React 页面，成就感极强。需要学员先有一个 React 模板项目（可用 Vite 起步）。
竞品与差异化：vs Webflow/Framer 这类"生成不可控黑盒代码"——Onlook 操作的是你自己的源码，输出干净、可维护、可继续用 Cursor/Copilot 迭代，这是交付级客户最在意的点。
仓库地址：github.com/GrapesJS/grapesjs
核心功能：老牌的开源网页构建框架，提供一整套可视化拖拽编辑器内核（区块、图层、样式面板、资产库），可嵌入任意后台做成 CMS/建站平台/邮件模板编辑器。最近一周仍在活跃 commit。
上手难度：⭐⭐⭐⭐（框架级，需理解其插件体系与 Block/Component 模型才能深度定制）
变现评估：GrapesJS 是"造平台的人的工具"，适合做 B 端大单。典型变现：为本地服务商/连锁门店搭建"客户自助建站后台"，让其加盟商自己拖拽改页面，单套 ¥2万–10万；或做成行业建站 SaaS（如餐饮、美容、教培专版），月费 ¥199–999。它本身不 AI，但很适合作为 AI 生成内容的"落地编辑层"。
训练营评估：适合面向开发者的进阶营，教"如何把 GrapesJS 二次开发成自己的建站产品"。建议作为 4 小时实战营，学员带走一个可演示的迷你建站平台原型。不适合纯小白。
竞品与差异化：vs Webstudio/Onlook 偏"成品"——GrapesJS 是"乐高积木"，可定制性最强、最成熟、生态最广，是做白标建站平台最稳的选择。
核心功能：本地、开源的 AI 应用构建器，明确对标 v0 / Lovable / Replit / Bolt——在你本机用对话生成并运行全栈应用，支持自选模型（含本地大模型），代码、依赖、运行环境全在本地，今日仍在快速迭代。
上手难度：⭐⭐（桌面应用体验，对终端用户非常友好，开箱即用）
变现评估：Dyad 是"v0/Lovable 订阅终结者"，变现点最锋利。可包装成：本地化的"AI 应用代建"服务，帮非技术创业者从一句话想法到 MVP 跑起来，单单 ¥1500–6000；或针对企业做"私有 AI 应用工厂"部署（数据不出本地），项目制 ¥3万–15万。目标用户是想做产品但不想付 SaaS 月费的创业者、对数据敏感的企业。
训练营评估：极佳的引流爆款。"一句话生成 App"的现场体验对小白震撼力最强，1.5–2 小时体验营即可，学员现场带出一个可分享的小应用链接。复购率高的入门营首选。
竞品与差异化：vs Lovable/Bolt（云端、按 Token/订阅收费、代码在别人服务器）——Dyad 全本地、可离线、可换本地模型、代码完全私有，这是隐私敏感客户和成本敏感客户的决定性优势。
仓库地址：github.com/stackblitz-labs/bolt.diy
核心功能：StackBlitz 官方 Bolt.new 的社区开源版（前身 bolt.new-any-llm），可用任意 LLM 提示→运行→编辑→部署全栈应用，深度集成 WebContainers，浏览器内即可跑 Node 全栈。
上手难度：⭐⭐（部署即用，关键是模型与 API 配置）
变现评估：和 Dyad 定位接近但更"云原生"。变现点：做"AI 全栈原型外包"，快速给客户出可演示原型，单个 ¥800–3000；或封装成面向特定场景（落地页生成、小程序原型）的 SaaS。注意它更新停在 2026-02，活跃度略低于 Dyad，选型时需评估维护风险。
训练营评估：适合做"全栈无门槛"营，2–3 小时让非全栈开发者也能交付一个带后端的应用原型。和 Dyad 可二选一做对比教学。
竞品与差异化：vs 官方 bolt.new（闭源、订阅）——bolt.diy 可自托管、可换模型、可接 Ollama 本地模型，是"想用 Bolt 但不想被锁定"人群的平替。
仓库地址：github.com/webstudio-is/webstudio
核心功能：开源的 Webflow 平替，高级可视化建站器，支持完整 CSS 属性、可接任意 Headless CMS（Sanity/Contentful 等）、生成的站点可托管在任何地方。今日仍在高频更新。
上手难度：⭐⭐（可视化操作，对懂基础 CSS 的设计师/运营非常友好）
变现评估：Webstudio 是这条链里"最适合做商业建站交付"的成品。变现路径最直接：开建站工作室，用 Webstudio 给中小客户交付高质量营销站，单站 ¥3000–1.5万，年维护费 ¥800–3000；或做行业模板市场（餐饮、SaaS、个人品牌），模板 ¥99–499/套。目标用户是中小企业、自由职业者、个人品牌。
训练营评估：最适合"副业建站接单"主题营。3–4 小时营可让学员从 0 交付一个上线的企业营销站，教学路径最清晰、成果最像真单。强烈推荐作为主力变现营。
竞品与差异化：vs Webflow（年费数百至上千美元、导出受限）——Webstudio 全功能免费、可导出干净代码、可自托管，对预算敏感的中小企业是硬刚需。
仓库地址：github.com/buildingopen/openpage
核心功能：开源网站构建器，可视化拖拽编辑 + AI 站点生成 + JSON 单一数据源架构，明确自称 Framer/Lovable/v0 的自托管平替，技术栈 React 19 + TypeScript + Tailwind。
上手难度：⭐⭐⭐（项目较新、文档与生态尚在完善，需一定排错能力）
变现评估：典型的"早期掘金"项目——Star 还低、技术方向时髦（JSON-first、可自托管）。先发者机会在于：成为它的早期布道者/讲师，或在它之上做行业模板与托管服务，抢占"自托管版 Lovable"这个心智。风险与机会并存：维护活跃度需持续观察（最近 commit 在 3 月），适合愿意跟着项目一起成长的人。
训练营评估：暂不建议做面向小白的成品营（稳定性待验证），更适合做"开源项目实战 + 贡献"主题的进阶营，吸引想入行开源的开发者。
竞品与差异化：和 OpenPage 同档的还有 PHP 单文件方案 NowSquare/VoxelSite（4 ⭐，自托管 PHP 站点、源码完全归你），主打"轻量、零依赖、单文件部署"，适合低端虚拟主机客户。两者共同代表"去 SaaS 化、源码自有"的新一轮长尾机会。
mindmap
root((开源AI建站栈))
输入层 看图/对话生码
screenshot-to-code 截图还原 73k
Dyad 对话生全栈应用 21k
bolt.diy 对话生应用 20k
设计层 视觉编辑
Onlook React源码级 26k
Webstudio Webflow平替 8.7k
GrapesJS 框架内核 26k
底座层 画布/SDK
tldraw 无限画布SDK 48k
新兴层 自托管平替
OpenPage JSON优先 14
VoxelSite 单文件PHP 4
quadrantChart
title 开源AI建站栈：变现速度 vs 交付深度
x-axis "轻量快接单" --> "深度重交付"
y-axis "低单价高频次" --> "高单价低频次"
quadrant-1 "高价值项目制"
quadrant-2 "企业级大单"
quadrant-3 "引流体验营"
quadrant-4 "标准化产品"
"screenshot-to-code": [0.25, 0.45]
"Dyad": [0.2, 0.35]
"Webstudio": [0.55, 0.55]
"Onlook": [0.62, 0.7]
"tldraw": [0.8, 0.85]
"GrapesJS": [0.85, 0.8]
"bolt.diy": [0.3, 0.4]
"OpenPage": [0.45, 0.3]
| 排名 | 项目 | 最佳变现方向 | 预估定价 |
|---|---|---|---|
| 🥇 1 | screenshot-to-code | 截图还原接单服务 + 多模型效率工具 | 单页 ¥300–800；企业工具年费 ¥2999–9999 |
| 🥈 2 | Dyad | 本地化 AI 应用代建 + 企业私有部署 | MVP 单 ¥1500–6000；私有部署 ¥3万–15万 |
| 🥉 3 | Webstudio | 建站工作室交付 + 行业模板市场 | 单站 ¥3000–1.5万；模板 ¥99–499/套 |
| 4 | Onlook | 设计落地外包 + 设计师转前端内训 | 单项目 ¥5000–2万；内训 ¥3000–8000/场 |
| 5 | GrapesJS | 白标建站平台 / 行业 SaaS 二次开发 | 平台单套 ¥2万–10万；SaaS 月费 ¥199–999 |
把上述工具串成一条流水线，是当前性价比最高的玩法：用 screenshot-to-code 或 Dyad 做需求到原型的"第一公里"，用 Onlook 在真实 React 源码上精修设计，用 Webstudio 交付可长期维护的营销站，企业级多租户平台则用 GrapesJS 做底座、tldraw 做可视化交互。这样既能砍掉 Wix/Webflow/v0/Lovable 每年数千元的订阅，又能把省下的钱和自己产出的能力，转化为对外报价的"建站服务"和"训练营产品"。
建站赛道的窗口期，往往就开在"商业 SaaS 涨价、开源能力追平"的那一两年。下一轮可继续深挖的相邻赛道：开源低代码应用构建栈（Retool/Bubble 平替）、开源落地页与营销自动化栈，以及开源无头 CMS + 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 等场景全覆盖。