信使 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

Builder 预览

Builder Pro 预览

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

信使 Mini 小程序

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

相关视频演示

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

微信扫码查看更多视频

对应版本

技术选型

• 前端：Angular 20 (standalone components、signals、zoneless change detection、incremental hydration) + Angular Material + TailwindCss
• SSR：@angular/ssr + Express
• 动态表单：ngx-formly
• web 动画：aos 页面滚动动画，gsap 细粒度定制化动画
• 图表：Echarts
• 视频：Video.js
• 日历：FullCalendar
• 编辑器：quill, jsoneditor, monaco-editor
• 幻灯片：swiper
• 图片画廊：lightgallery
• 字体图标：material design icons + 自定义 svg icon
• 加密：crypto-js
• 工具函数：lodash-es、dayjs
• Drupal JSON:API 查询：drupal-jsonapi-params
• 认证：OAuth2 (Drupal simple_oauth)
• web 服务：Nginx
• 后端：Drupal(推荐)，通过 Drupal 的 views 视图可灵活配置动态组件、动态 api；

开发指南

安装 npm install

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

常用命令

• npm start — 本地开发服务（自动通过 config/proxy.config.js 代理 API 到 https://base.builder.design）
• npm run build — 生产环境打包（ng build --configuration production）
• npm test — 单元测试（Karma + Jasmine）
• npm run lint — ESLint 代码检查（flat config）
• npm run e2e — 端到端测试（Protractor）
• npm run serve:ssr:xinshi — 运行 SSR 构建产物（node dist/server/server.mjs）

提交时 husky 会触发 lint-staged，自动用 ESLint 修复 *.ts/*.html，并用 Prettier 格式化 *.md。

开发环境设置

// src/environments/environment.ts
export const environment: IEnvironment = {
  apiUrl: 'http://localhost:4200',
  production: true,
  port: 4200,
  multiLang: true,
  langs: [
    {
      label: '中文',
      langCode: 'zh-hans',
      prefix: '/',
      default: true,
    },
    {
      label: 'EN',
      langCode: 'en',
      prefix: '/en',
    },
  ],
  oauth: {
    clientId: 'pd1DDpR9atXvciFn3Wt7jLsCweLXv0JCC8k1-9XNJTw',
    tokenUrl: '/oauth/token',
    authorizeUrl: '/oauth/authorize',
    redirectPath: '/me/login/callback',
    logoutPath: '/user/logout',
    scope: 'webmaster',
  },
};

• apiUrl: 整个应用的 Base api 参数；
• production: 为 false 时页面内容 api 调用本地 json 文件，true 时调用线上接口；
• port: 自定义 Node 端口；
• multiLang / langs: 多语言开关及前缀路由配置；
• oauth: 基于 Drupal simple_oauth 的 OAuth2 认证配置（授权码模式）。

本地开发环境 Proxy 代理

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

const PROXY_CONFIG = [
  {
    context: [
      '/en/api',
      '/api',
      '/oauth',
      '/session',
      '/user',
      '/sites',
      '/admin',
      '/manage',
      '/system',
      '/core',
      '/libraries',
      '/modules',
      '/themes',
      '/webform_rest',
      '/media-library',
      '/views/ajax',
      '/editor',
      '/export',
      '/print',
      '/wechat',
      '/media',
      // ...更多 Drupal 路径
    ],
    target: 'https://base.builder.design',
    secure: false,
    changeOrigin: true,
  },
];

module.exports = PROXY_CONFIG;

为生产环境打包

npm run build

最后

• QQ 交流群：1176468251
• 感谢 LINUX DO 的支持
• 如果觉得这个项目对您有所助益，请帮忙点个 star