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

观看演示视频

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

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

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

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

微信扫码查看更多视频

• 前端：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；

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: 应用是否是多语言；

为了体验一致，本地默认配置体验站的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