00:00:00Внутри Claude Code живет настоящий монстр, и зовут его «AI Slop».
00:00:03Фиолетовые градиенты, шрифт Inter для всего подряд и одинаковые карточки
00:00:09на каждом сайте. Вы понимаете, о каком «ИИ-ширпотребе» я говорю,
00:00:12но сегодня я дам вам 10 инструментов, которые помогут одолеть этого зверя,
00:00:16и нет, ни один из них не является навыком фронтенд-дизайна. На самом деле,
00:00:20многие из этих инструментов совсем новые.
00:00:22Так что, даже если вы давно в теме дизайна с Claude Code,
00:00:26обещаю, сегодня вы узнаете что-то новое.
00:00:28Все инструменты, которые мы разберем, служат по сути одной цели —
00:00:31дать вам реальный шанс создавать качественный фронтенд-дизайн
00:00:35с помощью Claude Code, потому что, при всей крутости Claude Code,
00:00:39именно в этой области он крайне слаб.
00:00:42И первый инструмент в списке просто безупречен.
00:00:44Это единый навык (skill), включающий в себя 18 команд.
00:00:46Я оставлю ссылку на него в описании, как и на все остальные инструменты,
00:00:50которые мы сегодня затронем.
00:00:51Мне очень нравится Impeccable, потому что его возможности невероятно широки.
00:00:55Это один навык, но в нем 18 команд.
00:00:58Если мы перейдем по ссылке с GitHub на impeccable.style,
00:01:01то увидим все их команды в действии. И что еще лучше,
00:01:05мы можем сравнить типичный ИИ-результат — привет, шрифт Inter и градиенты —
00:01:09с тем, что получается после применения различных команд. Например,
00:01:15у нас есть что-то вроде «clarify»,
00:01:16которая отвечает за ошибки UX и сообщения об ошибках.
00:01:19Здесь вы видите разницу между двумя вариантами.
00:01:21Также есть расширение для Chrome,
00:01:23которое подсветит признаки «AI Slop» прямо на вашей веб-странице,
00:01:28как в этом примере. Мне очень нравится, как этот навык использует анти-паттерны.
00:01:32По сути, он обучает большие языковые модели тому,
00:01:34как на самом деле выглядит этот ИИ-ширпотреб: эти акценты на границах,
00:01:38боковые рамки вкладок, которые встречаются повсюду, ну вы знаете,
00:01:42спарклайны, стеклянный морфизм, да?
00:01:45Мы видим эти вещи снова, снова и снова.
00:01:47Так почему бы не использовать навык, который прямо говорит LLM: «Это безвкусица»?
00:01:52Вместо обычных навыков дизайна, которые просто просят:
00:01:54«Пожалуйста, не делай плохо» — это ведь не работает. Как вы понимаете,
00:01:58этот навык довольно объемный, как мы видим здесь. Я продолжаю листать.
00:02:03А все потому, что в нем есть несколько справочников для каждой
00:02:07конкретной области дизайна.
00:02:08Их можно считать под-навыками, входящими в те самые 18 команд.
00:02:13Сейчас
00:02:14проще всего увидеть все эти команды в деле в документации Impeccable.
00:02:17Как и на главной странице,
00:02:21вы можете увидеть примеры «до» и «после».
00:02:25Визуальное сравнение возможностей гораздо эффективнее,
00:02:29чем просто чтение описания в надежде, что Claude Code сделает всё как надо.
00:02:33И это касается не только чисто визуальной части.
00:02:35Если взять такие навыки, как «adapt»,
00:02:37он гарантирует корректную работу на разных платформах, таких как мобильные устройства,
00:02:41вместо того чтобы ограничиваться только десктопом. Очень рекомендую изучить его.
00:02:45Он вышел всего около месяца назад. А перед тем как перейти ко второму инструменту,
00:02:48хочу вкратце упомянуть мой мастер-класс по Claude Code, выпущенный в прошлом месяце.
00:02:52Я уже выпустил массу обновлений к нему.
00:02:54Это лучшее место, чтобы пройти путь от нуля до ИИ-разработчика.
00:02:57Цена на него вырастет уже через несколько дней.
00:03:01Так что, если хотите его приобрести, обязательно загляните.
00:03:04Ссылка в закрепленном комментарии. Теперь поговорим об инструменте номер два —
00:03:06Skill UI. Об этом инструменте я узнал буквально сегодня утром.
00:03:12Он не провисел и 24 часов, у него всего семь звезд.
00:03:15Мы застали самое начало. Это не моя разработка, я не знаю автора.
00:03:18Просто наткнулся на его пост в Twitter.
00:03:21Я просто листал ленту и подумал: «О, выглядит как крутой навык».
00:03:24Он позволяет декомпозировать любую дизайн-систему в готовый навык для Claude.
00:03:29Что это значит? Это значит, что мы берем этот навык,
00:03:31направляем его на какой-нибудь существующий веб-сайт,
00:03:34и он анализирует, как этот сайт был построен, превращая это
00:03:39в шаблон, по сути, в навык. Давайте покажу в действии. Вот здесь
00:03:45у нас сайт Stripe — отличный сайт, много всего интересного.
00:03:49Очевидно, на нем много кастомной графики и прочего.
00:03:52Claude Code без этих исходников и визуальных данных не сможет
00:03:56в точности его воссоздать. Пока что. Но допустим, мне нравится общий дизайн,
00:04:00то, как расположены карточки и макеты.
00:04:03И я хочу использовать это как основу для своего сайта. Что ж,
00:04:06в прошлых видео мы обсуждали способы, как это можно сделать.
00:04:08Вроде анализа HTML и прочего, но, знаете,
00:04:11это обычно дает решение лишь на 60–70%. Поэтому я взял Skill UI,
00:04:15натравил его на Stripe и сказал: «Эй,
00:04:17сделай мне фейковый сайт Stripe в таком же стиле».
00:04:21И вот что он выдал с первой попытки. Это всё, что я ему сказал.
00:04:25Больше никакой информации я не давал, и он создал это.
00:04:27Определенно чувствуется вайб Stripe. Опять же,
00:04:32на Stripe используется уникальная графика.
00:04:34Он не сможет воссоздать её просто по промпту, но,
00:04:39как по мне, получилось довольно неплохо, на самом деле.
00:04:44Тут все еще есть некоторые стандартные ИИ-элементы
00:04:47в расположении контента и иконках,
00:04:50но он не сделал просто обычную сетку бенто-боксов с карточками.
00:04:55Мне нравятся цвета и графика, но посмотрите сюда —
00:04:59это честно очень круто, учитывая, что я просто сказал: «Глянь на Stripe,
00:05:03создай мне основу». И раз он превратил это в навык,
00:05:06теперь у меня есть навык дизайна в стиле Stripe. Пока только на уровне проекта,
00:05:10но я могу вызвать его в любой момент.
00:05:12Допустим, я захочу сделать другой сайт в стиле Stripe.
00:05:16Я могу это сделать, ведь я могу натравить Skill UI на что угодно.
00:05:18Вы можете увидеть его в работе в демо-ролике на странице GitHub,
00:05:22где автор направил инструмент на Notion.
00:05:24А затем сказал Claude Code: «Сделай мне, по сути, клон Notion».
00:05:27Именно это вы сейчас и видите. Чтобы использовать этот навык,
00:05:30просто следуйте командам установки на странице GitHub.
00:05:33Там есть два режима. Если вам нужно что-то,
00:05:38что захватывает всё: длинные скриншоты, различные взаимодействия,
00:05:41реакции на наведение мыши — он использует Playwright,
00:05:45чтобы во всем этом разобраться. То есть он не просто смотрит в HTML,
00:05:48как обычно делают подобные инструменты, включая мой старый навык анализа сайтов.
00:05:52Если использовать «ultra mode», он задействует Playwright.
00:05:55Так что здесь чувствуется определенный уровень сложности. В общем,
00:05:58очень умный навык, и вы узнаете о нем одними из первых. Если начнете его использовать,
00:06:00станете эдаким «хипстером» среди пользователей GitHub-репозиториев.
00:06:03Я настоятельно рекомендую попробовать его, если вы начинаете новый сайт и
00:06:07не знаете, с чего подступиться к дизайну, потому что это отличная отправная точка.
00:06:10Отсюда я могу редактировать всё, что захочу. Теперь перейдем к третьему инструменту.
00:06:13Честно признаюсь, он немного за пределами моей основной специализации,
00:06:17но он кажется мне супер-интересным.
00:06:19Я пытаюсь узнать о нем больше и использовать сам.
00:06:21И это — навык WebGPU.
00:06:23По сути, WebGPU — это компоненты веб-дизайна, в которых
00:06:28страница напрямую взаимодействует с вашей видеокартой.
00:06:30Это позволяет создавать потрясающие анимации. Например, такие,
00:06:34или вот подобные вещи.
00:06:36Помните мое видео про семь уровней дизайна в Claude Code?
00:06:40Мы рассматривали сайт Igloo на седьмом уровне,
00:06:44там использовались WebGL и кастомные шейдеры.
00:06:47Вот об этой области я и говорю.
00:06:49Этот навык обучает Claude Code тому,
00:06:52как писать код для подобных вещей.
00:06:54Он говорит модели, как настроить рендер, как работать с шейдерами
00:06:58и создавать материалы на основе узлов. С помощью этого навыка
00:07:00я просто ввел пару текстовых промптов, и он смог создать вот это.
00:07:06Выглядит ли это так же круто, как тот пример? Нет,
00:07:08но я сделал это за две минуты... хотя GPU понадобилось минут 10,
00:07:13но это была пара промптов, хотя я вообще не понимал, что делаю.
00:07:16Так что, если вам интересны подобные вещи — а из всех инструментов,
00:07:19что я здесь упоминаю, этот, пожалуй, самый «необычный» —
00:07:22но он мне понравился. Если это вам близко,
00:07:26обязательно присмотритесь к этому навыку, он поможет двигаться в этом
00:07:28направлении.
00:07:29Но очевидно, что это гораздо более продвинутый уровень, чем просто
00:07:32изменение вида карточек или типографики сайта,
00:07:35но об этом стоит помнить. Теперь
00:07:37четвертый инструмент — один из самых популярных ИИ-репозиториев за месяц.
00:07:41И это awesome-design.md. На данный момент у него более 50 000 звезд.
00:07:46Он просто разрывает чарты.
00:07:48В каком-то смысле он похож на Skill UI, о котором мы говорили,
00:07:52потому что этот навык позволяет смотреть на другие существующие сайты
00:07:57и использовать их как некий шаблон для того, что мы строим. Однако
00:08:01awesome-design создан под сильным влиянием Stitch.
00:08:04О Stitch мы поговорим чуть позже.
00:08:06В Stitch есть концепция файлов design.md (дизайн-разметка),
00:08:11которые представляют собой просто промпты с описанием того, как строить сайт.
00:08:14Разница в том, что Google проделал отличную работу, создав эти промпты.
00:08:18Как вы видите здесь. В них очень детально расписан обзор,
00:08:22главная цель, цветовая схема. Это дает четкую структуру.
00:08:26Вместо стандартного навыка дизайна от Claude Code, который
00:08:29просто говорит: «Ну, давай сделаем как-нибудь вот так».
00:08:32Тут всё гораздо конкретнее в плане задач.
00:08:34И авторы взяли эту идею специфических промптов для дизайн-систем и
00:08:39создали их для кучи разных сайтов в самых разных нишах.
00:08:43Например, 11 labs —
00:08:47я кликну по нему здесь.
00:08:50И я вижу всю концепцию дизайна 11 labs,
00:08:55разобранную по косточкам: элементы форм, примеры карточек, кнопки, заголовки,
00:09:00типографика, цвета и всё прочее. И это не просто превью.
00:09:04Это реальный промпт, который мы можем скормить Claude Code. Повторюсь,
00:09:07у них там тонна сайтов, включая даже не связанные с текстом,
00:09:10например Bugatti, да? То есть,
00:09:15вам дают строительные блоки сайта, который вам нравится, чтобы вы могли
00:09:19создать свой собственный из тех же материалов.
00:09:21Если Skill UI, о котором мы говорили, просто анализирует любой сайт
00:09:25и сразу его воссоздает,
00:09:26то этот проект просто выделяет отдельные компоненты.
00:09:29А собирать их воедино уже предстоит нам самим. Расхвалив awesome-design,
00:09:33будет справедливо в качестве пятого инструмента
00:09:35рассмотреть приложение, которое его вдохновило.
00:09:38Это сам проект Stitch от Google. Stitch — это просто нечто,
00:09:41если вы хотите начать с визуального подхода перед тем, как
00:09:46приступать непосредственно к написанию кода страницы.
00:09:48Вы заходите в Stitch и просто пишете промпт о том, что хотите создать.
00:09:50Можно добавить скриншоты для вдохновения.
00:09:53Инструмент создаст тот самый файл design.md, который мы видели ранее,
00:09:57но в его «родной среде».
00:09:59Он выдает раскладку цветов, типографику, метки,
00:10:04кнопки, а затем мы видим здесь всю дизайн-систему —
00:10:08тот же design.md, что и раньше,
00:10:11но теперь настроенный под ваш промпт. И как только он закончит,
00:10:14он предложит кучу вариантов того сайта, который вы собираетесь
00:10:18создать. И это не только первый экран, а весь сайт целиком.
00:10:20Созданный макет можно редактировать как угодно: кликнуть на него,
00:10:25нажать правую кнопку мыши, выбрать другие варианты.
00:10:28Можно настраивать вариации. Я могу указать,
00:10:31хочу ли я три или пять вариантов, задать диапазон креативности,
00:10:34инструкции и так далее.
00:10:35У меня по сути масса способов быстро набросать кучу визуалов
00:10:40моего будущего сайта. И это здорово, потому что работать в
00:10:43Claude Code бывает непросто, когда при каждом визуальном изменении
00:10:46ему нужно переписывать код. Вам нужно запускать сервер,
00:10:48проверять всё на странице... А часто, когда мы занимаемся именно
00:10:52фронтенд-дизайном,
00:10:56я хочу видеть варианты перед глазами, понимаете?
00:10:58Мне гораздо проще увидеть сразу три варианта и сказать: «Так, это ужасно,
00:11:02это тоже, а вот это, пожалуй, ничего», чем постоянно просить: «Claude, попробуй еще раз».
00:11:06И это тоже бесплатно,
00:11:11что здорово. И всё, что я здесь создаю,
00:11:13очень легко перенести в Claude Code, потому что, если я нажму на то, что мне
00:11:16нравится, перейду в «Ещё», я смогу просмотреть код.
00:11:19Затем я могу скопировать код и перенести его в Claude Code.
00:11:23Вы даже можете сделать такие вещи, как копирование в Figma.
00:11:25Его также можно перенести в AI Studio,
00:11:27но самый простой путь к Claude Code — это просто экспорт и копирование в буфер обмена.
00:11:31Существует MCP. Так что вы можете делать всё это через терминал Claude Code.
00:11:35Но, честно говоря, я не совсем понимаю, что это на самом деле даёт.
00:11:39Мне кажется, что возможность поработать руками в этом визуальном редакторе того стоит.
00:11:43Вообще-то, у меня есть полный разбор Stitched в Claude Code, и я оставлю ссылку
00:11:46выше, если вы хотите увидеть больше этого в действии. Теперь,
00:11:49я сомневался, стоит ли включать навык номер шесть в это видео, потому что он
00:11:52становится повсеместным. Почти все знают о его существовании, но мало ли.
00:11:55Возможно, кто-то увидит его впервые. И это навык UI UX Pro Max.
00:12:00Я думаю, это духовный преемник или то,
00:12:05каким должен быть навык фронтенд-дизайна от Anthropic. Итак, представьте фронтенд Anthropic,
00:12:09навык дизайна, который на самом деле обучен различным видам,
00:12:14знаете, условностей для разных типов веб-сайтов в разных доменах, потому что
00:12:19не каждый сайт должен выглядеть как какой-нибудь SaaS, как какой-нибудь второсортный SaaS.
00:12:23И в этом вся суть этого навыка.
00:12:25Это интеллектуальный генератор систем дизайна.
00:12:27Он на самом деле будет задавать вам вопросы.
00:12:29Он собирается выяснить, о чем ваш сайт,
00:12:31в чем заключается ваша услуга, а затем спроектирует его на основе его функций.
00:12:35У него есть 161 отраслевое правило логического вывода.
00:12:39Так что они действительно проработали эту вещь.
00:12:43Вы не получите этот типичный посредственный ИИ-результат без навыка,
00:12:47и вы не получите то, что постепенно становится версией ИИ-халтуры для Claude Code
00:12:51с обычным навыком фронтенд-дизайна.
00:12:52Он также построен с кучей руководств по конкретным стекам технологий.
00:12:55Так что вас не подталкивают только к чему-то вроде React, и в конечном итоге это отличный
00:13:00навык. Если вы просто понятия не имеете, в каком направлении двигаться.
00:13:04Многое из того, о чем мы уже говорили, требует от вас понимания
00:13:09того, чего вы хотите, особенно если у вас есть пример веб-сайта, верно?
00:13:12Когда мы видели Skill UI, если у меня есть пример,
00:13:15я могу практически скопировать его, и то же самое с Awesome Design.
00:13:19Типа, я выбираю из этих существующих сайтов.
00:13:21Если вы не хотите идти этим путем,
00:13:22но всё ещё в замешательстве относительно того, где вы должны быть — используйте этот навык.
00:13:26Отличная отправная точка.
00:13:28Теперь инструмент номер семь — это всё о компонентах и тщательной проработке деталей
00:13:33нашей веб-страницы. И именно здесь мы подключаем 21st.dev,
00:13:36который представляет собой сайт с миллионом различных компонентов для выбора и
00:13:40прямой интеграции в наш сайт. Так, например,
00:13:43скажем, я пытался придумать что-то для нашего главного экрана (hero section). Что ж,
00:13:46я просто иду в раздел «Heroes» на 21st.dev и ищу подходящий.
00:13:51Мне нравится, скажем, вот этот, этот главный экран, который использует Spline.
00:13:56Там есть этот робот, который на самом деле следует за моей мышкой. Что ж,
00:14:00вместо того чтобы разбираться, как использовать Spline и писать этот код,
00:14:04я просто захожу на 21st.dev.
00:14:06Я копирую промпт, нажав кнопку «Copy Prompt» наверху.
00:14:09Я иду в Claude Code и вставляю его — бум. И вот она, моя секция hero.
00:14:14Теперь,
00:14:15очевидно, секции hero — это, пожалуй, самое тяжелое, что мы могли бы импортировать
00:14:19на нашу веб-страницу, потому что, если у нас есть hero-экран с роботом, смотрящим по сторонам,
00:14:22весь наш сайт должен соответствовать этой эстетике. К счастью,
00:14:26я думаю, вы получите наибольшую пользу от чего-то вроде 21st.dev, когда дело доходит
00:14:29до небольших компонентов и мелких штрихов, таких как кнопки, верно?
00:14:33Просто тот факт, что на этой кнопке есть этот маленький блик.
00:14:36Когда я вожу по ней мышкой, по сравнению со стандартной кнопкой, это то, что сделает
00:14:39ваш сайт лучше, или карточки, у которых есть эта, знаете,
00:14:43своего рода световая анимация, которая следует за моей мышью или что-то в этом роде. Опять же,
00:14:46это мелкие детали, эти светящиеся тени.
00:14:49Это те вещи, которые возвышают вашу веб-страницу,
00:14:52делают её более премиальной и просто показывают, что вам было не всё равно.
00:14:56И что вы действительно старались. И если ничего другого,
00:14:59то это должно просто дать вам вдохновение, потому что
00:15:03ничто не мешает вам скопировать промпт для любого из этих компонентов,
00:15:07будь то рамки, hero-секции или что угодно,
00:15:09а затем настроить его по своему вкусу с помощью Claude Code.
00:15:12Это не игра «все или ничего».
00:15:14И я думаю, особенно для тех из нас, у кого нет опыта в веб-дизайне,
00:15:17у меня его точно нет, знаете,
00:15:19вы просто не знаете того, чего не знаете, и знакомство со всеми этими разными
00:15:23способами создания кнопки заставляет ваш мозг двигаться в разных
00:15:26направлениях. И это помогает вам со временем.
00:15:29Чем больше вы с этим сталкиваетесь, тем больше развиваете собственный вкус и понимаете,
00:15:32что вам нравится. Но пока вы не увидите эти вещи,
00:15:34вы даже не знаете, что вам нравится.
00:15:36Всё, что вы видели, — это то, что выдает вам Claude Code.
00:15:39Так что очень советую вам это проверить, практически все эти вещи бесплатны, и
00:15:43вам стоит интегрировать хотя бы некоторые мелочи,
00:15:46например, оформление кнопок и карточек, в вашу следующую веб-страницу.
00:15:49Фраза, которую вы слышите снова и снова в эти дни: «У ИИ нет вкуса».
00:15:53Ну а что, если мы дадим ему вкус как навык? Что ж,
00:15:56именно это мы пытаемся сделать с инструментом номер восемь.
00:15:59И это репозиторий «Taste Skill».
00:16:01Это коллекция навыков, которая пытается наделить Claude
00:16:06Code некоторой мерой вкуса, то есть уйти от ИИ-халтуры,
00:16:11а это тема, которую вы видите снова и снова.
00:16:13Этот навык вкуса включает в себя ряд различных поднавыков, как вы видите здесь,
00:16:17и у него есть разные настройки. Так что вы можете регулировать то, насколько,
00:16:21знаете, абстрактным он становится по сравнению с обычной генерацией ИИ.
00:16:24И то, что вы видите здесь, — это пример некоторых веб-сайтов, которые были
00:16:28созданы с использованием этого навыка. И сразу
00:16:31заметно, что они немного другие, верно? Я имею в виду, это не сносит крышу,
00:16:36но сразу видно отличия, а «другое» — это хорошо.
00:16:38Чем меньше это похоже на каждый типичный шаблон SaaS, тем лучше.
00:16:41И многие из них включают такие вещи, как анимация прокрутки, и знаете,
00:16:46мы не видим бенто-боксы (bento boxes) снова и снова.
00:16:47Так что это крутой навык, так сказать, на грани, который вы могли бы как
00:16:52минимум попробовать и посмотреть, как он справится по сравнению с вашими обычными
00:16:56генерациями в Claude Code. Инструмент номер девять покажется многим из вас очень простым,
00:16:59но вы были бы поражены количеством людей, которые не знают о существовании
00:17:03Google Fonts.
00:17:05Google Fonts — это гигантский бесплатный репозиторий из триллиона
00:17:10различных шрифтов, которые вы можете использовать буквально во всех своих проектах по кодингу.
00:17:14Вам не нужно быть рабом шрифта Inter или каких-то других пяти шрифтов,
00:17:18которые Claude Code использует для всего подряд.
00:17:20Вы можете просто зайти на Google Fonts, там всё разбито по внешнему виду,
00:17:24по настроению, знаете, по семейству, и сказать Claude Code: используй это,
00:17:29используй то; у Claude Code тоже есть доступ ко всему этому.
00:17:31Потому что типографика — это огромная,
00:17:34огромная часть того, как выглядит и ощущается ваш дизайн. Более того,
00:17:38вы можете использовать Claude Code, чтобы он помог вам искать в Google Fonts.
00:17:42Просто скажите Claude Code, какой тип сайта вы строите,
00:17:45какого ощущения вы добиваетесь.
00:17:47И он должен дать вам один или пять примеров шрифтов, которые стоит посмотреть.
00:17:50Вы можете увидеть это в реальном времени здесь. Опять же,
00:17:53вы не хотите просто оставлять всё на волю случая и зависеть от того, как
00:17:57Claude сегодня себя чувствует и какой шрифт он вам выдаст, потому что
00:18:01это всегда будет Inter, всегда Inter. И последнее по счету, но не по значению,
00:18:05инструмент номер 10, Playwright CLI.
00:18:06Playwright CLI сам по себе не является инструментом дизайна,
00:18:10хотя это то, о чем мы уже говорили в прошлом в связи со Skill UI и
00:18:13его способностью выходить в сеть и делать скриншоты веб-страниц.
00:18:15Так что вы можете использовать его как своего рода инструмент для исследования и идей.
00:18:19На чем я действительно хочу сосредоточиться,
00:18:21так это на идее формы и функции, и на том, что когда мы строим что-то на фронтенде,
00:18:25вспомните что-то простое, например, страницу отправки формы,
00:18:27нам придется это тестировать.
00:18:29Нам нужно будет убедиться, что эти вещи действительно работают.
00:18:32И самый простой способ сделать это масштабно — Playwright CLI, не Playwright MCP.
00:18:36CLI намного эффективнее.
00:18:38И мы делаем это так: как только вы создали свои фронтенд-дизайн штуки,
00:18:41всё, что вам нужно сделать после установки CLI-инструмента, — это сказать Claude Code:
00:18:44«Я хочу, чтобы ты протестировал каждое взаимодействие на этой странице с помощью Playwright CLI».
00:18:49Он создаст кучу различных инстансов Chrome.
00:18:52Вы можете сделать его видимым (headed), если действительно хотите их видеть, или фоновым (headless).
00:18:55То есть невидимым, и он всё протестирует сам.
00:18:57Это ускоряет весь процесс фронтенд-разработки, потому что я думаю,
00:19:02мы все там были, когда мы что-то добавили и потом хотели это увидеть.
00:19:05А потом мы хотим это протестировать, и это занимает целую вечность,
00:19:06особенно такие вещи, как отправка форм,
00:19:08где есть тонны крайних случаев того, как какой-нибудь странный пользователь зайдет
00:19:13туда и на самом деле введет свои данные.
00:19:15Итак, это мои 10 любимых навыков, связанных с дизайном в Claude Code,
00:19:20плагинов и CLI. Надеюсь, хотя бы некоторые из них были для вас новыми. Я имею в виду,
00:19:24про Skill UI, наверное, знают человека три. Так что, э-э,
00:19:29но да, пространство фронтенд-дизайна,
00:19:31я нахожу его супер интересным с Claude Code, потому что он так плох в этом с точки
00:19:36зрения вкуса.
00:19:37Хотя я ненавижу говорить само слово «вкус» в эти дни, потому что все только о нем
00:19:40и говорят, но так как Claude Code в этом плох,
00:19:42это должно быть своего рода хорошим знаком для вас, для личности, верно?
00:19:46Потому что это та область, где вы можете выделить себя из толпы,
00:19:50и в любой момент, когда вы можете отличиться от всех остальных, кто переходит
00:19:55на Claude Code в эти дни, это хорошо.
00:19:57И эти навыки и инструменты помогут вам это сделать. Так что, как всегда,
00:20:00дайте мне знать, что вы думаете.
00:20:01Обязательно зацените Chase AI Plus, если хотите получить доступ к мастер-классу,
00:20:04и увидимся.