3D-дашборд погрузки фуры: один промпт в Claude Code

Как повторить

1. Откройте Claude Code и выберите модель. В исходном демо использовалась Claude Opus 5.5.
2. Подготовьте orders.csv со своими заказами: вес, габариты, клиент, номер остановки. Если файла нет, агент сам придумает тестовые данные.
3. Создайте папку для нового проекта, скопируйте промпт целиком и отправьте агенту.
4. Дождитесь, пока агент закончит. По промпту он поднимет проект на Next.js (фреймворк для веб-приложений), соберёт сцену и панели, проверит их в браузере и пришлёт ссылку на локальный сервер, то есть адрес, который открывается на вашем компьютере.
5. Откройте ссылку, перетащите груз мышкой и нажмите «Оптимизировать».

Собери веб-дашборд погрузки фур на Next.js и Three.js.
1. Сцена: склад с доком, фура с прозрачным кузовом, паллеты и коробки в реальных габаритах, погрузчик.
2. Данные: заказы из orders.csv (вес, габариты, клиент, остановка), 5 машин, 5 остановок.
3. Раскладка: груз последней остановки глубже, тяжёлое вниз, центр тяжести над осями.
4. Оси: после каждой выгрузки пересчитай нагрузку на каждую ось, перегруз подсвети красным.
5. Панели: общий вес, свободный объём, заполнение в %, таблица заказов со статусом.
6. Управление: виды 3D, сбоку, сверху; кнопка «Оптимизировать»; груз можно перетащить мышкой, цифры пересчитываются сразу.
7. Проверь в браузере, что всё работает, и пришли ссылку на локальный сервер.

Как проверить результат

На экране должна быть фура с прозрачным кузовом, паллеты в масштабе ваших габаритов, таблица заказов со статусами и панель с нагрузкой на оси. Перетащите груз: если цифры нагрузки сразу меняются, промпт отработал полностью. Если картинка не двигается и ничего не пересчитывается, агент пропустил шестой пункт. Попросите его доделать этот пункт отдельным сообщением.

Как это устроено

В промпте сразу три слоя: сцена, данные и правила погрузки. Как связать их технически, там не написано. Про нагрузку на ось всего одна строка: тяжёлое вниз, центр тяжести над осями, пересчёт после каждой выгрузки. Формулу агент выводит сам, поэтому знать её не нужно. Three.js, библиотеку для 3D в браузере, он тоже подключает сам.

Ссылки

• Claude Code: агент, который пишет весь код по промпту, работает по подписке Claude.
• Three.js: бесплатная библиотека для 3D в браузере.
• Cargo load planner: готовая демка такого дашборда с 26 паллетами на пять остановок, грузы можно перетаскивать, смотреть бесплатно.

Источник: Денис Шамсутдинов (Ai Denis, @kub_studio), Instagram.