# 开源AI建站栈砍掉Wix年费：七款掘金地图 ## 本周概述 如果说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 响应、是否仍在主分支推进 | ## 逐个深度分析 ### 1. screenshot-to-code | 73,137 ⭐ | 最近更新 2026-07-01 **仓库地址**：[github.com/abi/screenshot-to-code](https://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 完全本地、代码归你、可换任意模型，这是它对私有性要求高客户的核心卖点。 ### 2. tldraw | 48,472 ⭐ | 最近更新 2026-07-02（今日） **仓库地址**：[github.com/tldraw/tldraw](https://github.com/tldraw/tldraw) **核心功能**：一套无限画布 SDK（React），官方在画布上演示的 "make it real"——把画布上的草图/便签/连线一键变成可交互应用——让它从纯绘图库升级成"AI 应用工厂"的底座。今天仍在高频更新。 **上手难度**：⭐⭐⭐⭐（SDK 灵活但概念多，需要理解画布渲染与自定义节点） **变现评估**：tldraw 的价值在于"地基"。你能基于它做三类付费产品：白板协作 SaaS（对标 Miro 年费的轻量平替）、原型交互工具（设计师拖拽即出可点击原型）、以及垂直行业的"画流程图生成系统"（如把业务流程图自动转成审批应用）。定价空间大，企业版可到 ¥999–9999/月。它更偏 To B 和开发者，单价高、成单慢。 **训练营评估**：偏进阶。适合面向有 React 基础的开发者做"半天工作坊"，产出"无限画布 × AI 生成"的自定义工具雏形。对纯小白门槛偏高，不建议做入门引流营。 **竞品与差异化**：Excalidraw 更偏纯手绘、tldraw 更工程化且自带 AI "make real" 生态；商业白板 Miro/FigJam 不开放这种"画图即生成应用"的能力，tldraw 是目前唯一成熟的开源底座。 ### 3. Onlook | 26,101 ⭐ | 最近更新 2026-06-09 **仓库地址**：[github.com/onlook-dev/onlook](https://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 迭代，这是交付级客户最在意的点。 ### 4. GrapesJS | 25,979 ⭐ | 最近更新 2026-06-30 **仓库地址**：[github.com/GrapesJS/grapesjs](https://github.com/GrapesJS/grapesjs) **核心功能**：老牌的开源网页构建框架，提供一整套可视化拖拽编辑器内核（区块、图层、样式面板、资产库），可嵌入任意后台做成 CMS/建站平台/邮件模板编辑器。最近一周仍在活跃 commit。 **上手难度**：⭐⭐⭐⭐（框架级，需理解其插件体系与 Block/Component 模型才能深度定制） **变现评估**：GrapesJS 是"造平台的人的工具"，适合做 B 端大单。典型变现：为本地服务商/连锁门店搭建"客户自助建站后台"，让其加盟商自己拖拽改页面，单套 ¥2万–10万；或做成行业建站 SaaS（如餐饮、美容、教培专版），月费 ¥199–999。它本身不 AI，但很适合作为 AI 生成内容的"落地编辑层"。 **训练营评估**：适合面向开发者的进阶营，教"如何把 GrapesJS 二次开发成自己的建站产品"。建议作为 4 小时实战营，学员带走一个可演示的迷你建站平台原型。不适合纯小白。 **竞品与差异化**：vs Webstudio/Onlook 偏"成品"——GrapesJS 是"乐高积木"，可定制性最强、最成熟、生态最广，是做白标建站平台最稳的选择。 ### 5. Dyad | 20,789 ⭐ | 最近更新 2026-07-02（今日） **仓库地址**：[github.com/dyad-sh/dyad](https://github.com/dyad-sh/dyad) **核心功能**：本地、开源的 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 全本地、可离线、可换本地模型、代码完全私有，这是隐私敏感客户和成本敏感客户的决定性优势。 ### 6. bolt.diy | 19,540 ⭐ | 最近更新 2026-02-07 **仓库地址**：[github.com/stackblitz-labs/bolt.diy](https://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 但不想被锁定"人群的平替。 ### 7. Webstudio | 8,676 ⭐ | 最近更新 2026-07-02（今日） **仓库地址**：[github.com/webstudio-is/webstudio](https://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 全功能免费、可导出干净代码、可自托管，对预算敏感的中小企业是硬刚需。 ### 8. OpenPage（新兴掘金） | 14 ⭐ | 最近更新 2026-03-07 **仓库地址**：[github.com/buildingopen/openpage](https://github.com/buildingopen/openpage) **核心功能**：开源网站构建器，可视化拖拽编辑 + AI 站点生成 + JSON 单一数据源架构，明确自称 Framer/Lovable/v0 的自托管平替，技术栈 React 19 + TypeScript + Tailwind。 **上手难度**：⭐⭐⭐（项目较新、文档与生态尚在完善，需一定排错能力） **变现评估**：典型的"早期掘金"项目——Star 还低、技术方向时髦（JSON-first、可自托管）。先发者机会在于：成为它的早期布道者/讲师，或在它之上做行业模板与托管服务，抢占"自托管版 Lovable"这个心智。风险与机会并存：维护活跃度需持续观察（最近 commit 在 3 月），适合愿意跟着项目一起成长的人。 **训练营评估**：暂不建议做面向小白的成品营（稳定性待验证），更适合做"开源项目实战 + 贡献"主题的进阶营，吸引想入行开源的开发者。 **竞品与差异化**：和 OpenPage 同档的还有 PHP 单文件方案 [NowSquare/VoxelSite](https://github.com/NowSquare/VoxelSite)（4 ⭐，自托管 PHP 站点、源码完全归你），主打"轻量、零依赖、单文件部署"，适合低端虚拟主机客户。两者共同代表"去 SaaS 化、源码自有"的新一轮长尾机会。 ## 生态全景可视化 ```mermaid 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 ``` ## 变现定位象限图 ```mermaid 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] ``` ## 变现潜力 Top 5 排行榜 | 排名 | 项目 | 最佳变现方向 | 预估定价 | |------|------|--------------|----------| | 🥇 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 每年数千元的订阅，又能把省下的钱和自己产出的能力，转化为对外报价的"建站服务"和"训练营产品"。 ## 参考来源 1. [Trending repositories on GitHub — Trending](https://github.com/trending) — GitHub 官方 Trending，验证项目热度与近期活跃度 2. [Trending AI Repositories on GitHub — OSSInsight](https://ossinsight.io/trending/ai) — 第三方实时 AI 开源项目排行榜，覆盖本周/本月趋势 3. [Top AI GitHub Repositories in 2026 — ByteByteGo](https://blog.bytebytego.com/p/top-ai-github-repositories-in-2026) — 2026 年 AI 开源生态全景综述，含建站/应用构建赛道分析 4. [Top 20 AI Projects on GitHub to Watch in 2026 — NocoBase](https://www.nocobase.com/en/blog/best-open-source-ai-projects-github-2026) — 按 Star 排名的开源 AI 项目盘点，含建站与低代码方向 5. [7 Best Open Source AI Website Builder Options for Developers — Mobirise](https://mobirise.com/ai-sites/open-source-ai-website-builder.html) — 开源 AI 建站器横向对比，自托管 vs 云端方案梳理 ## 延伸阅读 建站赛道的窗口期，往往就开在"商业 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 等场景全覆盖。