信使 Web builder
AI 生成UI和工具应用的低代码平台

AI 生成UI和工具应用的低代码平台，国内首款开源的基于 Drupal 作为 Headless 的低代码，基于 TailwindCss，通过拖拽可视化快速构建现代化响应式UI、动态自定义组件、多主题、多语言的网站应用。AI-powered UI generation and publishing low code platform, built on TailwindCSS, enabling rapid drag-and-drop visual creation of modern responsive UIs, dynamic customizable components, multi-theme, and multi-language web applications.

https://builder.design

Builder CMS · 信使小程序 · 文档 · 知乎 · Docker 部署

观看演示视频

奥陌陌是已知的第一颗经过太阳系的星际天体，意为"远方信使"。

web builder

功能点	说明
Layout builder	动态 layout，基于 TailwindCss 的动态组件，支持静态数据和 API 数据来源
组件编辑	删除、复制 JSON、编辑组件数据、拖动上下排列
媒体库	可在前台批量上传、查看、更新媒体库
小程序数据维护	通过 builder 管理小程序的页面和组件
页面历史版本	当提交、清空、加载示例等覆盖操作时新增历史版本
草稿检测	当前内容有最新时，提醒是否拉取最新
丰富的模板库、示例库	基于模板库选择模板，快速生成页面
复制整个页面的 JSON	可直接复制 json，部署到后台发布
动画	支持通用的AOS页面滚动动画和高细粒度的GSAP动画
切换全宽	方便大屏编辑，减少干扰
快速生成页面	根据一定的规则从组件库中生成页面
多主题切换预览	预览在多主题下的组件显示情况
暗黑风格	支持切换浅色风格和暗黑风格，专注内容创作
页面预览	调转到新窗口查看真实的页面
响应式预览	可切换不同设备尺寸查看页面响应式排版

Builder 预览

Builder Pro 预览

基于AI大模型生成UI、页面和工具应用，欢迎体验。

信使 Mini 小程序

信使小程序是基于 Taro+NutUI 的小程序，Vue3拥有更好的编辑开发体验，
在Web builder中通过拖拽可视化配置，小程序可动态构建页面。
Github 开源地址

相关视频演示

• DeepSeek 生成自定义组件
• AI 创建自定义组件，优化文案，一句话生成整个页面
• 构建Drupal CMS 预览版宣传着陆页
• 支持AOS通用页面滚动动画
• Layout 嵌套
• API 数据来源 | 静态数据来源 TailwindCss 自定义组件
• 复制功能快速构建组件
• 多语言发布及媒体库管理
• 自定义示例和模板库

微信扫码查看更多视频

对应版本

Web builder	Angular	Node	TS
v11	v20	v22+	v5.8+
v10	v19	v18+	v5.5+
v9	v18	v18+	v5.4
v8	v17	v18+	v5.2
v7	v16	v16+	v4.9.3
v6	v14	v14.15.0	v4.6
v5	v12	v14	v4
<=v4	v11	v14	v4

技术选型

• 前端：Angular + Material + TailwindCss
• 动态表单：ngx-formly
• web 动画：aos 页面滚动动画，gsap 细粒度定制化动画
• 图表：Echarts
• 视频：Video.js
• 文件生成：jspdf 生成 pdf，html2canvas 生成图像，file-saver 下载文件，jszip 压缩文件
• 编辑器：quill, jsoneditor, vs monaco-editor
• 幻灯片：swiper
• 字体图标：material design icons + 自定义 svg icon
• 加密：crypto-js
• 工具函数：lodash-es
• 测试预览：storybook
• web 服务：Nginx
• 后端：Drupal(推荐)，通过 Drupal 的 views 视图可灵活配置动态组件、动态 api；

开发指南

安装 npm install

1. 代码下载或者 clone 项目到本地：git clone git@github.com:biaogebusy/web-builder.git
2. 请使用 npm install 安装，严格按照 package-lock.json 锁版本安装，依赖较多，请多等待，使用 yarn 或者 pnpm 会有报错；

本地开发

npm start

开发环境设置

// src/environments/environment.ts
export const environment: IEnvironment = {
  apiUrl: "http://localhost:4200",
  production: false,
  port: 4200,
  cache: false,
  drupalProxy: false,
  multiLang: true,
  langs: [
    {
      label: "中文",
      langCode: "zh-hans",
      prefix: "/",
      default: true,
    },
    {
      label: "EN",
      langCode: "en",
      prefix: "/en",
    },
  ],
};

• apiUrl: 是整个应用的 Base api 参数；
• production: 为 false 时，页面的内容 api 将调用本地 json 文件，true 时将会调用线上接口；
• port: 自定义 Node 端口；
• cache: 是否开启 api 请求缓存；
• drupalProxy: 对应后端为 drupal，统一使用 Drupal 来登录登出；
• multiLang: 应用是否是多语言；

本地开发环境 Proxy 代理

为了体验一致，本地默认配置体验站的API代理，配置文件config/proxy.config.js，根据实际情况进行配置；

const PROXY_CONFIG = [
  {
    context: ['/api', '/user', '/sites'],
    target: 'https://builder.design',
    secure: false,
    changeOrigin: true,
  },
];

module.exports = PROXY_CONFIG;

为生产环境打包

npm run build

最后

• QQ 交流群：1176468251
• 如果觉得这个项目对您有所助益，请帮忙点个 star

信使 Web Builder 快速上手指南

信使 Web Builder 是一款基于 Angular、TailwindCSS 和 Drupal（Headless）的 AI 驱动低代码平台，支持通过拖拽可视化快速构建现代化响应式 UI、动态组件及多语言网站应用。

1. 环境准备

在开始之前，请确保您的开发环境满足以下版本要求。强烈建议严格按照指定版本安装，以避免依赖冲突。

组件	推荐版本 (对应 Web Builder v11)	备注
Node.js	v22+	必须使用 npm，不支持 yarn 或 pnpm
Angular	v20	框架核心
TypeScript	v5.8+	语言支持
包管理器	npm	需严格遵循 package-lock.json

注意：项目依赖较多且对版本敏感，请务必使用 npm 进行安装，使用其他包管理器可能导致报错。

2. 安装步骤

2.1 克隆项目

将代码仓库克隆到本地：

git clone git@github.com:biaogebusy/web-builder.git
cd web-builder

2.2 安装依赖

进入项目目录后，执行安装命令。由于依赖项众多，请耐心等待安装完成：

npm install

提示：国内开发者若遇到下载缓慢问题，可临时配置淘宝镜像源加速： npm config set registry https://registry.npmmirror.com

3. 基本使用

3.1 启动本地开发服务器

安装完成后，直接运行以下命令启动开发环境：

npm start

默认情况下，应用将在 http://localhost:4200 启动。

3.2 开发环境配置

如需自定义 API 地址、端口或多语言设置，请编辑 src/environments/environment.ts 文件：

// src/environments/environment.ts
export const environment: IEnvironment = {
  apiUrl: "http://localhost:4200", // 基础 API 地址
  production: false,               // false 时使用本地 JSON 数据，true 时调用线上接口
  port: 4200,                      // 自定义 Node 端口
  cache: false,                    // 是否开启 API 请求缓存
  drupalProxy: false,              // 是否启用 Drupal 统一登录代理
  multiLang: true,                 // 是否启用多语言
  langs: [
    {
      label: "中文",
      langCode: "zh-hans",
      prefix: "/",
      default: true,
    },
    {
      label: "EN",
      langCode: "en",
      prefix: "/en",
    },
  ],
};

3.3 配置本地代理 (可选)

为了在本地开发时无缝对接线上 API 体验，可修改 config/proxy.config.js 配置代理转发：

const PROXY_CONFIG = [
  {
    context: ['/api', '/user', '/sites'],
    target: 'https://builder.design', // 目标服务器地址
    secure: false,
    changeOrigin: true,
  },
];

module.exports = PROXY_CONFIG;

3.4 生产环境打包

完成开发和测试后，使用以下命令构建生产版本：

npm run build

构建完成后，生成的文件即可部署至 Nginx 或其他 Web 服务器。