Разборы · Статья: · Видео: · 19 мин
Claude Design против Figma Make: слепой тест на лендинге за 7 минут
Дизайнер даёт одинаковое задание — лендинг клининговой компании — Claude Design и Figma Make по 7 минут на каждый и разбирает блок за блоком: где выигрывает визуал, где адаптив и ховеры, сколько это стоит по лимитам и как выбрать инструмент под задачу.
Смотреть на YouTube Я потратил по 7 минут на Claude Design и Figma Make: вот что вышло
Study Kvo. Обучение веб-дизайну и UX UI · 19 мин
Главы видео — нажми, чтобы перейти к моменту 9
- 0:00 Claude Design против Figma Make Зачем сравнение: Claude на слуху, но Figma «старше» и натренированнее на макетах. Кто реально лучше выполнит задание.
- 0:50 Задание: лендинг клининговой компании Hero, услуги с фото, калькулятор, команда, отзывы до-после, FAQ-аккордеон и футер. Плюс требования по стилю, сетке, CTA, адаптиву и анимации.
- 2:00 Первая генерация в Claude Design Выбрана модель 4.7 Opus (не 4.8, чтобы не жечь лимиты). Готово за 6–7 минут, но вместо фото — плейсхолдеры; драфт съел почти половину 5-часового лимита.
- 3:13 Первая генерация в Figma Make Дефолтная модель ради экономии токенов. Быстрее на минуту, ~104 кредита, сразу с подставленными фотографиями.
- 5:09 Разбор по блокам Калькулятор, услуги, команда, отзывы, FAQ, футер — где чей блок сильнее и почему.
- 9:00 Итерация правок в обоих Правки надиктованы голосом: фикс-хедер со стеклянным эффектом, реальные фото, иконки. Figma внесла быстрее, Claude ещё «пыхтит».
- 13:06 Ховеры, анимация, адаптив Отдельная проверка микровзаимодействий и мобильной вёрстки (430px) — здесь уверенно ведёт Figma Make.
- 16:14 Итоги по очкам Концепт и визуал — Claude; адаптив, ховеры, скорость, цена — Figma; работа с правками — Claude.
- 17:33 Финальный вывод: каждому своё Инструмент под задачу; главная метрика — стоимость на дистанции, а не скорость первого результата.
Коротко
Claude Design делает более красивый и «живой» визуал, но без фото и жрёт лимиты; Figma Make — быстрее, дешевле, с фотографиями и лучшим адаптивом, но проще на вид. Побеждает не инструмент, а связка под задачу: главная метрика — не скорость первого результата, а стоимость на дистанции по деньгам и итерациям.
Выжимка голосом
Самое ценное из разбора — за пару минут
Показать текст выжимки Скрыть текст выжимки
Озвучено синтезом речи · голос alena
Объясни проще
Суть без жаргона
Простыми словами
Автор дал одно и то же задание — сделать лендинг клининговой компании — двум AI-инструментам: Claude Design и Figma Make, по 7 минут на каждый. Claude выдал более красивый и «живой» визуал, но без фотографий и сожрал весь свой лимит. Figma сделала быстрее, дешевле, сразу с фото и с хорошим адаптивом и ховерами, но выглядит проще и «тильдовее». Вывод: инструмент выбирают под задачу, а главная метрика — не скорость первого результата, а сколько денег и итераций уйдёт до готового.
Как ребёнку
Двум роботам дали одно задание — нарисовать сайт для мойщиков. Один робот рисует красивее, но медленно и быстро устаёт. Второй — попроще, зато быстро, не устаёт, и его картинка хорошо помещается в телефон. Какой лучше — зависит от того, что тебе важнее.
Аналогия — «это как…»
Это как сравнить дизайнера-визионера и крепкого верстальщика: первый рисует вау-картинку, но медленно и дорого; второй быстро собирает рабочую страницу, которая корректно тянется на телефоне, но без вау.
Зачем это мне
AI-билдеры уже делают лендинг «лучше джуна» за минуты — но выбрать между ними вслепую значит слить время, деньги и лимиты. Понимание сильных и слабых сторон каждого экономит итерации и помогает не переплачивать за красивый черновик.
Для тех, кто в теме
Слепой тест на одном лендинге: Claude Design (4.7 Opus) против Figma Make (дефолтная модель). Claude сильнее в композиции, сетке, акцентном калькуляторе и «живых» микровзаимодействиях, но не подставляет реальные фото, а генерация плюс правки съедают весь 5-часовой лимит. Figma быстрее, тратит ~100–300 кредитов, сразу ставит фотографии, заметно лучше в hover-состояниях и мобильном адаптиве (430px), но визуал дефолтно-«тильдовый», а правки менее точны. Итог автора: визуал → Claude, техничность/цена/скорость → Figma; ключевая метрика — стоимость по итерациям, а не время первой генерации.
Оценка видео
Чем выше — тем больше пользы на минуту
средняя из 5
Оба инструмента на пике внимания в 2026, но версии моделей и билдеров меняются быстро — конкретный расклад привязан к июню 2026.
Разбор блок за блоком, честное сравнение, конкретные выводы; местами уходит в разговорность и междометия.
Сам формат «слепого теста» не нов, но связка выводов (стоимость на дистанции, фото готовь сам) практически полезна.
Даёт прямые критерии выбора инструмента и работы с AI-дизайном: под что брать Claude, под что Figma.
Честный личный опыт и признание вкусовщины, но выборка — один тест на одном лендинге, и модели выбраны разные.
Кому будет полезно
Чем выше оценка — тем больше пользы для профессии. Разверни — почему.
Для веб- и лендинг-дизайнеров 5 /5
Прямое попадание: показывает, где AI-билдер уже сильнее джуна, а где нужен человек — фото, полировка, адаптив, точность правок.
Для UX/UI-специалистов 4.5 /5
Полезно для быстрых прототипов и оценки, какой инструмент даёт лучшую композицию/иерархию, а какой — рабочие состояния и мобильную вёрстку.
Для продакт-менеджеров 4 /5
Помогает выбрать AI-инструмент для команды по метрикам: скорость, точность правок, экономика лимитов и кредитов.
Для владельцев веб-студий и фрилансеров 4 /5
Разбор экономики итераций: сколько инструмент жрёт лимитов и сколько правок до готового результата — это прямо про маржу заказа.
Для маркетологов 3.5 /5
Даёт понимание, чем быстро собрать лендинг под кампанию (Figma Make) и когда стоит потратиться на визуал (Claude Design).
Для предпринимателей малого бизнеса 3 /5
Реалистично показывает, что лендинг можно сделать самому, но фото придётся готовить отдельно, а не ждать от нейросети.
Инсайты
Нажми, чтобы раскрыть — то, что меняет взгляд на тему
01 По очкам победила Figma, а по ощущениям — Claude 17:10
Автор насчитал больше «очков» у Figma Make (адаптив, ховеры, скорость, цена), но итоговый выбор сделал в пользу Claude Design по визуалу. Урок: сумма формальных критериев не равна тому, что реально нравится и решает задачу — веса у критериев разные.
02 Калькулятор как детектор качества дизайна 1:04
Ещё на этапе задания автор назначил самый функциональный блок (калькулятор стоимости) маркером: если инструмент справился с ним — дизайн хороший. И именно калькулятор развёл два инструмента сильнее всего.
03 Скорость первого результата обманчива 18:20
Хороша не та нейросеть, что быстрее выдаёт первый драфт, а та, что на дистанции стоит меньше денег и итераций. Можно быстро получить черновик и два дня его допиливать — или медленно получить почти готовое за одну-две правки.
04 AI-фото — самое слабое звено, генери сам 6:53
На команду и отзывы нельзя надеяться, что нейросеть подберёт подходящие фотографии — они «как правило, вообще мимо». Для физического бизнеса проще снять людей на iPhone и привести к одному стилю в редакторе изображений.
05 У инструментов разная экономика лимитов 15:57
Одна генерация плюс правки сожрали весь 5-часовой лимит Claude; та же работа в Figma Make — меньше 10% месячного лимита. Это не деталь, а фактор выбора: под серию правок дорогая по лимитам модель может стать узким горлом.
Ключевые цитаты
Сильные фразы из видео — нажми тайм-код, чтобы услышать в оригинале
«Хороша не та нейронка, в которой ты быстро получаешь результат, а та, которая на дистанции сожрёт меньше денег и меньше времени.»
«Если мне нужен просто дизайн классный, симпатичный, по моему заданию, — я пойду в Claude. Если нужно технически более идеально, быстрее и дешевле — пойду в Figma Make.»
«Блок с калькулятором для меня лично будет своеобразным маркером того, насколько хороший или плохой получился дизайн.»
«Спойлер: всё не так очевидно.»
«Нельзя надеяться, что нейронка это всё сделает.»
«Клод сожрал все пятичасовые лимиты, а Фигма съела чуть меньше 300 токенов — меньше 10% моего месячного лимита.»
«Тот результат, который получился в Клоде, мне сильно больше нравится.»
Полезные советы
Что можно применить уже сегодня. Разверни совет — сколько займёт, что даст и что конкретно делать
1 Назначь блок-детектор качества
5 минут быстро отличишь сильный дизайн от красивой пустышки
Назначь блок-детектор качества
Выбери в макете самый функциональный и «дизайнерски трудный» блок и оценивай инструмент по нему — как автор сделал с калькулятором стоимости.
Что делать
- 1 Найди в задании самый сложный блок: калькулятор, многошаговую форму, конфигуратор.
- 2 Оцени именно его: акцент, иерархию, работоспособность, распределение пространства.
- 3 По этому блоку делай вывод о качестве всего дизайна, а не по красивому hero.
2 Считай не скорость, а стоимость на дистанции
10 минут не купишься на быстрый черновик, который потом два дня допиливать
Считай не скорость, а стоимость на дистанции
Оценивай инструмент по суммарным затратам до готового результата: сколько итераций и лимитов уйдёт, а не только по времени первой генерации.
Что делать
- 1 Прикинь, сколько правок реально нужно до приёмки клиентом.
- 2 Умножь их на расход лимитов/кредитов и время ожидания одной итерации.
- 3 Сравни инструменты по этой сумме, а не по скорости первого драфта.
3 Готовь фото отдельно, не жди от билдера
вечер команда и отзывы перестанут выглядеть «мимо» и как мем
Готовь фото отдельно, не жди от билдера
Под блоки с людьми (команда, отзывы до-после) заранее готовь свои изображения — AI-подбор почти всегда промахивается.
Что делать
- 1 Сфотографируй реальных людей на iPhone (для физбизнеса этого хватает).
- 2 Прогони фото через редактор изображений и сведи к одному стилю: свет, фон, кадрирование.
- 3 Подставь готовые фото в макет вместо AI-заглушек.
4 Диктуй правки голосом
2 минуты соберёшь длинный список правок за секунды, не печатая
Диктуй правки голосом
Вместо набора текста надиктуй правки через голосовой ввод: зажал кнопку, наговорил всё подряд — получил единый текстовый список для отправки.
5 Не жги топ-модель на черновик
1 минута не спалишь дневной лимит на первую итерацию
Не жги топ-модель на черновик
Для первого драфта бери среднюю модель, а не самую дорогую: автор осознанно выбрал 4.7 Opus вместо 4.8, чтобы не сжечь лимиты на этапе черновика.
6 Проверяй ховеры и адаптив отдельно
15 минут красивый десктоп не обманет — увидишь реальное состояние продукта
Проверяй ховеры и адаптив отдельно
После генерации отдельно прогони hover-состояния и мобильную вёрстку: красивый десктопный макет часто разваливается на телефоне и без микровзаимодействий.
Что делать
- 1 Пройдись курсором по всем кнопкам и карточкам — есть ли отклик.
- 2 Переключись в мобильный вид (например, 430px) и проверь, всё ли поместилось.
- 3 Отметь блоки без адаптива (у автора «отвалился» FAQ) как зону ручной доработки.
7 Выбирай инструмент под задачу, а не по хайпу
5 минут перестанешь платить временем и лимитами за неподходящий инструмент
Выбирай инструмент под задачу, а не по хайпу
Нужен сочный визуал по заданию — иди в Claude Design; нужно быстро, дёшево и технично (адаптив, код) — в Figma Make. Идеально — связать оба.
Сценарии применения
Как разные люди применяют это на практике
Я как Фрилансер-дизайнер
Проблема: клиенты хотят лендинг быстро и дёшево, а руками это долго
Хочу: понять, какой AI-билдер брать под конкретный бюджет и срок
Поможет: статья даёт критерии: под визуал — Claude, под скорость и цену — Figma, и как считать стоимость итераций
Я как UX/UI-дизайнер в продукте
Проблема: прототипы собираются медленно, а согласований много
Хочу: быстрый рабочий драфт, чтобы обсуждать не на словах
Поможет: видно, где инструмент даёт композицию и иерархию, а где — рабочие состояния и мобильную вёрстку
Я как Владелец малого бизнеса
Проблема: нет бюджета на дизайнера, а сайт для услуг нужен
Хочу: сделать приличный лендинг самому
Поможет: узнаёт, что визуал вытянет Claude Design, а фото придётся подготовить самому, а не ждать от нейросети
Я как Продакт-менеджер
Проблема: команда просит AI-инструменты, но неясно, что выбрать
Хочу: сравнить инструменты по объективным метрикам
Поможет: получает разбор по скорости, точности правок и экономике лимитов для взвешенного решения
Я как Маркетолог
Проблема: лендинг под кампанию нужен «на вчера»
Хочу: быстро собрать рабочую страницу и не переплатить
Поможет: понимает, что для скорости и цены логичнее Figma Make, а вау-визуал стоит времени
Я как Джуниор-дизайнер
Проблема: AI уже делает макеты «лучше новичка», страшно за ценность
Хочу: понять, где человек всё ещё незаменим
Поможет: видит зону человека: постановка задачи, подбор фото, полировка адаптива и точность правок
Логика повествования
Как устроена аргументация видео — пройди по шагам
-
Предпосылка Claude на слуху, но Figma «старше» 0:00
У Figma больше насмотренности на макетах, но про Claude говорят из каждой дыры. Кто реально лучше выполнит задание?
-
Предпосылка Равные условия для честного теста 0:36
Одно задание (лендинг клининга), нулевые аккаунты, пустая память и кредиты — чтобы сравнивать сами инструменты.
-
Пример Claude — сильный визуал, но без фото и дорого по лимитам 5:09
Нормальная сетка и иерархия, акцентный калькулятор, «живые» детали — но плейсхолдеры вместо фото и почти весь 5-часовой лимит.
-
Пример Figma — быстро, дёшево, с фото, но проще 3:13
Сразу подставила фотографии, генерация быстрее, ~104 кредита — но визуал дефолтно-«тильдовый».
-
Аргумент Правки: Figma быстрее, Claude точнее 9:00
Figma внесла правки заметно быстрее, но Claude требует меньше итераций до устраивающего результата.
-
Пример Ховеры и адаптив — за Figma 13:06
У Claude ховеры «едва-едва», адаптив хромает; у Figma живые состояния и качественная мобильная вёрстка.
-
Аргумент По очкам тащит Figma, по ощущениям — Claude 16:14
Формальный счёт склоняется к Figma, но визуально автор выбирает Claude — критерии весят по-разному.
-
Вывод Инструмент под задачу, метрика — стоимость на дистанции 17:33
Нужен визуал — Claude; нужно быстро/дёшево/технично — Figma. Главное — суммарные деньги и итерации, а не скорость первого драфта.
Подробный разбор
Полный разбор — разверни, если нужно глубже
Развернуть подробный разбор Свернуть подробный разбор
Стоит ли смотреть целиком
Да, если ты дизайнер или продакт и выбираешь, чем генерировать интерфейсы. Ценность ролика не в вердикте «X лучше Y», а в честной методике: автор берёт одинаковое задание, назначает функциональный блок маркером качества, идёт по макету блок за блоком и отдельно проверяет то, что обычно упускают, — ховеры и мобильный адаптив.
Главный вывод контринтуитивен: формальный счёт очков склонился к Figma Make (скорость, цена, адаптив, ховеры), но итоговый выбор автор сделал в пользу Claude Design по визуалу — и тут же честно признал, что критерии весят по-разному под разные задачи. Это хорошая прививка от «сравнений по галочкам».
Что забрать с собой
Три практичные мысли переживут смену версий моделей. Первая: скорость первого результата обманчива — считай суммарную стоимость до готового, в деньгах и итерациях. Вторая: фотографии готовь сам, потому что AI-подбор почти всегда мимо, а для физического бизнеса хватит снимков на телефон, сведённых к одному стилю. Третья: инструмент выбирают под задачу — сочный визуал ищи в Claude Design, скорость и дешёвую техничную сборку — в Figma Make, а в идеале связывай оба.
План внедрения
С чего начать — отмечай шаги, прогресс сохранится
Выполнено 0 из 6
Проверь себя
Ответь на вопросы, чтобы материал закрепился
-
1. Какой блок автор заранее назначил «маркером» качества дизайна?
-
2. Чем отличались первые результаты Claude и Figma по фотографиям?
-
3. Кто уверенно выиграл по ховерам и адаптиву?
-
4. Что случилось с лимитами и расходом у двух инструментов?
-
5. Что автор выбрал по итоговым ощущениям, несмотря на счёт очков?
-
6. В чём главная итоговая мысль про «хорошую нейросеть»?
Словарь терминов
Понять незнакомое простым языком
Показать 11 терминов Свернуть словарь
- Claude Design
- Инструмент Anthropic для генерации веб-дизайна и интерфейсов по текстовому заданию — от макета до рабочего прототипа.
- Figma Make
- AI-инструмент Figma, который по описанию генерирует сайт или лендинг сразу с вёрсткой и кодом.
- Лендинг
- Одностраничный сайт под одну цель — например, продать услугу или собрать заявки.
- Hero / главный экран
- Первый экран лендинга: крупный заголовок, оффер и кнопка действия.
- CTA (call to action)
- Призыв к действию — кнопка или блок вроде «Заказать» или «Оставить заявку».
- Ховер (hover)
- Визуальная реакция элемента при наведении курсора: подсветка, подъём карточки, смена цвета.
- Адаптивность
- Корректное отображение сайта на разных экранах — от десктопа до мобильного (например, 430px).
- Аккордеон
- Раскрывающийся блок «вопрос — ответ», типовой формат для FAQ.
- Плейсхолдер
- Временная заглушка вместо реального изображения или контента.
- Токены / кредиты
- Единицы расхода AI-инструмента. Здесь у Claude это 5-часовые лимиты, у Figma — месячные кредиты.
- Нанобанана
- Обиходное название AI-редактора изображений (Google Nano Banana / Gemini image) — им приводят фото к одному стилю.
Критический взгляд
Объективно: с какими тезисами можно поспорить и что преувеличено
Один тест по 7 минут — ограниченная выборка
Сравнение построено на одном лендинге одной тематики (клининг), по одному прогону на инструмент. На другой задаче — дашборд, интернет-магазин, брендовый сайт — расклад может оказаться иным.
Модели выбраны разные, сравнение не строго равное
В Claude автор взял 4.7 Opus, в Figma — дефолтную модель. Он сам оговаривает, что не хотел сравнения «в лоб», но это влияет и на качество, и на расход, и на скорость — то есть на все итоговые «очки».
Итог «по очкам» смешивает разновесные критерии
Визуал, адаптив, цена и скорость складываются в один счёт как равноценные, хотя под конкретную задачу они весят по-разному. Сам автор это по сути признаёт, выбирая вопреки счёту.
Расход сравнивается по несопоставимым тарифам
Прямое сопоставление «весь 5-часовой лимит Claude против <10% месячного лимита Figma» смешивает разные тарифные механики; в процентах это некорректное сравнение экономики.
Вывод быстро устаревает
Версии моделей и оба билдера обновляются часто. Конкретный расклад привязан к состоянию инструментов на июнь 2026 и может смениться уже через пару релизов.
Взгляни иначе
Новый угол, смежные области и потенциал на стыке — пища для размышлений
Победитель — не инструмент, а связка
Автор сам говорит, что идеально было бы совместить: черновик-визуал в Claude Design, а техничную сборку и код — в Figma Make. Тогда «слабости» одного закрываются сильными сторонами другого.
Тот же метод оценки — для любого AI-билдера
Связка «блок-детектор качества + стоимость на дистанции» переносится на Lovable, v0, Bolt и другие генераторы интерфейсов — это универсальная рамка сравнения, а не про два конкретных продукта.
AI сдвигает ценность дизайнера с рисования на режиссуру
Раз генерация уже даёт результат «лучше джуна», ценность человека уходит в постановку задания, курирование фотографий, точность правок и полировку адаптива — в режиссуру, а не в отрисовку пикселей.
Дёшево и быстро может проиграть медленному
Метрика совокупной стоимости (итерации × лимиты × время) важнее скорости первого драфта. Это по сути перенос идеи TCO из ИТ-закупок в оценку креативных AI-инструментов.
Похожие разборы
Fable 5 после возвращения: магия творческих тестов и цена Ultra Code
Fable 5 после возвращения выглядит особенно сильной там, где нужно связать код, визуал, звук, лор и интерактивность в один живой прототип. Но чем ближе тест к магии, тем яснее цена: Ultra Code быстро сжигает лимиты, а результат всё равно требует человеческой оценки.
Читать → РазборClaude Sonnet 5 в руках: много попыток, мало вау
Sonnet 5 выглядит компетентной средней моделью, которая умеет делать много, но редко вызывает ощущение прорыва. В практических визуальных тестах её главный враг — не отсутствие возможностей, а медленное и дорогое доведение результата.
Читать → РазборКак дизайнер проектирует вместе с ИИ-агентами: живой рабочий процесс Ridd
Дизайнер Ridd в прямом эфире показывает свой реальный (и хаотичный) процесс с ИИ-агентами: десятки параллельных веток кода, исследования в Paper, плейграунды и пинг-понг моделей вместо аккуратных макетов в Figma. Главный вывод — не про инструменты (они протухают каждые ~5 месяцев), а про то, КАК работать с ИИ: давать контекст, общаться как с человеком и идти вширь, прежде чем нырять в код.
Читать → РазборМногоагентный вайб-кодинг: пошаговый workflow от идеи до продакшена
Автор показывает свой процесс вайб-кодинга: главный навык — не писать код, а оркестрировать рой агентов, масштабируя их число и планы под сложность задачи. За одно видео он вживую собирает полный стек (база, API, AWS, Discord-авторизация), но половина «обязательных инструментов» — его же платные продукты.
Читать →