Безумные навыки дизайна Claude, которые нужны для создания красивых сайтов
AAI LABS
Computing/SoftwareInternet Technology
Transcript
00:00:00Существует множество навыков, позволяющих создавать красивые сайты с помощью ИИ, и каждый из них
00:00:04уникален, но далеко не все они работают. У некоторых сложный рабочий процесс, который кажется впечатляющим,
00:00:09а в итоге они все равно создают сайт, похожий на любые другие. Лишь немногие из них
00:00:13действительно дают результат. Вы можете подумать, зачем вообще нужны эти навыки,
00:00:17ведь модели и так достаточно мощные и отлично справляются с дизайном. Но каким бы мощным
00:00:22ни была модель, каждая из них следует своему шаблону при проектировании, и этот шаблон легко
00:00:26заметить. Именно поэтому вам нужно что-то, что отведет их от этого шаблона и действительно выделит
00:00:30сайт выделялся. Теперь эти навыки развивают люди, имеющие большой опыт в дизайне,
00:00:36которые переупаковали проверенный и эффективный для них рабочий процесс в многоразовый формат,
00:00:41чтобы вы тоже могли им воспользоваться. Если вы здесь впервые — добро пожаловать. Мы софтверная компания,
00:00:46это AI Labs, и в этом видео мы разберем навыки, которые мы протестировали и которые действительно дали результаты.
00:00:51Прежде чем начать, стоит отметить, что вам не нужно добавлять навыки в сам Claude design. Те навыки,
00:00:55которые вы добавляете в настройки Claude, можно использовать и в Claude design. Так что вы просто добавляете навык
00:01:00через настройки Claude. И хотя мы используем эти навыки в Claude design, они будут работать и с Claude
00:01:05Code, Codex или любым другим агентом, которым вы пользуетесь, давая тот же результат. Первый набор навыков,
00:01:10о котором мы поговорим — это навыки от Эмиля Ковальски (Emil Kowalski). Здесь представлено не один, а сразу девять навыков,
00:01:15и каждый из них изменяет определенную часть дизайна. Это те самые навыки, которые мы сами используем,
00:01:20когда работаем над дизайном, будь то в Claude code или в Claude design. Здесь много навыков,
00:01:25и каждый из них ориентирован на свою область дизайна. Среди них есть Apple design, который содержит все принципы
00:01:30дизайна, используемые Apple в собственных продуктах, и делает их доступными для других сайтов.
00:01:35Также есть навык анимационного словаря, который по сути превращает ваше туманное описание анимации
00:01:40в точные слова, понятные модели. Вы можете добавить сколько угодно навыков, но есть два из них,
00:01:45которые мы используем чаще всего из-за того, насколько сильно они расширяют возможности Claude design.
00:01:50Один из них — это навык проектирования интерфейсов Эмиля (emil design engineering), который содержит инструкции по созданию красивых
00:01:55UI-компонентов и добавлению анимации к ним, что делает его лучшим выбором для старта дизайна.
00:02:00Второй используемый нами навык — animate. Он содержит полный рабочий процесс для добавления анимации
00:02:05на уже созданный сайт с подробным пошаговым процессом. Чтобы их использовать, их нужно добавить в Claude,
00:02:10и после этого вы можете применять их внутри Claude design. Для этого вы вводите слеш и название навыка,
00:02:15а в промпте указываете, какой сайт вам нужен. Поскольку дизайн еще не был создан, мы сначала использовали
00:02:20навык проектирования интерфейсов от Эмиля. Затем он подгружает навык, но перед созданием чего-либо задает вам
00:02:25вопросы о приложении точно так же, как это делает Claude design самостоятельно. Когда вы на них отвечаете, он строит дизайн.
00:02:30Первая версия от Claude design выглядит минималистично и монотонно, однако полученная анимация
00:02:35выглядела не слишком отполированной и местами выбивалась из синхронизации. Именно здесь в дело вступает навык animate,
00:02:40поскольку он дорабатывает анимацию на уже готовых веб-сайтах. Этот навык понимает, как работает сайт,
00:02:46и определяет, чему нужны движения, а чему нет. После того как Claude завершил внесение изменений, анимация сайта
00:02:51значительно улучшилась. Движения синхронизировались со скроллом, и все стало выглядеть более осознанно
00:02:56по сравнению с тем, что было раньше. Вы можете подумать, что это не сильно отличается от того, что обычно выдает Claude,
00:03:01но это потому, что речь шла о лендинге. Хотя он действительно улучшил совсем маленькие и тонкие анимации,
00:03:06основной стиль анимации, хорошо смотрящийся на посадочных страницах — это анимация на основе прокрутки,
00:03:11и мы подробно рассматривали навыки для этого в предыдущих видео. Однако по-настоящему этот навык раскрывается
00:03:16при работе с мелкими элементами функциональной стороны приложений. Например, мы работали над сайтом ресторана
00:03:21и использовали навык animate для добавления анимаций, что сделало использование сайта гораздо приятнее:
00:03:26появились крошечные анимации при отправке формы и всплывающая при наведении графика.
00:03:32Все эти детали в совокупности сделали сайт намного более интерактивным и улучшили пользовательский опыт.
00:03:37Вы можете добавить сколько угодно навыков Эмиля, поскольку каждый из них станет значительным дополнением
00:03:42к вашему арсеналу дизайна. Теперь перейдем к следующему — навыку garden от Конарда Ли (Conard Lee),
00:03:47который также представляет собой коллекцию, а не отдельный навык. В нем содержится пять навыков,
00:03:52охватывающих такие области, как видеопрезентации и изображения, но важнейший среди них — навык веб-дизайнера
00:03:57инженера (web design engineer), поскольку он содержит инструкции о том, как проектировать на уровне первоклассного дизайнера-инженера.
00:04:02Этот навык сфокусирован исключительно на создании потрясающего визуального оформления, а не функционала.
00:04:07Принцип работы заключается в том, что он принимает ваши требования и прорабатывает их вместе с вами до тех пор,
00:04:12пока не станет ясно, чего именно вы хотите, после чего ищет реальные образцы дизайна для ориентира.
00:04:17Его главный постулат: хороший дизайн никогда не создается из пустоты, точно так же, как любая работа вдохновлена
00:04:22тем, что было до нее. Он также опирается на решения, которые успешно зарекомендовали себя ранее.
00:04:27Этот навык включает набор справочных материалов по различным аспектам дизайна. Они охватывают оценку качества,
00:04:32типичные ошибки проектирования и стилевые рецепты для известных сайтов вроде Apple и Linear,
00:04:38поэтому он может анализировать их работу в процессе создания вашего сайта. Добавив его в Claude Design,
00:04:44вы используете его с помощью промпта с описанием задуманного. Полученный сайт оказался гораздо интереснее
00:04:49того, что Claude Design выдает самостоятельно. Он был более продуманным и качественным с точки зрения дизайна,
00:04:55чем версия, которую Claude Design сделал бы без него. Если у вас уже есть дизайн и вы запускаете этот навык,
00:05:01он проверяет его и выставляет оценки по различным критериям. Вы можете продолжать дорабатывать дизайн
00:05:08и запускать проверку снова и снова, пока он не наберет идеальный балл и не совпадет с вашей задумкой.
00:05:13Но прежде чем мы перейдем к другим навыкам, подпишитесь на канал и нажмите кнопку лайка.
00:05:18Этот небольшой жест поддержки очень важен для нас.
00:05:22Следующий навык, о котором мы поговорим — это AI design от Elia Design, и на этот раз это отдельный навык, созданный для лендингов.
00:05:30Все его функции помещаются в одном файле, а его задача — превратить вашу идею в визуальную систему, то есть свод правил,
00:05:37которым следует все на странице, включая цвета, типографику и отступы.
00:05:41Этот навык представляет собой специализированную комплексную систему для проектирования действительно стоящих лендингов.
00:05:46Идея в том, что посадочная страница — это не домашняя страница. Главная страница пытается обслуживать много разных людей одновременно.
00:05:53Но у лендинга есть лишь одна задача — побудить людей к конкретному действию.
00:05:57Модели склонны создавать рабочие домашние страницы, но они не специализируются на создании лендингов так, как этот навык.
00:06:03Поэтому он выстраивает структуру страницы вокруг того самого действия, которое должен совершить посетитель, концентрируя на нем всё внимание.
00:06:12Он также поддерживает единый визуальный стиль и учитывает другие аспекты веб-дизайна, упускаемые большинством моделей, включая удобство поиска сайта.
00:06:22Установив его в навыки Claude, вы запускаете его с промптом каждый раз, когда вам нужен дизайн.
00:06:27Он также сначала задает вопросы, а ответив на них, вы начинаете проектирование.
00:06:31Получившийся сайт ощущался как творение реального бренда и в точности соответствовал задуманной атмосфере.
00:06:36А структура каждого элемента делала гораздо более вероятным, что посетитель сайта действительно совершит покупку.
00:06:43Но сначала позвольте сказать пару слов о нашем спонсоре.
00:06:45Make. Вы уже знаете Make для визуальной автоматизации, но они только что запустили Maya.
00:06:49Это ИИ-коллега, который живет прямо внутри конструктора Make.
00:06:52Большинство ИИ-конструкторов дают вам черный ящик, надеясь, что оно просто заработает.
00:06:56Maya другая. Вы объясняете ей задачу на обычном языке, и она строит всё прямо у вас на глазах.
00:07:00Мы попробовали это. Мы попросили Maya отправлять в Slack сводку для команды каждый раз, когда в Salesforce появляется новый лид, и это ушло прямо на канвас.
00:07:07Maya обдумала запрос, выбрала нужные инструменты, сопоставила каждый модуль и связала всю автоматизацию на холсте, пока мы наблюдали.
00:07:15Вы видите каждое решение, поэтому можете вмешаться и скорректировать что угодно в любой момент.
00:07:19Попутно вы не просто получаете автоматизацию, вы учитесь тому, как устроен сам Make.
00:07:23Сейчас ее можно попробовать бесплатно в бета-версии. Ссылка находится в описании.
00:07:26Следующие навыки, о которых мы поговорим, созданы Мен То (Meng To).
00:07:29Он давно работает в индустрии и известен своими иммерсивными сюжетными дизайнами на основе скролла.
00:07:36Он собрал всё найденное и упаковал в систему дизайнерских навыков, чтобы вы тоже могли этим пользоваться.
00:07:41Она включает множество навыков, охватывающих различные области.
00:07:44Все они ориентированы на создание качественного дизайна, который действительно рассказывает историю, а не просто хорошо выглядит.
00:07:51Один из них — video to super prompt, который берет запись экрана или прохождение по сайту и с помощью локальных инструментов превращает ее в промпт для агента.
00:08:01Но навык, о котором нам действительно хочется рассказать — это сайты уровня наград (awards quality sites).
00:08:05Awards — это площадка, проводящая конкурсы потрясающего дизайна, а побеждающие там сайты признаются лучшими в сети.
00:08:12Этот навык перечисляет принципы и детали дизайна, присущие сайтам премиум-уровня.
00:08:17Это важно, потому что Claude не строит дизайн такого уровня самостоятельно.
00:08:21Поэтому навык внедряет эти принципы в процесс и направляет вектор дизайна.
00:08:25И что отличает их — помимо принципов, набор содержит реальные техники и специфические эффекты, придающие сайту дорогой вид, чего модель сама по себе не выдаст.
00:08:35Добавив навык наградного уровня, вы задаете промпт с описанием желаемого сайта.
00:08:40И на выходе получается сайт, структурированный и оформленный так же,
00:08:45как сайты-победители. Здесь есть тонкий анимированный фон,
00:08:49но больше всего выделяется прокрутка — она построена по принципу сторителлинга.
00:08:54Следующий набор навыков создан Якубом Крехелом.
00:08:57В отличие от других, где один навык отвечает за весь сайт сразу, здесь всё разбито на несколько отдельных частей.
00:09:05Все элементы дизайна — типографика, цвета, доступность и многое другое — имеют собственный специализированный навык.
00:09:13Вы можете добавить любой из них в Claude Design, но мы используем навык проверки.
00:09:18Мы применяем его, потому что он всесторонне оценивает дизайн, позволяя вносить правки на основе баллов.
00:09:24Этот навык работает еще эффективнее при интеграции с GitHub, так как он сравнивает макет до и после изменений.
00:09:31Если что-то работало раньше, а теперь сломалось, система укажет на конкретное изменение, вызвавшее проблему.
00:09:40Она проверяет анимацию, доступность и адаптивность под разные экраны, а затем выдает список найденных недочетов для исправления.
00:09:48Мы также используем навык улучшенной верстки, поскольку компоновка — слабое место Claude Design.
00:09:52Он контролирует отступы, позиционирование и выравнивание элементов, тщательно прорабатывая весь интерфейс.
00:09:58Например, он заметил, что дате на странице требуется больше места, и даже подсказал точное число пикселей.
00:10:04Вам остается лишь попросить его исправить все замечания.
00:10:06Внешний вид кардинально не изменится, но сайт станет полностью соответствовать реальным стандартам веб-дизайна.
00:10:14Следующий навык в списке — Tastemaker.
00:10:16Его главная цель — избегать шаблонных решений ИИ, и подход к этому здесь совершенно особенный.
00:10:22Он работает напрямую с пикселями реального примера, не пытаясь сначала перевести визуальный стиль в слова.
00:10:28Обычно модель преобразует картинку-образец в текстовое описание, которое потом использует как справочник.
00:10:34Этот же инструмент извлекает точные параметры дизайна с помощью скриптов и сохраняет их в структурированном виде.
00:10:42Это позволяет сохранить важные детали, которые иначе потерялись бы при текстовой компиляции.
00:10:46Скрипты выполняют рутинную работу заранее, освобождая агента от лишних действий.
00:10:52Например, они задают разные направления и тестируют различные вариации.
00:10:55Принятые решения распространяются на весь проект, а не ограничиваются лишь одним экраном.
00:10:59Этот навык буквально прививает моделям чувство стиля, предотвращая скатывание в банальные паттерны.
00:11:05После установки он запускается привычным способом: через слэш-команду и текстовый запрос.
00:11:09Мы передали ему желаемый макет вместе с ранее заготовленными требованиями к стилю.
00:11:14Результат впечатлил: сайт получился уникальным, без шаблонов, и точь-в-точь повторил нужную стилистику.
00:11:22Последний набор — еще одна популярная коллекция, основанная на реальных научных исследованиях.
00:11:28В ее основе лежат признанные законы дизайна, причем под каждый выделен отдельный навык.
00:11:33Некоторые из них объясняют, почему пользователи уходят с сайта и как меняется их поведение при просмотре.
00:11:39И вам необязательно устанавливать их все.
00:11:41Достаточно выбрать те, что подходят под ваш рабочий процесс.
00:11:44Для себя мы выбрали два.
00:11:45Первый — критический анализ экрана, который оценивает макет с самых разных точек зрения,
00:11:50указывает на ошибки и опирается на профессиональные стандарты качества дизайна.
00:11:56Второй — законы восприятия, содержащие правила того, как человеческий глаз видит и считывает интерфейс.
00:12:03Готовый дизайн можно отправить на проверку, после чего система укажет на проблемы с акцентами,
00:12:09типографикой и отступами, предоставив список для исправления.
00:12:12После применения законов восприятия весь сайт начинает выглядеть гораздо аккуратнее.
00:12:17Это были те навыки, которые вы можете найти на GitHub и использовать в работе.
00:12:20Но мы применяем и собственные наработки, созданные и улучшенные нами в процессе создания продуктов.
00:12:26Получить к ним доступ можно в нашем сообществе AI Labs Pro.
00:12:31Там собраны как навыки собственной разработки, так и проверенные решения с открытым исходным кодом.
00:12:36Если вам нравится то, что мы делаем, и вы хотите поддержать канал, это лучший способ.
00:12:41Ссылка в описании.
00:12:42На этом видео подходит к концу.
00:12:44Вы можете поддержать создание подобных роликов с помощью кнопки суперспасибом под видео.
00:12:50Как всегда, спасибо за просмотр, и до встречи в следующем видео.