Aipro - AI 聊天机器人移动应用 HTML 模板 preview 1

Aipro - AI 聊天机器人移动应用 HTML 模板

bookmark

AIPRO 是一款基于 Bootstrap 5 和 jQuery 的静态 AI 聊天机器人移动端 UI 模板，采用纯 HTML/CSS/JS 构建，无需构建工具即可直接使用。模板包含启动页、侧边菜单、个人资料页面及 AI 助手、搜索、历史记录等业务页面，适合快速搭建 AI 助手类产品原型或落地页。

HTML

项目简介

AIPRO 是一款基于 Bootstrap 5 和 jQuery 的静态 AI 聊天机器人移动端 UI 模板，采用纯 HTML/CSS/JS 构建，无需构建工具即可直接使用。模板包含启动页、侧边菜单、个人资料页面及 AI 助手、搜索、历史记录等业务页面，适合快速搭建 AI 助手类产品原型或落地页。

技术栈

  • HTML5 + Bootstrap 5（响应式布局）
  • jQuery 3.6 + jQuery UI
  • Swiper 轮播组件
  • GSAP 动画引擎
  • CSS 变量 + 暗色/亮色模式切换
  • Google Fonts（Plus Jakarta Sans）

项目结构

text
aiprohtml-10/
├── Aipro Main file/
│   └── Aipro Main file/
│       ├── index.html          # 首页（主入口）
│       ├── page.html           # 页面列表展示
│       ├── assets/
│       │   ├── css/            # 样式文件（含 common/animations/welcome 等）
│       │   ├── images/         # 图片资源
│       │   ├── js/             # 脚本（含 script.js）
│       │   └── svg/            # SVG 图标
│       ├── components/
│       │   └── splash-screen.html  # 启动页组件
│       └── pages/              # 业务页面
│           ├── ai-assistants.html
│           ├── history.html
│           ├── home.html
│           ├── search-result.html
│           └── search.html
└── documentation/               # 官方文档

核心文件说明

  • index.html — 主入口页面，含顶部菜单栏、启动页动画与侧滑菜单
  • assets/css/common.css — 全局通用样式（含暗色模式变量与布局工具类）
  • assets/js/script.js — 主要交互脚本（菜单切换、模式切换等）
  • components/splash-screen.html — 启动页组件，可独立预览
  • pages/home.html — 首页概览，仪表盘式布局
  • documentation/index.html — 官方文档说明页

快速开始

  1. 直接在浏览器打开 Aipro Main file/Aipro Main file/index.html
  2. 或使用任意本地服务器（如 npx serve 或 Live Server 插件）访问目录

使用建议

模板为纯静态页面，所有页面均为 .html 文件，适合作为前端原型直接二次开发。页面间通过相对路径引用 assets，部署时请保持目录结构不变。暗色模式通过 CSS 变量实现，可直接修改 :root 中的变量值自定义主题色。

help_outline

常见问题