web-builder

信使 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 · Web Builder Skills · 信使小程序 · 文档 · 知乎 · Docker 部署

观看演示视频

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

web builder

Builder 预览

Builder Pro 预览

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

Web Builder Skills

Web Builder Skills 是为 Web Builder 提供的 Claude Code 技能包，覆盖 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
• 编辑器：tiptap, 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 run precompress）
• npm test — 单元测试（Vitest，覆盖 src/** 下除 src/server/** 外的所有 spec）
• npm run test:server — 服务端单元测试（src/server/**，经根目录 vitest.config.ts 运行）
• npm run test:watch — 单元测试 watch 模式
• npm run lint — ESLint 代码检查（flat config）
• npm run e2e — 端到端测试（Playwright）
• npm run e2e:ui — Playwright UI 模式
• 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',
      default: true,
    },
    {
      label: 'EN',
      langCode: '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: 多语言开关及语言列表配置（默认语言不带前缀，其余语言以 langCode 作为路由前缀）；
• 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

上线前检查：扫描线上内容的 Tailwind class

Tailwind 的 safelist 已从全量颜色矩阵收敛为「布局 pattern + 历史精确类清单」（config/tailwind.safelist.json），线上 CMS 内容若用到清单之外的颜色类，构建产物中将没有对应样式。发布前请扫描一次线上内容。

第一步，在 Drupal 侧导出 builder 内容。node 侧的 landing_page（页面）、json（页头/页脚品牌配置）、component（自定义组件）都把页面 JSON 存在 body 字段；前台展示的区块（自定义区块 block_content，如首页区块）同样把 JSON 存在 body 字段。

$(drush sql:connect) -q -C -B -N --max-allowed-packet=1G \
  -e "SELECT body_value FROM node__body WHERE bundle IN ('landing_page','json','component') AND deleted = 0" \
  | gzip > prod-content.txt.gz
$(drush sql:connect) -q -C -B -N --max-allowed-packet=1G \
  -e "SELECT body_value FROM block_content__body WHERE deleted = 0" \
  | gzip > prod-blocks.txt.gz

第二步，处理结果。全部缺失类会自动并入 config/tailwind.safelist.json（group/peer 这类无 CSS 的标记类自动排除），再正常重跑一次确认 OK：

node scripts/scan-content-classes.mjs --fix prod-content.txt.gz prod-blocks.txt.gz

新内容的颜色请写在组件的 <style> 块或行内 style 中，不要再依赖调色板工具类，避免清单再次膨胀。

最后

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