web builder

AI 驱动 UI 生成和发布的低代码平台，基于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.

biaogebusy
466
80
TypeScript

logo

信使 Web builder
AI 驱动 UI 生成和发布的低代码平台


AI 驱动 UI 生成和发布的低代码平台，基于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 · 信使小程序 · 文档 · 知乎 · English

观看演示视频

logo

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

web builder

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

Builder 预览
swiper layout
title widget
animate layout
swiper layout

Builder Pro 预览

基于 DeepSeeek 可优化文案、翻译、图表、思维导图、创建组件和一句话生成页面，未来还有更多智能体，欢迎体验。
chat-entry chat-tailwind
chat-chart chat-mermaid

信使 Mini 小程序

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

logo

相关视频演示

logo

微信扫码查看更多视频

对应版本

Web builder Angular Node TS
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 [email protected]: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

Star History Chart