Ещё один Open Source репозиторий скопировал дизайн Claude
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Друзья, на GitHub только что появился второй клон Claude Design. Да, вы не ослышались,
00:00:06у нас есть еще один клон Claude Design, но на этот раз с полноценным графическим интерфейсом.
00:00:13Ранее на этой неделе я выпустил видео о Huwashu Design, который стал своего рода первым клоном
00:00:20Claude Design на рынке. Он отлично справился, и мы показали, как он работает наравне
00:00:24со стандартным форматом Claude Design, при этом не сталкиваясь с проблемами лимитов использования.
00:00:30Однако одним из минусов Huwashu Design было то, что он работал только в терминале.
00:00:36У него не было графического интерфейса, как у этого нового инструмента с открытым исходным кодом,
00:00:43который практически копирует Claude Design. Просто посмотрите на эти два инструмента:
00:00:48перед нами Open Design, о котором мы сегодня поговорим, а вот — Claude Design. Невероятное сходство.
00:00:54Самое крутое в Open Design то, что он построен на базе Huwashu Design. А как вы видели
00:00:59в прошлом видео, Huwashu Design очень хорош. Мы получили отличный контент и фронтенд-дизайн
00:01:06из этого репозитория. И теперь мы просто берем это и накладываем сверху приятный графический слой,
00:01:11чтобы большинству пользователей было проще взаимодействовать с ним, добавляя тот лоск,
00:01:16который изначально был у Claude Design. Более того, Open Design можно использовать
00:01:22с любым инструментом для кодинга, не только с Claude Code. Мы можем использовать Gemini,
00:01:28Codex, и при этом мы не ограничены лимитами, как в самом Claude Design. Так что сегодня
00:01:34мы разберем Open Design: я покажу, как он работает, как его установить, на что стоит обратить внимание,
00:01:39так как там есть лишние функции, и мы сравним его с оригинальным Claude Design.
00:01:43Спойлер: он довольно хорош. Я в восторге от появления таких ответвлений Claude Design,
00:01:49потому что мне нравится сам инструмент, но его система лимитов просто ужасна.
00:01:53Чем больше таких инструментов, тем быстрее Anthropic зашевелится и исправит этот бардак.
00:02:00Open Design — это альтернатива Claude Design с открытым кодом. Его можно подключить
00:02:05к Claude Code или Codex, либо использовать собственный API-ключ для другой оболочки.
00:02:12Он автоматически определит агентов на вашем компьютере. В него встроено
00:02:1631 навык и 72 дизайн-системы уровня Brain Grade. И когда я говорил,
00:02:24что он построен на Huwashu Design, я не шутил — разработчики сами об этом заявляют.
00:02:28Это своего рода смесь Huwashu Design, навыка Guzheng PowerPoint, Open Code Design
00:02:34и Multica. Если все это объединить, то получится Huwashu Design с красивой оберткой.
00:02:40В остальной части репозитория подробно описано, что происходит «под капотом», с примерами.
00:02:45Все, что вам нужно знать: это открытый Claude Design, насколько это вообще возможно.
00:02:49Но перед установкой — пара слов от сегодняшнего спонсора. То есть от меня.
00:02:53Я только что выпустил мастер-класс по Claude Code. Это лучший способ пройти путь
00:02:58от нуля до AI-разработчика, особенно если у вас нет технического образования.
00:03:04Я обновляю его каждую неделю, уделяя внимание реальным кейсам и тому, как этот инструмент
00:03:09может реально помочь вашему бизнесу или проекту. Мастер-класс доступен в Chase AI Plus,
00:03:14ссылка в закрепленном комментарии. Жду вас там. Теперь об установке. Есть два способа.
00:03:18Первый: зайти в репозиторий, открыть терминал и вставить команды оттуда.
00:03:23Второй: скопировать ссылку (она будет в описании), вставить ее в Claude Code
00:03:28или Codex и сказать: «Установи это для меня в новую папку». Он все настроит.
00:03:32После установки и запуска вы получите ссылку на локальный сервер разработки.
00:03:36Если нет, просто попросите Claude Code запустить dev-сервер для Open Design.
00:03:42Вы увидите такую страницу, и, скорее всего, появится окно с вопросом:
00:03:46хотите ли вы использовать локальный CLI, Anthropic API или что-то другое для работы AI.
00:03:51Вам нужно выбрать «Local CLI». Это значит, что он будет использовать Claude Code,
00:03:56Codex или Open Code. Так вы не будете платить за API, все будет работать
00:04:01через ваши текущие аккаунты. В поле «Model» можно оставить «Default» из конфига CLI.
00:04:06Также можно добавить медиа-провайдеров, потому что, как вы видите,
00:04:13здесь можно создавать не только прототипы и презентации, но и изображения с видео.
00:04:18Для этого нужно добавить API-ключ соответствующей модели. Можно подключить
00:04:24Minimax, OpenAI, ElevenLabs и прочее. Это полезно, и этого нет в Claude Design.
00:04:30Сверху у нас: дизайны, примеры, дизайн-системы, шаблоны фото и видео.
00:04:36Что это за шаблоны, например, в дизайн-системах? Это похоже на awesomedesigns.md.
00:04:40Они взяли популярные сайты, например Airbnb, и разобрали их структуру:
00:04:46палитру, типографику, компоненты, визуальную тему и атмосферу.
00:04:52Идея в том, что если я хочу создать сайт в стиле Airbnb, я могу использовать этот промпт
00:04:58и получу нечто похожее. Думаю, результаты будут разными у всех.” section
00:05:06Секция дизайн-систем выглядит круто, но не знаю, насколько она эффективна на деле.
00:05:13То же самое с шаблонами изображений: это просто примеры картинок и JSON-промптов
00:05:18для получения похожего результата. Считаю это лишним. Шаблоны видео — аналогично.
00:05:23Выглядит прикольно, но пользы мало. Еще тут есть примеры работ,
00:05:29которые тоже выглядят неплохо. Но поймите, это просто то, что получилось
00:05:35по промпту в одну строку. Здесь нет каких-то сложных скрытых инструкций.
00:05:42Промпт написан прямо здесь. Если я нажму «Использовать промпт», он добавится.
00:05:47Вот пример: «Сайт знакомств для пользователей X, дашборд со статистикой и лентой».
00:06:00Так что не слишком впечатляйтесь примерами. Это промпты в одну строчку,
00:06:07ничего сверхъестественного. Давайте сосредоточимся на том, что действительно важно —
00:06:12на создании прототипов и презентаций, то есть стандартных результатов работы,
00:06:16как в самом Claude Design. Работает это почти так же: даете название демо,
00:06:22выбираете дизайн-систему (одну или несколько) из готового списка.
00:06:32Выбираем: вайрфрейм или высокая детализация. Также можно импортировать
00:06:37ZIP-файл из Claude Design. Допустим, вы создали дизайн-систему в Claude Design —
00:06:44ее можно упаковать в ZIP и загрузить сюда. Покажу на примере.
00:06:51Я попросил Open Design создать то же самое, что мы делали в видео про Huwashu Design:
00:06:57лендинг для фейкового SaaS-продукта Lighthouse для небольших команд и соло-фаундеров.
00:07:03Мне нужно три варианта для сравнения. И вот что получилось:
00:07:11классический блочный вариант, более «журнальный» стиль и что-то более яркое.
00:07:17Если сравнить это напрямую с тем, что выдал Claude Design, то сходство поразительное.
00:07:21Те же шрифты, похожие цвета, особенно в фоне, так как мы выбрали журнальный стиль.
00:07:32Слева в Open Design вы видите тот же процесс Q&A (вопросы и ответы), что и в Claude Design.
00:07:37Он задает вопросы, предлагает кнопки выбора и так далее. Это практически один в один.
00:07:43Но есть нюанс: одна из разниц, которую я заметил между Open Design
00:07:49и оригиналом — это скорость. Open Design работал минут 10, тогда как оригинал — вдвое быстрее.
00:07:56Также, хотя мы видим кнопки редактирования и рисования, они пока недоступны
00:08:01в Open Design, хотя они есть в планах развития. Если вам нужны быстрые правки,
00:08:06придется просить Open Design напрямую: «Создай панель настроек (tweaks),
00:08:13где я смогу сам быстро менять элементы». Это очень похоже на то, как мы работали с Huwashu.
00:08:18В общем, Open Design чуть медленнее, в нем не хватает некоторых удобств,
00:08:24но в остальном он крайне близок к Claude Design. Теперь поговорим о том,
00:08:30как использовать свою дизайн-систему, потому что тут есть свои обходные пути.
00:08:35Если я хочу создать презентацию в стиле моей системы «Agentic Dashboard OS» —
00:08:40для справки, вот такая визуальная эстетика мне нужна. В самом Claude Design
00:08:46у меня уже есть такая дизайн-система. Как мне воссоздать это в Open Design?
00:08:56И это касается не только дашборда — может, у вас есть свой сайт, ассеты,
00:09:01шрифты, которые вы хотите перенести сюда. Прямого способа нет —
00:09:08я не могу просто зайти в раздел дизайн-систем и нажать кнопку «Создать».
00:09:14Вместо этого нужно использовать импорт ZIP-файла из Claude Design.
00:09:20Если система уже создана там, я захожу в этот проект,
00:09:25нажимаю «Share» (Поделиться) и выбираю «Download project as .zip».
00:09:32Затем в Open Design выбираю этот архив и загружаю его. И вот мы видим
00:09:39все файлы дизайна, которые только что загрузились. Если же у вас
00:09:45нет готовой системы в Claude Design, я советую ее там создать —
00:09:51это проще всего. Либо можно вручную настроить все файлы в Codex или Claude Code,
00:09:55но это довольно неудобно. Это один из минусов Open Design.
00:10:00В этом плане Huwashu Design даже проще, потому что в терминале
00:10:04я могу просто сказать: «Эй, Claude Code, посмотри в ту папку,
00:10:08изучи все файлы и воссоздай эту презентацию в таком же стиле».
00:10:20В этом минус привязки к графическому интерфейсу. Итак, я попросил:
00:10:25«Создай презентацию о Lighthouse, это аналитика для малых команд, задавай вопросы».
00:10:29Увеличим масштаб, чтобы было лучше видно. Вот его вопросы ко мне:
00:10:34«Для чего презентация?» — Для запуска продукта. «Кто будет в зале?» — Продакт-менеджеры.
00:10:44«Сколько слайдов?» — Немного. Детализация высокая, заметки спикера не нужны.
00:10:51Тон — брутализм, использовать систему Agentic OS. И пусть сам решит,
00:11:00какие будут ключевые моменты. Отправляем. Как и в Claude Code, он выдаст список задач
00:11:04и начнет по ним работать. Вот какой получился первый слайд.
00:11:08Выглядит неплохо и вполне соответствует стилю дизайн-системы.
00:11:13Однако я заметил, что не могу переключаться между слайдами —
00:11:20либо он сделал их одинаковыми. Я сказал ему: «Вижу только первый слайд, ничего не меняется».
00:11:25Посмотрим, сможет ли он это исправить. В итоге вот что выдал Open Design,
00:11:29и я экспортировал это в PowerPoint, чтобы вы оценили процесс экспорта.
00:11:34Часто в Claude Design или Open Design все выглядит идеально, а в PowerPoint
00:11:39некоторые элементы «съезжают». Первый слайд в порядке, второй — тоже,
00:11:43хотя цифры можно было бы подправить. На третьем слайде верстка поплыла,
00:11:52нужно менять отступы и разделение элементов. Четвертый слайд — хорошо.
00:12:04Пятый — отлично. На шестом заголовок стоит поднять повыше. На седьмом
00:12:13снова небольшие проблемы с форматированием текста внутри блоков. Но я считаю,
00:12:18это готовое решение на 90%. У вас уйдет минут пять на правки, и стиль совпадает.
00:12:24Но, как вы видите, Open Design пока немного «сыроват» по сравнению
00:12:29с более отполированным Claude Design. Это ожидаемо — инструмент вышел
00:12:33буквально на этой неделе. Надеюсь, его продолжат дорабатывать. Но в целом,
00:12:37для первой итерации Open Design — это очень достойный инструмент.
00:12:42Если вы хотите пользоваться возможностями Claude Design через графический интерфейс,
00:12:48но при этом задыхаетесь от лимитов использования — это ваш вариант.
00:12:54Если интерфейс вам не важен, но нравится принцип работы Claude Design,
00:13:00то Huwashu Design все еще чуть лучше — он быстрее и гибче за счет терминала.
00:13:05Но если вам жизненно необходим такой интерфейс, то это отличная альтернатива.
00:13:10Я обожаю Claude Design, не поймите меня неправильно, но ситуация с лимитами абсурдна.
00:13:21Как я и говорил, пусть завтра выйдет хоть 10 миллионов таких клонов —
00:13:26может, тогда Anthropic наконец-то исправит эти проблемы с доступностью. Это смешно.
00:13:31На этом всё. Инструмент очень крутой, обязательно попробуйте сами.
00:13:34Он легко настраивается и гибко работает с разными AI-агентами. Пишите в комментариях,
00:13:40что вы о нем думаете. Загляните в Chase AI Plus, если хотите пройти
00:13:43мастер-класс. И до скорой встречи!