Claude Code получил крупнейшее обновление дизайна за год (и вот как им овладеть)
CChase AI
컴퓨터/소프트웨어AI/미래기술
스크립트
00:00:00Claude Code только что получил крупнейшее за последнее время обновление возможностей фронтенд-дизайна — совершенно новую функцию Slash Design.
00:00:07Теперь функция Slash Design по сути берет лучшее из автономного веб-приложения Claude Design, которое вы видите здесь, и внедряет его прямо в Claude Code.
00:00:16Вместо того чтобы переключаться между двумя разными приложениями или неуклюже переносить дизайны из Claude Design в Claude Code, теперь мы получаем лучшее из обоих миров.
00:00:25Плюс ко всему, мы получаем дополнительный функционал всех наших навыков, которые мы уже используем внутри Claude Code.
00:00:30Таким образом, мы можем комбинировать эту новую функцию Slash Design с такими возможностями, как Impeccable или Taste, получая гораздо лучшие результаты.
00:00:36Поэтому сегодня я не только покажу вам, как работает Slash Design, но и предложу лучший рабочий процесс для максимальной эффективности.
00:00:42Так что, если вы вообще занимаетесь каким-либо фронтенд-дизайном с помощью Claude Code, вам обязательно стоит досмотреть это видео до конца.
00:00:46Итак, суть функции Slash Design заключается в том, что вы видите прямо здесь.
00:00:49Сейчас я нахожусь в десктопном приложении Claude, но то же самое справедливо, если вы используете терминал.
00:00:53Суть в том, что когда я ввожу Slash Design и прошу создать что-то для меня, он генерирует артборд, очень похожий на веб-приложение Claude Design.
00:01:02У меня есть несколько вариантов на выбор, и при их просмотре я могу очень детально настраивать изменения.
00:01:09Как вы можете видеть справа, нажимая на различные компоненты созданного им фронтенда, я могу изменить практически все.
00:01:17Вдобавок к этому я могу легко запросить несколько версий одного и того же результата, и как только мне понравится конкретная версия, я могу заставить Claude Code приступить к написанию кода.
00:01:27Это экономит мне кучу времени по сравнению с тем, чтобы сидеть в веб-приложении Claude Design, делать все там, говорить о переносе, запаковывать в zip, сбрасывать в папку, указывать путь в Claude Code и делать всю эту раздражающую работу.
00:01:38И помимо простого удобства, как я уже упоминал ранее, теперь мы можем комбинировать навыки.
00:01:43Находясь в веб-приложении Claude Design, я не могу напрямую использовать или вызывать такие навыки, как Impeccable или Taste.
00:01:49Здесь я могу это сделать.
00:01:50В итоге мои результаты будут намного качественнее и при этом удобнее в работе.
00:01:54Пользоваться навыком дизайна очень просто.
00:01:56Всё, что мне нужно сделать — это ввести /design, а затем дать запрос на то, что я пытаюсь создать.
00:02:01Допустим, я хочу создать пост для социальной сети, вроде публикации в Instagram, подробно рассказывающей о том, что делает новая функция slash design.
00:02:10И предположим, я хочу создать три вариации в трех совершенно разных стилях дизайна и при этом задействовать навык Impeccable.
00:02:19Я просто включу микрофон и скажу примерно следующее.
00:02:22Можем ли мы создать макет для поста в социальной сети?
00:02:27Представьте, что это нечто вроде поста в Instagram, детально описывающего возможности нового навыка slash design в Claude Code.
00:02:34Мне нужны три совершенно разные вариации, то есть сильно различающиеся стили дизайна и эстетика.
00:02:41И при этом я хочу, чтобы вы задействовали навык Impeccable для помощи в создании.
00:02:45Если бы я выполнил этот же самый запрос внутри десктопного приложения Claude, он отобразился бы в такой боковой панели, что мне как раз очень нравится в десктопном приложении, ведь все находится в одном месте.
00:02:57В терминале вы увидите создание артефакта, то есть он по сути откроется в вашем браузере.
00:03:02Так что, хотя это и не так удобно, как десктопное приложение, работать с этим все равно довольно просто.
00:03:06А перед тем, как мы взглянем на артефакт, пару слов от сегодняшнего спонсора — меня.
00:03:10Я только что выпустил обновленную версию своего мастер-класса по Claude Code, и это лучший способ пройти путь от нуля до AI-разработчика, особенно если у вас нет технического бэкграунда.
00:03:19Мы фокусируемся на реальных практических кейсах, и я обновляю этот курс каждую неделю.
00:03:24Так что если вы пытаетесь разобраться, как реально использовать этот безумный инструмент, этот курс для вас.
00:03:32Вы можете найти его в Chase AI+.
00:03:33Ссылка находится в закрепленном комментарии.
00:03:35А вот взгляд на созданный им артефакт.
00:03:37У нас есть три различных стиля дизайна для наших постов в Instagram, точно так же, как мы видели в десктопном приложении.
00:03:44Справа у нас есть эта панель свойств.
00:03:46Я могу приблизить изображение, нажать на что-нибудь и начать получать гораздо больше подробностей о том, что именно я настраиваю.
00:03:52Вы также заметите в правом верхнем углу раздел правок (tweaks), который сейчас пуст.
00:03:57В любой момент я могу попросить Claude Code предоставить мне панель правок, точно так же, как вы видели бы ее в веб-приложении Claude Design.
00:04:03И я могу настроить еще больше параметров, чем то, что вижу здесь.
00:04:07Так что с точки зрения практического использования все довольно просто.
00:04:10Просто введите slash design и запросите то, что вам нужно.
00:04:12А как же должен выглядеть наш рабочий процесс?
00:04:14Как извлечь из этого максимум пользы?
00:04:16Существует простой трехшаговый рабочий процесс, который вам следует использовать каждый раз при создании любого фронтенд-дизайна с Claude Code.
00:04:22И первым шагом будет поиск вдохновения, потому что я хочу дать Claude не просто промпт в стиле «эй, сделай мне три разных штуки».
00:04:30В идеале я хочу предоставить Claude Code несколько примеров.
00:04:33Я хочу сделать скриншоты постеров, которые мне нравятся.
00:04:35Я хочу сделать скриншоты стилей дизайна, которые мне по душе.
00:04:39Передать их Claude Code и сказать: «Эй, можешь создать что-то в том же духе?»
00:04:43Сейчас мы работаем просто над постером, но это справедливо и для создания посадочной страницы, главного экрана (hero section) или чего-то подобного.
00:04:50Теперь ваш следующий вопрос должен звучать так: «Где найти вдохновение?»
00:04:52К счастью, есть масса мест для поиска идей.
00:04:55Один из хороших сайтов — Pinterest.
00:04:57Я просто ввел «инфографика для Instagram» и увидел все эти потенциальные дизайны.
00:05:01Еще один отличный вариант — Landbook, который очень хорош для веб-дизайна и главных экранов.
00:05:06У нас также есть такие ресурсы, как Dribbble, причем Dribbble с тремя буквами B.
00:05:11Идея в том, что вам просто нужно зайти туда и начать формировать собственную библиотеку дизайнов, к которой вы всегда сможете обратиться и показать ее Claude Code, когда захотите что-то спроектировать.
00:05:21Так что вам не придется повторять этот процесс поиска вдохновения каждый раз.
00:05:24Поэтому я сделаю несколько скриншотов того, что мне нравится.
00:05:27Мне нравится этот вариант.
00:05:29Думаю, он выглядит довольно интересно.
00:05:31И помните, вы просто стремитесь задать общую эстетику, из которой Claude будет черпать вдохновение.
00:05:36И этот вариант, на мой взгляд, тоже выглядит весьма интересно.
00:05:39Теперь я перетащу эти три скриншота в окно ввода промпта.
00:05:43И дам ему практически тот же запрос, что и раньше: «Эй, мне нужен тот самый пост для Instagram.
00:05:48Мне нужны три разные версии».
00:05:49Только на этот раз я скажу: опирайтесь на эти скриншоты.
00:05:52Я хочу, чтобы они использовались как вдохновение.
00:05:54Для каждого скриншота можно сделать свой вариант дизайна.
00:05:59И я также попрошу: «Обязательно используйте навык Impeccable».
00:06:02А еще я скажу ему, что при необходимости генерации сторонних ассетов можно использовать мой MCP Higgs field.
00:06:09Вы можете использовать и другие инструменты, например, file.ai для других генераторов изображений.
00:06:14Идея в том, что поскольку мы теперь внутри Claude Code, мы можем подтягивать в этот процесс дизайна все, что захотим.
00:06:19И опять же, вы не обязаны использовать сторонние изображения, если не хотите.
00:06:23Но мой запрос будет звучать именно так.
00:06:25Итак, давайте воссоздадим те три поста, которые мы сделали.
00:06:29Опять же, мы используем навык slash design.
00:06:31Но я добавил сюда три скриншота.
00:06:33И я хотел бы использовать их в качестве вдохновения для нашего процесса проектирования.
00:06:37Так что мне нужны три новых варианта.
00:06:39Сделайте по одному варианту, опираясь на каждый из соответствующих скриншотов.
00:06:43И снова используйте навык дизайна Impeccable.
00:06:45И помните, у вас есть доступ к Higgs field MCP.
00:06:48Поэтому, если вы чувствуете необходимость сгенерировать сторонние ассеты для наших постеров, сделайте это тоже.
00:06:55Я оставляю это на ваше усмотрение.
00:06:56И это, по сути, первый и второй шаги этого процесса.
00:06:59Шаг первый — найти вдохновение.
00:07:00А шаг второй — непосредственное использование тех дополнительных навыков, которые мы не можем применить внутри веб-приложения Claude design.
00:07:08И если вы думаете: «Эй, вы постоянно упоминаете Impeccable, я понятия не имею, что это такое»...
00:07:11Это просто бесплатный навык с открытым исходным кодом, который вы можете добавить в Claude code.
00:07:16И он полностью посвящен фронтенд-дизайну.
00:07:18По сути, его фишка в том, что он распознает признаки ИИ-халтуры (AI slop), избавляется от них и добавляет лучшие принципы дизайна ко всему, что вы создаете.
00:07:26Если вы хотите погрузиться в это глубже, у меня есть видео, где очень подробно разбирается наилучшее использование Impeccable.
00:07:31А теперь давайте взглянем на новые постеры, которые Claude создал с помощью Slash design.
00:07:35Как видите, они определенно заимствуют черты из того вдохновения, что мы ему предоставили.
00:07:39И в любой момент времени, как и раньше, я могу приблизить изображение.
00:07:43Я могу посмотреть свойства и начать редактирование.
00:07:46А теперь давайте поговорим о правках (tweaks).
00:07:49У этого дизайна пока нет элементов управления правками.
00:07:50Опишите, что вы хотите настроить, и Claude добавит для этого панель правок.
00:07:53Что ж, давайте сделаем это, потому что теперь мы переходим к третьему этапу процесса, где мы хотим начать просто подстраивать все под себя, пока нам не понравится результат.
00:08:00Поэтому я открою терминал — где вы там — и скажу: «Эй, можем ли мы теперь добавить сюда элементы управления для правок?»
00:08:10Я бы хотел, чтобы правки были очень агрессивными.
00:08:12То есть я хочу иметь возможность редактировать практически все, насколько это возможно, используя панель правок внутри Claude design.
00:08:21Теперь вы видите этот раздел правок справа.
00:08:24И мы смотрим на этот вариант посредине.
00:08:25Мы можем изменить цвет бумаги, верно?
00:08:29Что мы хотим здесь сделать?
00:08:30И также помните, что эти настройки могут просто подкидывать идеи.
00:08:33Поэтому в любой момент вы можете вернуться к Claude Code и запросить эти изменения с помощью промпта.
00:08:39Опять же, главное преимущество визуального отображения заключается в том, что я могу вносить правки намного быстрее, чем если бы приходилось промптить Claude Code, ждать генерации, проверять, нравится ли мне, и повторять всё заново.
00:08:52Это делает весь процесс гораздо быстрее.
00:08:55Мы можем изменить внешний вид текста.
00:08:58Можно изменить реальный размер, начертание, разметку и так далее.
00:09:03Так что здесь можно отредактировать абсолютно всё.
00:09:06Но также помните, что мы можем делать и масштабные изменения.
00:09:08Например, мне просто не нравится общий вид второго варианта.
00:09:12Мы тоже можем это сделать.
00:09:13Я могу дать другой промпт: мол, мне не нравится текущее содержание.
00:09:17Я хочу, чтобы оно более подробно объясняло людям, что делает slash design.
00:09:21Так что я могу сказать: для второго варианта дизайна я бы хотел выбрать именно его.
00:09:26Но, честно говоря, я бы хотел немного изменить контент.
00:09:29Опять же, мы делаем инфографику, которая объясняет, что именно предлагает slash design.
00:09:34Поэтому при воссоздании вы можете игнорировать остальные два.
00:09:36Пока я хочу сосредоточиться только на этом.
00:09:38Перейдите в веб-поиск, убедитесь, что вы понимаете, что именно предлагает slash design, и добавьте это в новую версию инфографики.
00:09:48И вот обновленная версия этого постера.
00:09:49Как видите, здесь гораздо больше информации о том, что именно делает новый дизайн slash.
00:09:53И опять же, благодаря новому навыку дизайна slash, редактировать очень легко.
00:09:56Ой, мне не нравится этот текст.
00:09:59Я могу переместить его куда угодно.
00:10:00Я могу настроить сам текст и так далее, и тому подобное.
00:10:03И отсюда вы просто продолжаете трехэтапный процесс создания вдохновения, использования нужных навыков и доработки любого понравившегося дизайна.
00:10:11Так что, если мы действительно хотим выбрать средний вариант, мы просто скажем Claude Code: эй, я хочу работать только с этим средним.
00:10:16И вы будете просто итерировать, итерировать и итерировать, пока вам не понравится результат.
00:10:20А затем вы можете делать с ним все, что захотите.
00:10:22В целом, этот навык дизайна slash значительно упрощает разработку фронтенда прямо внутри самого Claude Code.
00:10:28Зачастую нам приходилось полагаться на сторонние инструменты вроде Impeccable для создания подобного дизайна в реальном времени.
00:10:34Поэтому обязательно найдите время опробовать эту новую функцию.
00:10:36Я думаю, она идеально подходит для тех, кто пользуется Claude Code, но при этом любит веб-приложение Claude Design и кому было неудобно переключаться между ними.
00:10:45В этом ее ниша.
00:10:46На эту аудиторию она и рассчитана.
00:10:48Так что, как всегда, дайте мне знать, что вы об этом думаете.
00:10:51Обязательно загляните на Chase AI Plus, если хотите получить мой мастер-класс по Claude Code.
00:10:55А кроме этого, еще увидимся.