00:00:00Дизайн с помощью ИИ становится всё лучше с каждым новым инструментом и обновлением моделей,
00:00:04но хороший дизайн не рождается из слепого доверия одной программе в надежде, что приложение само станет красивым.
00:00:09Дизайн всегда выигрывает от сочетания различных инструментов и ресурсов,
00:00:12но, что более важно, нужно использовать правильный инструмент для конкретной задачи.
00:00:16Инструмент Google для ИИ-дизайна под названием Stitch только что получил крутое обновление, которое заметно упростило создание UI.
00:00:21А Vercel недавно выпустили решение, которое превзошло расширение Claude для Chrome
00:00:26и стало моим основным инструментом для тестирования в браузере.
00:00:29Сегодня нам есть что обсудить, потому что я не ожидал,
00:00:32что такая связка выдаст настолько качественный результат.
00:00:34Google Stitch теперь доступен как MCP для подключения ИИ-агента,
00:00:39что позволяет ему создавать проекты, управлять ими и генерировать дизайн напрямую.
00:00:43С этим обновлением мне не нужно самому писать подробные промты для Stitch — теперь это делает Claude
00:00:48за меня. Доступно множество функций: управление проектами, создание новых
00:00:53и получение списка всех активных работ. Он управляет проектами через экраны списков,
00:00:57получая данные о проектах и макетах. Также агент может создавать новые дизайны по текстовому описанию.
00:01:02Процесс установки пошагово описан в их документации.
00:01:06Там требуется установка Google Cloud SDK через curl, но так как у меня Mac,
00:01:11я установил его через brew и скачал Google Cloud CLI.
00:01:14Нужно залогиниться дважды: один раз как пользователь и второй — как приложение, так как нужно
00:01:19подключиться к проекту в Google Cloud, чтобы активировать внутри него Stitch API,
00:01:24поскольку для генерации дизайна используются ресурсы этого проекта.
00:01:27Пройдя весь процесс, вы сможете подключить Stitch к любому редактору.
00:01:31Я использовал Claude Code, настроил всё внутри него, и все инструменты стали доступны.
00:01:35Кстати, кто-то уже упростил эту долгую настройку и создал Stitch MCP,
00:01:41который берет всё на себя. От установки Google Cloud до настройки проекта —
00:01:45он делает всё сам. Но это неофициальный, экспериментальный сторонний инструмент,
00:01:50хотя на данный момент работает он отлично. Что бы мы ни создавали,
00:01:54планирование перед реализацией — это ключ. Я работал над приложением для имитации технических интервью,
00:01:59причем не только технических, но и других видов собеседований,
00:02:03связанных с работой в IT. В процессе я обнаружил ряд проблем в том,
00:02:08как работает Stitch MCP и как его лучше встроить в мой процесс проектирования.
00:02:13Я сохранил все эти правила в файле Claude.md вместе с исходным кодом приложения на
00:02:18AI Labs Pro. Для тех, кто не знает: это наше сообщество, где мы собираем
00:02:23все ресурсы из этого и прошлых видео в одном месте: промты,
00:02:28готовые команды, скиллы для проектов и многое другое. Если вам полезно то,
00:02:33что мы делаем, это лучший способ поддержать канал. Ссылки в описании.
00:02:38Я предпочитаю планировать приложения в режиме plan в Claude Code, потому что он прорабатывает
00:02:43каждый аспект моей общей идеи и пишет детальный документ. Но вы можете использовать любую IDE.
00:02:48Я скормил идею приложения Claude Code в режиме планирования и попросил составить UI-гайд,
00:02:53чтобы интерфейс не выглядел как типичный шаблонный дизайн от нейросети.
00:02:58Хотя это заняло немало времени, я прошел весь процесс планирования до конца. Очень
00:03:03важно внимательно вычитывать план — мне пришлось вносить много правок,
00:03:09чтобы подогнать его под свои предпочтения. Я дорабатывал его до тех пор, пока не остался полностью доволен,
00:03:14и в итоге получил именно то, что хотел. Когда план дизайна был утвержден,
00:03:19пришло время воплощать его в жизнь. Честно говоря, мне больше нравится,
00:03:24как с дизайном справляется Gemini, а не модели Claude. Поэтому я попросил Claude взять готовый план,
00:03:29создать точный дизайн, запустив новый проект через Stitch MCP. Claude использовал инструмент MCP,
00:03:35чтобы создать проект, и начал генерировать разделы. Он идентифицировал проект по
00:03:40ID и отправил детальный промт в Stitch, который принял его и начал отрисовку.
00:03:45Первый раздел генерировался на базе Gemini 3 Flash. Мне не очень понравилось,
00:03:50что он отправлял промты для каждого блока лендинга по отдельности, а не создавал цельное полотно,
00:03:55как это обычно делается в веб-дизайне. Это могло вызвать сложности при сборке.
00:04:00Так что я попросил Claude сделать один длинный макет страницы вместо отдельных
00:04:05компонентов. В ответ Claude выдал очень подробный промт, который Stitch использовал
00:04:10для генерации всего лендинга целиком, сохранив все идеи из поблочного подхода.
00:04:15В дизайне мне особенно приглянулось использование отсылок к коду и командам терминала —
00:04:20это создает нужную атмосферу для разработчиков. Для этих же целей
00:04:25использовались комментарии в интерфейсе. Через функцию превью в Stitch я проверил UI
00:04:30на разных платформах: там уже были настроены плавные эффекты наведения.
00:04:34Дизайн был адаптивным и хорошо смотрелся и на мобилках, и на десктопе. Когда результат меня устроил,
00:04:40я решил перенести его в свой Next.js проект, который я полностью собирал через Claude Code.
00:04:45Я попросил Claude через Stitch MCP выгрузить код всего лендинга
00:04:51и внедрить его в мой только что инициализированный проект на Next.js.
00:04:56Для получения экранов использовался инструмент get screen. Он выдал ссылки на скачивание кода,
00:05:01и Claude с помощью команд curl извлек этот код. Имея на руках HTML,
00:05:06интеграция в Next.js проект прошла легко. Claude начал внедрять дизайн,
00:05:11но поначалу просто свалил всё в один файл page.tsx, не соблюдая
00:05:17правильную компонентную структуру, которая является стандартом для React-приложений.
00:05:22На время я запустил сервер разработки, чтобы посмотреть на результат. Реализованный дизайн
00:05:26почти не отличался от того, что выдал Stitch, за исключением расположения текста в шапке.
00:05:31Были перенесены все ховеры, анимации для бенто-сеток и параллакс-скроллинг фона.
00:05:36Чтобы исправить кашу в коде, я попросил Claude использовать модульную
00:05:41структуру компонентов. Он провел рефакторинг и разложил всё по чистым,
00:05:46структурированным UI-компонентам и страницам, в которых стало легко ориентироваться. С помощью
00:05:51Claude Code и Stitch я создал полноценное приложение в стиле “хакерского” терминала.
00:05:57Однако оставались мелкие проблемы с UI. Например, панель с кодом
00:06:02должна быть редактируемой, ведь именно там пользователи будут писать код во время интервью.
00:06:08Кроме того, вопрос должен быть сверху — его текущее положение портило UX.
00:06:14Для тестирования я использовал Agent Browser от Vercel. Это CLI-инструмент для ИИ-агентов,
00:06:19написанный на Rust и Node.js, что делает его значительно быстрее традиционных средств автоматизации.
00:06:24Установка простая: одна команда, и он доступен глобально в вашей системе.
00:06:29Пока он ограничен браузерами на базе Chromium и не работает в Firefox или Safari.
00:06:34Agent Browser предлагает больше возможностей, чем расширение Claude, Playwright или Puppeteer.
00:06:40Обычно расширения запускают полноценный браузер, делают скриншоты,
00:06:44анализируют пиксели и имитируют клики. В отличие от них,
00:06:50Agent Browser — это CLI-утилита, работающая через bash-команды и использующая снепшоты,
00:06:55а не скриншоты. По сути, снепшот — это дерево доступности всей страницы
00:07:00с тегами-селекторами для каждого компонента. Агент использует их для навигации.
00:07:05Он не делит сессию с вашим текущим браузером и запускается отдельно,
00:07:10поэтому не сможет выполнять действия, требующие вашей авторизации — в отличие от расширения Claude,
00:07:14которое работает прямо в вашем браузере от вашего имени. Список всех
00:07:19доступных команд можно найти в их репозитории на GitHub.
00:07:24Там показано, как перемещаться по UI, использовать селекторы, управлять мышью, куки и сетью.
00:07:30Для своего приложения я добавил файл Claude.md и прописал там инструкции
00:07:35использовать Agent Browser для любых тестов. Также я велел агенту вызывать
00:07:40команду help, если он не знает, как применить тот или иной инструмент. Эти правила
00:07:45и гайды по воркфлоу тоже доступны в AI Labs Pro. Хотя это headless-инструмент,
00:07:50его можно запустить в визуальном режиме (headed mode), чтобы видеть,
00:07:55что именно делает браузер. Я попросил Claude протестировать UI в таком режиме.
00:07:59Сначала он изучил команды через help, а затем открыл окно браузера.
00:08:05Агент использовал подход, схожий с тем, что мы советовали для Claude Browser Use:
00:08:09делал снепшот всей страницы целиком, а не кусками, как расширение для Chrome.
00:08:14Это значительно ускорило процесс тестирования без потери точности.
00:08:19Агент выполнил множество действий, проверил все разделы приложения и
00:08:24визуальную верстку на разных страницах. Весь процесс занял всего четыре минуты,
00:08:29тогда как другие инструменты потратили бы гораздо больше времени, ведь этот опирается на дерево доступности.
00:08:34К тому же, он сам подтвердил, что редактор кода должен быть редактируемым,
00:08:39и сразу же внес исправление. Затем он снова проверил это в браузере:
00:08:43сделал снепшот, нашел селектор редактора и через функции клика и набора текста
00:08:48убедился, что теперь всё работает как надо. На этом наше видео подходит к концу.
00:08:53Если хотите поддержать канал и выход подобных роликов, присоединяйтесь к
00:08:57нашему сообществу AI Labs Pro. Как всегда, спасибо за просмотр,
00:09:02и увидимся в следующем выпуске!