web-builder
开源低代码平台,拖拽生成响应式网页,集成DeepSeek AI生成UI
加载项目详情…
本应用为开源项目,仅供学习研究,请遵守其开源协议。
开源低代码平台,拖拽生成响应式网页,集成DeepSeek AI生成UI
加载项目详情…
本应用为开源项目,仅供学习研究,请遵守其开源协议。
想象你走进一家自助式网站打印店:没有店员招呼,没有合同签署,你只需要在屏幕上拖拽几个"积木块"——一个带轮播图的产品展示页、嵌入地图的联系页面、支持多语言的电商模板——就能在十分钟内得到一套完整的、可上线的响应式网站。这就是信使 Web Builder(GitHub: biaogebusy/web-builder)想要做的事。
与传统需要数据库和后台的建站系统不同,信使 Web Builder 本质上是一个"前端可视化编辑器 + Headless CMS"的组合拳:Drupal 作为内容管理后台处理数据,前端 Angular 应用负责渲染和交互,两者通过 JSON API 解耦通信。这意味着你的网站本质上是"纯前端静态站点 + API 调用",部署极简,天然支持 CDN 加速。
信使 Web Builder 最早发布于 2023 年 8 月,彼时国内低代码平台多为企业级重型产品,需要本地安装大型 IDE 插件、依赖私有化部署的运行时。而这个项目选择了一条更轻量的路:直接在浏览器里做可视化编辑,代码生成和发布全部云端化。
作者 biaogebusy 在项目介绍中写道,项目名称灵感来自"奥陌陌"(Oumuamua)——那颗2017年闯入太阳系的星际天体,意为"远方的信使"。这个隐喻很清晰:它想做一个信息传递者,让不懂后端的用户也能快速"发出"自己的网页。
到了 2024 年,项目推出了 Builder Pro 功能,核心是集成 DeepSeek 大模型 API,让用户可以通过自然语言描述需求,AI 自动生成对应的 TailwindCSS 页面代码。这把低代码的能力边界从"拖拽预制组件"扩展到了"AI 生成组件"——用户说一句"给我一个科技感的首页,包含导航栏、产品展示区和联系表单",系统就能生成完整的页面结构。
前端框架:Angular 20 + TailwindCSS
项目采用 Angular 20 构建,这是目前 Angular 的最新稳定版本。整个项目包含 1377 个源文件(不含图标和构建产物),规模相当可观。代码组织遵循 Angular 最佳实践,分为四层架构:
core/:核心服务(API调用、状态管理、路由守卫)modules/:功能模块(Builder编辑器、页面管理、内容编辑)uiux/:UI 组件库(combs 复合组件、widgets 基础组件)shared/:跨模块共享组件TailwindCSS 作为样式基础设施,配合 @tailwindcss/typography 和 @tailwindcss/forms 两个官方插件,支撑起了项目的全部 UI 样式。暗黑模式/亮色模式切换通过 ThemeService 管理主题状态,实现了一套代码两套皮肤的体验。
响应式与动画
项目内置了 GSAP(GreenSock Animation Platform)和 AOS(Animate On Scroll)两个动画库。GSAP 负责精细的时序动画控制,AOS 负责页面滚动时的入场动画。对于需要炫酷落地页的用户,这两个库的组合能覆盖 90% 的常见动画需求,无需额外引入动画师。
无头 CMS 架构
通过 drupal-jsonapi-params 库与 Drupal 后端通信,采用 JSON:API 规范传输数据。前端完全独立于后端技术栈,只要后端遵循 JSON:API 规范,任何 CMS 或 API 服务都可以接入。这与传统 WordPress 插件式扩展完全不同,是一种更现代化的"前后端分离"思路。
国际化
使用 @ngx-translate/core 实现多语言支持,语言配置文件位于 src/assets/i18n/ 目录,目前支持英文(en.json)和简体中文(zh-hans.json)。对于需要出海或服务多语言用户的建站场景,这是一个实用的功能。
打开组件选择器,你能看到超过 30 种组件类型:
每个组件都有多个版本变体(v1、v2、v3……),例如 Card 组件就有 Card1v1 到 Card1v6 六个视觉变体。用户不需要写代码,只需要在 Builder 界面里选中组件、拖入页面、填入数据。
项目提供了多阶段 Dockerfile,构建流程极为简洁:
FROM node:22-alpine AS builder
WORKDIR /app
COPY . .
RUN npm install --legacy-peer-deps && npm run build
FROM node:22-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
EXPOSE 4200
CMD ["node", "dist/server/main.server.mjs"]
构建分两个阶段:第一阶段用 node:22-alpine 安装依赖并构建 Angular SSR 输出;第二阶段只复制构建产物作为运行时镜像,镜像体积控制在合理范围内。Angular SSR 支持意味着页面可以服务端渲染,对 SEO 友好。
本地开发需要 Node.js >= 20,克隆项目后执行 npm install --legacy-peer-deps && npm start 即可启动开发服务器。生产部署推荐使用 Docker,一行命令搞定。
作为一个活跃维护三年的项目,信使 Web Builder 也有一些局限性:
上手门槛依然存在:虽然拖拽足够简单,但当需要自定义组件逻辑或深度定制样式时,还是需要理解 Angular 和 TailwindCSS。完全不懂代码的用户会遇到天花板。
Drupal 依赖:Headless CMS 架构是一把双刃剑——灵活性高了,但配置 Drupal 后端本身就有一定复杂度,不像 WordPress 那样"一键安装"。
大型项目的维护挑战:1400+ 文件的前端项目,如果没有良好的代码规范和 CI/CD 流程,技术债务积累速度会很快。从 GitHub 页面可以看到项目有 lint-staged 和 Husky 预提交钩子,这一点做得不错。
AI 生成的质量边界:DeepSeek AI 生成 UI 目前能生成基础布局和样式,但复杂的交互逻辑和定制化设计仍需人工调整。AI 是辅助,不是替代。
信使 Web Builder 代表了开源低代码的一条中间路线:既不像 AppMaster 或 Retool 那样面向企业级复杂应用,也不像 Wix/Squarespace 那样完全闭源商业化。它把,建站工具的能力边界,以开源的方式开放给社区。
从 GitHub 趋势看,该项目持续活跃(2026年6月21日仍有更新),获得了 565 颗星和 97 个 Fork。对于一个完全由个人维护的低代码项目来说,这个数据相当可观。随着 Builder Pro AI 功能的加入,它正在从"可视化建站工具"向"AI 原生建站平台"演进——这条路能否走通,值得持续关注。
总结:如果你需要一个可以完全控制代码的建站工具,信使 Web Builder 是一个值得尝试的选择。它不是最简单的,但可能是最灵活的开源方案之一。