00:00:00Claude Design — это лучшее, что случалось
00:00:01с вашей фронтенд-разработкой с тех пор, как появились навыки.
00:00:05Но если вы не знаете, что делаете,
00:00:06вы исчерпаете весь свой лимит использования
00:00:09еще до того, как создадите лендинг.
00:00:11Но этот мастер-класс по Claude Design
00:00:12поможет решить эту проблему,
00:00:14поскольку я покажу, какие функции действительно стоят вашего времени.
00:00:17Кроме того, мы проведем очное тестирование
00:00:19обычного Claude Code против Claude Design.
00:00:22И мы поговорим о некоторых интересных сценариях использования,
00:00:25которые выходят за рамки простой работы с лендингами.
00:00:27Это потрясающий инструмент, и нам многое предстоит разобрать.
00:00:30Так что давайте начнем.
00:00:31Итак, Claude Design — это ответ Anthropic на Stitch от Google.
00:00:35И так же, как Google Stitch,
00:00:37он дает нам возможность создавать множество визуальных макетов
00:00:40для наших веб-приложений, мобильных приложений и даже презентаций.
00:00:43Чтобы получить доступ к Claude Design, нужно зайти в веб-приложение.
00:00:45То есть claud.ai/design.
00:00:47Он недоступен в Claude Code
00:00:48и недоступен в настольном приложении.
00:00:51И, говоря об ограничениях,
00:00:52одно важное ограничение, которое стоит отметить сразу,
00:00:54это лимиты использования.
00:00:56У него есть собственный еженедельный лимит, и он одинаков
00:00:59независимо от того, на каком вы тарифе: Pro, Max 5 или 20X.
00:01:02И эта штука пожирает ресурсы,
00:01:05особенно если использовать определенный инструмент,
00:01:08о котором мы поговорим позже в этом видео.
00:01:10Но даже с этими ограничениями,
00:01:11Claude Design — это огромный шаг вперед
00:01:14в том, что касается фронтенд-дизайна с Claude.
00:01:17Такие вещи, как система настроек (tweak system), позволяют легко увидеть,
00:01:20как разные изменения повлияют на общее восприятие
00:01:23вашего веб-приложения.
00:01:23Функции вроде "редактировать" позволяют быстро углубиться
00:01:28в детали и менять всё на гранулярном уровне,
00:01:30не полагаясь только на текстовые запросы.
00:01:31Но если вы хотите остаться при системе комментариев,
00:01:33мы можем это сделать.
00:01:34У них есть реальная кнопка комментариев,
00:01:35где я могу выбрать отдельные части веб-приложения
00:01:39и оставить комментарии, которые либо отправляются прямо в Claude Code,
00:01:42либо добавляются в очередь комментариев для других членов моей команды,
00:01:46чтобы они могли поделиться своими мыслями, ведь это очень удобно для совместной работы.
00:01:48Вы можете делиться этими дизайнами с другими людьми,
00:01:50и все вы можете работать над одним и тем же из разных мест.
00:01:53Я могу рисовать прямо в приложении, чтобы показать, что нужно изменить.
00:01:56Я могу очень легко развернуть презентацию на весь экран.
00:02:00И, что самое важное,
00:02:02я могу очень легко экспортировать это в Claude Code.
00:02:05И такая установка с акцентом на визуальный дизайн упрощает получение
00:02:09именно тех фронтенд-результатов, которые вам нужны,
00:02:11вместо того, чтобы находиться исключительно внутри Claude Code
00:02:13и заниматься этой динамикой "сервер разработки - обновление кода - назад в код",
00:02:18которая у нас была долгое время.
00:02:19Но чтобы получить максимум от этого инструмента,
00:02:21есть вещи, которые нужно знать.
00:02:22Поэтому мы сначала начнем с фронтенд-дизайна
00:02:25для веб-приложения, что ищет большинство людей.
00:02:29И мы также покажем, что дал бы нам Claude Code
00:02:33по сравнению с Claude Design.
00:02:34Так что вы сможете увидеть, что мы здесь получаем
00:02:37и стоит ли оно того.
00:02:38Но прежде чем мы это сделаем, пара слов от нашего спонсора — меня.
00:02:42Мы только что выпустили мастер-класс по Claude Code
00:02:44в рамках Chase AI Plus.
00:02:45И это лучший способ пройти путь от нуля до AI-разработчика,
00:02:48особенно если у вас нет технического образования.
00:02:51И в последнее время мы фокусируемся на нашей системе агентской ОС (agentic OS)
00:02:54внутри мастер-класса,
00:02:55где мы используем Claude Code в качестве движка
00:02:58и дополняем его Obsidian для памяти,
00:03:00и GWS для подключения всего пакета Google Suite.
00:03:03А затем, имея этот фундамент,
00:03:05подключая любые кастомные наборы навыков,
00:03:09мы можем придумать то, что имеет смысл для наших задач.
00:03:12И мы даже рассказываем, как упаковать всё это
00:03:14и продать клиентам.
00:03:15Так что если вам это интересно,
00:03:17обязательно загляните.
00:03:18Это часть Chase AI Plus,
00:03:19ссылка будет в закрепленном комментарии.
00:03:21Итак, давайте поговорим о Claude Design и вашем веб-приложении,
00:03:24потому что есть несколько решений, которые нам нужно принять,
00:03:26прежде чем мы вообще начнем что-то запрашивать.
00:03:28Я буду перемещаться по всему экрану
00:03:31во время этого видео, так что наберитесь терпения.
00:03:32Первый вопрос, который мы зададим себе:
00:03:35будем ли мы использовать дизайн-систему?
00:03:38Здесь у меня вы видите "нет"
00:03:40и дизайн-систему Agentic OS.
00:03:42У вас сначала будет "нет".
00:03:44Если мы хотим создать дизайн-систему,
00:03:47мы поднимемся сюда
00:03:48и перейдем к дизайн-системам.
00:03:50Вероятно, у вас здесь ничего не будет,
00:03:52и вы нажмете "создать".
00:03:53Итак, что такое дизайн-система?
00:03:56Ну, по сути, это как визуальный шаблон,
00:04:00который можно применить к любому проекту, который вы создадите в будущем.
00:04:03Так что если у вас есть определенные шрифты, специфические логотипы,
00:04:07что угодно, даже если это просто общее настроение,
00:04:10вы можете сделать это здесь.
00:04:11Именно здесь вы настраиваете это.
00:04:12Чтобы вам не приходилось повторяться
00:04:13для каждого отдельного проекта.
00:04:15Если у вас есть какая-то общая линия
00:04:17с точки зрения визуального дизайна.
00:04:20Вы вводите название вашей компании
00:04:21а затем предоставляете примеры.
00:04:23Эти примеры могут быть кодом.
00:04:25Я могу прикрепить репозиторий GitHub.
00:04:27Я могу перетащить сюда папку.
00:04:29Я могу загрузить файлы.
00:04:30Я могу добавить шрифты, ресурсы, что угодно.
00:04:33Здесь вы определяете свой бренд.
00:04:36Теперь о предостережении.
00:04:39Это то, о чем я говорил, когда называл это пожирателем токенов.
00:04:42И под "пожирателем токенов" я имею в виду, что запуск дизайн-системы
00:04:45А — займет от пяти до 15 минут,
00:04:47потому что он считывает всё, это зависит от размера.
00:04:50И Б — это отнимет около 20–25% вашего лимита использования
00:04:55сразу же.
00:04:56Так что поймите это, не приходите сюда с мыслью:
00:04:57о, первое, что я сделаю,
00:04:58это наштампую штук пять дизайн-систем.
00:05:00Абсолютно нет, ни в коем случае.
00:05:02Сделайте одну, если знаете, что хотите получить,
00:05:05и я покажу, как это выглядит,
00:05:07когда мы это настроим.
00:05:08Но не делайте больше этого.
00:05:09По крайней мере сейчас, пока они не увеличат лимиты,
00:05:11что они, вероятно, сделают в будущем.
00:05:12Так что это пожиратель ресурсов, не дайте себя обмануть.
00:05:16Не дайте себе прогореть на этом.
00:05:17Теперь, если вы всё же хотите это сделать,
00:05:19вы просто заполните всё здесь,
00:05:20а затем нажмете "перейти к генерации",
00:05:21и всплывающее окно покажет что-то вроде:
00:05:24эй, это займет от пяти до 15 минут.
00:05:26Как только он завершит обработку всех этих ресурсов,
00:05:29вы получите что-то подобное,
00:05:30где он просит вас просмотреть черновик дизайн-системы,
00:05:33который он придумал.
00:05:34Что я ему скормил, так это код моей панели Agentic OS,
00:05:38которую я показывал вам немного ранее.
00:05:40У нее есть своего рода цветовая тема Claude.
00:05:43У нее есть специфический шрифт текста, всё такое.
00:05:45Так что это то, что я ему скормил,
00:05:46было по сути вот таким визуалом.
00:05:48И он вернул всё это.
00:05:49Итак, эй, это выглядит хорошо.
00:05:53Это выглядит хорошо.
00:05:53Эй, посмотрите на этого маскота.
00:05:54Выглядит довольно знакомо.
00:05:55Это выглядит хорошо.
00:05:57Голос проходит через все цвета.
00:05:59Так что он прорабатывает всё до мелочей,
00:06:03типа: "Окей, какими вы хотите видеть эти цвета?"
00:06:06Какими вы хотите видеть карточки?
00:06:07Это очень специфично.
00:06:08Это действительно приятно.
00:06:09И опять же, очень напоминает Stitch.
00:06:11Очень, очень напоминает подобные вещи.
00:06:14И поэтому я пошел дальше и одобрил всё.
00:06:16Он говорит, что отсутствует фирменный шрифт.
00:06:17Так что если бы у меня были специфические шрифты, которые я всегда хотел использовать,
00:06:20я мог бы загрузить их тоже.
00:06:21И в любой момент я могу вернуться сюда,
00:06:23потому что он как бы разбил всё на компоненты,
00:06:26нажать на них, а затем просмотреть и отредактировать по мере необходимости.
00:06:30И точно так же, как вы увидите позже
00:06:31с настоящими лендингами, презентациями
00:06:33и всем остальным, мы можем поделиться этим, верно,
00:06:36с командой или еще с кем-то, или я могу экспортировать это.
00:06:39Как PowerPoint, PDF, мы можем отправить это в Canva, HTML,
00:06:42Claude Code, действительно, очень легко, всего один клик.
00:06:44Также у нас есть сами файлы дизайна.
00:06:46Так что я могу заглянуть сюда и увидеть всё, что происходит,
00:06:50сами HTML-файлы и всё остальное.
00:06:52Так что здесь можно много чего настроить и с чем поиграть.
00:06:55Это совсем не "черный ящик", где ты думаешь:
00:06:57ну, надеюсь, Claude Design придумал что-то хорошее.
00:06:59Кто знает, что там происходит под поверхностью?
00:07:01Нет, у вас есть понимание.
00:07:03Это всё — код.
00:07:04Это классный способ создавать код,
00:07:06и мы можем забрать этот код на нашу локальную машину
00:07:09в любой момент.
00:07:10Мы не заперты здесь.
00:07:11И возвращаясь к Claude Design и веб-приложениям,
00:07:13это первый вопрос, на который мы отвечаем.
00:07:15Будем ли мы использовать дизайн-систему?
00:07:16Это что-то в том же ключе,
00:07:18что мы делали в прошлом?
00:07:19И что более важно,
00:07:20вы вообще создали дизайн-систему?
00:07:22Вы отдали свои 20% недельных токенов
00:07:25и отдали уже свои 20% недельных токенов
00:07:28богам из Anthropic, и вообще имеете такую возможность?
00:07:30Для этой демо-версии мы выберем вариант «без системы».
00:07:32Так мы будем на одной волне.
00:07:33Следующий вопрос: что делать,
00:07:37вайрфрейм или высокодетализированный макет?
00:07:39Скорее всего, вы захотите высокодетализированный.
00:07:41Чтобы сразу видеть, как это будет выглядеть.
00:07:43Но опять же, если хотите сделать вайрфрейм,
00:07:44вы всегда можете переключаться между ними.
00:07:45Вы не привязаны к чему-то одному.
00:07:47Но в этот раз мы сделаем высокодетализированный.
00:07:50Назовем его CD demo и нажмем «создать».
00:07:53Теперь система просит контекст.
00:07:56Есть ли у вас дизайн-система, или просто скриншот,
00:07:58или кодовая база, или файл Figma?
00:08:01В любом случае, начинаете ли вы с нуля,
00:08:03или у вас уже есть кодовая база,
00:08:05лучше всего дать системе хоть что-то.
00:08:07Если есть кодовая база, как мы обсуждали,
00:08:09вы уже работаете над приложением — дайте его Clod Design.
00:08:10Дайте его Clod Design.
00:08:12Так он будет работать лучше.
00:08:14Но даже если нет, и вы начинаете с нуля,
00:08:16я очень советую, как минимум,
00:08:18поискать в интернете какую-то вдохновляющую идею,
00:08:20которая вам нравится,
00:08:23будь то Dribbble, Awwwards или Godly Websites,
00:08:25что угодно.
00:08:27Начинать с чистого листа и ожидать, что Clod Design
00:08:28сделает всю тяжелую работу — плохая идея,
00:08:30потому что ваш промпт, скорее всего, будет никудышным.
00:08:33Просто поймите: чем меньше контекста вы даете,
00:08:35тем выше шанс получить средний результат.
00:08:36Поэтому имейте это в виду.
00:08:38У нас есть возможность делать наброски.
00:08:40Так что мы можем здесь рисовать
00:08:44и сказать: «Окей, вот здесь у нас изображение».
00:08:48Я хочу, чтобы текст был здесь.
00:08:53А здесь — главное изображение.
00:08:59Главное изображение здесь.
00:09:10А здесь сделаем прокручиваемый баннер.
00:09:12Мы зададим ему что-то,
00:09:15пусть даже это будет такое блестящее произведение искусства.
00:09:16И можно сделать намного больше.
00:09:18Можно поменять ручку, правда?
00:09:19Можно добавить текст.
00:09:21Я могу добавлять разные вещи, например, стикеры.
00:09:25Так что здесь есть чем заняться.
00:09:28И отсюда вам просто нужно дать промпт.
00:09:30У вас также есть возможность сменить модель.
00:09:33Я бы посоветовал Opus 4.7,
00:09:35потому что, особенно если вы добавляете скриншоты,
00:09:37у Opus 4.7 самая высокая точность
00:09:40и самое высокое разрешение для скриншотов.
00:09:42В 3 раза лучше, чем у Opus 4.6.
00:09:44Теперь давайте дадим промпт.
00:09:46Я пишу: «Создать лендинг для Argus,
00:09:48платформы для анализа соцсетей,
00:09:49которая помогает авторам находить трендовые темы
00:09:51в их нише, прежде чем они станут вирусными».
00:09:53Это макет, который, вы знаете,
00:09:55почти повторяет то, что вы написали здесь.
00:09:58Так что это настолько простой промпт, насколько можно придумать.
00:10:00Базовый SaaS-проект.
00:10:02Посмотрим, что получится.
00:10:03А вот что выдал Clod Design
00:10:06с очень минимальным промптом и без контекста,
00:10:08кроме наших каракулей на странице.
00:10:13Получилось вот это, что, я думаю, неплохо для первого раза.
00:10:16Что касается использования, предупреждение: 4%.
00:10:18Ушло 4% от нашего общего недельного лимита,
00:10:20чтобы сгенерировать этот лендинг.
00:10:21А вот что выдал Claude Code
00:10:22с точно таким же промптом,
00:10:25используя навык фронтенд-дизайна.
00:10:26Неплохо.
00:10:28То есть, есть мелкие недочеты, к которым можно придраться сразу,
00:10:32например: текст здесь обрезан и здесь.
00:10:35В этом варианте ошибок меньше.
00:10:39Текст здесь немного накладывается друг на друга.
00:10:41Здесь написано "rising now",
00:10:45что тоже немного накладывается, но довольно близко.
00:10:46Честно говоря,
00:10:47мне дизайн от Clod Design нравится чуть больше,
00:10:49но могу представить, что кому-то больше понравится этот вариант.
00:10:50Так что после первого раза разница невелика.
00:10:52Так зачем использовать Clod Design?
00:10:54В чем его преимущество?
00:10:55Ну, оно начинает проявляться,
00:10:56когда мы начинаем говорить о вариациях
00:10:59и возможности итерации.
00:11:00И это видно сразу на примере "твиков" (настроек).
00:11:03Возможность сделать это — большая вещь.
00:11:07Возможность очень быстро изменить заголовок
00:11:10или увидеть тикер.
00:11:13И мы можем расширить это.
00:11:16Я написал: "агрессивно увеличить количество настроек".
00:11:18Я хочу иметь возможность играть с этим как можно больше.
00:11:20Посмотрим, что получится.
00:11:22Хорошо, теперь видно, что он добавил гораздо больше настроек
00:11:26для экспериментов.
00:11:27И каков был уровень использования?
00:11:30Добавление всех этих настроек заняло 7%.
00:11:32Так что вы видите, что только от создания лендинга
00:11:36и примерно 14 настроек мы уже потратили, сколько?
00:11:39Около 11% нашего общего лимита.
00:11:40Теперь, я думаю, что настройки важны.
00:11:43Я говорил ранее во вступлении,
00:11:44какие функции мы действительно хотим выделить,
00:11:47когда речь заходит о Clod Design?
00:11:48Потому что, когда мы просто сделали один прогон,
00:11:49это было не сильно лучше того, что я получил
00:11:51с навыком фронтенд-дизайна.
00:11:52Что ж, эти настройки и возможность возиться
00:11:55со всеми этими вещами и быстрыми тонкими изменениями,
00:11:59правда, вот в чем настоящая сила Clod Design.
00:12:02Я немного уменьшу масштаб,
00:12:03чтобы мы могли лучше видеть настройки в действии,
00:12:05но теперь я могу делать всё: от палитры до акцентов,
00:12:10радиуса скругления углов, фоновой сетки, удаления фоновой сетки,
00:12:14шрифтов, акцентов, различий в заголовках, переключения макетов, да?
00:12:19Вот где сила.
00:12:21Сила не в том, что он может с ходу создать дизайн UI,
00:12:23и дизайн UI сразу будет таким хорошим.
00:12:25Нет, дело в том, что я могу итерировать очень быстро,
00:12:29очень быстро. Подумайте, как быстро я это делаю,
00:12:33и подумайте, сколько времени заняло бы
00:12:34проделать всё это внутри Claude Code.
00:12:36Я имею в виду, мы можем даже сменить нишу
00:12:39того, на что смотрит социальная сеть
00:12:41в этом изображении от AI и технологий до игр и финансов.
00:12:46Спасибо богу, я могу настроить скорость тикера,
00:12:47потому что эта штука летала, но да, это потрясающе.
00:12:52Это часть первая, и я думаю, есть две вещи.
00:12:54Ну, на самом деле их больше,
00:12:56но настройки, я думаю, — главная ценность дизайна,
00:12:59потому что всё дело в визуальной итерации.
00:13:01И, по моему мнению, вторая по значимости функция
00:13:04Clod Design — это вариативность веб-страниц.
00:13:07Так что настройки — это очень микроуровень, верно?
00:13:09Мы говорим о цветах, мы говорим об акцентах,
00:13:11мы говорим о шрифтах, но что, если я хочу вариации
00:13:14лендинга в целом? Ну, сходите с ума с этим.
00:13:18Я говорю не о другом шрифте,
00:13:19я говорю о совершенно другом дизайне,
00:13:21и я хочу видеть их сложенными рядом.
00:13:23Опять же, как я могу сделать со стежком.
00:13:25Я хочу иметь такую возможность.
00:13:26Ну, мы можем сделать это внутри Clod Design,
00:13:28и это очень просто.
00:13:29Мы просто попросим его сделать именно это.
00:13:32Я попросил дизайн и сказал:
00:13:33«Можешь ли ты создать еще два варианта этого лендинга,
00:13:36между которыми я могу переключаться, с совершенно другими стилями?
00:13:39Предложи мне сначала другие варианты стилей».
00:13:42И он предложил шесть разных вариантов.
00:13:44Мы можем сделать терминал, стиль Bloomberg,
00:13:48гипермаксималистский, брутализм, синтвейв, мягкие пастельные тона,
00:13:53или печатную газету.
00:13:56Поехали, да, вроде как с первого и второго.
00:13:59Так что я скажу, сделаем первый и второй,
00:14:03и, очевидно, оставим текущий макет тоже.
00:14:08Так что Clod Design закончил с вариантом.
00:14:10Вот редакционный вариант, с которого мы начали.
00:14:13У нас теперь есть вариант "терминал".
00:14:18А также максималистский вариант,
00:14:21что довольно интересно, что-то другое.
00:14:24Теперь, если вы не попросите,
00:14:25он сделает настройки только для оригинала.
00:14:28Так что, когда вы делаете эти варианты,
00:14:30я думаю, общий рабочий процесс должен быть таким:
00:14:33сначала вы начинаете с вариантов.
00:14:35Так что на макроуровне вы думаете: «Хорошо,
00:14:37я хочу двигаться в этом направлении».
00:14:39И как только вы выберете один из этих макро-вариантов,
00:14:42скажем, мы решили остановиться на том, что нам нравится,
00:14:44тогда вы переходите к стадии очень агрессивных настроек.
00:14:47Чтобы вы могли видеть всё
00:14:49и углубиться в то, что вы хотите.
00:14:51Потому что при том, как настроено использование сейчас,
00:14:54если вы идете на макроуровень и говорите:
00:14:56«Я не хочу всего три варианта.
00:14:57Я хочу четыре, пять вариантов, и хочу настройки для всех».
00:15:00Вы просто сожжете свой лимит.
00:15:02Потому что добавление этих двух вариантов, максималистского и терминала,
00:15:04это были дополнительные 5%.
00:15:05Так что это доводит нас примерно до,
00:15:07я думаю, мы на 17% сейчас для лендинга,
00:15:11двух вариаций лендинга плюс настройки.
00:15:13И я знаю, что продолжаю долбить про использование,
00:15:14но для многих это большое дело,
00:15:16и так и должно быть.
00:15:17Я думаю, со временем,
00:15:18это, вероятно, изменит всю систему использования,
00:15:19но просто держите это в уме.
00:15:20И вот с этими двумя вещами, работающими в тандеме,
00:15:23вариативностью и настройками,
00:15:26это позволяет нам получить решение на 80%, на 90%.
00:15:31Теперь я могу стать еще более сфокусированным на этом.
00:15:35Мы можем подняться сюда, как я показывал в начале.
00:15:37Мы можем вносить правки.
00:15:39Так что я могу, например, кликнуть на этот верхний заголовок.
00:15:42Я могу изменить прозрачность.
00:15:43Я могу изменить ширину, цвет, всё такое.
00:15:45Так что мы можем быть очень, очень конкретными, если захотим,
00:15:47но реальная мощь исходит от достижения 90%-го решения,
00:15:50когда говоришь: «Окей, мне нравится этот первый редакционный вариант».
00:15:54Мне нравится акцент на отметке,
00:15:55то есть... это кольцо выглядит ужасно, акцент на отметке.
00:15:59Мне нравится этот конкретный подзаголовок, этот заголовок, что угодно.
00:16:04А потом скажешь: «Хорошо, мы выберем это».
00:16:05Нам нравятся правки.
00:16:06Теперь давайте доделаем остальную часть лендинга,
00:16:09ведь это только главный экран.
00:16:11А потом нужно просто экспортировать это в Claude Code.
00:16:14Вы передаёте это в Claude Code.
00:16:15Когда я нажимаю на это, у вас есть несколько вариантов.
00:16:17Можно скачать zip-архив или просто скопировать эту команду
00:16:20и вставить её в Claude Code.
00:16:22И я думаю, что такой рабочий процесс бесконечно быстрее,
00:16:25чем находиться здесь, что и дало нам Claude Code
00:16:28с той же самой подсказкой.
00:16:29Я имею в виду: «Окей, ладно, Claude Code,
00:16:32давай теперь поиграем с цветом».
00:16:35Давай сделаем несколько вариантов.
00:16:36Давай теперь поиграем с заголовком и сделаем несколько вариантов.
00:16:39На это могут уйти часы, а здесь всё заняло минуты.
00:16:44И, по крайней мере для меня, мне нужно видеть вещи,
00:16:47мне нужно увидеть кучу вариантов,
00:16:48прежде чем я действительно пойму, что мне нравится.
00:16:50Более того, скорее всего, как только я что-то увижу,
00:16:53я могу это изменить.
00:16:54Потому что, честно говоря, если они видят это,
00:16:54мне в какой-то мере нравится этот супер-вертикальный вариант.
00:16:56Может быть, добавим сюда какие-то иконки или что-то ещё.
00:16:58Я просто хочу итерировать.
00:17:00Я просто хочу увидеть разные штуки.
00:17:02Так что это два лучших совета, которые я могу дать вам
00:17:05по поводу создания веб-приложений.
00:17:08Макро: верно, просите варианты.
00:17:11А потом микро: просите больше правок.
00:17:13Единственное, что мы здесь не сделали,
00:17:15и мы покажем это на примере слайдов
00:17:18и тому подобного,
00:17:19это попросить его, по сути, пройти через свой режим планирования.
00:17:22Мы дали ему промпт, и он сразу же
00:17:24выдал нам результат.
00:17:25Вместо этого мы могли бы сказать:
00:17:26«Эй, я хотел бы поработать с тобой в режиме планирования».
00:17:28«Я хочу, чтобы ты задал мне кучу вопросов».
00:17:30И он проведёт вас через
00:17:32значительное количество вопросов,
00:17:33скажем, пять, восемь, десять вопросов типа:
00:17:35«Хорошо, что вы хотите здесь?»
00:17:36«Что вы хотите там?»
00:17:37«Что вы хотите там?»
00:17:38Так вам не придётся делать так много итераций,
00:17:40и в конечном итоге это сэкономит вам лимиты.
00:17:42И я прошёл через тот же процесс,
00:17:44когда создавал фронтенд
00:17:46для своей панели управления Agentic OS.
00:17:47Вы можете видеть здесь,
00:17:48это то, с чего я изначально начинал.
00:17:51А затем я смог пройти через
00:17:52все эти различные варианты.
00:17:53В конце концов, я остановился на этом, варианте "кокпит",
00:17:56хотя я думал сделать этот, с крутым спрайтом.
00:17:58А затем я просто перенёс эту версию обратно в Claude Code
00:18:01и внёс небольшие корректировки в отступы
00:18:03и, собственно, подключил всё это.
00:18:04Так что это было полноценное веб-приложение.
00:18:06Теперь давайте займёмся Claude Design и презентацией.
00:18:08Мы пройдём через это немного быстрее,
00:18:09потому что многие основы, которые мы прошли,
00:18:13когда речь заходила о веб-приложениях, применимы и к презентациям.
00:18:16Так что я не буду особо зацикливаться на этих моментах.
00:18:17И на этот раз мы продемонстрируем дизайн-систему в действии.
00:18:21И помните, что эта система основана на визуальных элементах
00:18:24из нашей операционной системы агентов.
00:18:26Итак, давайте нажмём «создать».
00:18:27И что мы видим?
00:18:28Тот же порядок действий, что и раньше.
00:18:30И запрос предоставить контекст,
00:18:32будь то скриншоты, кодовые базы или файлы Figma.
00:18:35Теперь, единственный контекст, который мы собираемся ему дать,
00:18:37это дизайн-система, которая уже там есть.
00:18:39А также промпт, гласящий:
00:18:41«Мы хотим презентацию, в которой рассказывается о различиях
00:18:45между Claude Design и Google Stitch».
00:18:48И у меня в другом окне был открыт Opus 4.7 с Claude Code,
00:18:53чтобы придумать этот промпт.
00:18:54Так что мне пришлось выполнить веб-поиск.
00:18:55«Хорошо, вот в чём заключаются различия между ними».
00:18:57В конце я написал: «Прежде чем что-либо создавать,
00:19:01задай мне все вопросы, которые у тебя есть».
00:19:02Чтобы мы были на одной волне.
00:19:05Так что в некотором смысле мы почти заставляем его
00:19:07работать в режиме планирования.
00:19:08И вы видите, как это заполняется здесь.
00:19:10Опять же, вы можете запустить такой принудительный режим планирования
00:19:12точно так же, когда делаете веб-приложения.
00:19:14Просто убедитесь, что указали это в начальном промпте.
00:19:16Итак, для кого эта презентация?
00:19:18Допустим, для публичного выступления.
00:19:20Скажем, мы сделаем её короткой и лаконичной.
00:19:24Пусть будет шесть... пять минут.
00:19:28Сделаем пять слайдов.
00:19:30Сделаем слегка субъективный стиль: заголовок, центральный элемент.
00:19:34Скажем, только двухмерная карта позиционирования.
00:19:37Цена вызова: да.
00:19:39И мы просто пройдёмся по остальным пунктам.
00:19:43Без заметок.
00:19:44Итого, он задаёт нам: один, два, три, четыре, пять,
00:19:47шесть, семь, восемь, девять, десять, одиннадцать, двенадцать, тринадцать, четырнадцать вопросов.
00:19:52Плюс, знаете, небольшое «другое» внизу,
00:19:56что мне очень нравится.
00:19:58Опять же, режим планирования Claude Code иногда делает,
00:20:00я чувствую, максимум, знаете, пару итераций
00:20:03по четыре вопроса каждая.
00:20:05Так что это здорово.
00:20:06А вот и взгляд на презентацию.
00:20:07Я развернул её на весь экран, и для справки:
00:20:10это заняло 5% наших лимитов.
00:20:12То есть примерно 1% на слайд.
00:20:15Итак, у нас есть титульный слайд, небольшая сноска о том, что презентация
00:20:19была создана с помощью Claude Design.
00:20:22У нас есть цифры, знаете, где они находятся.
00:20:26Есть своего рода график, показывающий, где они находятся
00:20:30с точки зрения стоимости.
00:20:31Очевидно, что Claude Design гораздо дороже.
00:20:34Полевой отчёт.
00:20:37И затем он выдаёт нам, типа,
00:20:38эй, вот небольшая таблица, показывающая,
00:20:40что для какого случая использовать.
00:20:43Так что я думаю, слайд-шоу выглядит довольно круто,
00:20:45если честно.
00:20:46Но что важнее этого,
00:20:48оно придерживается дизайн-системы.
00:20:49Эта ОС агентов, на которой была построена вся дизайн-система,
00:20:53определённо отражена в презентации.
00:20:55Эти две вещи выглядят так, будто они из одного места.
00:20:59И точно так же, как с веб-приложением,
00:21:00мы можем пройти через тот же рабочий процесс.
00:21:03Это был оригинал, который он нам выдал.
00:21:05Теперь мы можем попросить макро-варианты и сказать:
00:21:07«Окей, мы действительно хотим придерживаться, знаете,
00:21:09нашей дизайн-системы?»
00:21:11«Или мы хотим пойти в совершенно другом направлении?»
00:21:13Окей, мы видим, знаете, два, три, четыре разных варианта.
00:21:16Хорошо, давайте остановимся на одном.
00:21:17А теперь давайте внесём правки
00:21:19и действительно доведём это до ума.
00:21:20И именно так, я думаю,
00:21:22вам следует подходить к созданию презентаций.
00:21:23Так же, как мы подходим к веб-приложениям.
00:21:24А теперь, для справки, вот презентация,
00:21:27которую создал для нас Claude Code.
00:21:29Я дал ему точно такой же промпт,
00:21:31и я создал это из той же директории,
00:21:34системы ОС агентов, в реальном времени.
00:21:36Так что у него был полный доступ к той же дизайн-системе,
00:21:38так сказать.
00:21:39Вдобавок к этому, я также попросил его задать мне вопросы.
00:21:42Он задал мне только семь.
00:21:43И вопросы, если честно, были не такими уж хорошими.
00:21:46Они были немного более поверхностными,
00:21:47в плане, ну, количества слайдов.
00:21:49И «какое соотношение сторон вы хотите»,
00:21:51в отличие от того, что мы видели в дизайне.
00:21:52И я думаю, что это отразилось в конечном итоге
00:21:55гораздо более блёклым результатом.
00:21:57И я удивлён, что это не было ближе
00:22:00по визуальному стилю к тому, что выдал нам дизайн.
00:22:02Я имею в виду, это неплохо.
00:22:05То есть, цвета близки, текст близок,
00:22:07но, в смысле, давайте будем серьёзны.
00:22:10Это, типа, в пух и прах разбивает его,
00:22:12если уж говорить честно.
00:22:13Напоследок давайте поговорим о дизайне мобильных приложений.
00:22:15И здесь у вас есть два варианта.
00:22:17Первый: вы делаете сразу мобильную версию.
00:22:19Вы не делаете ничего, связанного с веб-приложением.
00:22:21И это довольно просто.
00:22:22Вы просто сделаете то же самое, что мы сделали с частью веб-приложения
00:22:25в начале этого видео.
00:22:26И вы просто скажете в самом начале:
00:22:28«Это для мобильного приложения».
00:22:29«Убедитесь, что визуальные эффекты отражают это».
00:22:32Но если вы берёте веб-приложение
00:22:33и хотите перенести его на мобильную платформу,
00:22:35это довольно просто.
00:22:36Хотя мы могли бы остаться в том же окне промпта,
00:22:40мол: «Окей, теперь покажи мне это в мобильной версии»,
00:22:42наверное, имеет больше смысла создать отдельный проект
00:22:45с тем же самым содержимым.
00:22:46Зато теперь у нас есть чёткое разделение
00:22:48между веб-приложением, над которым мы работаем, и мобильным.
00:22:51И чтобы сделать это, нужно просто зайти в правый верхний угол,
00:22:53где написано «поделиться».
00:22:54А затем нужно нажать «дублировать проект».
00:22:57Как только вы это сделаете, вы перейдёте на такую страницу.
00:23:00Но если вернуться на главную страницу,
00:23:02мы теперь видим, что есть демо-ремикс CD.
00:23:05И этот ремикс — дублированный проект.
00:23:08И теперь я просто дам промпт:
00:23:10«Можешь показать тот же дизайн в мобильном формате?»
00:23:13И вот мобильные версии, которые он нам дал.
00:23:15Он взял и создал варианты всех трёх.
00:23:18Я этого не уточнял, но он сделал.
00:23:19Так что он выдал нам, по сути, девять макетов,
00:23:21и общая стоимость составила 5% лимитов.
00:23:25Так что всё тот же привычный процесс.
00:23:27Он выдал нам макро-вариант прямо здесь.
00:23:29Так что мы бы выбрали тот, который нам нравится,
00:23:30очевидно, тот же, что вы выбрали для своего веб-приложения.
00:23:32И оттуда мы бы сказали:
00:23:34«Эй, мне нравится этот редакционный вариант».
00:23:36«Теперь выдай кучу правок, чтобы я мог довести это до ума».
00:23:38Но по правде говоря,
00:23:39если у вас всё настроено в версии веб-приложения,
00:23:42скорее всего, вы уже внесли правки.
00:23:44Так что там не должно быть
00:23:47слишком много того, что нужно менять на данном этапе.
00:23:48Но всегда есть небольшие...
00:23:51вы всегда сталкиваетесь с проблемами, когда переходите от стандартного веб-приложения
00:23:53к мобильному дизайну.
00:23:55Но, как вы видите здесь, это очень просто сделать,
00:23:57всего один промпт.
00:23:58Так что на этом я с вами, ребята, прощаюсь на сегодня.
00:23:59Надеюсь, мне удалось прояснить различия
00:24:02между Claude Design и Claude Code,
00:24:04особенно выделив те функции,
00:24:06которые приносят нам деньги в Claude Design,
00:24:09это правки и это варианты.
00:24:11И что это нам действительно даёт, так это скорость итераций.
00:24:15Я могу пройти через кучу разных версий
00:24:17того, что я пытаюсь создать,
00:24:19чтобы наконец прийти к тому, что мне нравится.
00:24:21И как только я это сделаю,
00:24:22я переношу это в экосистему Claude Code.
00:24:25И я надеюсь, мне удалось сделать расходы лимитов
00:24:27немного более понятными, называя проценты, которые мы теряли
00:24:31после каждой итерации и создания.
00:24:33Так что, как всегда, дайте знать, что вы думаете.
00:24:35Определённо следите за новыми материалами по Claude Design,
00:24:38потому что я думаю, что это супер крутой инструмент.
00:24:40Не забудьте заглянуть в Chase AI+,
00:24:42если хотите получить доступ к мастер-классу по Claude Code,
00:24:45и ещё увидимся.