00:00:00Как понять, какие инструменты дизайна действительно стоят внимания, когда новые выходят каждую неделю?
00:00:04Проблема в том, что ежедневно появляются новые инструменты, обещающие качество, но большинство из них — просто хайп.
00:00:09В ходе тестирования мы нашли несколько инструментов, которые реально выполняют обещания и отлично вписываются в рабочий процесс.
00:00:15Один из наших сотрудников работал над лендингом автомобиля с 3D-анимацией в главном блоке.
00:00:21Исходный код этого сайта и все использованные функции доступны в AI Labs Pro.
00:00:25Для тех, кто не знает: это наше недавно запущенное сообщество, где вы получаете готовые шаблоны, промпты, команды и навыки для ваших проектов.
00:00:36Если вам полезно то, что мы делаем, и вы хотите поддержать канал, это лучший способ. Ссылки в описании.
00:00:42Первый шаг к созданию такого сайта — качественный ассет. Для этого я использовал Tripo3D, генератор 3D-объектов на базе ИИ.
00:00:50При регистрации я получил около 300 кредитов, чего более чем достаточно примерно для 10 генераций.
00:00:54Теперь мне нужно было изображение для конвертации в 3D.
00:00:57У меня было фото машины, но фон мешал генерации модели, так как инструментам сложно разделять планы, и я не хотел тратить кредиты впустую.
00:01:08Поэтому я удалил фон в Canva, хотя можно использовать и бесплатную альтернативу — Remove BG.
00:01:16После удаления фона я загрузил это изображение в Tripo3D в качестве референса.
00:01:21Генерация заняла около минуты, и модель очень точно соответствовала исходному изображению.
00:01:25Я проверил модель со всех ракурсов: она выглядела цельно и реалистично со всех сторон.
00:01:31Когда 3D-модель была готова, я её экспортировал.
00:01:34В бесплатном плане Tripo3D доступно всего 15 экспортов, поэтому я выбрал лучший вариант из двух попыток.
00:01:43Я выставил разрешение 4K и скачал файл.
00:01:45Затем я добавил GLB-файл в папку public своего нового приложения Next.js для быстрого доступа.
00:01:52Я выбрал формат GLB, так как он содержит текстуры и материалы в одном файле и нативно поддерживается веб-библиотеками.
00:02:04Когда файл был готов, пришло время интегрировать его в веб-приложение.
00:02:08Для создания лендинга я выбрал приложение Codex, которое недавно вышло и пока доступно только на macOS.
00:02:14Вы спросите: зачем использовать Codex, если у нас уже есть Claude Code?
00:02:19В честь запуска они предлагают расширенные лимиты и щедрые квоты даже на бесплатных планах, так что сейчас лучшее время его попробовать.
00:02:29Но вы можете использовать этот же процесс в любом удобном для вас агенте.
00:02:32Я скачал Codex и открыл в нём папку с проектом.
00:02:34Интерфейс во многом похож на менеджер агентов от AntiGravity, но больше сфокусирован на агентах, а не на коде.
00:02:40Больше всего нам понравилась функция “skills” (навыки).
00:02:43В других агентах для создания своего навыка нужно использовать сторонние инструменты с открытым кодом.
00:02:49В Codex же конструктор навыков встроен изначально, плюс есть много готовых решений, чего не было у конкурентов.
00:02:56Для упрощения 3D-анимации я использовал конструктор, подробно описав логику анимации и нужные библиотеки.
00:03:06Он задал уточняющие вопросы, запустил внутренние скрипты и создал готовый к использованию навык.
00:03:13Был один нюанс.
00:03:14Обычно агенты ставят навыки в папку .agent или .claude, но Codex сохранил его в корне, поэтому я перенес его вручную.
00:03:24При этом он следовал той же структуре, что и Claude: скрипты, ссылки и ассеты для расширения возможностей.
00:03:33Там также был yaml-файл с общим промптом, чтобы агент понимал, на какие запросы пользователя активировать навык.
00:03:40Я поручил Codex настроить анимацию с помощью созданного навыка, указав все детали в запросе.
00:03:47Он начал внедрение и запустил команды установки.
00:03:49Спустя время он закончил, но не смог поставить зависимости из-за таймаута, поэтому я попросил его просто прописать их в package.json.
00:04:01Когда я запустил установку вручную, возникли ошибки из-за конфликта версий библиотек в проекте.
00:04:08Мне пришлось несколько раз отлаживать код вместе с Codex, пока анимация в хедере не заработала как надо.
00:04:14Codex работал довольно медленно, поэтому я разбил задачу на четыре подзадачи.
00:04:21Каждая задача касалась одной функции лендинга и содержала свои цели, требования и ограничения.
00:04:28Я использовал мультиагентный режим Codex, назначив на каждую задачу отдельного агента.
00:04:32Чтобы избежать конфликтов при правке одного файла, я заставил их работать в разных ветках (worktrees).
00:04:43Почти все агенты завершили работу примерно в одно и то же время.
00:04:46Я объединил результаты: все функции заработали вместе без конфликтов и гораздо быстрее, чем если бы Codex делал это один.
00:04:55Сайт был готов, но без анимации остальные секции выглядели плоско на фоне хедера. Я решил использовать GSAP.
00:05:03GSAP — это библиотека анимации на JavaScript, которую используют профессионалы за её стабильность.
00:05:09Помня о прошлых проблемах с таймаутом, я заранее установил GSAP вручную через терминал командой npm install.
00:05:18Я дал Codex детальный промпт по добавлению анимаций, строго запретив трогать уже готовый хедер.
00:05:27Я точно указал, где и какие эффекты нужны. Выполнение заняло немало времени.
00:05:33Возникло пару мелких ошибок, которые я исправил, просто отправив сообщения об ошибках обратно в Codex.
00:05:37В итоге анимации появились во всех нужных местах, а хедер остался нетронутым.
00:05:42Анимации при скролле во всех секциях заметно оживили восприятие сайта.
00:05:48Несмотря на анимацию, сами компоненты всё ещё казались простоватыми по сравнению с 3D-блоком.
00:05:54Тогда я заглянул в Aceternity UI, так как их компоненты уже содержат крутые микро-взаимодействия и готовую анимацию.
00:06:04Я попросил Codex заменить старые компоненты на Aceternity, сохранив общую логику анимации.
00:06:10После внедрения я заметил, что добавленные градиенты не подходят к теме приложения.
00:06:14Я отправил скриншот, указав на нестыковку цветов, и Codex быстро поправил их под общую палитру.
00:06:21Однако компоненты оказались статичными, без тех самых фирменных микро-взаимодействий Aceternity.
00:06:30Я уточнил, что нужны версии с эффектами вроде наклона при наведении (tilt-on-hover), и попросил использовать их.
00:06:38После этого сайт стал по-настоящему интерактивным благодаря встроенным эффектам наведения.
00:06:44Для финального лоска я использовал пакет post-processing из публичного репозитория NPM.
00:06:51Это слой пост-обработки эффектов, который применяется при использовании React Three Fiber.
00:06:56С его помощью можно делать гамма-коррекцию и другие улучшения для достижения высококлассного результата.
00:07:01Я попросил Codex создать мягкие эффекты освещения с помощью этой библиотеки, следуя его инструкциям.
00:07:07С первого раза не получилось — разницы в визуале практически не было.
00:07:11После нескольких итераций отладки он наконец поймал нужный эффект и добавил мягкое свечение 3D-модели в хедере.
00:07:23На этом мы подошли к концу видео.
00:07:25Если хотите поддержать наш канал и выход новых роликов, воспользуйтесь кнопкой «Суперспасибо» ниже.
00:07:31Как всегда, спасибо за просмотр и до встречи в следующем видео!