Transcript
00:00:00Claude Design вышел и полностью изменил представление о дизайне, но на самом деле в нем гораздо больше
00:00:04хайпа, чем осознает большинство людей.
00:00:05И именно поэтому то, что вы видели в X, — это не полная история.
00:00:09Если вы думаете, что Claude Design делает что-то революционное или что те безумные демо,
00:00:13которые ходят вокруг, являются доказательством того, что вам нужно переключиться на него, вы ошибаетесь.
00:00:17Сам инструмент даже не является причиной того, что эти дизайны выглядят так хорошо, а способ, которым люди
00:00:21его используют, тихо работает против них так, как большинство еще не успело заметить.
00:00:25Claude Design позиционировался как революционный продукт для индустрии дизайна с того момента,
00:00:29как он вышел.
00:00:30Люди начали называть его «убийцей Figma» или концом для дизайнеров, и влияние было достаточно
00:00:34большим, чтобы акции Figma начали падать, а ее оценка снизилась.
00:00:38Это инструмент для создания реалистичных прототипов, вайрфреймов, дизайнов, презентаций и других
00:00:43различных видов дизайна.
00:00:44Но реальность такова, что это не более чем хайп.
00:00:47Это буквально Claude Code, переупакованный в другой инструмент и продаваемый как таковой, потому что Claude Code
00:00:52может делать то же самое и, возможно, даже больше.
00:00:54В Claude Design есть такие функции, как редактирование и комментарии, но нет ничего такого,
00:00:58чего не мог бы сделать Claude Code, если дать ему правильные инструменты.
00:01:01И когда мы говорим, что это переупакованный Claude Code, это не потому, что мы его не тестировали.
00:01:05Мы дали ему простой промпт, попросив создать сайт сообщества, и ответили на вопросы,
00:01:09которые у него возникли.
00:01:10Он создал два дизайна, которые были впечатляющими сами по себе и намного лучше того, как Claude
00:01:14генерировал лендинги ранее, но у них все еще было много проблем.
00:01:18Одна версия была обрезана на разделе цен, и футера не было вовсе, поэтому мы протестировали,
00:01:23как Claude Code справится с аналогичным промптом.
00:01:25Мы использовали Opus 4.7 на максимальных усилиях для сравнения, и дизайн, который он выдал,
00:01:30был на одном уровне с возможностями Claude Design.
00:01:32Было несколько проблем, например, неправильно выбранный цвет шрифта для кнопки регистрации,
00:01:37но в целом это был очень хорошо построенный дизайн.
00:01:39И это несмотря на отсутствие «дизайнерской обвязки» и без каких-либо специальных промптов,
00:01:43которые есть в Claude Design, чисто самостоятельно, с почти нулевой помощью с нашей стороны.
00:01:48Но демо, которые вы, должно быть, видели, выглядят впечатляюще, и за ними скрывается нечто большее.
00:01:52То, что циркулирует в социальных сетях, основано на хайпе, а не на том, что инструмент на самом деле
00:01:53делает сам по себе.
00:01:57Люди генерируют дизайны, следуя обширным рабочим процессам, а затем преподносят их так, будто Claude
00:01:58Design построил все с первого раза.
00:02:03Но те же рабочие процессы можно запустить в Claude Code напрямую, без необходимости в Claude
00:02:05Design вообще.
00:02:09Поэтому, хотя этот продукт создан для дизайнеров, им лучше использовать Claude Code вместо
00:02:10Claude Design, потому что так они смогут пробовать разные вариации, экспериментировать
00:02:14больше и получать такие же, если не лучшие результаты, чем в Claude Design.
00:02:19Они могут итерировать больше раз с Claude Code, вместо того чтобы прерываться,
00:02:22как только дизайн начинает во что-то превращаться.
00:02:26Построение поверх того, что уже есть, вместо того чтобы каждый раз начинать заново, дает им
00:02:28лучший контроль над направлением каждого дизайна.
00:02:32И поскольку все, что создает Claude Code, — это реальный код, в итоге у них не
00:02:35одноразовый прототип, а то, что можно отправить прямо в продукт, не перестраивая
00:02:39его кем-то другим впоследствии.
00:02:43И ко всему прочему, с Claude Design есть проблема стоимости.
00:02:45Claude Code может делать то же самое гораздо дешевле, тогда как Claude Design построен отдельно
00:02:48и учитывается в лимитах, которые обновляются еженедельно, и это не засчитывается в другие лимиты,
00:02:53но он расходует ресурсы гораздо быстрее, чем вы могли бы ожидать от моделей
00:02:57в других приложениях Claude.
00:03:02Это сильнее всего бьет по дизайнерам, потому что квота настолько мала, что они не могут нормально экспериментировать,
00:03:03как им нужно, и их лимит заканчивается всего после нескольких итераций дизайна.
00:03:08И именно на это жалуется множество людей.
00:03:12Когда кто-то работал с ним, он быстро исчерпал лимит дизайна всего после 20 итераций,
00:03:15даже будучи на самом высоком плане.
00:03:19И многие другие говорят, что достигают лимита всего за час и все равно получают простой
00:03:23дизайн, который легко реализуется с помощью Claude Code за один раз.
00:03:27Поэтому на практике он не очень пригоден, так как люди достигают лимитов прежде, чем успевают
00:03:31даже закончить рабочий процесс, над которым работают, что делает его намного хуже по сравнению с лимитами Claude Code.
00:03:35Причина, по которой работы Claude Design выглядят так впечатляюще, на самом деле заключается в выпуске модели Opus 4.7, а не в
00:03:39самом инструменте.
00:03:40Opus 4.7 — это снова передовая модель с удивительными возможностями, которая работает
00:03:45лучше по всем бенчмаркам.
00:03:46Но улучшение, которое действительно здесь важно, — это зрение (vision).
00:03:50Эта модель обладает значительно лучшим зрением и может видеть изображения в гораздо большем разрешении,
00:03:52чем могла раньше.
00:03:54Claude Opus 4.6 могла анализировать изображения с разрешением 1,15 мегапикселя, в то время как
00:03:594.7 способна анализировать 3,75 мегапикселя.
00:04:00Это означает, что она гораздо лучше понимает дизайн на основе референса.
00:04:07Если вы дадите ей референсный дизайн, она обработает его с гораздо большей четкостью и
00:04:10заметит вещи, которые пропустила бы раньше.
00:04:14Благодаря этому обновлению модели Anthropic заполнили единственный пробел, где моделям Claude не хватало возможностей и
00:04:18требовалась обширная работа, а именно фронтенд-дизайн.
00:04:20Эта модель более искусна и креативна при выполнении задач, и сама по себе она производит
00:04:25интерфейсы и дизайны более высокого качества.
00:04:27Поэтому, когда вышел Claude Design, он был представлен с большой помпой из-за своих невероятных дизайнов,
00:04:31но на самом деле это модель стала лучше.
00:04:34Это не инструмент стал настолько невероятно хорош, что это привело к другим визуальным эффектам, которые
00:04:38вы видите.
00:04:41Claude Design был еще одним умным способом продажи чего-то и создания вокруг этого хайпа со стороны Anthropic.
00:04:45Теперь вы можете получить те же преимущества, что и в Claude Design, в Claude Code 2 или даже,
00:04:46возможно, лучше.
00:04:50Вы можете воспроизвести поток вопросов Claude Design в Claude Code, создав простой навык (skill).
00:04:55Когда вы создаете проект в Claude Design, вы даете промпт, и он задает много вопросов,
00:04:56чтобы правильно определить направление дизайна.
00:05:00Он задает гораздо больше вопросов, чем планировщик Claude Code, но навык может делать то же самое.
00:05:04Навык содержит инструкции о том, как проводить сессию вопросов, точно так же, как Claude Design,
00:05:07используя вопросы, чтобы заполнить пробелы, создаваемые промптом, и узнавая, что нужно построить.
00:05:11Он определяет, когда нужно задавать уточняющие вопросы и как поток должен на самом деле работать.
00:05:16Он также включает примеры вопросов для проведения сессии, библиотеку вопросов и даже
00:05:21ASCII-макеты сайтов, чтобы он мог определить расположение элементов на лендинге.
00:05:25Когда вы даете ему промпт, он использует этот навык и задает вопросы, связанные с пробелами, которые он идентифицирует,
00:05:30прямо как Claude Design.
00:05:34Он задает несколько вопросов в разных областях, и как только у него есть вся информация,
00:05:35необходимая для реализации, он начинает строить.
00:05:39Лучшая часть в том, что он напрямую выводит код, поэтому нет этапа передачи дизайна в код.
00:05:41И с таким подходом вы можете итерировать столько, сколько хотите, не беспокоясь о том, что у вас
00:05:45закончатся лимиты всего за час.
00:05:47Генерация пользовательского интерфейса из такого же типа промпта вместе с похожим потоком вопросов в
00:05:51Claude Code была более или менее похожа на то, что генерировал Claude Design.
00:05:55Главное отличие в том, что Claude Design имел преимущество в некоторых аспектах, где он делал
00:05:57сайт более захватывающим, добавляя небольшие анимации, чтобы сделать его более привлекательным.
00:06:01Но прежде чем мы двинемся дальше, давайте послушаем нашего спонсора.
00:06:05HeyGen. Вы, вероятно, пробовали создать видео с помощью
00:06:09ИИ-инструмента.
00:06:13Через 20 минут вы жонглируете таймлайнами, перезаписываете озвучку и боретесь с синхронизацией губ, которая выглядит
00:06:16как плохой дубляж.
00:06:18HeyGen пропускает все это.
00:06:19HeyGen — это ИИ-генератор видео, который только что выпустил совершенно новый CLI, а это значит, что полноценное видео с
00:06:24цифровым двойником-аватаром можно сгенерировать с помощью одной команды.
00:06:25Никаких таймлайнов, никаких камер, никакой съемочной группы.
00:06:26Запишите своего цифрового двойника один раз, и HeyGen позволит вам публиковать контент постоянно без пересъемок,
00:06:31превращая новостные рассылки, PDF-файлы, презентации в видео.
00:06:34Генерируйте полностью отредактированные многосценовые видео из одного промпта с помощью видео-агента, а затем переводите
00:06:36на глобальную аудиторию с полной синхронизацией губ.
00:06:40Создавайте видео с аватарами, голосами, видео-агентом, переводом и многим другим на developers.heygen.com
00:06:44Цифровые двойники требуют подтвержденного согласия.
00:06:48Ваш контент никогда не используется для обучения публичных моделей, и вся платформа построена для
00:06:51безопасности корпоративного уровня.
00:06:56Начните выпускать видео студийного качества, не прикасаясь к камере.
00:06:59Переходите по ссылке в закрепленном комментарии и попробуйте HeyGen сегодня.
00:07:03Большинство дизайнов с прокруткой, которые вы могли видеть в X, когда люди демонстрировали
00:07:04Claude Design, — это просто сайты, использующие фоновые видео, что заставляет их выглядеть гораздо более
00:07:07премиально и создает впечатление, что они более впечатляющие, чем есть на самом деле.
00:07:11Большинство демо часто являются просто промптами, скопированными с сайтов, предоставляющих готовые шаблоны промптов.
00:07:15Промпты включают ссылку на видео, которое должно использоваться в качестве фона, вместе с
00:07:20подробными рекомендациями о том, как это реализовать.
00:07:24Так что любой агент способен реализовать такой тип сайта, а не только Claude Design, при условии,
00:07:28что ему дают похожие промпты.
00:07:29Но это лишь примеры промптов для витринных сайтов.
00:07:33В реальности приложения производственного уровня строятся с использованием библиотек, таких как Lenis, который
00:07:36используется во многих продакшн-приложениях, а также GSAP, который является одной из самых популярных библиотек
00:07:40для реализации плавной анимации, делающей опыт работы с сайтом гораздо более захватывающим, чем
00:07:42раньше.
00:07:45Чтобы проверить это, мы скачали видео и в нашем промпте просто сказали Claude Code
00:07:49использовать видео как hero-секцию вместе с темами оформления, которые мы хотели, и он реализовал
00:07:54остальную часть сайта самостоятельно.
00:07:59Нам пришлось поправить его только один раз, когда пришлось объяснить, о чем было видео.
00:08:00И он идеально вписал стиль в лендинг, сделав его намного лучше,
00:08:04чем предыдущая версия.
00:08:08Сайт был реализован очень хорошо, что весьма мощно, учитывая, насколько простым был промпт,
00:08:10и он включил различные анимации и взаимодействия, которые сделали эту часть сайта
00:08:14гораздо более мощной и интерактивной, чем раньше с возможностями Claude.
00:08:18Теперь в Claude Code вы также можете легко дополнять его другими инструментами по сравнению с Claude
00:08:19Design, потому что Claude Code более технически способен и может реализовывать вещи более бесшовно.
00:08:23Вы даже можете использовать open-source навык, такой как «scrollytelling», который, по сути, включает анимации прокрутки-рассказывания
00:08:28в вашем проекте.
00:08:32Так что с этим навыком Claude может легко реализовать многоуровневое повествование из простого промпта
00:08:36и работать над созданием анимаций, которые идут гораздо глубже, чем то, что Claude Design
00:08:42был бы способен сделать сам по себе.
00:08:46Также, если вам нравится наш контент, подумайте о том, чтобы нажать кнопку «хайп», потому что это помогает нам
00:08:48создавать больше подобного контента и достигать большего количества людей.
00:08:53Использование Claude Code вместо Claude Design упрощает реализацию UI, потому что с
00:08:57Claude Code вы можете легко интегрировать встроенные системы дизайна, включая компоненты
00:08:59из shadcn, Aceternity или Hero UI, которые уже включают множество готовых анимаций.
00:09:03Это снижает необходимость для модели выяснять, как должен выглядеть и вести себя каждый компонент,
00:09:07и вместо этого позволяет ей сосредоточиться на улучшении общего дизайна.
00:09:11Поэтому выходные данные гораздо легче достичь по сравнению с работой напрямую в Claude Design по умолчанию.
00:09:16Вы также можете использовать навыки фронтенд-дизайна или другие специализированные навыки, адаптированные к вашему проекту,
00:09:22созданные с помощью конструктора навыков, который анализирует текущее состояние проекта.
00:09:27Это помогает ему реализовывать функции более эффективно, не теряя времени.
00:09:30Claude Code также более гибок, потому что вы можете подключать к нему MCP-серверы.
00:09:35Например, вы можете использовать MCP-сервер shadcn, чтобы агент мог сам устанавливать нужные компоненты
00:09:39вместо того, чтобы ему явно говорили, что использовать и где.
00:09:43Аналогично, вы можете использовать различные MCP, которые помогают строить UI более эффективно, а не полагаться
00:09:47на чисто сгенерированный дизайн.
00:09:51Даже с такими моделями, как Opus 4.7, и такими инструментами, как Claude Design, напрямую сгенерированные дизайны
00:09:56часто выдают, что они были созданы моделью, потому что они склонны следовать похожим паттернам.
00:09:59Но использование установленных библиотек помогает уменьшить эту проблему и делает результат более естественным
00:10:04и менее предсказуемым.
00:10:06Самое большое преимущество использования Claude Code вместо Claude Design заключается в том, что вы можете подключить
00:10:11его к git.
00:10:16Хотя вы можете подключить GitHub к Claude Design, есть огромная разница
00:10:20в том, как они оба работают.
00:10:22Git-интеграция Claude Design довольно проста.
00:10:26Она в основном позволяет ему получать файлы из подключенного репозитория GitHub и использовать их, чтобы
00:10:27понимать дизайны.
00:10:30Но его цель в основном ограничена чтением и ссылками.
00:10:31Он на самом деле не вносит изменения в репозиторий.
00:10:34Claude Code, с другой стороны, сильно отличается.
00:10:38Он может выполнять полные git-операции, такие как коммиты, создание веток и многое другое.
00:10:39Поэтому, если что-то идет не так при реализации или если вы предпочитаете старую версию после внесения
00:10:42изменений, вы можете легко вернуться к предыдущей версии, используя git.
00:10:45Это то, чего вы не смогли бы сделать с Claude Design в процессе его использования, что делает
00:10:47Claude Code гораздо более сильным подходом.
00:10:51Для создания различных прототипов, вместо того чтобы идти в Claude Design или использовать Figma, это
00:10:55более эффективно, если вы делаете макеты прямо в HTML.
00:10:59Для пробы разных вариаций вы также можете использовать параллельных агентов и рабочие деревья (worktrees),
00:11:02чтобы разделять задачи, похоже на то, как Claude Design исследует дизайны, но в git-управляемом виде,
00:11:04так что вы можете легко сохранить лучшую версию и отбросить остальные.
00:11:09Вы можете просто дать ему промпт использовать под-агентов в отдельных рабочих деревьях и попросить каждого агента
00:11:12реализовать разную вариацию одного и того же дизайна.
00:11:16С этим Claude создаст агентов в отдельных рабочих пространствах.
00:11:21Использование параллельных агентов помогает вам сэкономить и время, и усилия при исследовании нескольких направлений
00:11:24сразу.
00:11:29Теперь, когда каждый агент закончил свою работу, вы получаете несколько вариаций, которые можете просмотреть
00:11:31в любое время и выбрать ту, которая лучше всего соответствует вашим потребностям.
00:11:35Оттуда вы можете вносить изменения и продолжать строить приложение, основываясь на точном стиле, который
00:11:39вам нравится больше всего.
00:11:40И несмотря на то, что они не сгенерированы Claude Design, каждый из сгенерированных дизайнов все еще имеет
00:11:44эстетичный вид с правильными SVG, созданными полностью через код для изображения элементов, и гораздо
00:11:47лучшим общим балансом.
00:11:51Затем вы можете слить (merge) свою предпочтительную версию в main и удалить рабочие деревья, содержащие
00:11:52дизайны, которые вам не понравились.
00:11:57Навыки, используемые здесь, вместе с другими ресурсами доступны в AI Labs Pro для этого видео
00:12:02и для всех наших предыдущих видео, откуда вы можете скачать и использовать их для своих проектов.
00:12:04Если вы нашли пользу в том, что мы делаем, и хотите поддержать канал, это лучший способ
00:12:08сделать это.
00:12:09Ссылка в описании.
00:12:15На этом мы подходим к концу видео.
00:12:19Если вы хотите поддержать канал и помочь нам продолжать делать такие видео, вы можете
00:12:23сделать это, нажав кнопку «суперспасибо» (super thanks) внизу.
00:12:24Как всегда, спасибо за просмотр, и увидимся в следующем.
00:12:25На этом мы подходим к концу видео.
00:12:26Если вы хотите поддержать канал и помочь нам продолжать делать такие видео, вы можете
00:12:30сделать это, нажав кнопку «суперспасибо» внизу.
00:12:33Как всегда, спасибо за просмотр, и увидимся в следующем.