00:00:00Добро пожаловать в ещё один выпуск нашей серии о дизайне,
00:00:02где мы находим новые AI-инструменты,
00:00:04которые помогут вам создавать лучше с помощью искусственного интеллекта.
00:00:08С моделями типа Opus 4.5 и Gemini 3 Pro дизайн по одному запросу сделал большой шаг вперёд.
00:00:12Однако существует множество различных инструментов и рабочих процессов,
00:00:15которые мы покажем вам в этом видео и которые действительно помогают создавать потрясающие дизайны.
00:00:20ShadCN — это библиотека,
00:00:21которая предоставляет красивые,
00:00:23полностью настраиваемые и доступные UI-компоненты,
00:00:25которые идеально интегрируются с вашими проектами React и Next.js.
00:00:29Его новая функция позволяет создавать предустановки для импорта в ваш проект.
00:00:32Нажмите на «Новый проект»,
00:00:34и вы увидите примеры компонентов с одной стороны страницы и предустановки с другой,
00:00:38с которыми вы можете экспериментировать,
00:00:39пока не найдёте стиль компонента,
00:00:41который вам больше всего нравится.
00:00:43Когда вы решили,
00:00:44какой стиль импортировать,
00:00:45нажмите «Создать проект»,
00:00:46выберите фреймворк вашего проекта,
00:00:48скопируйте команду установки и вставьте её в терминал — и новый проект с предустановками будет установлен в ваш проект сразу же.
00:00:54Всегда лучше иметь готовый дизайн вашего веб-сайта перед тем,
00:00:57как обратиться к вашему AI-агенту,
00:00:59чтобы не просить агента снова и снова вносить изменения,
00:01:01которые не выглядят так,
00:01:03как вы хотели.
00:01:03Для этого Google Stitch — лучший инструмент для дизайна,
00:01:06так как теперь он поддерживает Gemini 3 Pro thinking и Nano Banana,
00:01:09интегрированные прямо для улучшения дизайнов с использованием сгенерированных изображений.
00:01:14Но прежде чем мы перейдём к дизайну,
00:01:15выбор цветовой схемы для вашего приложения — это самый важный шаг.
00:01:19Для этого лучше всего использовать Coolers — генератор цветовых палитр,
00:01:22где вы можете экспериментировать и просматривать несколько цветов рядом,
00:01:26анализируя их комбинации..
00:01:28Продолжайте регулировать,
00:01:29пока не найдёте понравившуюся палитру,
00:01:31а затем экспортируйте цветовую палитру в формате,
00:01:34который вам больше всего подходит.
00:01:36Примерно через 4 минуты UI,
00:01:37созданный Stitch,
00:01:38был очень минималистичным с чётким балансом между основными и акцентными цветами.
00:01:42Одно из новых обновлений функций Google Stitch — это возможность выбрать все экраны дизайна и создать прототип для целей тестирования.
00:01:49Прототип — это по сути демонстрация работы проекта в действии,
00:01:52будь то веб или мобильное приложение.
00:01:54Он автоматически настраивает потоки навигации,
00:01:56находит кликабельные области и создаёт полностью функциональный прототип прямо из дизайна.
00:02:00Даже если AI может создавать довольно хорошие дизайны самостоятельно,
00:02:04всегда полезно получить вдохновение из надёжного источника.
00:02:07Для этого существует множество галерей с главными секциями,
00:02:10навбарами,
00:02:10футерами и даже пользовательскими страницами 404,
00:02:13где вы найдёте творческие и привлекательные источники вдохновения.
00:02:16Ссылки на все эти ресурсы вы найдёте в описании видео ниже.
00:02:19Я использовал Superhero для вдохновения при разработке главной секции,
00:02:23дал скриншот страницы Stitch,
00:02:24чтобы воспроизвести дизайн,
00:02:26соответствующий нашему веб-сайту..
00:02:28Есть ещё одна важная новая функция.
00:02:30Google Stitch улучшил способ экспорта ваших дизайнов.
00:02:33Теперь вы можете экспортировать прямо в AI Studio,
00:02:36их AI-кодирующего агента Jules,
00:02:37или скопировать код в буфер обмена,
00:02:39но я экспортирую его как ZIP-файл и импортирую в Claude..
00:02:43При работе с под-агентами через Claude они обычно тратили много вашего времени,
00:02:46выполняя задачи для других,
00:02:48что вызывало значительные задержки.
00:02:49Claude недавно это исправил,
00:02:51дав под-агентам возможность работать в фоновом режиме.
00:02:53Я настроил Puppeteer MCP для тестирования браузера,
00:02:56что позволяет Claude тестировать UI через доступ в браузер.
00:02:58Так как тестирование браузера занимает много времени,
00:03:01вы можете запустить эту задачу в фоне и назначить агенту другую задачу.
00:03:04Таким образом,
00:03:05вы можете иметь несколько агентов,
00:03:07работающих над разными задачами одновременно,
00:03:09что лучше использует ваше время.
00:03:10Однако эти агенты будут использовать токены,
00:03:12поэтому вам нужно следить за использованием токенов и затратами.
00:03:15Вы можете запускать столько агентов,
00:03:17сколько вам нужно,
00:03:18рядом и назначать им задачи по мере необходимости.
00:03:20Каждый агент вернёт свои результаты после завершения.
00:03:23Мы подробнее расскажем об этих фоновых агентах в отдельном видео,
00:03:26так что оставайтесь в курсе.
00:03:27Claude часто борется с исправлением небольших проблем UI,
00:03:30сколько бы раз вы его ни просили.
00:03:31Именно здесь на помощь приходит действительно потрясающий инструмент под названием Drawbridge.
00:03:36Мы уже рассказывали о нём на нашем канале.
00:03:38Раньше он работал только на Cursor,
00:03:39но теперь у него есть интеграция Claude code и другие отличные обновления.
00:03:43Они даже поблагодарили нас в одном из своих релизов,
00:03:45и мы очень благодарны этому фантастическому проекту.
00:03:48Вы можете перейти на наш канал и посмотреть видео о том,
00:03:51как использовать Drawbridge,
00:03:52но они улучшили функции с момента нашего предыдущего видео,
00:03:55позволяя вам выбирать секции более точно,
00:03:57чем раньше,
00:03:57что облегчает задачу для нетехнических пользователей передать проблему.
00:04:00Они также исправили проблему со скриншотом,
00:04:02с которой мы столкнулись в прошлый раз..
00:04:06Кроме того,
00:04:06они автоматически установили команду slash для Claude code,
00:04:09которую раньше нам приходилось делать вручную.
00:04:11В целом,
00:04:12эти улучшения делают ваш рабочий процесс намного более эффективным и впечатляющим.
00:04:15После того как мы научили миллионы людей строить решения с помощью AI,
00:04:19мы начали реализовывать эти рабочие процессы сами.
00:04:21Мы обнаружили,
00:04:22что можем создавать лучшие продукты быстрее,
00:04:24чем когда-либо.
00:04:24Мы помогаем воплотить ваши идеи в жизнь,
00:04:26будь то приложения или веб-сайты.
00:04:28Может быть,
00:04:28вы смотрели наши видео и думали: «У меня есть отличная идея,
00:04:31но у меня нет технической команды,
00:04:32которая её реализует».
00:04:33Именно здесь мы вам помогаем.
00:04:35Думайте о нас как о вашем техническом попутчике.
00:04:37Мы применяем те же рабочие процессы,
00:04:39которые мы преподавали миллионам,
00:04:40прямо к вашему проекту,
00:04:41превращая концепции в реальные,
00:04:43работающие решения без хлопот,
00:04:44связанных с наймом или управлением командой разработчиков.
00:04:47Готовы ускорить воплощение вашей идеи в реальность?
00:04:49Напишите нам на hello@autometer.dev..
00:04:52На этом мы закончим это видео.
00:04:53Если вы хотите поддержать канал и помочь нам продолжить создавать видео вроде этого,
00:04:57вы можете сделать это,
00:04:58используя кнопку «Super Thanks» ниже.
00:05:00Как всегда,
00:05:01спасибо за просмотр,
00:05:02и до встречи в следующем видео..