---
type: concept
title: 3D AI Website
created: 2026-08-17
updated: 2026-08-17
tags: [3d, ai-website, webgl, motion-design, design-trend, lovable, bolt]
---

## 定义

3D AI Website 是 AI Coding Agent（Lovable / Bolt / Cursor / Claude 等）输出的一种典型落地页风格：3D Property、Robot Battle Arena、Animated Backgrounds 等以三维 / 动态视觉冲击为核心的页面。它代表了 AI 生成网站从"功能性优先"向"视觉奇观优先"的演化方向。

## 核心要点

- **技术栈**：Three.js / React Three Fiber / WebGL / CSS 动效；多数 demo 配视频而非交互
- **典型场景**：Hero Section（Nexar / Aurora Onboard）、3D Property（房产）、Robot Battle Arena（游戏 UI）、Animated Backgrounds（视频素材）
- **落地节奏**：通常先有视频/动效 demo，再由 AI Agent 反推组件代码
- **视觉优先**：色彩、动效、3D 模型 > 信息密度 / 交互复杂度

## 与传统 AI 网站生成的对比

| 维度 | 传统 AI 网站 | 3D AI Website |
|------|-------------|---------------|
| 视觉风格 | 平面、Material Design、Tailwind 默认主题 | 3D、动态背景、视频嵌入 |
| 首屏停留 | 1-2 秒 | 4-8 秒（动效吸引） |
| 转化目标 | 流量、SEO、表单 | 品牌印象、agency 报价 $5000 级别 |
| 适配工具 | 任何 AI Coding Agent | Lovable / Bolt / Cursor 更擅长（Claude 也支持） |

## 代表案例

- **3D Property**（Real Estate）— 三维楼盘可视化
- **Robot Battle Arena**（Game UI）— 游戏风格 3D 界面
- **Aurora Onboard**（Sign Up）— 极光动效的登录页
- **Nexar**（Hero Section）— 3D Hero 预览
- **Animated Backgrounds** — 可复用的动效视频素材集

## 相关概念

- [[wiki/concepts/ai-website-prompts|AI Website Prompts]]（绝大多数 3D AI Website 走 prompt 复用路径）
- [[wiki/concepts/agentic-ui-generation|Agentic UI Generation]]
- [[wiki/concepts/design-md|DESIGN.md]]

## 相关实体

- [[wiki/entities/motionsites-ai|MotionSites AI]]（主推此类风格）

## 参考来源

- [[wiki/library/MotionSites AI — Official Premium AI Website Prompts|MotionSites AI — Official Premium AI Website Prompts]]