Автор статьи
На связи Тихон Вечерский, маркетолог журнала Awake. Мы сейчас активно тестируем Claude Design и периодически будем обновлять этот гайд. Прямо сейчас Клод позволил нам временно поставить на паузу работу с двумя дизайнерами и, например, стал рисовать нам классные карусели для запрещённой Инсты. Но умеет он далеко не только это! Поэтому сейчас посмотрим вообще на его интерфейс и арсенал возможностей.
Что такое Claude Design и зачем он маркетологу
Если коротко — это всё тот же Claude, который мы детально разбирали в нашем прошлом большом гайде, только теперь его полноценно посадили за дизайн. Работает всё на удивление просто: вы описываете обычными словами, что именно нужно, а Claude тут же собирает готовый визуал в соседнем окне. Это может быть лендос, интерактивный прототип, слайды для презентации, одностраничник, баннер или, например, та самая карусель для Инсты.
Главная прелесть для любого маркетолога, специалиста по социальным сетям или основателя бизнеса заключается в том, что для простых задач дизайнер больше не нужен. То, на что раньше приходилось писать техническое задание человеку и ждать результат день-два, теперь можно собрать самостоятельно за время, пока остывает утренний кофе.
Но давайте сразу честно, чтобы у нас с вами не было завышенных ожиданий. Если нужно быстро набросать макет, собрать карусель или презентацию без какого-либо дизайнерского опыта — инструмент вас точно порадует. Но если вы рассчитываете полностью заменить им полноценное производство на проде, с дизайн-токенами, контролем версий и плагинами, то спешу разочаровать — увы, это не замена Фигме. Скорее, стоит рассматривать Claude Design как идеальный инструмент для быстрого старта и проверки гипотез.
Полный обзор интерфейса Claude Design: куда нажать, чтобы получить результат
Открывается всё на странице claude.ai/design:
Сразу разберем первое выпадающее меню:
- Крестик (X) — эта кнопка просто закрывает открытое меню вложений, если вы вдруг передумали что-то добавлять. Если не открывать меню, она подписана как «Attach».
- Прикрепить файл (Attach file) — базовое действие, которое позволяет скормить Клоду конкретный документ, картинку или текстовый отчёт, чтобы он взял их за основу для будущего дизайна.
- Прикрепить папку (Attach folder) — очень удобная штука, когда материалов много и проще загрузить их все скопом, а не перетаскивать по одному.
- Сослаться на другой проект (Reference another project) — классная функция, чтобы связать текущую работу с вашими прошлыми наработками или подтянуть контекст из соседнего макета.
- Подключить Гитхаб (Connect GitHub) — интеграция для разработчиков, которая позволяет связать макет с вашим удалённым хранилищем кода (репозиторием).
- Подтянуть локальный код (Link local code...) — инструмент, чтобы подгрузить файлы кода прямо с вашего компьютера для дальнейшей вёрстки.
- Загрузить .fig-файл (Upload .fig file) — та самая кнопка, через которую мы закидываем в проект макеты из Фигмы, чтобы нейросеть проанализировала их структуру и стиль.
- Управлять коннекторами (Manage connectors) — раздел для настройки и подключения сторонних служб (коннекторов), чтобы Claude Design мог беспрепятственно обмениваться данными с вашими рабочими инструментами
Что ещё у нас есть на главном экране:
1. Выбор дизайн-системы (Design system). Тут всё просто: это кнопка для выбора уже готовой системы или брендбука вашей компании. Если вы заранее загрузили свои правила, шрифты и цвета, то просто тыкаете сюда. Это нужно для того, чтобы Клод не выдумывал отсебятину, а фигачил макет строго по вашим корпоративным канонам.
3. Форматы проектов (внутри меню Template). Под цифрой 2 у нас находится кнопка шаблонов, а когда мы на неё нажимаем, как раз выпадает менюшка под номером 3. Здесь собраны все форматы, которые нейросеть умеет собирать прямо из коробки. Давайте по ним пробежимся:
- Slides — если нужно по-быстрому набросать слайды для презентации, отчёта перед боссом или питча инвесторам.
- Prototype — интерактивный, кликабельный макет. То есть штука, которую уже можно потыкать живыми руками, чтобы проверить логику интерфейса до того, как отдавать её в разработку.
- Wireframe — черновой набросок, эдакий «скелет» будущего сайта без дизайна и картинок, чисто чтобы раскидать функциональные блоки по своим местам.
- Document — обычный текстовый документ, но аккуратно отформатированный, с правильной структурой, отступами и заголовками.
- Animation — формат для тех, кому нужно добавить динамики и посмотреть, как элементы будут двигаться, всплывать и перетекать на экране.
9. Переключалка вида. Классическая тумблер-кнопка, которая притаилась справа от строки поиска. Нужна она исключительно для того, чтобы настроить отображение ваших проектов под себя. Надоело смотреть на файлы длинным списком? Ткнули по иконке плитки — и всё моментально перестроилось в аккуратные визуальные карточки.
10. Быстрые действия с проектом. Вся полезная мелкая шушера, которую разработчики заботливо собрали в конце каждой строки, чтобы вы могли наводить порядок в рабочей области буквально в один клик. Что тут есть:
- Звёздочка — позволяет пометить макет как «Избранное», чтобы он закрепился повыше и не потерялся в общей куче.
- Карандаш — нужен для быстрого редактирования и переименования проекта прямо на лету, без захода внутрь.
- Три точки — открывают классическое меню с дополнительными функциями (скачать, дублировать, перенести в архив или вообще удалить, если получилось совсем не то).
Дизайн-система
Любая нейросеть по умолчанию выдаёт усреднённый шаблон: везде бирюзовые акценты, мигающие точки статуса, бесконечные вложенные контейнеры. Дизайн-система решает эту проблему — Claude считывает ваш фирменный стиль и подгоняет под него каждую новую генерацию.
Если нажать на Design System, откроется такое окно:
Создать систему можно двумя путями:
- Create here — подключаете Фигму, Гитхаб или загружаете слайды и ассеты
- Create using Claude Code — вариант, если у вас есть готовые React-компоненты, тогда стиль ляжет точнее всего.
В форме описываете компанию, при желании даёте ссылку на репозиторий, папку с кодом, файл .fig (он, кстати, анализируется локально в браузере, данные никуда не уходят), подкидываете шрифты с логотипами и пишете замечания вроде «тёплая палитра, скруглённые углы, фирменный стиль игривый, но профессиональный».
Дальше нажимаете «Сгенерировать», ждёте около пяти минут — и получаете настоящую дизайн-систему с папками, компонентами и гайдлайнами.
Там уже собрано всё: ваши фирменные цвета, отступы, скругления и готовые блоки вроде кнопок или карточек. Даже правила для текстов на месте. Один раз настраиваете — и дальше собираете новые лендинги на автомате. Больше не придётся в каждом промпте дотошно объяснять нейросети, какого цвета должна быть кнопка и где сделать тень.
Рабочее окно и правки
Дальше вы попадаете в основное окно: слева чат, справа холст с результатом, плюс файловое дерево проекта.
Править готовый дизайн можно тремя способами, и они закрывают разные задачи:
- Чат. Пишете крупные правки вроде «сделай премиальнее» или «добавь блок с ценами», и Claude перестраивает страницу.
- Инлайн. Кликаете прямо по элементу на холсте (подсказка так и гласит — «Click and tell Claude what to change»), выделяете конкретную кнопку и говорите, что с ней сделать.
- Tweaks. Тянете мышкой и крутите цвет, отступ или размер шрифта с точностью до пикселя, не тратя лимиты по мелочам.
Сверху холста живёт панель: Mark up для пометок, Comments, Edit для правки текста прямо на слайде, Tweaks, масштаб, Present и Share. Present умеет показать макет в этой же вкладке, в полноэкранном режиме или в новой.
Отдельная приятная штучка — скетч-канвас (New sketch). Можно от руки набросать каракулю-референс и отдать её Claude как вводную. Удобно, когда проще нарисовать, чем описать словами.
Про лимиты. Как и обычный Claude, Design держит окно в 200 тысяч токенов и перечитывает диалог с первого сообщения. Когда контекст подходит к концу, выскакивает подсказка начать новый чат — проект и файлы при этом остаются на месте. Лимиты у Claude Design общие с чатом, Claude Cowork и Claude Code, имейте в виду.
Готовый результат выгружается через Export: отдельный PDF, редактируемые слайды PPTX для PowerPoint и Keynote, весь проект архивом .zip или один самодостаточный HTML, который работает офлайн. Рядом — вкладки Share link и Send to (туда уходит передача в Канву и другие сервисы). А когда дизайн готов отправляться в разработку, Claude пакует его в бандл и одной командой передаёт в Claude Code на вёрстку.
Проект можно переименовать, продублировать или удалить, а в меню аккаунта лежат коннекторы, документация, обучалка, настройки, раздел Usage (там видно расход) и выход.
Кейс: как за несколько запросов собрать инста-карусель в Claude Design
Покажу на живом кейсе. Мы каждый месяц делаем дайджест новостей — выпускаем его в блоге, а затем на его основе выпускаем инста-карусель. Первый такой дайджест мы сделали с живым дизайнером, а затем подумали — почему бы не использовать Клода?
- Загрузили в Claude Design нашу рабочую фигму, по которой годами отрисовываем карусели – там есть отдельное поле, где расписаны все правила верстки.
- А затем просто кинули в чат файл со статьей и написали, что хотим получить.
- Далее было какое-то количество правок, в духе «Да нет же, расположи картинку на первом слайде ПО СЕТКЕ!»…
- Но в итоге получился абсолютно приемлемый для этой задачи результат – сильно быстрее и лучше, чем если бы пришлось делать это своими нежными ручками.
Тут важная ремарка: Claude Design – это полноценный инструмент, по типу инструментов Adobe. Это не обычная история про нейросети, когда из функционала у вас только одно поле запроса и всё, далеко нет. Тут много чего можно потыкать, покрутить и так далее.
Но прелесть Claude Design лично для меня в том, что это всё-таки нейронка – и вместо того, чтобы что-то крутить самому, можно просто один или несколько раз сказать, чтобы это покрутила нейронка! Вот оно – развитие, которое мы заслужили 😎
Например, я узнал о том, что можно на Edit и оставить правки прямо нарисовав их на слайде, только когда сел писать этот гайд. И ничего, вполне себе справлялся без этого, все поставленные задачи закрыл легко и непринужденно.
Короче, Клод Дизайн позволяет не запариваться над запоминанием, где в очередной нейронке какая кнопка и за что она отвечает. Поэтому, вместо того, чтобы искать, где же находится кнопка загрузки, просто пишем: «Выгрузи всё в архив». Или даже «Я хочу чтобы появилась большая зеленая кнопка „Скачать“». И вуа-ля:
Надо понимать, что Клод Дизайн не сможет пойти и сделать для карусели смешные мемы. Скорее всего, сам не будет встраивать в слайды те мемы, которые вы ему пришлете вместе с текстом. И будет гораздо круче и точнее работать, если запариться и дать ему прямо четкое ТЗ, в формате: «Вот это делай, а это не делай. На этот слайд сверху пиши то, снизу то, размести такую-то картинку…». Но даже если вам прям реально лень запариваться, и вы хотите поработать с ним просто в режиме «пинаю исполнителя до готового результата» — велком, это будет подольше, но в целом он справится.
Как еще можно использовать Клод Дизайн на практике
Разберем еще несколько классических ситуаций, в которых вам может понадобиться Claude Design.
Иллюстрации и схемы в тело статей. Есть такая крутая CDP, называется Sendsay — мы делали для них контент-маркетинг. В какой-то момент ребята выработали свой стиль в плане визуала для статей — а мы просто взяли штук 20 их картинок, загрузили в Claude Design и написали самый простой промт, а-ля «Проанализируй эти картинки, будем делать в таком же стиле». Ну и нейронка проанализировала, и дальше стала делать новые вполне себе в нужном стиле.
Лендинг под кампанию. Мы собрали демо-лендинг на своей дизайн-системе — тёмный, с фирменными акцентами, блоком метрик и нормальным первым экраном.
Вы уже видите все несовершенства? Да, мы тоже, но есть нюанс — этот лендос буквально создан по запросу «А давай сделаем для статьи демонстрационный лендос, для какой-нибудь выдуманной консалтинговой конторы, используем нашу дизайн-систему». Мы не дали ему ни каких-либо идей, ни даже хоть какого-то текста, нейминга или указаний по стилю.
Ну и за один запрос получился РЕАЛЬНЫЙ РАБОЧИЙ ОДНОСТРАНИЧНИК. Полностью созданный Клодом. Который даже на этом этапе выглядит в тыщу раз круче большинства бесплатных макетов, над которыми еще и как-то запариваться и стараться придется.
Дальше такой простой макет либо переезжает на HTML, либо одной командой отправляется в Claude Code и за пару часов доводится там до ума.
Питч-деки и презентации. Из черновых заметок — готовый набор слайдов в вашем стиле, с выгрузкой в PPTX или Канву. Фаундеру и аккаунту экономит вечер перед встречей.
Прототипы для теста гипотез. Накидали экран, отдали на пользовательский тест или сразу в разработку — без брифов и ревью.
Claude Design против Genspark Design
24 июня, свой клон на Claude Design выкатил Genspark. Он так и называется: Genspark Design. Ирония в том, что работает он на той же Opus 4.7, на которой Claude Design стартовал. Мозги одни, позиционирование одно, еще и 50% скидка на токены — это ли не сказка?
Но разница всё-таки есть, в монетизации. Genspark сидит на кредитах. Мы дали ему те же файлы из Фигмы, что и Claude Design, и за два запроса он сжёг 1500 кредитов — причём в окне стартовой скидки 50% — и не выдал ничего, что можно было бы взять в работу. Для контекста: пакет 10 000 кредитов стоит 20 долларов, а один лендинг по бенчмаркам съедает 800−1200 кредитов.
И мы тут не одни такие. У кредитной модели Genspark рейтинг около 2 из 5 на Trustpilot, а на Реддите отзывы скачут от восторга до прямых обвинений в скаме — и главная претензия именно к тому, как быстро и непрозрачно утекают кредиты.
В общем, альтернативы не случилось, и если хотите себе такого карманного веб-дизайнера — придется все-таки платить за Claude Design.
Как получить доступ к Claude Design из России
России в списке поддерживаемых стран Anthropic нет — ни для claude. ai, ни для API. При этом соседи по СНГ в списке есть: Казахстан, Грузия, Армения, Узбекистан и другие.
Значит, вам понадобится зарубежный IP. Как именно его получить — оставляем на ваше усмотрение, потому что писать про сервисы обхода блокировок нельзя. Суть в том, что ваш адрес должен считываться как зарубежный. Подробнее про сам доступ мы разбирали в гайде по нейросети Claude — логика тут та же.
Учтите, что тариф нужен обязательно платный — на бесплатном Claude Design попросту недоступен. А российские агрегаторы, которые перепродают доступ к моделям, Claude Design дать не могут. Они проксируют только саму модель в своём чате, а Design живёт отдельным холстом на claude.ai/design, привязанным к настоящему платному аккаунту.
Стоит ли Claude Design своих денег и как его оплатить
Claude Design включён во все платные тарифы Claude и отдельно не продаётся. По ценам на сегодня Pro стоит 20 долларов в месяц (17 при оплате за год), Max — 100 и 200 долларов, Team — 25 и 125 долларов за место. Доступ идёт в рамках вашего тарифа и ест общие лимиты с чатом, Cowork и Code. Упёрлись в потолок — можно докупить лимиты.
Для маркетолога, который делает карусели, лендинги, деки и схемы в статьи, ответ однозначный — да, за Claude Design обязательно стоит заплатить хотя бы раз, чтобы его протестировать.
Пара вещей, которые сэкономят вам нервы и токены:
- Всегда начинайте с дизайн-системы, иначе Claude скатится в тот самый шаблонный нейрослоп с бирюзой и мигающими точками.
- Следите за расходом токенов. На старте Claude Design дико жёг лимиты: один обозреватель спалил 80 % недельного запаса Pro за 25 минут. Июньский апдейт это исправил, но окно в 200 тысяч токенов всё равно кончается — ловите подсказку начать новый чат и будьте поточнее в промтах.
Как-то так! А мы продолжаем гонять Claude Design в боевых задачах и будем обновлять этот гайд по мере новых находок. Следите за этим в нашей тележке
на журнал
