Вспомни, как до сегодняшнего дня выглядел процесс создания пользовательского интерфейса с помощью нейросетей: ты открываешь веб-генератор или Figma, генерируешь симпатичный экран, копируешь оттуда кусок HTML или React-компонента, переключаешься в редактор кода, вставляешь код, правишь отступы, запускаешь локальный сервер, возвращаешься в браузер, видишь, что мобильная верстка поплыла… и весь этот челночный бег повторяется по кругу.
Этот раздражающий разрыв между миром визуального дизайна и средой терминального кодинга всегда казался мне главным тормозом продуктивности. Мы уже разбирали, почему Claude Code в терминале кардинально ускоряет работу именно за счет прямого доступа к файловой системе и консоли. А когда Google впервые показала Stitch CLI как мост между интерфейсами и терминальными агентами, стало ясно: эпоха бесконечного копирования сниппетов из браузера подходит к концу.
Теперь утилита Stitch CLI (@google/stitch) от лаборатории Google Labs вышла в открытый доступ, и ее можно пощупать в реальном бою. Инструмент встраивает генерацию, редизайн и аудит веб-интерфейсов непосредственно в терминальный контур автономных агентов разработки.
Что умеет утилита внутри агентного цикла
Главная фишка Stitch CLI — агент получает глаза и дизайнерские руки прямо в твоей рабочей консоли. Через команду подключения навыков утилита нативно интегрируется с Claude Code, Cursor, Gemini CLI и Google Antigravity.
Вместо того чтобы дергать внешние сервисы, агент выполняет всю цепочку действий автономно:
- Генерация каркаса по описанию: Ты просишь агента собрать адаптивную посадочную страницу или дашборд лидов. Агент вызывает Stitch CLI, генерирует семантическую разметку на HTML/Tailwind и раскладывает компоненты по файлам проекта.
- Сравнение альтернативных компоновок: Модель может за один проход сгенерировать 3–4 варианта расположения блоков и цветовых акцентов, сопоставить их и предложить оптимальную визуальную иерархию под твою целевую аудиторию.
- Двусторонняя синхронизация через снимки: Stitch умеет делать снапшот локально запущенного веб-приложения, сверять его с дизайн-системой и вносить аккуратные точечные правки в CSS и разметку без разрушения окружающей бизнес-логики.
Чистая структура генерируемого кода без тяжелых раздутых фреймворков дает мгновенный плюс к скорости загрузки, показателям Core Web Vitals и позициям страницы в поисковой выдаче.
Как запустить Stitch CLI: пошаговый рецепт
Для работы потребуется установленный Node.js версии 20 или выше (node -v).
Установка и базовая настройка укладываются в четыре простых шага:
# 1. Устанавливаем утилиту глобально через npm
npm install -g @google/stitch
# 2. Проверяем корректность установки
stitch --version
stitch status
# 3. Авторизуемся в сервисе Google
stitch login
# 4. Подключаем агентные навыки к терминальной оболочке
stitch agent-skills add --user
Если ты настраиваешь инструмент на удаленном сервере или в контуре CI/CD, вместо интерактивного логина достаточно прописать системную переменную: export STITCH_API_KEY="твой_ключ" или выполнить stitch config set apiKey "..." --global.
При формулировании задачи агенту сразу запрашивай вариативность: «Создай экран аналитики и сгенерируй три альтернативных варианта расположения карточек KPI (минималистичный список, плиточная сетка с акцентом на графики и компактная таблица)». Агент развернет варианты параллельно, позволив тебе быстро выбрать наиболее удобный.
Границы возможностей и здравый смысл
Не стоит питать иллюзий: Stitch CLI закрывает вопрос визуального каркаса (UI Scaffolding) и адаптивной верстки, но не пишет за тебя сложный бэкенд. Аутентификацию пользователей, шифрование токенов, настройку очередей в Redis и транзакции в базе данных по-прежнему нужно проектировать отдельно.
Кроме того, результат напрямую зависит от точности твоих инструкций. Если бросить модели размытое «сделай красиво», на выходе получится стерильный шаблон из нулевых. Но если задать четкую структуру блоков, сценарий взаимодействия пользователя и ограничения дизайн-системы, Stitch CLI экономит часы утомительной ручной подгонки пикселей.