Этот open-source репозиторий скопировал дизайн Claude (и это КРУТО)
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Claude design – это, пожалуй, лучший инструмент, которым я когда-либо пользовался.
00:00:02Он стал совершенно непригоден для работы.
00:00:05Несмотря на то, что я плачу Anthropic 200 долларов в месяц за их тариф 20x.
00:00:10Я исчерпываю недельные лимиты Claude design менее чем за час.
00:00:14Это безумно раздражает, но, к счастью для вас и для меня,
00:00:17есть надежда, ведь недавно выпустили совершенно новый опенсорсный репозиторий,
00:00:22который,
00:00:23по сути, клонирует Claude design и превращает его в навык, который мы можем использовать.
00:00:28Он называется Huashu design, и он построен на тех же системных промптах,
00:00:32которые использует Claude design.
00:00:33И сегодня мы устроим ему проверку лицом к лицу с Claude design,
00:00:37чтобы понять, стоит ли эта штука нашего времени. Потому что если да,
00:00:41то у нас может появиться способ выбраться из тюрьмы лимитов Claude design.
00:00:45Huashu design решает проблему того, что Claude design – потрясающий инструмент,
00:00:50но пользоваться им дольше часа перед тем, как упрешься в лимиты,
00:00:54просто невозможно.
00:00:55Так что они взяли все системные промпты и философию дизайна
00:00:58Claude design и превратили это в опенсорсный репозиторий на GitHub,
00:01:02который, по сути, является просто одним навыком, который можно загрузить в Claude code, codex
00:01:07или, по правде говоря, в любого агента-кодера, точно так же, как Claude design.
00:01:10Он способен делать интерактивные прототипы для веб-приложений или мобильных приложений.
00:01:13Мы можем делать слайды, моушн-дизайн, инфографику и так далее, и так далее.
00:01:17И он способен делать все это с помощью всего одного навыка, потому что под капотом
00:01:21у него действительно много чего происходит. Например,
00:01:24у него есть доступ к 20 подробным Markdown-файлам, которые объясняют, что делать для слайдов,
00:01:28разных стилей дизайна, лучших практик анимации.
00:01:31Так что, хотя на поверхности это один навык,
00:01:33он, по сути, имеет доступ к 20 мини-навыкам.
00:01:35У него также есть доступ к ряду компонентов, медиа и активов, которые он может
00:01:40использовать при создании дизайна для вас.
00:01:42И у него есть целая цепочка исполняемых инструментов.
00:01:44Это дает ему возможность взять HTML-файл и превратить его в MP4 или
00:01:50использовать Playwright, чтобы проверить, работает ли то, что он спроектировал для вас на
00:01:53бумаге, в реальной жизни. И так же, как в Claude design,
00:01:56мы можем видеть разные варианты. У нас есть полная система правок.
00:02:00И самое приятное, что поскольку это навык, если я внутри Claude code,
00:02:05то, исходя из использования, будь я на тарифе 5x или 20x,
00:02:08я не ограничен этим, казалось бы, произвольным лимитом использования
00:02:13Claude design. Но давайте действительно проверим это.
00:02:16Итак, что мы сделаем: мы посмотрим, насколько хорошо эта штука на самом деле
00:02:18работает с точки зрения создания лендинга с нуля.
00:02:22Затем мы посмотрим, как он делает примерно то же самое,
00:02:24но если мы дадим ему активы, на которые можно опираться, подобно дизайн-системе Claude design,
00:02:29а потом, наконец, мы увидим, как он справляется со слайдами, и по пути
00:02:33мы будем сравнивать его с Claude design лоб в лоб.
00:02:36Так что мы увидим, стоит ли это того. Но перед тем, как мы это сделаем,
00:02:39пара слов от вашего любимого спонсора — меня самого. Итак, только в прошлом месяце,
00:02:43я выпустил мастер-класс по Claude code, и это лучший способ пройти
00:02:46путь от нуля до AI-разработчика, особенно если у вас нет технического бэкграунда.
00:02:51Я обновляю этот курс каждую неделю.
00:02:53И я только что выпустил модули по агентным iOS-системам в Claude code.
00:02:56Так что, если вы тот, кто хочет научиться лучше всего использовать этот инструмент,
00:03:01то вам нужно его изучить. Вы можете получить к нему доступ внутри Chase AI.
00:03:04Плюс, ссылка на это будет в закрепленном комментарии. Так что давайте начнем.
00:03:08Итак, промпт, который я даю Claude code,
00:03:09и он будет использовать этот навык Huashu design на протяжении всего процесса: используй
00:03:13этот навык дизайна, чтобы создать лендинг для моего вымышленного SaaS-продукта Lighthouse,
00:03:17задавая любые вопросы, которые нужны, перед тем как мы начнем. Теперь,
00:03:21я дал точно такой же промпт Claude design.
00:03:24Huashu возвращается с шестью вопросами, спрашивая, что делает Lighthouse, кто целевой
00:03:29покупатель, вайб, нужные разделы, варианты. И знаете,
00:03:34должен ли он просто создать какой-то вымышленный контент или у меня есть текст?
00:03:37У Claude design похожие вопросы,
00:03:40хотя он немного глубже погружается в детали, и, очевидно, из-за своей графической природы,
00:03:44он предлагает мне что-то, что я могу действительно выбрать с точки зрения визуального направления,
00:03:48которое я могу видеть. Так что для Huashu я говорю ему:
00:03:50давай сделаем с упором на аналитику. Мы ориентируемся на соло-разработчиков.
00:03:54Я сказал, что хочу увидеть несколько видов вайбов и стилей,
00:03:57чтобы я мог сравнить варианты.
00:03:59И я также хочу, чтобы он сделал текст самостоятельно. А для Claude design
00:04:02я сказал примерно то же самое и что я также хочу три варианта,
00:04:05которые смогу посмотреть бок о бок.
00:04:06Итак, вот что получилось у Claude design в сравнении с тем, что получилось у Huashu.
00:04:11И я выключу камеру, чтобы мы могли получше на это взглянуть.
00:04:16Итак, давайте посмотрим, что Huashu поместил на одну страницу.
00:04:19Мы могли бы заставить его сделать три отдельные страницы,
00:04:22но это позволяет нам увидеть все сразу. Хотя, я беру свои слова назад.
00:04:25У нас здесь, в правом верхнем углу, есть возможность просмотреть все три.
00:04:29Так что это то, что мы получили с этим навыком.
00:04:31Итак, этот вариант с "бухгалтерской книгой" на самом деле выглядит довольно круто. Знаете,
00:04:35он дает нам всю веб-страницу. У нас есть терминальные варианты,
00:04:40тот же подход, а также просто бумажная версия.
00:04:44И потом я могу увидеть все три сразу. И, честно говоря, сходу — очень даже неплохо.
00:04:49Это намного лучше, чем если бы мы просто использовали Claude code сам по себе.
00:04:52Мы даже с этим навыком фронтенд-дизайна сказали: "Отлично, три варианта" — довольно солидно.
00:04:55А теперь давайте посмотрим на Claude design. Заметьте,
00:04:59Design дал нам правки сразу. Мы не будем смотреть на них прямо сейчас,
00:05:03но вот его терминальная версия, знаете,
00:05:07он проходит через все это, опять же редакционный вариант,
00:05:11очень похож на редакционный вариант здесь.
00:05:15Очень, очень похожий, пространственный.
00:05:19Это очень жутко. Это определенно отдает типичными AI-вайбами.
00:05:24Думаю, это во многом связано с градиентом.
00:05:28А потом я могу сравнить все три. Теперь,
00:05:32я хочу, чтобы вы сейчас не думали: "О, один обязательно выглядит лучше другого
00:05:34в вакууме", а просто увидели, насколько близок этот навык, на который мы
00:05:37сейчас смотрим, к Design. Очень, очень похожи, что является огромным плюсом для навыка Huashu.
00:05:42А теперь я хотел бы, увидев эти макро-варианты, сфокусироваться на
00:05:46одном конкретном, который мне нравится, и начать вносить в него правки.
00:05:51Чтобы сохранить некоторую схожесть для лучшего сравнения,
00:05:54я выберу редакционный вариант в Design,
00:05:59который здесь, в навыке, известен как вариант с "бухгалтерской книгой".
00:06:03И мы посмотрим, как хорошо они справятся с правками. Теперь для Claude design,
00:06:06правки уже здесь. Итак, для редакционного варианта,
00:06:09мы можем переключаться между светлой и темной темами. Я могу изменить акцент.
00:06:11Он дает мне практически любой цвет, о котором я могу подумать, что довольно круто.
00:06:15Я могу изменить сам заголовок,
00:06:18но потом он делит это на пространственные и глобальные.
00:06:21Так что я сделаю следующее: я скажу ему расширить правки и применить их
00:06:25только для редакционного. И пока это происходит,
00:06:29я запрыгнул в Claude code и сказал: "Давай выберем вариант с бухгалтерской книгой и
00:06:31дадим ему агрессивное количество правок", чтобы мы могли сравнить их на этом фронте.
00:06:33Итак, Claude design пошел вперед и добавил кучу правок для нас. И заметьте,
00:06:36к этому моменту, просто из того, что вы видели в этом видео,
00:06:38я уже израсходовал около 15% своего использования Claude design. Что ж,
00:06:42на стороне навыка, мы использовали только 13% контекстного окна одной сессии.
00:06:44То есть 130 тысяч токенов, иначе говоря, даже не 1% моего недельного использования,
00:06:49хотя я на тарифе 20x, но разница поразительна. Хотя мы должны знать,
00:06:49что это все еще работает над правками для той одной вещи.
00:06:54Так что это немного медленнее, а правки Claude design работают, как ожидалось.
00:06:59Правки, честно говоря, — это одна из моих любимых частей Claude design в целом.
00:07:03Я думаю, сила Claude design не обязательно в том, что "О, дизайн потрясающий".
00:07:05И я действительно думаю, что они на голову выше. Не поймите меня превратно,
00:07:10но дело в том, что я могу так быстро просмотреть кучу разных вещей,
00:07:12увидеть, как они выглядят, и просто итерировать, итерировать, итерировать очень быстро.
00:07:16И еще один момент, который мы хотим здесь отметить, это то, что из-за того,
00:07:20как работает Claude design, возможность кликать на конкретные вещи, например, вот так, и
00:07:22играть со шрифтами или оставлять конкретные комментарии — это не то,
00:07:24что мы действительно можем делать внутри навыка дизайна.
00:07:28Я, конечно, не могу рисовать на навыке дизайна и говорить: "Эй, взгляни на это,
00:07:31давай, знаешь, поработай с этим, сдвинь это немного влево,
00:07:36сдвинь это немного вправо". Подобные вещи.
00:07:36Для этого нужен графический интерфейс,
00:07:40в чем Claude design очевидно вырывается вперед.
00:07:43Так что давайте сравним это с правками, которые мы получаем с Huashu design.
00:07:47Итак, заметьте, правки как бы соответствуют тому же стилю, что и сама страница.
00:07:51Я могу изменить пресеты.
00:07:54Я могу изменить семейство шрифтов, немного другой темный режим.
00:07:57Я могу изменить акценты, и кажется, что я могу изменить еще много вещей, например,
00:07:58плотность макета. Есть ли у нас "полоса доверия"?
00:08:01Исчезает ли полоса доверия? Да. Что-то в этом роде. Так что определенно сопоставимо.
00:08:05Столько же ли здесь правок, сколько было в Claude design? Нет,
00:08:07но я всего в одном промпте от того, чтобы получить больше.
00:08:10И я думаю, главный вывод здесь в том, что Claude code с этим навыком дизайна
00:08:13определенно конкурирует с тем, что вы можете получить внутри Claude design нативно,
00:08:18и общее использование токенов к этому моменту — 170 тысяч, по сути, вообще не
00:08:22использовало мое недельное лимитирование, а я сжег 15% Claude design. Так что для этого примера,
00:08:26который представляет собой "сырое" промптирование, без дизайн-системы, без активов,
00:08:30посмотрите, что вы можете придумать. Я думаю, навык справился отлично.
00:08:32Так что давайте перейдем к следующей демо-версии и увидим, насколько хорошо он может справиться,
00:08:34если мы действительно дадим ему что-то, от чего можно оттолкнуться — какую-то дизайн-систему,
00:08:38какие-то примеры дизайна — и подвергнем навык испытанию,
00:08:42Если мы действительно дадим ему что-то, от чего можно оттолкнуться, какую-то дизайн-систему,
00:08:47Когда мы смотрим на Claude design и его дизайн-системы,
00:08:51он довольно неплохо справляется, принимая все, что мы ему даем.
00:08:56И это может быть просто кодовая база или что-то еще, извлекая кучу
00:08:59информации, все: от отступов до компонентов, счетчиков, кнопок, героя,
00:09:02все эти вещи. Так что, когда я загружаю эту дизайн-систему в Claude design,
00:09:06я знаю, что он сможет поддерживать это в разных типах
00:09:10результатов. Например,
00:09:13этот дизайн агентной ОС — это то, что я превратил в дизайн-систему.
00:09:16И хотя мы видим это как дашборд здесь, внутри Claude design,
00:09:19очень легко воспроизвести эту тему дизайна.
00:09:23Так что вы видите это внутри, например, слайд-презентации,
00:09:27это выглядит так, будто все это из одного места, и это из-за того, что дизайн-система Claude design
00:09:31довольно мощная. Минус в том, что создание такого рода
00:09:34дизайн-системы съедает около 30% вашего недельного использования.
00:09:36Итак, я только что сказал Claude design воссоздать этот лендинг Lighthouse
00:09:39используя дашборд этой агентной ОС.
00:09:42Затем я сказал Claude code примерно то же самое, сказав:
00:09:45я хочу использовать эстетику/дизайн-систему, которая соответствует этому дашборду.
00:09:47А затем я сказал ему, где он может найти всю эту информацию внутри отдельной
00:09:50директории или ссылки. Это практически то, что он использует в качестве
00:09:55вдохновения, в качестве своей эстетики.
00:10:00Так что, очевидно, спрайт здесь сходит с ума,
00:10:00но остальное в значительной степени имеет смысл. Гм,
00:10:04он пошел и типа воссоздал дашборд здесь тоже,
00:10:07который очень похож на этот. Думаю, это выглядит довольно мило.
00:10:11Что касается шрифтов, цветов,
00:10:14все это очень даже соответствует тому, что он должен был делать.
00:10:18Единственная реальная жалоба, которая у меня есть, — это маленький персонаж здесь.
00:10:22Я просто не знаю, что происходит,
00:10:25но это, вероятно, относительно просто исправить.
00:10:28Теперь давайте посмотрим, как справился навык Huashu для справки.
00:10:33Этот навык занял 11 минут и около 70 000 токенов, Claude design
00:10:37занял около трех минут, но он занял 10% от своего недельного использования.
00:10:41И вот что мы получили. Я выключу камеру, чтобы мы могли видеть лучше.
00:10:44Итак, мы получили маленького Клода,
00:10:47маленького значка-логотипчика здесь. Заметьте,
00:10:52этот логотип немного отличается от спрайта здесь, наверху,
00:10:54но, эй, он подходит. Цвета и шрифты, кажется, имеют смысл на первый взгляд.
00:10:56И у нас есть наш маленький спрайт наверху здесь, рядом с Lighthouse.
00:10:59Это выглядит довольно круто. Это как маленький тикер.
00:11:04Все эти вещи выглядят довольно знакомо, исходя из дашборда с точки зрения просто
00:11:08общего дизайна. Это кажется немного странным здесь.
00:11:10Я бы хотел, чтобы этот терминальный раздел был просто немного приподнят, чтобы быть по центру с тем,
00:11:15что у нас здесь слева, но это легко исправить. И в целом,
00:11:18довольно хорошо. Я бы сказал, что мне больше понравился дизайн Claude,
00:11:22особенно тот факт, что он создал свой собственный дашборд и вставил его туда.
00:11:26Но, эй, это сделало дизайн, верно? Он соответствовал критериям. У него тот же шрифт, те же цвета.
00:11:30Выглядит довольно круто. Как небольшой тикер.
00:11:35Всё это выглядит довольно знакомо по панели управления с точки зрения
00:11:40общего дизайна. Вот здесь выглядит немного странно.
00:11:43Хотелось бы, чтобы этот раздел терминала был приподнят и выровнен по центру
00:11:47с тем, что у нас слева, но это легко исправить. В целом,
00:11:51довольно неплохо. Скажу, что дизайн от Claude мне понравился чуть больше,
00:11:56особенно тот факт, что он создал собственную панель управления и добавил её туда.
00:12:00Но эй, дизайн-то он сделал, верно? Критериям соответствует.
00:12:04Тот же шрифт, те же цвета.
00:12:06Определённо чувствуется, что это из того же семейства дизайна. Так что для этого теста,
00:12:11я считаю, это огромная победа для этого навыка, большой палец вверх. Да.
00:12:14Заняло ли это чуть больше времени? Конечно.
00:12:15Но по сути, он создавал дизайн-систему самостоятельно.
00:12:18У него не было готовой. Настолько же хорошо, как дизайн? Хм. Может и нет,
00:12:22но довольно близко и бесконечно дешевле. Так что я очень, очень,
00:12:27очень впечатлён. Теперь для нашего последнего теста мы рассмотрим слайды.
00:12:29Я уже попросил Claude design сделать их.
00:12:31И прямо сейчас вы видите его первый вариант.
00:12:33Он использует ту же дизайн-систему и рассказывает о нашем вымышленном SaaS-продукте.
00:12:37Так что, в плане способности придерживаться дизайна,
00:12:41очевидно, он справился довольно хорошо, и всё это выглядит довольно
00:12:46хорошо. Единственная жалоба: маленький спрайт наверху немного растянут.
00:12:50Но опять же, это несложно исправить.
00:12:52Что меня действительно беспокоит здесь: выглядит ли это круто? Да, довольно круто.
00:12:56Соответствует ли это дизайн-системе Claude design? Да,
00:13:00он смог сделать это всего за пару минут, используя 6% лимита.
00:13:04Теперь посмотрим, как Claude code справится, используя этот навык.
00:13:07И вот что у нас получилось. Сразу же, очень напоминает веб-сайт.
00:13:11Он смог создать всё, тот же спрайт сверху,
00:13:15тоже есть.
00:13:16И у нас есть логотип Claude code справа.
00:13:20Так что это титульная страница. Номер два,
00:13:23похоже, что часть текста накладывается друг на друга, но это не большая проблема.
00:13:27Третья страница выглядит хорошо. Четвёртый слайд. Он немного обрезан,
00:13:32но это вполне может быть дизайнерским решением.
00:13:34Есть прокручивающийся текст, выглядит хорошо. И на последнем слайде,
00:13:38опять небольшое наложение текста,
00:13:40но это мелочи, которые мы легко исправим одним промптом.
00:13:44В общем, когда мы сравниваем эти два варианта: дизайн против того, что мы получили с помощью навыка,
00:13:49опять же очень похоже,
00:13:50это уже третий раз подряд, когда мы тестируем, и навык способен
00:13:54конкурировать с тем, что мы получаем в дизайне.
00:13:56И я думаю, это главный вывод из этого видео.
00:13:58Теперь у нас есть возможность получать результаты Claude design, не будучи связанными
00:14:03этими сумасшедшими лимитами использования, что просто отлично для обычного пользователя.
00:14:07В отрыве от всего, считаю ли я, что Claude design лучше? Да, конечно.
00:14:12Навык просто имитирует всё, что делает Claude design.
00:14:15А у Claude design есть преимущество в таких вещах, как рисование, редактирование, комментарии,
00:14:19возможность организовать работу всей команды.
00:14:21Так что благодаря своему графическому интерфейсу,
00:14:24он может делать вещи, которые навык никогда не сможет. Но для многих людей,
00:14:29то, что вы здесь только что увидели, более чем достаточно. И это огромный шаг вперёд по сравнению с,
00:14:34например, использованием фронтенд-навыка дизайна. И помните,
00:14:37навык может делать больше, чем просто веб-страницы и слайды.
00:14:40Он может делать моушн-дизайн, инфографику, всё что угодно.
00:14:43Так что обязательно попробуйте это. Вы действительно ничего не теряете.
00:14:46На этом я вас сегодня оставлю. Надеюсь, с этим видео,
00:14:50я смог добавить ещё один инструмент в ваш постоянно расширяющийся арсенал. Как всегда,
00:14:54дайте знать, что вы думаете.
00:14:55Не забудьте заглянуть в Chase AI plus, если хотите получить доступ к
00:14:58мастер-классу по Claude, и увидимся.