Создание интерактивного 3D-портфолио в игровом стиле с помощью ИИ-агентов

В этом пайплайне используется агентная платформа Verdent. Хотя она доступна для VS Code и JetBrains, рекомендуется использовать десктопное приложение из-за его лаконичного интерфейса: оно отлично подойдет тем, кто фокусируется на общей архитектуре, а не на низкоуровневом синтаксисе.

Основа этого рабочего процесса — Claude 4.5 Opus. Эта модель особенно хорошо подходит для 3D-веб-приложений: она умеет рассуждать и эффективно генерирует сложные структуры кода.

• Подключение GitHub: Подключите свой аккаунт GitHub к Verdent, чтобы агент мог автоматически работать с системой контроля версий и создавать ветки.
• Управление рабочими пространствами: Одна из самых полезных возможностей такой конфигурации — параллельная работа в нескольких рабочих пространствах. Можно разрабатывать вспомогательные инструменты, например оптимизаторы ассетов, в одной ветке и одновременно собирать основное портфолио в другой. Это помогает избежать конфликтов кода, характерных для обычных ИИ-редакторов кода.

Откройте новое рабочее пространство и дайте агенту промпт на создание локального веб-приложения на Next.js, использующего библиотеку glTF-transform. Цель — простой интерфейс «drag-and-drop», который автоматизирует следующее:

• Конвертация текстур в формат WebP.
• Оптимизация меша для уменьшения количества вершин.
• Изменение разрешения текстур максимум до 1k или 2k.

Запустите агента и дайте ему создать структуру файлов. Когда процесс завершится, вы сможете запустить локальный сервер и перетащить тяжелую модель GLB в интерфейс.

Рекомендация: Используйте текстуры 2k или 4k для высокой детализации, но убедитесь, что оптимизатор сжимает их для финальной веб-сборки — так сайт останется отзывчивым на мобильных устройствах.

Вместо того чтобы сразу переходить к коду, переключите агента в Plan Mode. Это заставит агента проанализировать требования, перепроверить собственную логику и составить план действий.

• Изучение диаграммы: Агент сгенерирует техническую диаграмму архитектуры сайта.
• Снижение сложности: По умолчанию ИИ-агенты часто предлагают многостраничные макеты. Чтобы сохранить ощущение современного игрового интерфейса, поручите агенту свести весь интерфейс к эффектному начальному экрану и основному вьюеру.

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

• Начальный экран: Лендинг с миниатюрой и кнопкой Enter Portfolio.
• Макет вьюера персонажа: Формат с разделением экрана, где 3D-персонаж занимает 60% слева, а карточка с информацией — правую часть.
• Навигация: Кнопки для переключения персонажей (влево/вправо) и система, которая автоматически подгоняет персонажа под высоту экрана.
• Визуальный стиль: Чисто черный фон, бесконечная сетка на полу, растворяющаяся вдали, и парящие частицы в виде «блесток» или «звездных точек» для глубины.

Когда агент запросит параметры, укажите следующие настройки:

• Стиль сетки: Выберите бесконечную сетку, растворяющуюся в черном цвете. Для соответствия фирменному стилю позже можно попросить изменить цвет сетки (например, на оранжевый).
• Стиль частиц: Выберите floating sparkles, чтобы создать легкое ощущение движения на заднем плане.
• Взаимодействие с пользователем: Отключите автоповорот. Персонаж должен вращаться только по действиям пользователя, чтобы управление ощущалось как в игровом меню.

Убедитесь, что модели ваших персонажей (GLB) содержат анимации бега или ожидания. Агенту нужно дать указание запускать эти анимации автоматически при загрузке персонажа.

Перейдите в папку проекта в проводнике и разместите ассеты следующим образом:

• Модели: Поместите оптимизированные файлы .glb в директорию public/models.
• Изображения UI: Поместите миниатюры или изображения профиля в папку public/images.

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

Откройте проект в браузере. Если 3D-модель кажется слишком маленькой или информационная карточка смещена, сделайте скриншот окна браузера.

Промпт со скриншотом: Загрузите скриншот агенту и подробно опишите, что нужно исправить. Например: «Правая карточка сейчас находится на чёрном фоне; перемести её поверх окна просмотра 3D-модели. Кроме того, сделай так, чтобы модель занимала всю высоту экрана, и настрой нормальный зум».

Чтобы уйти от шаблонного вида, примените кастомный брендинг:

• Брендинг: Попросите оформить интерфейс в «оранжевом стиле» под конкретные цвета бренда.
• Улучшение компонентов: Вместо простых текстовых ссылок на внешние видео попросите агента создать «карточки с миниатюрами YouTube», по которым сразу видно содержание видео.