Open Design: почему 40 000 разработчиков ушли из Claude Design
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Это OpenDesign, опенсорс-альтернатива Claude Design, которая позволяет использовать любую
00:00:05установленную у вас модель или агента для создания полноценных веб-прототипов, мобильных приложений и даже
00:00:11презентаций в формате HTML. С 72 встроенными системами дизайна, и каждый проект остается на вашем компьютере,
00:00:17так что ничего не отправляется в облако. Но мы все знаем, что Claude Opus 4.7 очень хорош во фронтенд-
00:00:23дизайне, поэтому нет смысла позволять пользователю выбирать любую модель, ведь большинство из них
00:00:27могут оказаться плохи в дизайне. Подписывайтесь, и давайте выясним.
00:00:33Claude Design от Anthropic был выпущен в прошлом месяце и сразу стал хитом. Он дал людям
00:00:38возможность создавать красивые дизайны с помощью впечатляющей модели, он дал людям
00:00:43альтернативу Lovable v0 и похожим инструментам. Но это проприетарный облачный инструмент, привязанный к
00:00:49одной модели, который обойдется вам в 20 долларов в месяц, что в принципе означает, что он не для всех.
00:00:54Поэтому 11 дней спустя Том и команда Nexa выпустили опенсорс-альтернативу, которая стала очень популярной.
00:01:00Это напоминает мне OpenCode, появившийся из Claude Code, а теперь OpenDesign появился из Claude
00:01:05Design. Что следующее выпустит Anthropic, перед чем кто-то поставит приставку “open”?
00:01:09Но как этот опенсорс-инструмент может создавать дизайны, не уступающие Claude Design? Что ж,
00:01:14это благодаря совместной работе двух вещей. Первое — это дизайн-системы. OpenDesign содержит множество
00:01:18из них с полными спецификациями бренда, типографикой, отступами и цветовыми токенами, вдохновленными такими брендами, как Linear,
00:01:24Stripe и Spotify. Второе — это навыки. Множество навыков для каждого типа вывода. Так, навык для создания дашбордов
00:01:30знает, как располагать графики, а навык для презентаций знает, как структурировать слайды. Есть даже “анти-ИИ”
00:01:35чек-лист, встроенный в каждый промпт, и перед генерацией чего-либо он спрашивает вас об аудитории,
00:01:41тоне и контенте бренда. Если вы смотрели мое видео про Impeccable, это покажется вам знакомым,
00:01:45но это другое, и мы разберем отличия позже в видео. А пока
00:01:49давайте пройдемся по простому демо. Чтобы начать, вы можете скачать OpenDesign для macOS или
00:01:54Windows, клонировать репозиторий и установить его с помощью Docker или запустить из исходного кода, что я и решил
00:01:59сделать. Итак, когда проект запущен, я могу зайти на этот порт в браузере, что приведет меня к этому интерфейсу,
00:02:04который выглядит довольно пугающе для тех, кто не привык к Claude Design, но давайте разберемся.
00:02:08Если я нажму здесь, вы увидите, что он подтянул установленные у меня агентские обвязки (agent harnesses),
00:02:13например Claude Code, Codex и OpenCode. И если я нажму на Claude Code и прокручу вниз,
00:02:17мы можем выбрать модель. По умолчанию он выберет ту, что выбрана в CLI, но я могу выбрать
00:02:21другую здесь. Я могу сделать то же самое с Codex, но Codex позволяет мне изменить уровень рассуждения (reasoning effort),
00:02:26что приятная деталь. Но я выберу OpenCode. Я прокручу вниз и сменю
00:02:31модель на GLM 5.1. Здесь же я могу выбрать память, то есть инструкции, которые будут добавляться
00:02:36к каждому промпту, медиа-провайдеров, и по умолчанию он подтянул мой ключ OpenAI и будет использовать
00:02:41GPT Image 2 для генерации изображений. Но я также мог бы подключить API-ключ 11labs для таких вещей, как
00:02:46текст-в-речь или различные звуковые эффекты для анимаций на вашем сайте. Затем
00:02:50здесь я могу просмотреть все доступные навыки. Я могу посмотреть все дизайн-системы,
00:02:54которые мы разберем позже. И я даже могу выбрать питомца, что позволяет делать Codex.
00:02:58В общем, у нас здесь много опций, но я закрою это окно и приступлю к дизайну. Итак,
00:03:03я дам проекту имя и выберу дизайн-систему. Если вы понятия не имеете, что это
00:03:08за дизайн-системы, вы можете перейти на вкладку дизайн-систем, чтобы просмотреть их все, и их
00:03:13очень много. Но я просмотрел их перед записью видео, и мне кажется, мне нравится система Miro, которая выглядит
00:03:17вот так и содержит детали дизайн-токенов, а также информацию в файле design.md.
00:03:22Заметьте, что я на вкладке прототипа, но есть также живые артефакты (live artifacts) для тех вещей, которые нужно обновлять
00:03:27на основе изменяющихся данных, слайд-шоу для генерации HTML-слайдов или возможность создания на основе шаблона.
00:03:33Я мог бы нажать на вкладку шаблонов здесь и выбрать нужный. Но мы просто останемся
00:03:38на прототипе и нажмем “создать”. Отсюда мы переходим на другую страницу, где можно дать
00:03:42промпт. Я попробую что-то уникальное. Прямо сейчас у меня работает
00:03:47приложение для поиска по YouTube-каналам, и я хочу создать гораздо более красивую версию.
00:03:52Поэтому я дам ему этот URL и посмотрю, сможет ли GLM просканировать вкладки и
00:03:57поля ввода и использовать это для дизайна. Итак, я задал промпт: сделай мне хорошо спроектированный простой
00:04:02сайт для продукта, который я могу использовать для поиска по YouTube-каналам. Я также дал ему ссылку на
00:04:07сайт, чтобы он посетил его с помощью агентского браузера (agent browser) или другого подходящего инструмента. И так он сможет
00:04:12увидеть поля ввода и пройтись по всем страницам. Посмотрим, что он сделает. Теперь он задал мне
00:04:15вопросы о визуальном стиле, контексте бренда и кое-что еще, на что я отвечу.
00:04:20А затем мы продолжим процесс дизайна, зацените это. Он смог выполнить команду curl,
00:04:24чтобы открыть сайт в Chrome. Теперь он использует агентский браузер для подключения к сайту. Я не
00:04:29открывал ничего из этого и не переходил по URL, а он сам просматривает сайт в браузере. Мы видим еще
00:04:34несколько команд агентского браузера, чтобы понять, как он работает. Окей. Пока что он все еще работает.
00:04:38Он еще не закончил. Ему нужно сделать еще пару вещей, но мне нравится направление, в котором
00:04:43все идет. Мне нравится страница поиска, которую он сделал с расширенными фильтрами внизу, и я могу переключаться
00:04:48между поиском по заголовкам видео и названиям каналов. У нас есть результаты поиска, которые выглядят
00:04:52очень впечатляюще, и он использует данные с реального сайта. Я не уверен, что именно он сделал,
00:04:57скрейпил ли он и сохранил их где-то, но это реальные данные, за исключением отсутствующих миниатюр. У нас также
00:05:01есть страница избранного. Так что, если я добавлю человека в избранное, вот куда он попадет, и я смогу создать
00:05:06письмо, чтобы связаться с ним или удалить. Есть также скрытая страница. Например,
00:05:11если бы я нажал X, человек оказался бы на этой странице. И похоже, спустя около 20 минут. Ага.
00:05:17GLM 5.1 — не самая быстрая модель. Все готово. И вот что он мне сообщил.
00:05:23Он предоставил все пять созданных файлов. И я думаю, что он экспортировал все во временное
00:05:28место. Так что теперь я могу дать ему еще один промпт. Например, если бы я хотел добавить темную тему,
00:05:33я мог бы это сделать, но я также мог бы нажать “финализировать дизайн-пакет”, что синтезирует
00:05:37все в один файл design.md. То есть транскрипт, дизайн-систему и любые артефакты,
00:05:42которые были сгенерированы, в общем эти пять страниц. Я также могу нажать “поделиться”, чтобы экспортировать в разных форматах.
00:05:48И я даже могу экспортировать готовый HTML и передать его в Claude Code для внедрения в мой реальный проект
00:05:53и даже развернуть его на Vercel или Cloudflare Pages, что является приятной деталью.
00:05:57Итак, это краткий обзор Open Design. Стоит ли его использовать? Что ж, если у вас уже
00:06:02установлен агент для кодинга и вы платите за подписку на Claude, то пробовать его
00:06:07однозначно стоит. Сочетание дизайн-систем и навыков означает, что он действительно может создать что-то
00:06:12довольно приличное, независимо от обвязки или модели. Но как он сравнится с чем-то вроде Impeccable?
00:06:16Что ж, лично мне больше нравится, как планирует Impeccable. Он спрашивает вас обо всем заранее
00:06:22и проектирует разные макеты с использованием модели изображений, которые вы можете выбрать и доработать.
00:06:27Так что вы можете почти не иметь представления, как должен выглядеть дизайн в начале,
00:06:32но в итоге получить что-то вполне достойное. В то время как с Open Design вам нужно
00:06:37разбираться в дизайне перед началом. В смысле, он спрашивает, какую дизайн-систему вы хотите, до того как
00:06:42вы начнете, и я знаю, что модель может ее сгенерировать, но тот факт, что он спрашивает, означает, что он нацелен на
00:06:48того, кто немного больше разбирается в дизайне. Но должен признать, у Open Design отличный интерфейс,
00:06:53дающий возможность видеть адаптивные представления, экспортировать куда угодно, добавлять навыки, MCP-инструменты
00:06:58и даже питомцев, что приятно для тех, кто привык к интерфейсу Codex или десктопному приложению Claude.
00:07:04И он отлично справился с дизайном приложения, используя GLM 5.1, которая не является лучшей моделью для дизайна
00:07:10из доступных. Так что, если я хочу спроектировать что-то довольно быстро, и у меня есть
00:07:15некоторое представление о направлении, в котором я хочу двигаться, то я определенно попробую Open Design. Но если вам
00:07:19не жалко потратить немного денег, Claude Design довольно хорош. В смысле,
00:07:22посмотрите, что он смог сделать с тем же самым промптом.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video