Claude Design: что это и как пользоваться в 2026

Claude Design — что это: продукт Anthropic Labs, в котором макет, прототип или презентация собираются разговором с моделью, а результат сразу виден на холсте. Запуск состоялся 17 апреля 2026 года, и за первую неделю Anthropic насчитала больше миллиона пользователей. Статья написана под дизайнера с работающим проектом на руках, а не под учебный лендинг с нуля. По порядку: что инструмент собирает, с чего начать в первый вечер, как завести в него собственную дизайн-систему и проверить, что он её понял, что делать, если библиотека лежит в Figma, во что обходится подписка и почему весенние обзоры про отдельную квоту устарели, где проходит граница между прототипом и продакшн-макетом и что известно про доступ из России. Отдельный раздел — про frontend design skill, который путают с самим продуктом.

Claude Design: что это за инструмент

Это инструмент Anthropic для визуальной работы: дизайны, интерактивные прототипы, презентации и one-pager'ы создаются в диалоге с моделью. Формулировка справки Anthropic: результат появляется «by having a conversation with Claude». Продукт живёт в вебе по адресу claude.ai/design и в сайдбаре десктопного приложения Claude. Статус — бета, доступ идёт по платной подписке Claude.

Запуск состоялся 17 апреля 2026 года под маркой Anthropic Labs. На старте продукт работал на Claude Opus 4.7 и выходил в статусе research preview; сейчас страница продукта называет его бета-продуктом: «It's early, and we're shipping improvements often». Какая модель под ним сегодня, Anthropic не указывает — расхожее утверждение про Opus 4.7 в настоящем времени опирается на апрельский анонс.

Формулировка за четыре месяца сместилась: в анонсе речь шла о «polished visual work», на странице продукта — об «on-brand visual work», работе в рамках бренда. Между ними лежит релиз 17 июня 2026 года: удержание дизайн-системы между проектами, связка с Claude Code, редактирование прямо на холсте и место в сайдбаре десктопа.

Клод дизайн: что это и чем отличается от чата

Клод дизайн — нейросеть Anthropic для визуальной работы, она же Claude Design в латинской записи: холст, на котором макет, прототип или презентация собираются разговором с моделью и сразу правятся руками. От обычного чата отличается не моделью, а местом результата и способом правки: в чате артефакт лежит внутри переписки и меняется новым сообщением, здесь он лежит на холсте, принимает inline-комментарии и подчиняется вашей дизайн-системе. Кириллица только в поиске: интерфейс, адрес claude.ai/design и справка идут латиницей, отдельного продукта с русским названием не существует.

Путаница возникает не в алфавите, а в семействе имён. Claude — чат-модель на claude.ai. Claude Code — агент, который работает с файлами проекта в терминале. Холст — место, где результат виден глазами и правится мышью. Claude Cowork — четвёртый продукт, который делит с ними общий лимит подписки. Разница между чатом и холстом по пунктам:

	Чат Claude	Холст (claude.ai/design)
Где результат	внутри переписки	на холсте справа от чата
Как править	новым сообщением	чат, inline-комментарии, прямое редактирование, слайдеры
Бренд	задаётся промптом каждый раз	дизайн-система применяется ко всем проектам автоматически
Экспорт	файлы и артефакты поштучно	проект целиком: PPTX, PDF, HTML, .zip + 9 коннекторов
Поверхности	веб, десктоп, мобильные	только веб и десктоп
Передача в код	вручную	handoff-бандл в Claude Code одной инструкцией

Что инструмент собирает: шесть типов работ

В анонсе от 17 апреля 2026 года перечислено шесть категорий применения, и каждая привязана к роли, а не к формату файла: реалистичные прототипы, вайрфреймы и макеты продукта, дизайн-исследования, питч-деки, маркетинговые материалы и frontier design. За четыре месяца набор пересобрали: на текущей странице продукта шестым пунктом стоят документы — «Create a resume or a one-pager and export to PDF». В обеих версиях видно, что аудитория задумана шире дизайнеров.

Реалистичные прототипы. Статичные макеты становятся интерактивными и уходят на тест ссылкой — без ревью кода и пул-реквестов.

Вайрфреймы и макеты продукта. Продакт набрасывает флоу фичи и передаёт его в Claude Code либо отдаёт дизайнеру на доработку.

Дизайн-исследования. Быстрая генерация набора направлений, чтобы отсмотреть варианты, а не один.

Питч-деки и презентации. От структуры до готового деки в рамках бренда, дальше — PPTX или отправка в Canva.

Маркетинговые материалы. Лендинги, ассеты для соцсетей и кампанийная графика, которые дошлифовывает дизайнер.

Frontier design в апреле, документы сейчас. В анонсе шестым пунктом шли прототипы на коде с голосом, видео, шейдерами, 3D и встроенным AI. Страница продукта в августе 2026-го держит на этом месте документы: резюме и one-pager с экспортом в PDF.

Генератором картинок это не является ни в одной редакции списка, и доказывают это выходы: работа выгружается в standalone HTML — страницу, которая открывается в браузере, — и уходит в Claude Code хендофф-бандлом. Под холстом лежит код, поэтому прототип получается работающим, а не нарисованным.

Доступ, тарифы и лимиты: что изменилось в июне

Продукт входит в платную подписку Claude и отдельной цены не имеет. На Free-плане его нет: в карточке Pro стоит строка «Includes Claude Design», в буллетах Free такой строки нет. На Enterprise он выключен по умолчанию — включает администратор в Organization settings → Capabilities, тумблер в группе Anthropic Labs.

План	Цена	Что с холстом
Free	$0	не входит
Pro	$17/мес при годовой оплате ($200 сразу), $20 помесячно	включён
Max 5x	$100/мес	включён, лимиты ×5 к Pro за сессию
Max 20x	$200/мес	включён, лимиты ×20 к Pro за сессию
Team	$20 за место при годовой оплате, $25 помесячно	включён
Team, премиальное место	$100 за место при годовой оплате, $125 помесячно	включён
Enterprise (self-serve)	$20 за место + использование по API-ставкам	выключен по умолчанию

Одна оговорка про Max: справка Anthropic называет его помесячной подпиской, а сравнительная таблица на странице тарифов показывает у Max 5x и Max 20x «Monthly and annual». Цены $100 и $200 в обоих источниках совпадают, цикл оплаты — смотреть в чекауте.

Теперь про лимиты: здесь механика сменилась, и весенние обзоры устарели ровно в этом месте. Отдельная недельная квота у продукта была — Anthropic это подтверждает и тут же фиксирует отмену: раньше был «its own weekly allowance, separate from your other usage limits», теперь вся активность «counts toward your plan's shared limits». Расход идёт из общего пула вместе с чатом, Claude Code и Cowork. Админ-гайд для Team и Enterprise повторяет то же: выделять и администрировать отдельную квоту не нужно.

Числовых лимитов именно под холст Anthropic не публикует — ни дизайнов в день, ни объёма генераций. Общая механика описана: сессионное окно сбрасывается каждые 5 часов, сверху лежит недельный лимит, а Max 5x и Max 20x дают ×5 и ×20 к Pro в пределах той же сессии. Сложные проекты с большими кодовыми базами и множеством итераций съедают больше. При исчерпании инструмент недоступен до сброса, а продолжить работу получится через usage credits — по стандартным API-ставкам, на Pro, Max 5x и Max 20x, включаются в Settings → Usage. На Team расход идёт из лимитов места, и кредиты докупает администратор.

Отсюда денежная ошибка первой недели: долгая сессия итераций на холсте съедает ресурс, рассчитанный на агентную работу в терминале, и обнаруживается это в момент, когда в очереди стоит задача для Claude Code.

Интерфейс: чат, комментарии и холст — что чем править

Экран разделён на две части: чат слева, холст справа. Вы описываете задачу словами, Claude собирает дизайн, дальше начинается итерация. Способов правки 4: разговор в чате, inline-комментарии на элементе, прямое редактирование на холсте и слайдеры, которые Claude генерирует под задачу. Редактор из июньского релиза добавил перетаскивание, изменение размеров и выравнивание.

Правило вендор даёт короткое — в справке есть раздел «When to use chat vs. comments vs. edit directly»: комментарии — для точечных правок уровня компонента («fix this button», «adjust this spacing»), чат — для структурных изменений, новых секций и всего, что требует объяснения, прямое редактирование — для быстрых визуальных сдвигов. Ниже это правило разложено по типам задач; строка про слайдеры — из анонса, где они названы «custom sliders (made by Claude)».

Тип правки	Чем править	Почему так
Сменить направление, структуру экрана	чат	правка затрагивает несколько элементов сразу
«Этот блок слишком тяжёлый»	inline-комментарий	привязан к конкретному элементу, не тратит контекст на описание места
Сдвинуть, выровнять, поменять размер	холст напрямую	быстрее, чем формулировать координаты словами
Подобрать значение перебором	слайдер	Claude собирает регулятор под параметр, вы крутите его руками
Заменить компонент на компонент из системы	чат	решение принимает дизайн-система, а не глаз

Правило простое: словами задают намерение, руками — геометрию. Ошибка новичка обратная — двадцать сообщений в чате про «подвинь чуть левее», которые съедают лимит и не дают точности.

Как начать работать в Claude Design: первые шаги

Первый запуск укладывается в 5 шагов: открыть холст, отдать ему дизайн-систему, собрать первый экран разговором, поправить его руками и выгрузить результат. Ни установки, ни настройки окружения не требуется — клод дизайн работает в браузере и в десктопном приложении Claude, всё остальное делается кликами и текстом.

1. Открыть. Веб — claude.ai/design, десктоп — сайдбар приложения Claude. Мобильных версий нет, подписка нужна платная.
2. Отдать дизайн-систему на онбординге. Загружаются материалы бренда: репозиторий с компонентами, дизайн-файлы, аккуратно свёрстанная презентация или PDF, логотипы и файл палитры. Хватает одного источника, но чем их больше, тем меньше додумывания.
3. Собрать первый артефакт разговором. Одностраничник или небольшой сайт — удачная первая задача: результат виден целиком и проверяется за минуту. Задача формулируется в чате обычными словами, пустой холст заполнять руками не надо.
4. Править словами и руками. Inline-комментарий — на конкретном элементе, мышь — на геометрии, чат — на структуре экрана. Если комментарий не подхватился, справка советует вставить тот же фидбек прямо в чат.
5. Выгрузить или отдать в код. Четыре формата на выбор — .zip, PDF, PPTX, standalone HTML — либо handoff-бандл в Claude Code, если сайт поедет в репозиторий.

Первый вечер лучше потратить не на красивый экран, а на шаг 2: без дизайн-системы результат выйдет работающим, но безликим. Следующий раздел — про то, что именно ей скормить.

Дизайн-система: что скормить и как проверить, что он её понял

Это ядро продукта и самая недоописанная его часть. Роль дизайн-системы Anthropic формулирует жёстко: включить холст без неё — значит получить «functional but generic output», работающий, но безликий результат. Собирается она на онбординге, применяется ко всем проектам автоматически, дорабатывается со временем, и команда вправе держать больше одной.

Из загруженных материалов Claude собирает UI-кит. Справка перечисляет четыре категории, которые он извлекает обычно — формулировка там «typically includes», то есть список не закрытый:

1. Цветовая палитра — основные, вторичные и акцентные цвета.
2. Типографика — семейства шрифтов, размеры, начертания.
3. Компоненты — кнопки, карточки, элементы навигации и другие переиспользуемые паттерны.
4. Паттерны раскладки — отступы, сетки, структуры страниц.

Слов «токены» и «переменные» в описании дизайн-системы нет ни разу. Утверждать, что инструмент работает с токенами или с Figma Variables, источники не позволяют: на входе извлечённые категории, а не набор именованных переменных.

Входов четыре, и они не равноценны. Кодовая база — репозиторий с React-компонентами: Claude читает компоненты и стили, а не срисовывает их с картинки. Прототипы — скриншоты, веб-флоу, существующие дизайн-файлы. Слайды и документы — аккуратно свёрстанный PowerPoint или PDF отдаёт цвета, раскладку и типографику. Отдельные ассеты — логотипы, файлы палитры, образцы шрифтов.

Из терминала то же делается командой /design-sync в Claude Code: она заводит одну или несколько дизайн-систем из GitHub-репозитория, дизайн-файлов, сырых загрузок или локальной кодовой базы. Обратное направление тоже работает — у продукта есть MCP-сервер, и дизайны правятся, не выходя из терминала.

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
/design-login

Дальше — самопроверка. Anthropic пишет: Claude «checks its own output against your design system, and makes corrections before you see them» — сверяет собственный результат с вашей системой и правит его до того, как вы увидите макет. Отсюда два следствия. Первое: фраза «поправил отступы под систему» означает лишь, что модель сверилась с тем, что сама же извлекла. Второе: цена ошибки на входе умножается — кривой источник проходит эту проверку так же успешно, как верный. Изнанка признана в том же документе: импорт дизайн-системы хорош ровно настолько, насколько хорош источник.

Отсюда порядок приёмки, который мы держим на своих проектах. Первым запросом просим не экран, а служебную страницу: все состояния кнопки (обычное, наведение, нажатие, отключённое, загрузка), карточку, заголовки трёх уровней, поле формы с ошибкой и сетку с реальными отступами. Она собирается за одну итерацию и сразу показывает, что вытащено из источника, а что додумано. Сверяем глазами в таком порядке: шрифтовая шкала и межстрочные, потом отступы и радиусы, в последнюю очередь цвета — цвета угадываются лучше всего и маскируют расхождения в первых двух пунктах. Расхождение лечится правкой источника, а не следующим промптом: 10 минут на служебную страницу экономят вечер на переделке экранов.

Если ваша библиотека лежит в Figma

Figma не заявлена ни как источник импорта, ни как адрес экспорта: слово Figma не встречается ни на странице продукта, ни в анонсе от 17 апреля, ни в трёх справочных статьях. В списке источников значатся GitHub-репозиторий, «design files», сырые загрузки, локальная кодовая база, веб-захват и файлы DOCX, PPTX и XLSX; что понимается под «design files», Anthropic не расшифровывает.

Из четырёх входов выше библиотеку закрывают два — репозиторий с компонентами и экраны продукта. Третий путь стоит отдельно: web capture забирает элементы прямо с вашего сайта, и на выходе те же цвета, шрифты и сетка, что видит пользователь. Для продукта с живым фронтендом это точнее любого экспорта макетов.

Маршрут «из макета в код» у Anthropic закрыт другим продуктом: Figma MCP подключается к Claude Code, а не к холсту. Дизайн из Figma у Клода едет в код через терминал, а холст получает систему уже из репозитория.

Как ввести инструмент в существующий проект

Массовый контент про инструмент написан про работу с нуля: лендинг по промпту, пустой холст на старте. У дизайнера с рабочим проектом условия другие — репозиторий, живой интерфейс, принятые компоненты и люди, которые примут или не примут результат. Порядок действий здесь обратный обучающим роликам.

Порядок, который снимает большую часть проблем: сначала дизайн-система через /design-sync из репозитория, потом веб-захват реальных экранов, и только третьим шагом генерация нового. Обратный порядок даёт красивый макет, не стыкующийся ни с одним компонентом продакшена.

У практикующего дизайнера кодовая база большая, и это задаёт разделение труда: репозиторий держит терминал, холст держит визуальную работу. Ограничение, из которого это следует, Anthropic называет в разделе Known limitations — оно разобрано ниже.

Отдача результата обратно в проект идёт через handoff: Claude упаковывает всё сделанное в бандл и передаёт его в Claude Code одной инструкцией. Ключевая деталь из июньского блога: агент продолжает с существующей работы, а не начинает заново со скриншота. В списке адресов отправки есть ещё пункт «Send to local coding agent» — что понимается под локальным агентом, Anthropic не расшифровывает: поимённо названы только Claude Code, Claude Code Web и девять партнёров-коннекторов. Редакторы с агентом внутри — например Cursor — в этих списках не значатся, и заявлять маршрут туда как поддержанный вендором нельзя.

Правило приёмки то же, что для любой агентной правки: в репозиторий уезжает то, что прошло глазами человека, знающего дизайн-систему. Бандл экономит перенос, но не отменяет ревью.

Frontend design skill: почему это не Claude Design

Запросы «frontend design skill claude» и «скиллы для клод дизайна» приводят людей на холст, хотя речь о другом продукте. Frontend Design — это плагин и skill для Claude Code с пометкой Anthropic Verified, а не часть визуального холста. Описание с карточки: «Craft production-grade frontends with distinctive design. Generates polished code that avoids generic AI aesthetics».

Хронология снимает путаницу окончательно: skill описан Anthropic 12 ноября 2025 года, на пять месяцев раньше запуска холста 17 апреля 2026-го. Никакой сущности «design skills» внутри самого продукта официально не существует: механизм удержания бренда там — дизайн-система, а не skill.

Причина появления skill'а названа прямо — distributional convergence. Симптом узнаваемый: попросите модель собрать лендинг без указаний, и почти всегда получите шрифт Inter, фиолетовые градиенты на белом и минимум анимации. Лекарство — компактный промпт примерно на 400 токенов, улучшающий результат по четырём осям: типографика, цвет, движение, фоны. Плагин задаёт рамку до кода: назначение, аудиторию и конкретное эстетическое направление — брутализм, максимализм, ретрофутуризм, люкс, игривость.

Механика важна сама по себе: skill — документ с инструкциями и ограничениями, он подгружается по требованию и не висит в системном промпте. Отсюда и путаница в запросах вроде «скил дизайна для клода»: skill живёт в терминале и правит код, холст живёт в браузере и правит макет, общего у них только имя семейства.

Экспорт, ссылки и совместная работа

Выходы на август 2026 года: 4 формата выгрузки (.zip, PDF, PPTX, standalone HTML), ссылка в пределах организации, 3 маршрута в код и 9 коннекторов, среди которых Canva. Список открытый — на странице продукта стоит «with more destinations coming soon». Три сценария он закрывает уже сейчас: «отдать заказчику файлом», «отдать в разработку», «продолжить в другом инструменте».

Куда	Что это даёт
.zip	скачать проект целиком
PDF, PPTX	документ и презентация, PPTX открывается в PowerPoint и Keynote
standalone HTML	самостоятельная страница, открывается где угодно
Canva	отправка деки на доработку в редактор презентаций
Ссылка в пределах организации	просмотр или редактирование без выгрузки файла
Handoff в Claude Code	бандл со всей работой, передаётся одной инструкцией
Локальный агент, Claude Code Web	те же данные для работы вне терминала
9 коннекторов	Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, Wix

Шаринг работает только в границах организации, наружу ссылка не выходит. Уровней доступа 4: приватно, просмотр по ссылке, комментирование, редактирование — в справке это «view-only, comment, and edit access». В апрельском анонсе состояний было 3, комментаторский доступ добавился позже: обзоры весны устарели и здесь.

Соседние инструменты в официальных материалах описаны не как конкуренты, а как адреса, куда работа уходит дальше. Сравнивать их по функциям и ценам — быстрый способ ошибиться: релизы выходят чаще, чем обновляются обзоры. Надёжнее два признака: где живёт исходник и что получается на выходе.

Инструмент	Где живёт исходник	Что на выходе	Как связан по материалам Anthropic
Figma	файл макета	макет и прототип из связанных фреймов	не упоминается ни разу — ни в импорте, ни в экспорте
Canva	шаблон в редакторе	дека и графика	адрес экспорта («Send to Canva») и один из 9 коннекторов
Холст Anthropic	код под холстом	работающий прототип + .zip, PDF, PPTX, HTML	—
Claude Code	репозиторий	ветки, коммиты, деплой	handoff-бандл, команды /design и /design-sync, MCP-сервер

Заменяет ли он Figma — нет: обмена между ними по официальным материалам не существует ни в одну сторону. Разница глубже интерфейса — в Figma исходник это файл макета, здесь код, который холст показывает картинкой. Поэтому продукт закрывает участок «идея → проверяемый артефакт», а библиотека, которую команда ведёт годами, остаётся там, где ведётся.

Границы: где кончается прототип

Anthropic перечисляет ограничения открытым текстом — все 6 пунктов лежат в официальном разделе Known limitations. Ни одно не отменяет продукт, но каждое меняет то, как его встраивают в командную работу, и у каждого есть обход:

Ограничение (Known limitations)	Что делать
«Claude Design is available on web and desktop only»	собирать за компьютером, показывать с телефона ссылкой
Inline-комментарии иногда не отображаются на странице	открыть представление комментариев; если фидбек не подхватился — вставить его прямо в чат
Очень крупные репозитории дают лаги и проблемы браузера	подключать репозиторий со стороны Claude Code
«Chat upstream error» посреди работы	открыть новую вкладку чата внутри того же проекта
Одновременная работа двоих в проекте названа базовой и ненадёжной	разводить людей по разным проектам
Импорт дизайн-системы хорош настолько, насколько хорош источник	чинить источник, а не следующий промпт

Отдельно — граница, которую вендор не проводит, а практика проводит жёстко. Продукт собирает работающий прототип на коде: интерактив, переходы, состояния. Продакшн-макет, из которого команда живёт годами, устроен иначе: дизайн-система ведётся руками, компоненты версионируются, изменения проходят ревью. Инструмент силён на 2 участках — «от идеи до проверяемого артефакта» и «от артефакта до кода через handoff». Ролью единственного хранилища истины он не становится и на неё не претендует.

Доступ из России

Отдельной страновой политики под этот продукт Anthropic не публикует: он живёт внутри платной подписки Claude и наследует её географию, а России и Беларуси в списке поддерживаемых стран нет — это разобрано в статье Claude Code: что это, там же платёжный слой и вариант работы на своём API-ключе. Своя специфика у холста ровно одна, и она неприятная: в отличие от Claude Code с его CLI, локального фоллбэка у него нет — ставить на свою машину нечего, продукт существует только внутри аккаунта, а единственная точка входа — подписка от $20 в месяц. Инструментов доступа к зарубежным сервисам и способов оплаты мы здесь не разбираем.

Практический вывод: 3 базовые механики — дизайн-система, handoff в код, самопроверка результата — переносятся на любой похожий стек. Ценность не в логотипе на вкладке, а в навыке собирать интерфейс диалогом с агентом и принимать его работу.

Кому подойдёт, а кому рано

Инструмент окупается там, где визуальный результат нужен быстро и проверяется глазами: прототип на пользовательский тест, дека для инвестора, 5 направлений на выбор вместо одного, лендинг под кампанию. Второй участок окупаемости — связка «дизайн → код», ради которой сделан handoff-бандл: макет уходит в разработку без пересборки со скриншота.

Рано — в 2 случаях. Первый: нет дизайн-системы вообще, и тогда генерация превращается в лотерею — Anthropic предупреждает об этом сам. Второй: нужен точный контроль над каждым пикселем в макете, который ведётся годами. Тогда холст остаётся площадкой для исследований, а основная работа живёт там, где живёт сейчас.

Планка входа не в промптах, а в приёмке: отличить работающую сборку от красивой картинки, увидеть отклонение от дизайн-системы, довести бандл до кода — навык, который собирается из практики, а не из списка команд. Ровно на этой планке стоит второй модуль курса AI Native Designer: он собран вокруг архитектуры продукта и дизайн-системы на Variables через Claude Code и Figma MCP, холст входит в его стек — для быстрой сборки на уже готовой ДС, — а заканчивается модуль хендоффом, тем же самым бандлом в Claude Code.

Проверяется это за один вечер на одном экране, собранном на вашей же дизайн-системе: разница между «красиво» и «пойдёт в продакшн» видна сразу, и решение принимает diff, а не обзор.