Это безумие... Дебаты о дизайне в Google Stitch против Claude окончены
AAI LABS
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology
Transcript
00:00:00Gemini была ведущей моделью в плане дизайна, несмотря на отставание в других областях,
00:00:05особенно благодаря инструменту Stitch, который мы не раз использовали в работе.
00:00:09Все стало еще лучше с выходом обновления Stitch 2.0 с множеством новых функций,
00:00:14что вывело его далеко вперед. Но Anthropic тоже не стояла на месте и вышла на рынок дизайна с
00:00:19релизом Opus 4.7 и Claude Design, который произвел такой фурор, что люди начали называть его
00:00:24«убийцей Figma». Но главный вопрос в том, какой из них на самом деле лучше? Чтобы выяснить это,
00:00:30мы протестируем их в нескольких категориях, и к концу видео вы узнаете, какой из них
00:00:34достоин места в вашем рабочем процессе. И у Claude Design, и у Google Stitch есть много функций,
00:00:39которые отличают их друг от друга. Claude Design вышел вместе с Opus 4.7 и быстро
00:00:45стал популярен как «убийца Figma» благодаря своим интерактивным возможностям. Сама модель
00:00:49стала гораздо лучше разбираться в дизайне, и вместе с новым инструментом качество работ заметно выросло.
00:00:54Google Stitch, напротив, существует уже давно, и он не был так хорош, пока Google
00:00:58не выпустила Gemini 3 — модель, которая на голову выше всех остальных в дизайне. Так что
00:01:04в сочетании со Stitch качество дизайна значительно улучшилось. Теперь давайте посмотрим,
00:01:08в чем каждый из них лидирует. В Claude Design есть функция создания презентаций,
00:01:13где можно писать заметки докладчика прямо внутри. Но в Stitch ничего подобного нет,
00:01:17так как Stitch ориентирован только на UI и не предлагает функций для дизайна кроме мобильных и веб-интерфейсов.
00:01:23В Claude Design вы также можете ссылаться на другие свои проекты, стиль которых нужно соблюсти,
00:01:28подключив свой репозиторий GitHub. Это позволяет Claude импортировать стили
00:01:32и создавать новые дизайны на их основе. Stitch решает эту задачу иначе. Он использует
00:01:37дизайн-системы: вы можете скопировать дизайн-систему любого сайта, просто указав
00:01:42ссылку на него в Stitch. После этого он импортирует стиль и создает систему для будущих макетов.
00:01:46Что касается правок, Claude Design позволяет использовать промпты, но вы также можете кликнуть
00:01:51на нужную область, и изменения отобразятся в дизайне. Можно просто оставить комментарий
00:01:56к любому элементу, и система сразу применит правки. Вы можете собрать
00:02:00несколько комментариев и отправить их Claude все вместе. Stitch здесь идет другим путем.
00:02:04Вы не можете вносить изменения напрямую, за исключением текста. Если вам нужно изменить,
00:02:09например, цвет или размер шрифта, придется добавить комментарий к выбранной области или аннотацию,
00:02:14и отправить его Gemini, чтобы модель внесла правки. Голосовой ввод — еще одно различие.
00:02:19Claude Design позволяет диктовать промпт голосом вместо того, чтобы печатать его.
00:02:24Но здесь выигрывает Stitch, потому что функция Voice Canvas в Stitch — это,
00:02:28по сути, живой диалог с моделью, где вы рассказываете о желаемом дизайне,
00:02:33а она задает уточняющие вопросы и создает его прямо в процессе разговора.
00:02:37В Stitch также есть функция предпросмотра в отдельной панели, где можно увидеть,
00:02:42как дизайн смотрится на десктопе, смартфоне и планшете, и взаимодействовать с ним напрямую.
00:02:47В Claude Design нет отдельного превью. Вместо этого интерфейс отображается
00:02:52в той же панели, где можно взаимодействовать с элементами без перехода на другой экран,
00:02:57но вы не можете проверить адаптивность так, как в Google Stitch. Claude Design также
00:03:01создан для командной работы, поэтому позволяет делиться проектом с разными правами доступа,
00:03:06такими как редактирование и комментирование отдельно, чего нет в Stitch. В Stitch вы просто
00:03:11даете доступ к проекту, и все работают вместе без разграничения прав, как в Claude Design.
00:03:15Несмотря на то, что Stitch — гораздо более зрелый проект, а Claude Design только
00:03:20недавно вышел, мы бы отдали предпочтение Claude Design за его функции. Claude
00:03:24Design — это новый продукт, доступный только в тарифах Claude Pro, Max, Team и Enterprise.
00:03:30Stitch же доступен бесплатно в любом тарифном плане и использует систему кредитов
00:03:35для отслеживания использования. С точки зрения доступности Stitch предлагает гораздо больше лимитов.
00:03:40Он дает 400 ежедневных кредитов на дизайн и 15 на редизайн, так что лимитов хватит на
00:03:46активное использование даже в течение одного дня, а месячные лимиты еще больше. Обычно
00:03:51простой дизайн стоит три кредита, и цена может меняться от сложности и количества генераций.
00:03:56У Claude Design отдельные лимиты на неделю. Этот лимит не влияет на другие
00:04:00лимиты Claude Code, так что вы можете свободно пользоваться функциями Claude, даже если
00:04:05закончатся кредиты на дизайн. Но как мы говорили в прошлом видео, этот лимит практически бесполезен,
00:04:10так как он не дает свободно экспериментировать и заканчивается раньше, чем вы создадите что-то
00:04:15серьезное. На плане Pro ситуация еще хуже, так как он позволяет
00:04:20сделать лишь несколько попыток до исчерпания лимита. Поэтому, если вы хотите
00:04:24реально работать в Claude Design, вам придется перейти на план Max. Сравнивая стоимость,
00:04:29Stitch — явный лидер с огромным отрывом, ведь он хотя бы дает возможность экспериментировать.
00:04:34Мы протестировали оба инструмента на одном промпте с описанием стиля сайта и нужных разделов.
00:04:39Claude Design составил список задач, как обычно делает Claude Code, и приступил к работе.
00:04:44Пока Claude Design думал, мы дали тот же самый промпт Google Stitch.
00:04:49Первым делом Stitch создал дизайн-систему, визуализировав все: от цветов до типографики,
00:04:54иконок и кнопок. Еще до того как Claude Design закончил, Stitch уже все сделал. Он собрал лендинг,
00:04:59используя стили из своей дизайн-системы с идеальным балансом между основными и акцентными цветами.
00:05:04Claude Design потратил гораздо больше времени и по завершении начал шаги верификации.
00:05:09В отличие от статичной страницы Stitch, каждая часть работы Claude Design была интерактивной.
00:05:15С первого раза он предложил нам самим выбрать акцентные цвета и основную тему,
00:05:20чтобы мы могли вносить мелкие правки без новых промптов. В тесте качества дизайна
00:05:25мы бы отдали баллы Google Stitch, так как его вариант был гораздо лучше.
00:05:30Stitch креативно использовал палитру, чтобы передать стиль и настроение приложения, тогда как выбор
00:05:34Claude Design казался шаблонным и плоским. Также по скорости Stitch снова побеждает,
00:05:39потому что Claude Design слишком долго думает над каждым макетом. Когда Claude Design нужны изображения,
00:05:45он создает SVG и встраивает их в проект. Если не предоставить свои ассеты, он
00:05:50полностью полагается на генерацию SVG. У Google же есть Nano Banana — собственная модель генерации изображений.
00:05:55Stitch интегрирует её напрямую, и даже без явной просьбы использует генерацию
00:06:00для всех разделов дизайна, что сильно улучшает результат. Какими бы качественными
00:06:05ни были SVG, они не могут конкурировать с полноценной ИИ-моделью. В этой ситуации Google Stitch
00:06:10однозначно лидер. Stitch не особо славится анимациями, так как его фокус — чистый дизайн,
00:06:16но мы все равно проверили, как он с ними справится. Он попытался их добавить, но
00:06:21анимации не были видны сразу, их можно было увидеть только в отдельной вкладке, и то лишь на одном блоке.
00:06:26Когда мы дали ту же задачу Claude Design, он добавил множество анимаций, например,
00:06:32бегущую строку под шапкой. Появление при скролле тоже было, и оно выглядело намного
00:06:37согласованнее и было применено ко всем компонентам, а не только к первому экрану. Claude Design
00:06:43гораздо лучше справляется с анимацией, так как использует популярные библиотеки шейдеров
00:06:48и умеет создавать интерактивные эффекты, реагирующие на движения мыши и клики.
00:06:54Так что в плане анимаций Claude Design — явный победитель. Кстати, если вам нравится наш контент,
00:06:59поддержите нас лайком, это помогает нам создавать больше видео и расширять аудиторию.
00:07:04Чтобы проверить понимание концепции и работу с правками, мы попросили их создать
00:07:09страницы регистрации и входа для текущего приложения. Stitch справился первым,
00:07:14использовал ту же дизайн-систему и добавил одинаковые хедер и футер на все страницы.
00:07:19С помощью функции прототипа мы посмотрели переходы и то, как кнопки связаны друг с другом.
00:07:24Решение Claude Design лучше вписалось в идею приложения, он точнее понял задачу.
00:07:28Он креативно подошел к странице входа, а на странице регистрации пошел еще дальше
00:07:33и реализовал выбор разных типов аккаунтов. Мы также хотели оценить внедрение правок.
00:07:38В Claude Design мы просто добавили комментарии и отправили их пачкой, и он начал их применять.
00:07:44В Stitch нам пришлось аннотировать каждую область, но результат был не совсем тем,
00:07:49что мы просили. Он зачем-то добавил футер в странном месте, сразу после цитат.
00:07:54Итерировать в Stitch неудобно: на каждое изменение он создает новый экран,
00:07:59и в какой-то момент рабочее пространство забивается. С Claude Design работать приятнее,
00:08:04так как правки вносятся прямо в макет, и благодаря пониманию контекста, стиль не нарушается.
00:08:09Так что в плане итераций Claude Design — безусловно лучший выбор. У каждого инструмента своя дизайн-система.
00:08:14Для Claude Design дизайн-система — это лицо бренда, ведь инструмент заточен под команды.
00:08:20Вы можете добавить описание, шрифты, логотипы, ассеты и прочее, а он создаст
00:08:25целостную систему, отражающую ваш стиль. Для Stitch дизайн-система — это файл,
00:08:30который описывает конкретный дизайн, а не бренд в целом. Этот файл не привязан
00:08:36только к Stitch. Его можно экспортировать и использовать в любом ИИ-агенте,
00:08:41который его поймет и применит. Как уже говорилось, вы можете импортировать системы
00:08:46с других сайтов или создавать свои. Stitch открыл исходный код файла design.md,
00:08:52который содержит npm-команды для установки и форматирования. У каждой системы свои цели,
00:08:57но нам больше нравится подход Google, так как он не привязывает вас к одной платформе.
00:09:02Теперь, когда мы оценили дизайн, пора поговорить о передаче макетов в код.
00:09:07Как упоминалось, Claude Design предлагает больше вариантов экспорта с контролем доступа.
00:09:13Можно экспортировать в PDF, слайды и даже в Canvas для дальнейшей работы.
00:09:18Но чаще всего мы используем передачу в Claude Code, так как там мы пишем код приложений.
00:09:23Просто копируете промпт и вставляете его в Claude Code — он подхватит дизайн и внедрит его.
00:09:28Google Stitch, с другой стороны, предлагает гораздо более продвинутые схемы передачи.
00:09:33У Stitch есть MCP, через который можно подключить его к вашему кодинг-агенту,
00:09:39позволяя агенту самому запрашивать дизайны в Stitch и забирать их для реализации.
00:09:44В Claude Design нет интеграции с MCP, поэтому нам больше нравится подход Stitch: кодинг-агенты
00:09:49могут сами общаться со Stitch на его языке, и нам не нужно заботиться о правильных промптах,
00:09:53чтобы получить нужный результат. Stitch также позволяет экспортировать код в ZIP-архиве,
00:09:58но есть и другие опции. Можно экспортировать проект в Google AI Studio,
00:10:04где доступны ресурсы студии и интеграция с Firebase прямо в приложении,
00:10:09или же напрямую в Figma для совместной работы. Мы чаще всего используем экспорт через MCP,
00:10:14так как это избавляет от лишних хлопот, и кодинг-агенты сами легко со всем справляются.
00:10:19Также можно экспортировать PRD (документ о требованиях), который поможет другим людям
00:10:25или нейросетям без проблем реализовать проект. Так что в плане передачи макетов Stitch побеждает.
00:10:30На этом мы заканчиваем наше видео. Если вы хотите поддержать канал и помогать нам
00:10:35делать новые ролики, вы можете воспользоваться кнопкой «Суперспасибо» ниже.
00:10:40Как всегда, спасибо за просмотр, и увидимся в следующем видео!