00:00:00Ваши ИИ-агенты теперь довольно неплохо справляются с дизайном.
00:00:02Сейчас у них нет тех проблем, когда в созданных ими сайтах что-то ломалось.
00:00:06Но так как все модели обучались на одних и тех же данных, их дизайн всегда
00:00:10слишком похожий и шаблонный.
00:00:11Даже моделям Claude нужен специальный промпт, чтобы они не совершали эту ошибку.
00:00:15Google Stitch — это инструмент, созданный специально для дизайна, и он может
00:00:19напрямую подключаться к вашему рабочему процессу в Claude Code.
00:00:21В этом видео мы разберем 4 способа использования Stitch с Claude Code, чтобы
00:00:26ваши приложения не выглядели как любой другой сайт, созданный ИИ.
00:00:30В новом обновлении Stitch использует систему дизайна для построения интерфейса,
00:00:34и эти системы основаны на функциях, формирующих UI-гайд для сайтов,
00:00:38включая такие поля, как цвета, темы, шрифты и многое другое.
00:00:41Эти функции фактически формируются с помощью файла design.md.
00:00:45Этот файл также делает дизайн переносимым от одного агента к другому.
00:00:49Вы можете перенести этот файл design.md любому агенту, с которым внедряете дизайн,
00:00:54и он идеально подберет всю стилистику оформления.
00:00:56Это работает потому, что файл специально адаптирован под агентов.
00:00:59Он содержит точный язык, чтобы они могли легко уловить дизайнерский замысел.
00:01:04Он также визуализирует все дизайн-системы на экране, так что вам не нужно
00:01:08интерпретировать стиль только по тексту.
00:01:10Вы можете понять, как будет выглядеть приложение, просто взглянув
00:01:14на сочетание цветов и шрифтов рядом друг с другом.
00:01:16Когда вы создаете что-то в Stitch, первым делом инструмент создает
00:01:21файл design.md и систему дизайна.
00:01:22Даже если вы явно не указывали этого в своем промпте.
00:01:25Как только дизайн-система зафиксирована, при создании любого сайта
00:01:30она обеспечивает единообразие на разных страницах и при перегенерации.
00:01:32Это решает главную проблему, которая была при работе со Stitch, так как
00:01:36раньше он не мог так хорошо поддерживать целостность дизайна, как сейчас.
00:01:39Но вместо того, чтобы полагаться на систему, которую Stitch создает сам,
00:01:43вы можете создавать свои собственные дизайн-системы.
00:01:45Вы можете настроить тему под свои требования или просто загрузить
00:01:49файл дизайна, и он автоматически применит его как дизайн-систему
00:01:53и визуализирует его для вас.
00:01:54Важно убедиться, что любой используемый вами файл design.md
00:01:58имеет правильную структуру.
00:01:59Эта структура оптимизирована для агентов, особенно для Stitch, и помогает
00:02:04им эффективно понимать ваши намерения.
00:02:06Часто мы обсуждаем идеи приложений с Claude или другими агентами.
00:02:09Так что, если вы хотите создать дизайн на основе этих обсуждений в Stitch,
00:02:13вы можете перенести стиль в Stitch в виде файла design.md.
00:02:17Вы можете дать Claude структуру файла дизайна, которую можно взять
00:02:21в официальном репозитории навыков от Google, связанных со Stitch.
00:02:25В примерах вы найдете шаблон файла дизайна, оптимизированный для Stitch.
00:02:29Какого бы агента вы ни использовали, предоставьте ему желаемый стиль сайта
00:02:33вместе с шаблоном, чтобы он сгенерировал design.md на основе шаблона,
00:02:38строго следуя руководству по стилю.
00:02:39Когда ваш агент создаст подробный файл design.md, вы можете перенести его в Stitch
00:02:44и просто вставить в раздел design.md при создании новой дизайн-системы.
00:02:48Как только вы нажмете «Save Design», программа создаст визуализацию этого дизайна.
00:02:52После этого вы сможете попросить Stitch реализовать интерфейс,
00:02:56используя созданную дизайн-систему в качестве основы.
00:02:59Stitch внедрит дизайн, который отражает вашу систему, в точности передавая
00:03:03стиль из файла design.md.
00:03:05Используя такие системы, вы можете итеративно создавать сколько угодно страниц,
00:03:10и каждая из них будет выдержана в едином стиле.
00:03:12Если у вас уже есть проекты в Stitch и вы хотите извлечь из них design.md,
00:03:16вы можете сделать это с помощью навыков, созданных Google.
00:03:19Навык design.md конвертирует проекты Stitch в файл design.md
00:03:25согласно шаблону, оптимизированному под рабочий процесс Stitch.
00:03:28Также, если вам нравится наш контент, не забудьте нажать кнопку «Hype»,
00:03:32это помогает нам делать больше видео и охватывать больше людей.
00:03:35Возможности Stitch впечатляют, но в реализации качественного UX
00:03:39для узкоспециализированных сайтов все еще есть пробелы.
00:03:42Не всегда лучше проектировать все с нуля.
00:03:44Существующие сайты строятся на паттернах, которые работают в их нише,
00:03:48поэтому подражание этим паттернам помогает создать сайт, который
00:03:53действительно будет удобен вашим пользователям.
00:03:54Раньше при работе с ИИ мы давали скриншот и просили
00:03:58инструмент дизайна скопировать его.
00:04:00Он пытался в точности повторить макет, компоненты и всё остальное.
00:04:04Но новое обновление Stitch всё изменило.
00:04:06С функцией редизайна в Stitch вы всё так же даете скриншот, но теперь
00:04:10инструмент не копирует его в лоб.
00:04:11Он использует этот скриншот как руководство по стилю.
00:04:12Он извлекает паттерны, расположение компонентов и язык дизайна из референса
00:04:17и применяет это к вашему собственному сайту.
00:04:18Таким образом, вы создаете нечто оригинальное на базе проверенного паттерна.
00:04:22Чтобы использовать функцию редизайна, вам нужен скриншот.
00:04:25Но делать скриншоты по секциям — это слишком долго.
00:04:28Вместо этого используйте расширение вроде GoFullPage для скриншота всей страницы,
00:04:33чтобы предоставить стилистический референс за один раз.
00:04:35Когда вы даете скриншот сайта, дизайн которого хотите воссоздать, Stitch
00:04:39использует его как образец стиля и расположения элементов для создания UI,
00:04:44похожего на тот, что на картинке.
00:04:45Он задействует возможности генерации изображений Nano Banana для создания
00:04:50картинок в разных секциях, соответствующих стилю интерфейса.
00:04:51Есть и другие способы скопировать стиль с другого сайта.
00:04:54Вы можете перенять стиль всего сайта, скопировав ссылку, а затем в разделе
00:04:59дизайн-систем импортировать дизайн с любого сайта в формате design.md.
00:05:03Просто укажите ссылку, и он импортирует дизайн-систему, просканировав сайт
00:05:06и получив его стиль и типографику.
00:05:09Но бывает так, что Stitch не совсем улавливает задуманный вами стиль.
00:05:12В таких случаях можно просто загрузить черновой набросок или вайрфрейм
00:05:17с тем стилем, который вам действительно нужен.
00:05:18Вы также можете указать тему дизайна, которую хотите использовать.
00:05:21С учетом референсов и темы интерфейс, созданный Stitch, будет точно
00:05:26соответствовать вайрфрейму и стилю, отвечая всем вашим требованиям.
00:05:31А если вы захотите что-то конкретное изменить, это можно сделать
00:05:34с помощью функций аннотирования и редактирования в Stitch.
00:05:36Вы можете пометить часть, которая вам не нравится, описать, как её изменить,
00:05:40нажать «Apply», и он внедрит нужный вам стиль.
00:05:42Но прежде чем продолжить, пара слов от нашего спонсора.
00:05:45Uptime Robot.
00:05:46Вы строите проекты на ИИ-API: OpenAI, Anthropic и так далее.
00:05:49Всё выглядит нормально, статус 200 OK, но ответ — полная ерунда.
00:05:52Ваше приложение ломается, и вы узнаете об этом только из жалоб пользователей.
00:05:56Тут на помощь приходит Uptime Robot.
00:05:57Он замечает проблему раньше них.
00:05:59Он опрашивает ваши API, проверяя реальный ответ, а не только код статуса,
00:06:04и мгновенно уведомляет вас в Slack, на почту или где вам удобно.
00:06:06Мониторьте эндпоинты ИИ, отслеживайте лимиты API и ловите ошибки
00:06:10до того, как они превратятся в тикеты техподдержки.
00:06:12Вы даже получаете публичные страницы статуса с аптаймом и историей инцидентов.
00:06:16Настройка занимает секунды.
00:06:18Добавьте эндпоинт, укажите ожидаемый ответ, выберите уведомления — и готово.
00:06:21Есть бесплатный тариф с 50 мониторами для пробы.
00:06:24Мониторинг API стоит всего 7 долларов в месяц — дешевле, чем хостить самому.
00:06:28Используйте код "AI Labs" для скидки 10%, действует до конца года.
00:06:32Переходите по ссылке в закрепленном комментарии и начинайте работу.
00:06:35Еще один способ разработки — соединение возможностей Stitch
00:06:40с вашим текущим агентом, например Claude Code или любым другим с поддержкой навыков.
00:06:44Google разработала множество навыков для этой цели, которые дают
00:06:48агенту дополнительные возможности при работе со Stitch.
00:06:51Вы можете установить любой нужный навык, следуя шагам в репозитории.
00:06:54Самый важный для рабочего процесса — навык Enhance Prompt.
00:06:58Он превращает ваши расплывчатые промпты в оптимизированные для Stitch,
00:07:02делая их именно такими, какие Stitch понимает лучше всего.
00:07:05Он содержит базу ключевых слов, так как Stitch полагается на прилагательные
00:07:09для определения настроения, а не на точные описания дизайна.
00:07:12Кроме того, есть навык для создания полноценных сайтов под названием Stitch Loop.
00:07:16Он позволяет агенту использовать инструменты разработчика Chrome и итеративно
00:07:20строить сайт в Stitch, используя автономный цикл, описанный в промпте.
00:07:23Идея в том, чтобы правильно отслеживать промпты и передавать их с одного этапа на другой.
00:07:28Поскольку эти навыки управляют всем сами, это максимально близко
00:07:32к созданию приложения «в один клик».
00:07:33Но перед использованием навыков убедитесь, что Stitch MCP подключен,
00:07:38так как именно его Stitch использует внутри для создания и получения дизайнов.
00:07:41На канале есть видео с процессом установки MCP и решением типичных
00:07:46проблем при установке, можете посмотреть.
00:07:49Когда вы экспортируете дизайн из Stitch через MCP или код, обычно получается
00:07:53огромный HTML-файл, где всё свалено в кучу.
00:07:56Так как большинство приложений на React имеют компонентную структуру,
00:08:01агентам становится сложно переносить этот HTML в React.
00:08:03Чтобы упростить это, используйте навык React component.
00:08:06Он конвертирует дизайн Stitch в модульные компоненты с проверкой метрик.
00:08:10Он использует скрипты для валидации и получения дизайнов для удобного маппинга.
00:08:15В этом процессе вы можете создать файл Clod.md со списком нужных шагов.
00:08:20Нужно соблюдать следующий порядок.
00:08:21Сначала навык Enhance prompt переводит ваши общие фразы в точные промпты,
00:08:26чтобы Stitch правильно воспринял вводные данные.
00:08:28Затем с помощью Stitch loop должен строиться сам дизайн.
00:08:31После завершения сборки нужно внедрить дизайн в приложение через React-компоненты.
00:08:35Когда вы даете промпт для лендинга, который хотите создать,
00:08:39процесс пойдет по инструкциям, изложенным в Clod.md.
00:08:41Сначала загрузится навык Enhance prompt, который сгенерирует улучшенный промпт,
00:08:45используя доступные инструменты.
00:08:47Когда промпт готов, он спросит ваше разрешение на следующий шаг.
00:08:50После одобрения загрузится навык Stitch loop и через Stitch MCP создаст проект.
00:08:56Затем он отправит улучшенный промпт в Stitch, который сначала
00:09:00сгенерирует дизайн-систему, а затем и сам дизайн.
00:09:04Для работы с изображениями используется генерация картинок как часть процесса.
00:09:08Когда дизайн готов, он переходит к созданию структуры компонентов
00:09:12с помощью навыка React component, оптимизируя всё под ваш фреймворк.
00:09:18Запустив сервер разработки, вы увидите, что приложение в точности
00:09:22копирует дизайн из Stitch, включая эффекты наведения на кнопках,
00:09:26что делает этот процесс создания функциональных приложений намного быстрее.
00:09:28Файл Clod.md, использованный здесь, и все ресурсы доступны в AI Labs Pro.
00:09:34Туда входят материалы из этого ролика и всех предыдущих, которые вы
00:09:38можете скачать и использовать в своих проектах.
00:09:40Если вы цените то, что мы делаем, и хотите поддержать канал,
00:09:43это лучший способ.
00:09:44Ссылка в описании.
00:09:46Разработка с нуля — не всегда лучшая идея, и это касается компонентов тоже.
00:09:50Интерфейс на обычных React-компонентах слишком статичен и зациклен на внешнем виде,
00:09:54поэтому требуется много сил, чтобы добавить интерактив и анимацию.
00:09:58Вместо этого стоит использовать UI-библиотеки,
00:10:02так как в них уже встроены функции взаимодействия,
00:10:07которые сделают ваш интерфейс более живым.
00:10:08Для этого Google предоставляет навык ShadCN UI, который помогает
00:10:13перенести приложение из Stitch на компоненты ShadCN.
00:10:16Этот навык — подробное руководство по правильному внедрению
00:10:21этих компонентов во всем приложении.
00:10:22Поскольку ShadCN поддерживает работу с разными реестрами, вы можете расширить
00:10:26его возможности еще сильнее, интегрируя их функции.
00:10:30Но рекомендуется заранее настроить ShadCN MCP, чтобы
00:10:35рабочий процесс шел гладко.
00:10:36Также стоит создать файл Clod.md с инструкциями,
00:10:41чтобы при использовании Stitch MCP он автоматически применял навык ShadCN
00:10:47для преобразования дизайна в компоненты.
00:10:48Вы можете указать, какие именно реестры использовать в вашем проекте.
00:10:52Например, при создании сайта мы выбрали Glassmorphism и Motion Primitives,
00:10:57потому что их компоненты выглядят премиально.
00:11:00Вы можете выбрать то, что лучше подходит для ваших нужд.
00:11:03Если у вас уже есть готовый интерфейс в Stitch, вы можете превратить его
00:11:07в приложение с компонентами ShadCN.
00:11:08Вам нужно указать название проекта, который вы хотите внедрить,
00:11:12и попросить реализовать его в приложении.
00:11:13Сначала он найдет проект по названию, загрузит навык ShadCN UI и использует
00:11:18инструменты ShadCN MCP вместе с выбранными реестрами,
00:11:23чтобы полностью собрать приложение.
00:11:24После этого приложение будет выглядеть в точности как в Stitch,
00:11:27но будет построено на базе компонентов ShadCN UI.
00:11:29Это огромная разница, так как приложение, созданное за один проход,
00:11:34становится гораздо интерактивнее благодаря легкости реализации.
00:11:36На этом наше видео подходит к концу.
00:11:38Если хотите поддержать канал и помочь нам выпускать такие ролики,
00:11:42вы можете сделать это с помощью кнопки «Super Thanks» внизу.
00:11:44Как всегда, спасибо за просмотр, и увидимся в следующем видео.