年初的时候，有用 DeepSeek 做过一个仓库3D库存可视化的项目。
图片来自文章 《程序员失业指南：DeepSeek从零实现3D库存可视化系统之三》
最近在做一些系统的UX设计，有用到 Figma，忽然想到这个应用如果面对复杂和 3d 场景，其编码部分是否也能胜任？
于是我做了个程序测试，使用 Figma Make 生成一个上次的 3D 库存可视化系统。
先看下结果：
点击打开 Figma Make 的官方网站[1]，界面非常简单， 直接输入提示词发送即可开始创建。
提示词大家可以简单一点让AI自由发挥，也可以详细描述你的需求，我这里贴一个我用的详细提示词（可滚动查看完整内容）：
## 🧭 项目提示词：库存 3D 可视化系统（Next.js 15 + shadcn/ui + Three.js）
### 🎯 项目目标
创建一个纯前端运行的 **库存 3D 可视化系统**，用于在浏览器中管理商品、仓库、库区和库存，并通过 3D 场景展示实际仓储空间布局与库存状态。
---
## ⚙️ 技术栈
***框架**：Next.js 15 (App Router)
***语言**：TypeScript
***UI 库**：shadcn/ui
***样式**：TailwindCSS
***3D 引擎**：Three.js
---
## 🧩 系统模块
系统包含以下主要页面与功能模块：
### 1️⃣ 商品管理页面 `/products`
**用途：** 管理商品基础信息。
**字段定义：**
| 字段名 | 类型 | 说明 |
| ------------- | ------ | ------------ |
| `id` | string | 商品唯一ID（UUID） |
| `name` | string | 商品名称 |
| `sku` | string | 商品编码（可自动生成） |
| `category` | string | 商品分类 |
| `unit` | string | 单位（如：件、箱、托盘） |
| `image` | string | 商品图片URL |
| `description` | string | 商品描述 |
| `createdAt` | string | 创建时间 |
**界面功能：**
* 商品列表表格（支持搜索、排序、分页）
* 添加 / 编辑 / 删除商品（右侧 Drawer 或 Modal）
* 图片上传预览（Base64 存储）
* 本地保存到 IndexedDB
---
### 2️⃣ 仓库与库区管理页面 `/warehouses`
**用途：** 定义仓库、库区与货架层级结构。
**数据结构：**
interface Warehouse {
id: string;
name: string;
code: string;
location: string;
zones: Zone[];
}
interface Zone {
id: string;
name: string;
code: string;
shelves: Shelf[];
}
interface Shelf {
id: string;
name: string;
capacity: number;
position: { x: number; y: number; z: number };
}
**字段说明：**
| 实体 | 字段 | 说明 |
| -- | ------------ | ------------ |
| 仓库 | 名称 / 编码 / 地址 | 标识和地理信息 |
| 库区 | 名称 / 编码 | 逻辑划分 |
| 货架 | 名称 / 容量 / 坐标 | 3D 位置坐标，用于渲染 |
**界面功能：**
* 树状结构展示仓库 → 库区 → 货架层级
* 可展开、折叠、添加、编辑、删除节点
* 编辑货架坐标 (x,y,z) 与容量
* 支持导入 / 导出 JSON
---
### 3️⃣ 库存管理页面 `/inventory`
**用途：** 管理每个货架（Shelf）上的库存数量与对应商品。
**数据结构：**
interface InventoryRecord {
id: string;
warehouseId: string;
zoneId: string;
shelfId: string;
productId: string;
quantity: number;
}
**字段说明：**
| 字段 | 说明 |
| -- | ------------- |
| 仓库 | 关联到 Warehouse |
| 库区 | 关联到 Zone |
| 货架 | 关联到 Shelf |
| 商品 | 关联到 Product |
| 数量 | 当前库存数量 |
**界面功能：**
* 表格视图，支持筛选（按仓库 / 库区 / 商品）
* 新增 / 修改库存记录
* 支持批量导入（JSON）
* 动态计算货架剩余容量并提示超载
---
### 4️⃣ 3D 仓储可视化页面 `/visualizer`
**用途：** 通过 Three.js 以立体方式展示仓库结构与库存状态。
**功能要求：**
* 仓库、库区选择（顶部下拉框）
* 3D 场景展示当前仓库结构：
* 仓库 → 库区 → 货架立方体
* 不同颜色表示不同状态：
* 🟩 空闲（无库存）
* 🟨 部分占用（<80%）
* 🟥 满仓（≥80%）
* 鼠标交互：
* 拖拽旋转、滚轮缩放、右键平移
* 点击货架高亮并在右侧面板显示详情（容量、已占用、商品分布）
* 场景控件：
* 重置视角
* 显示 / 隐藏网格
* 切换视角（俯视、侧视）
* 动画效果：
* 鼠标点击货架时放大并闪烁
* 切换仓库或库区时平滑过渡
---
## 🧠 数据存储方案
使用浏览器端 IndexedDB（通过 [Dexie.js](https://dexie.org/)）：
* 表：`products`, `warehouses`, `inventory`
* 支持 JSON 导入 / 导出
* 应用启动时自动加载示例数据
---
## 🎨 界面风格
* 整体风格：浅色主题、卡片式布局
* 使用 shadcn/ui 的组件：
*`DataTable`, `Dialog`, `Drawer`, `Select`, `Tabs`, `Card`, `Button`, `Input`, `Textarea`
* 3D 视图容器全屏自适应 (`<canvas>` 全屏渲染)
* 响应式布局，移动端仅保留表格和统计视图
---
## 📊 首页 `/dashboard`
* 统计总览：
* 商品总数
* 仓库数
* 总货架数
* 库存总量
* 柱状图展示各仓库库存占比
* 饼图展示商品类别分布（可用 Chart.js 或 Recharts）
---
## 💾 导出 / 导入功能
* 导出当前系统数据为 JSON 文件（包含所有商品、仓库、库存）
* 支持从 JSON 文件导入数据
* 验证数据结构后更新浏览器存储
---
## 🔧 开发建议
* 每个模块单独使用 `/components/` 下的 UI 组件文件夹
* 数据管理封装在 `/lib/db.ts`
* Three.js 渲染逻辑放在 `/components/VisualizerScene.tsx`
* 配合 Zustand 或 Jotai 管理前端全局状态
---
## 🚀 可执行任务
> **请生成一个 Next.js 15 + TypeScript + Tailwind + shadcn/ui + Three.js 项目模板，包含以下页面与功能：**
>
> * `/dashboard` 仓储总览页
> * `/products` 商品管理页
> * `/warehouses` 仓库与库区管理页
> * `/inventory` 库存管理页
> * `/visualizer` 3D 可视化页（支持仓库、库区选择与交互）
> * 所有数据本地存储在 IndexedDB
> * 提供示例数据与 JSON 导入导出功能
然后系统开始工作，
很快，比你平时用 DeepSeek 或者 Claude 都要快的多的时间就生成完成了。
先简单看一下效果：
点击代码发现，他并没有完全按照我的要求代码规范来实现，而是忽略掉代码规范，仅仅关注功能的实现，比如框架的使用、目录等，均是按照 Figma 自己的规范来实现的。
大家也可以点击右上角的下载按钮，下载完整的项目代码在本地运行哦。
特点
短暂使用之后有下面三个特点促使我写这篇文章和大家分享：
-
• 快：我用了很多变成工具和大模型，这个的速度是真的快 -
• 完整：后面我会展示一下所有的页面，不仅是页面，功能也完全可用 -
• 不出错：一次生成没有出错
虽说专业领域（UI原型）模型可以独立优化和设计，比通用变成更简单，但是表现还是很惊艳。
后面有时间去研究下 Figma 到底是怎么优化的这么好的。
引用链接
[1] 官方网站: https://www.figma.com/make/
--- END ---