Claude Design: что умеет и как работать

Claude Design — инструмент Anthropic для визуальной работы: макетов, интерактивных прототипов, одностраничников, лендингов и маркетинговых материалов, которые Claude собирает по текстовому описанию и дорабатывает вместе с вами на холсте. Запустился он 17 апреля 2026 года как отдельный продукт Anthropic Labs, а с 16 сентября 2026 года работает прямо в обычном диалоге на claude.ai — то есть там же, где нейросеть Клауд предлагает чат, Claude Code и вкладку Artifacts. Ниже — что умеет Claude Design по официальным данным на начало октября 2026 года, на каких тарифах он есть, как начать, как подключить дизайн-систему и где у инструмента пока слабые места.

Что такое Claude Design

Claude Design (по-русски чаще ищут «claude дизайн») — это связка диалога и холста. Вы описываете задачу, Claude строит первую версию на холсте рядом с перепиской, а дальше её доводят до результата тремя способами: сообщениями в чате, точечными комментариями к элементам и прямой правкой на холсте. Anthropic позиционирует его для тех, у кого нет дизайнерского образования (основатели, продакт-менеджеры, маркетологи), и для дизайнеров, которым нужно быстро перебрать десяток направлений вместо двух-трёх.

У продукта две фазы:

ЭтапДатаКак устроено
Запуск17 апреля 2026Отдельный продукт Anthropic Labs по адресу claude.ai/design, статус research preview, модель Claude Opus 4.7
Перенос в чат16 сентября 2026Design стал одним из шаблонов артефактов: доступен в любом диалоге, в Claude Code и во вкладке Artifacts; рядом появились шаблоны Claude Slides и Claude Docs

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

На запуске Anthropic прямо указала модель: Claude Design работал на Claude Opus 4.7, которую компания тогда называла своей сильнейшей моделью по зрению. После переноса в диалоги отдельная модель для Design на официальных страницах не называется.

Что умеет Claude Design

В анонсе на anthropic.com перечислены сценарии, для которых команды уже используют инструмент:

  • Прототипы. Статичный макет превращается в интерактивный прототип, которым можно поделиться и прогнать пользовательское тестирование без код-ревью.
  • Вайрфреймы и макеты продукта. Сценарии новой функции набрасываются за минуты и уходят в Claude Code на реализацию или дизайнеру на доработку.
  • Поиск направлений. Много вариантов визуального решения за короткое время; Claude можно попросить показать 2–3 альтернативных раскладки.
  • Маркетинг. Лендинги, материалы для соцсетей, визуалы кампаний, одностраничники из коммерческого предложения.
  • Прототипы на коде. Интерактивные вещи с голосом, видео, шейдерами, 3D и встроенным ИИ.

Презентации на запуске тоже делались в Claude Design, но после сентябрьского обновления у них свой шаблон — Claude Slides: колоды из заметок, отчётов или содержимого чата с экспортом в PowerPoint и PDF. Claude Design теперь отвечает за визуалы, макеты, прототипы, одностраничники, лендинги и микросайты.

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

Три способа правки макета в Claude Design: чат, комментарии и холст
Чат — для крупных изменений, комментарии — для элементов, холст — для визуальных правок. Источник: support.claude.com

Тарифы, доступ и лимиты

По справке по артефактам шаблоны Design, Slides и Docs доступны в бете только на платных тарифах. Сами артефакты в чате есть и на Free, но начать с шаблона на бесплатном плане нельзя — на странице тарифов в строке «Claude Design, Slides, Docs» у Free стоит «нет».

ТарифClaude DesignВключён по умолчанию
Freeнет—
Proда, бетада
Maxда, бетада
Teamда, бетада
Enterpriseда, бетанет, включает владелец организации

На Enterprise шаблон включают в Organization settings → Artifacts, а отдельную версию на claude.ai/design — своим переключателем в Organization settings → Claude Design: одно не включает другое. Для артефактов в целом нужна включённая настройка выполнения кода и создания файлов в Settings → Capabilities.

Отдельной квоты у Claude Design нет. Раньше у него был свой недельный лимит, теперь вся работа с дизайном расходует общий лимит подписки вместе с чатом и Claude Code. Крупный проект, большая кодовая база или много итераций съедают заметно больше, чем обычное сообщение; когда лимит кончился, Design недоступен до сброса, если не включено докупаемое использование. Как устроены окна лимитов и сколько стоят Pro и Max — в статье про цены и лимиты Claude.

Как начать работу

Точек входа пять:

  1. Обычный диалог. Попросить, например, «сделай одностраничник из этого предложения» или выбрать в поле сообщения Output → Design.
  2. Вкладка Artifacts. Выбрать один из шаблонов Design.
  3. Claude Code в десктопном приложении или терминале: попросить превратить идею в дизайн или вызвать команду /design.
  4. Мобильные приложения iOS и Android. Можно попросить дизайн и посмотреть результат во вкладке Artifacts; правка на холсте, шаблоны и настройки доступа — только в веб-версии или десктопе.
  5. claude.ai/design — отдельная версия, где остались прежние проекты.

Дальше порядок, который советует справка Claude Design: подключить дизайн-систему, добавить контекст (скриншоты, существующие макеты, репозиторий), описать задачу, посмотреть первую версию и дорабатывать её. Хороший запрос содержит цель, раскладку, содержимое и аудиторию. Примеры из справки: «дашборд месячной выручки с фильтрами по региону и продуктовой линейке», «онбординг мобильного приложения на 4 экрана», «лендинг API-продукта с первым экраном, примерами кода и ценами».

Порядок работы в Claude Design: дизайн-система, контекст, задача, первая версия и доработка
Типовой порядок работы в Claude Design из шести шагов. Источник: support.claude.com

Рабочие приёмы оттуда же: начинать с основной раскладки и наращивать детали постепенно, давать конкретную обратную связь («сократи отступ между полями формы до 8px» вместо «выглядит не так»), сразу говорить, нужен ли макет для телефона, планшета и десктопа, и называть компоненты дизайн-системы по именам. Чтобы попробовать другое направление и не потерять текущее, достаточно написать «сохрани то, что есть, и попробуй совсем другой подход» — Claude сохранит проект и скажет, где он лежит. Сам текст запроса удобно отточить заранее: попробовать ИИ онлайн бесплатно в ограниченной версии и готовую формулировку отдать в Design, не тратя на черновики общий лимит подписки.

Импорт материалов: текстовый запрос, изображения, файлы DOCX, PPTX и XLSX, ссылка на кодовую базу. На запуске Anthropic также описывала инструмент захвата элементов прямо с вашего сайта, чтобы прототип выглядел как настоящий продукт.

Дизайн-система: сначала бренд, потом макеты

Главное отличие Claude Design от генерации «просто красивой страницы» — работа по вашей дизайн-системе. Это набор цветов, шрифтов, компонентов и правил раскладки, который Claude извлекает из ваших материалов и затем применяет к каждому новому макету и презентации. Без неё результат функциональный, но шаблонный; Anthropic в руководстве для администраторов называет настройку дизайн-системы самым важным шагом перед раскаткой на команду.

Источники для дизайн-системы:

  • кодовая база или библиотека компонентов (например, React);
  • презентация или PDF в фирменном стиле;
  • логотипы, палитры, образцы шрифтов, файлы Figma, скриншоты и существующие макеты.

Создать её можно двумя путями. Из чата — загрузить файлы и попросить Claude собрать систему; так лучше получаются брендовые системы со шрифтами, цветами и гайдлайнами. Из Claude Code командой /design-sync — она читает токены и компоненты прямо из репозитория и лучше подходит для продуктовых систем в коде. Управляются системы в Settings → Design systems; у организации их может быть несколько. Системы, созданные раньше на claude.ai/design, переносятся кнопкой Migrate team design systems во вкладке Design, после чего у каждой появляется кнопка Let Claude clean it up для чистки токенов и компонентов.

По данным справки по дизайн-системам, после проверки на тестовом проекте систему публикуют переключателем Published, и новые проекты организации подхватывают её автоматически. Claude сверяет свой результат с компонентами системы и исправляет расхождения до того, как вы их увидите. На Enterprise администраторы могут закрепить за командой одну утверждённую систему и оставить публикацию, выбор системы по умолчанию и удаление только за отдельными людьми.

Схема создания дизайн-системы в Claude Design: источники, создание из чата или через /design-sync, публикация
Дизайн-система собирается из кода, презентаций или брендовых файлов и после публикации применяется к новым проектам. Источник: support.claude.com

Экспорт и передача в Claude Code

Кнопка Export в правом верхнем углу проекта даёт такие варианты:

КудаЧто получается
Файлархив .zip, PDF, PPTX, отдельный HTML
Google Slidesтолько в отдельной версии на claude.ai/design
Внешние сервисыAdobe Experience Manager, Adobe for Creativity, Adobe Journey Optimizer, Base44, Canva, Gamma, HubSpot, Hyperframes, Lovable, Miro, Netlify, Replit, v0, Vercel, Wix
Разработкапередача в Claude Code, локальному агенту для кода или в Claude Code в браузере
Экспорт из Claude Design: файлы zip, PDF, PPTX, HTML, передача в Claude Code и 15 внешних сервисов
Варианты экспорта Claude Design: файлы, Claude Code, Google Slides и 15 внешних сервисов. Источник: support.claude.com

Передача в Claude Code — ключевой сценарий для продуктовых команд. Claude собирает пакет со всем, что нужно для реализации, и Claude Code продолжает с готовой работы, а не восстанавливает интерфейс по скриншоту. В обратную сторону из Claude Code командой /design можно импортировать дизайн в кодовую базу, выгрузить код как живой прототип или поручить Claude весь путь от макета до реализации.

Схема связки Claude Design и Claude Code: передача макета, команды /design и /design-sync
Макеты уходят в Claude Code, а код и дизайн-система возвращаются в Claude Design. Источник: support.claude.com

Делиться тоже просто: каждый дизайн по умолчанию приватный, по кнопке Share выбирают, кто его открывает и что может делать — смотреть, комментировать или редактировать. Превью проектов работают в изолированной песочнице на отдельном домене Anthropic, и код превью не имеет доступа к аккаунту, логину и редактору.

Claude design skills: как связаны со Skills

Запрос «claude design skills» обычно про два разных механизма. Claude Design — готовый продукт с холстом. Skills — папки с инструкциями и скриптами, которые Claude подгружает под задачу; они доступны на всех тарифах, включая Free, при включённом выполнении кода. Как их подключать и писать свои — в статье про Skills в Claude.

В публичном репозитории anthropics/skills есть несколько официальных навыков, полезных для дизайна вне Claude Design:

SkillДля чего
frontend-designВыразительный визуальный дизайн интерфейсов без шаблонных решений: палитра, типографика, раскладка
canvas-designСтатичные визуалы — постеры, арт — в PNG и PDF
theme-factoryТемы оформления для слайдов, документов, отчётов и лендингов: 10 готовых или новая на лету
brand-guidelinesФирменные цвета и шрифты Anthropic как пример брендового навыка
web-artifacts-builderСложные HTML-артефакты на React, Tailwind CSS и shadcn/ui
algorithmic-artГенеративная графика на p5.js

По README репозитория эти примеры уже доступны платным тарифам в claude.ai, а в Claude Code их ставят как плагин командой /plugin marketplace add anthropics/skills. Практическое разделение такое: Claude Design нужен, когда важны холст, совместная правка, дизайн-система организации и экспорт в рабочие сервисы; skill — когда вы хотите закрепить свои правила оформления и применять их в любом диалоге, Claude Code или через API.

Ограничения бета-версии

Anthropic прямо перечисляет, что пока работает не идеально:

  • Комментарии иногда не отображаются на холсте; их видно в панели комментариев, а если Claude их не подхватил, текст правки стоит продублировать в чат.
  • Большие репозитории лучше подключать через Claude Code и /design-sync, иначе возможны подвисания браузера.
  • Ошибка chat upstream error лечится новой вкладкой чата внутри того же проекта.
  • Совместная правка одного проекта несколькими людьми одновременно пока базовая и может работать ненадёжно.
  • Истории версий у Claude Design пока нет — альтернативные направления сохраняют просьбой к Claude.
  • Качество импорта дизайн-системы равно качеству исходника: неряшливая кодовая база или неполный файл проявятся в результате.
  • Мобильные приложения только показывают результат, править на холсте можно в вебе и на десктопе.

Ещё одно практическое ограничение — лимиты. Полноценный макет или прототип расходует подписку быстрее обычного диалога, а квота у дизайна, чата и Claude Code общая.

Частые вопросы

Claude Design бесплатный?

Нет. Шаблоны Design, Slides и Docs доступны в бете только на платных тарифах Pro, Max, Team и Enterprise. На Free можно создавать обычные артефакты в чате, но не начинать работу с шаблона Design.

Нужно ли отдельно платить за Claude Design на Pro?

Нет, он входит в подписку. Отдельной квоты нет: работа с дизайном расходует общий лимит плана вместе с чатом и Claude Code. Сверх лимита можно продолжить, только если включено докупаемое использование.

Можно ли выгрузить результат в Figma или PowerPoint?

В PowerPoint — да, есть экспорт в PPTX, а также в PDF, HTML и архив .zip. Отдельного экспорта в Figma в справке нет; файлы Figma можно использовать как источник для дизайн-системы. Готовые макеты также отправляются в Canva, Miro, Gamma, Vercel, Wix и другие сервисы из списка.

Чем Claude Design отличается от обычного артефакта?

Обычный артефакт — код или страница в панели рядом с чатом. Claude Design открывается на холсте с комментариями к элементам и прямой правкой, подтягивает дизайн-систему организации и экспортирует результат в рабочие сервисы и в Claude Code.

Работает ли Claude Design на телефоне?

Частично. В приложениях для iOS и Android можно попросить дизайн и открыть результат во вкладке Artifacts на весь экран, но правка на холсте, шаблоны и настройки доступа доступны только в веб-версии и десктопном приложении.

Истории
  • Маршрут от Claude привёл подростка на «Вдоводел»
  • 950 агентов Claude нашли в ДНК вирусов загадочную систему
  • Anthropic запретила издеваться над Claude
  • ИИ-видео с погибшим в суде: срок назначат заново
  • Журналист выпустил ИИ-песню от имени чужой группы
  • Нейросеть научилась играть в «Точки» и обыгрывает автора

Начни прямо сейчас

Доступ к самым мощным моделям ИИ в вашем браузере