00:00:00Обновления никогда не прекращаются.
00:00:02Anthropic только что выпустили Claude Design,
00:00:05который теперь дает нам интерфейс для создания веб-приложений,
00:00:09сайтов, в общем, практически всего, что мы захотим,
00:00:11через интерфейс Claude.
00:00:13Это их версия Google Stitch.
00:00:16И, как вы видите из этого демо-видео,
00:00:18все дело в возможности настраивать всё,
00:00:21от макро- до микро-уровня в этих дизайнах.
00:00:23И мы говорим не только о веб-приложениях,
00:00:25мы также говорим и о мобильном дизайне.
00:00:27И это довольно забавно, потому что когда мы обсуждаем
00:00:28Anthropic и Claude Code,
00:00:30одной из его главных слабостей является фронтенд-дизайн.
00:00:32Так что видеть, что теперь они выходят
00:00:34с полноценным приложением,
00:00:36которое устраняет эту слабость, — это очень круто.
00:00:39В этом видео я покажу вам, как это работает.
00:00:41Мы проведем небольшую демонстрацию,
00:00:42чтобы вы могли сами во всем разобраться.
00:00:43Claude Design был создан с учетом Opus 4.7,
00:00:46и он доступен, если вы используете любой тариф
00:00:49от Pro Max до Enterprise.
00:00:51И он делает всё: от прототипов до макетов
00:00:53и презентаций PowerPoint.
00:00:54И это то, что мы можем экспортировать в такие вещи,
00:00:57как Microsoft PowerPoint, или отправить в Canva.
00:00:59Одна из крутых особенностей здесь — это бренд-дизайн.
00:01:01Вы можете предоставить ему кодовую базу,
00:01:03скажем, кодовую базу вашего сайта,
00:01:05и он извлечет все активы бренда с сайта,
00:01:09чтобы сопоставить такие вещи, как цвета и типографику,
00:01:11с дизайном, над которым вы работаете.
00:01:12Чтобы начать, вам нужно перейти на claud.ai/design,
00:01:15и вы попадете на страницу, которая выглядит вот так.
00:01:18Сразу слева у нас есть несколько вариантов:
00:01:20прототипы, презентации, шаблоны или другое.
00:01:23Здесь внизу, как я и говорил,
00:01:25у нас есть возможность создать дизайн-систему.
00:01:27Если я перейду к настройке дизайн-системы,
00:01:29я могу ввести, например, название моей компании,
00:01:33а затем предоставить примеры моей дизайн-системы.
00:01:36Это не обязательно делать,
00:01:38но это поможет, если у вас уже есть что-то,
00:01:40чему вы хотите соответствовать.
00:01:41Вы можете дать ему ссылку на ваш GitHub.
00:01:43Вы даже можете перетащить папку.
00:01:45Если кодовая база находится прямо на вашем компьютере,
00:01:48вы можете перетащить ее сюда,
00:01:49или просто добавить шрифты, логотипы и активы,
00:01:51а также любые другие примечания.
00:01:52Я просто выбрал папку на своем компьютере
00:01:55с активами моего сайта,
00:01:57а затем нажал «продолжить генерацию».
00:01:59Когда вы это делаете, особенно с большой кодовой базой,
00:02:01во-первых, он не будет загружать её целиком.
00:02:03Он определит, какие файлы действительно имеют смысл.
00:02:05А во-вторых, появится всплывающее окно с текстом:
00:02:07«Эй, это может занять от 15 до 20 минут»,
00:02:09пока он просматривает все ваши файлы.
00:02:11Если же вы хотите сделать что-то с нуля,
00:02:12это тоже вполне возможно.
00:02:13Давайте просто начнем новый прототип.
00:02:16Назовем его «Chase demo».
00:02:17У нас есть два варианта.
00:02:18Либо просто черновой набросок,
00:02:20либо мы можем сразу перейти к высокоточному макету.
00:02:23Давайте сделаем макет.
00:02:25Это переведет вас на эту страницу.
00:02:26И снова, здесь определенно чувствуется вайб Stitch.
00:02:28Я скажу ему:
00:02:29«давай создадим интерактивную графику в темной теме»,
00:02:31показывающую, как культура течет между городами,
00:02:33вращающийся глобус с городами, соединенными светящимися путями.
00:02:35Это то же самое, что они делали в демо,
00:02:37но мне интересно посмотреть, совпадет ли то,
00:02:40что мы получим здесь, с активом из видео,
00:02:43и какие различия мы увидим.
00:02:45Насколько сильно они приукрасили это в рекламе?
00:02:47Итак, отправляем запрос.
00:02:48Кстати, вы видите здесь,
00:02:50что мы также можем выбирать модель.
00:02:52Можно прикреплять файлы.
00:02:53Можно использовать голос и импортировать что угодно.
00:02:55Он сразу начинает задавать нам вопросы,
00:02:57что мне очень нравится.
00:02:58Это почти как режим планирования в Claude Code.
00:03:02О какой культуре мы думаем?
00:03:04Давайте просто выберем смешанный стиль глобуса.
00:03:07Давайте выберем вот этот путь потока.
00:03:13Выглядит круто.
00:03:14Что выберем для цветовой палитры?
00:03:16Давайте многоцветную.
00:03:18И мне сразу нравится тот факт,
00:03:20что мы получаем эти подсказки.
00:03:21В Stitched я бы такого не получил.
00:03:24В других инструментах я бы тоже этого не увидел.
00:03:26Одна из самых мощных вещей в Claude Code —
00:03:29и мы говорили об этом в других уроках по веб-дизайну —
00:03:31это наличие такого диалога,
00:03:33помогающего выявить слепые зоны в нашем плане.
00:03:37И то, что он задает мне все эти вопросы — это огромный плюс.
00:03:39Он задает их довольно много.
00:03:40Даже обычный режим планирования в Claude Code задает около трех.
00:03:43Итак, выберем вращение перетаскиванием.
00:03:45Какие города нам стоит выделить?
00:03:47Давайте топ-10.
00:03:49Насколько сложный интерфейс?
00:03:50Давайте полноценный дашборд.
00:03:53Общее настроение.
00:03:54Пусть будет «editorial» (издательский стиль).
00:03:58Остановимся на нем.
00:04:00Что должно быть настраиваемым?
00:04:02О, давайте выберем палитру цветов потока.
00:04:07Пусть сделает три вещи.
00:04:08Продолжим.
00:04:09Затем слева, как только мы ответим на вопросы,
00:04:11он отображает прогресс.
00:04:12Опять же, похоже на то, что мы видим в Claude Code,
00:04:15если запустить его в режиме планирования.
00:04:17И, кстати, это очевидно та вещь,
00:04:19которую нужно делать именно в веб-приложении.
00:04:22Это недоступно в терминале
00:04:24по понятным причинам — из-за графической природы.
00:04:27И судя по тому, что я читал,
00:04:29я не думаю, что это когда-либо внедрят
00:04:30в десктопное приложение, а может и внедрят когда-нибудь.
00:04:33Но на данный момент это работает только через Claude.ai.
00:04:35Пока идет процесс сборки,
00:04:36давайте обсудим возможные вопросы,
00:04:38например: чем это отличается
00:04:39от того, если бы я просто дал этот промпт
00:04:41в окно чата или запустил Claude Code
00:04:43и просто сказал: «эй, я хочу, чтобы ты
00:04:45создал эту интерактивную штуку»?
00:04:47Ну, и чтобы он просто, ну вы знаете,
00:04:48сделал из этого какое-то веб-приложение.
00:04:50Ответ такой: если упрощать, то особо ничем.
00:04:54В смысле, он просто пишет код.
00:04:55Результат будет тем же.
00:04:56Разница в том — и опять же,
00:04:58если вы хоть как-то касались фронтенд-дизайна,
00:05:00будь то даже простая целевая страница,
00:05:02вы понимаете силу возможности
00:05:04визуально видеть эти вещи и сравнивать их.
00:05:05Вот почему Google Stitch такой крутой,
00:05:08потому что классная штука в Stitch
00:05:09заключается даже не обязательно в философии дизайна,
00:05:11хотя я считаю, что она очень хороша.
00:05:12Дело в том, что у меня есть интерфейс,
00:05:13где я могу визуально видеть кучу вариантов
00:05:15и редактировать их таким образом.
00:05:17А когда мне понравится — перенести в код.
00:05:18Когда ты делаешь всё, начиная с кода,
00:05:20с точки зрения дизайна — это тяжело.
00:05:22Это получается как-то коряво.
00:05:23Довольно трудно взять визуальную среду
00:05:26и переложить её на естественный язык,
00:05:28который превращается в код,
00:05:29который превращается в визуал, и при этом попасть в точку,
00:05:32особенно в самом начале.
00:05:33Мне нужно видеть вещи визуально.
00:05:34По крайней мере мне нужно видеть варианты.
00:05:36И поэтому наличие такого инструмента — это круто.
00:05:38Это отличный шаг вперед для Anthropic и Claude Code,
00:05:41потому что это было их реальным слабым местом.
00:05:42Вот почему такие приложения, как Pencil
00:05:45и им подобные, становятся такими популярными,
00:05:46потому что они дают визуальную среду
00:05:48для работы с подобными вещами.
00:05:49Также краткое примечание: как вы видите внизу,
00:05:51это полноценные приложения.
00:05:53По сути, это прототипирование.
00:05:55Так что у вас могут быть штуки, называемые API.
00:05:58Вам стоит воспринимать это скорее
00:06:00не как визуальную дизайнерскую штучку типа Canva.
00:06:03Вам стоит думать об этом скорее
00:06:04в терминах Google Studio,
00:06:05что-то типа Google AI Studio.
00:06:07Вот с чем он вернулся.
00:06:08Он выбрал издательский стиль.
00:06:10Мы видим глобус прямо здесь.
00:06:12Я могу вращать его мышкой.
00:06:14Мы можем менять скорость вращения, интенсивность свечения,
00:06:18менять палитру.
00:06:19Это довольно прикольно.
00:06:21И тут еще есть небольшие описания сбоку.
00:06:25Теперь поговорим о возможности редактирования.
00:06:27Во-первых, у нас есть вот эта кнопка настроек сверху.
00:06:30Эти настройки касаются скорости вращения
00:06:33и всего такого.
00:06:34Я могу оставлять комментарии, редактировать, рисовать.
00:06:37И мы также можем сделать
00:06:39полноэкранный режим, чтобы увидеть, как это будет на самом деле.
00:06:41В полноэкранном режиме выглядит интересно.
00:06:42На самом деле так выглядит намного, намного лучше.
00:06:44Но допустим, я хочу внести правку в эту штуку.
00:06:46Очевидно, мы могли бы просто вернуться
00:06:49в окно чата и написать промпт.
00:06:50Но если я перейду в «edit», я смогу действовать точечно.
00:06:55Это напоминает мне редактор Cursor
00:06:58или даже что-то вроде Lovable.
00:06:59Так что я могу выбирать отдельные города.
00:07:04Если я выберу глобус целиком, он появится здесь.
00:07:07И я могу менять такие вещи, как цвет.
00:07:11Выглядит ужасно... высоту и всё такое.
00:07:14То есть у меня есть возможность очень точно указать,
00:07:16что именно я хочу изменить, и это опять же здорово.
00:07:18Это лучше, чем писать текстом:
00:07:19«Эй, я хочу изменить размер вот этого».
00:07:21Я могу просто выбрать это здесь и отредактировать.
00:07:24Мы также можем оставлять комментарии.
00:07:25Я могу кликнуть на любой конкретный элемент.
00:07:27То же самое, что и с редактированием, но вместо того,
00:07:29чтобы менять конкретные цифры,
00:07:31я могу кликнуть на глобус, оставить комментарий и написать:
00:07:34«Можно сделать глобус побольше?»
00:07:37Отправить в Claude.
00:07:40И это создает очередь из комментариев.
00:07:41Если вы не хотите отправлять всё в Claude сразу,
00:07:43но в любой момент вы можете отправить это ему,
00:07:45и он начнет работу.
00:07:46Вдобавок к этому, мы можем рисовать.
00:07:48Например, я могу сказать: «Так, ну,
00:07:50я просто хочу луну вот здесь».
00:07:52Давайте добавим луну.
00:07:53Я хочу видеть тут Artemis 2, летающий вокруг.
00:07:56И всё в таком духе.
00:07:56Затем здесь у нас также есть файл дизайна.
00:07:58Так что вы можете заглянуть
00:08:00в код «под капотом».
00:08:02И наконец, у нас есть возможность экспортировать
00:08:04эту штуку и поделиться ею.
00:08:05Если я нажму «экспорт», я могу скачать её как zip-архив.
00:08:07Могу экспортировать в PDF, PowerPoint, отправить в Canva.
00:08:11Или, что еще очень круто, я могу передать это
00:08:13в Claude Code.
00:08:14Он дает мне команду, чтобы импортировать это
00:08:15внутрь Claude Code, и это отлично.
00:08:17На этом я сегодня закончу.
00:08:18Я знаю, это был краткий и быстрый обзор,
00:08:19но я просто хотел показать вам,
00:08:21как ориентироваться в этом инструменте и что возможно.
00:08:23Обязательно ждите глубокий разбор в ближайшие день-два,
00:08:26где я покажу, как выжать из этого максимум.
00:08:29Как всегда, делитесь своими мыслями.
00:08:31Если хотите попасть на мастер-класс Chase AI,
00:08:33ссылка в закрепленных комментариях, и до скорой встречи.