Claude Design и дизайн через ИИ: как использовать в 2026

Claude Design собирает макеты, прототипы, слайды, одностраничники и лендинги на холсте рядом с чатом; открыть его можно в любом диалоге через Output > Design, во вкладке Artifacts, командой /design в Claude Code или в claude.ai/design. Claude Design (шаблон артефактов) работает в бете на Pro, Max, Team и Enterprise с экспортом в PDF, PPTX, HTML и Canva и передачей в Claude Code; на Free доступны обычные артефакты в чате без шаблона Design.

Где открыть Claude Design

В чате достаточно попросить дизайн, например «сделай одностраничник из этого предложения», или выбрать Output > Design в поле ввода. Во вкладке Artifacts выберите шаблон Design, в Claude Code используйте /design, а прежний интерфейс claude.ai/design продолжает работать. На iOS и Android можно попросить дизайн в чате и посмотреть результат во вкладке Artifacts; правка на холсте и настройки доступа требуют веб-версии или приложения для компьютера.

17 апреля 2026 года Anthropic Labs выпустила Claude Design как отдельное рабочее пространство; на запуске он работал на Claude Opus 4.7. С 16 сентября 2026 года Design встроен в диалоги как один из шаблонов артефактов наряду со Slides и Docs.

Claude Design входит в платные планы Pro, Max, Team и Enterprise и сейчас доступен в бете. На Pro, Max и Team он включён по умолчанию. На Enterprise владелец организации должен включить его в Organization settings > Artifacts.

Без платной подписки можно собрать интерфейс через обычные Artifacts: результат кода (HTML, CSS и JavaScript или React-компонент) открывается рядом с чатом. Кнопки можно нажимать, формы заполнять. Такие артефакты доступны на Free, Pro, Max, Team и Enterprise. На Free, Pro и Max включите переключатель Cloud code execution and file creation в Settings > Capabilities, иначе артефакты не работают.

Что Claude умеет в дизайне на практике

Через Claude можно собрать лендинг, отдельный компонент или кликабельный прототип по описанию на русском языке:

• Собрать лендинг или главную страницу: секции, кнопки, форма заявки, адаптив под телефон.
• Сверстать отдельный UI-компонент: карточку товара, калькулятор, таблицу с фильтрами, форму.
• Сделать кликабельный прототип: несколько экранов, между которыми можно переходить.
• Подготовить слайды презентации или одностраничник; для презентаций есть отдельный платный шаблон Slides с экспортом в PowerPoint и PDF.
• Предложить палитру, шрифтовые пары и варианты композиции, когда вы не знаете, с чего начать.
• Сделать редизайн: показываете текущий вариант и просите переработать под нужный тон.

Для одного экрана или компонента можно начать с обычного артефакта прямо в диалоге. Claude Design нужен для работы с макетом на холсте: вы оставляете комментарии, редактируете элементы, перетаскиваете их, меняете размер и выравнивание. Ползунки, которые Claude собирает под проект, помогают настроить отступы и цвет.

По теме: Как сделать сайт с помощью Claude: пошагово без опыта

Как собрать макет интерфейса через Artifacts: пошагово

Чтобы собрать макет бесплатно, начните обычный диалог и попросите Claude создать страницу как артефакт:

1. Откройте claude.ai и начните новый диалог. Отдельный режим для обычного артефакта не нужен. Если артефакт не появляется, проверьте переключатель Cloud code execution and file creation в Settings > Capabilities.
2. Опишите задачу словами: что за экран, для кого, какие блоки нужны и в каком настроении. Чем конкретнее, тем меньше правок потом.
3. Дождитесь, пока Claude сгенерирует Artifact: справа откроется панель с работающим макетом.
4. Понажимайте элементы прямо в панели, проверьте, что всё ведёт себя как надо.
5. Просите точечные правки в чате: «сделай кнопку крупнее», «убери вторую секцию», «поменяй фон на светло-бежевый». Claude пересоберёт версию.
6. Когда результат устроит, попросите Claude выдать код страницы одним HTML-файлом и сохраните его у себя (так можно и на Free). Для артефакта из шаблона Design нажмите Export и выберите отдельный HTML-файл. У старого артефакта, созданного в чате до 16 сентября 2026 года, можно открыть код, скопировать содержимое или скачать его через элементы управления вверху панели.

У дизайна кнопка Export даёт выгрузку в .zip, PDF, PPTX или отдельный HTML-файл. Отсюда же работу можно отправить в Canva, Gamma, Miro, Vercel, Wix и другие сервисы. Экспорт в Google Slides доступен только в claude.ai/design.

Новый артефакт передают по ссылке через кнопку Share. Вариант Anyone with the link есть на Pro и Max, а на Team и Enterprise доступен с разрешения владельца организации; на Free этого варианта нет. Для открытия ссылки получателю нужен аккаунт Claude. Без аккаунта открываются только старые артефакты из чата, опубликованные через Publish на Free, Pro или Max. Для показа клиенту без аккаунта Claude сохраните HTML-файл и разместите страницу на своём сайте.

Как работает Claude Design для команд

Для команды Claude Design использует подключённую дизайн-систему с вашими цветами, шрифтами и компонентами. Одну или несколько систем можно подключить из репозитория GitHub, файлов дизайна, загруженных материалов или локального кода через /design-sync в Claude Code. Claude строит макет из ваших компонентов и сам сверяет результат с системой, поэтому стиль не приходится описывать заново для каждого проекта.

Claude выдаёт первую версию, а вы правите её в разговоре, встроенными комментариями, прямым редактированием или ползунками под конкретный макет. Готовый дизайн можно передать в разработку через Handoff to Claude Code, выбрав локального агента или Claude Code Web. Если вы уже работаете в Claude Code, команда /design импортирует дизайн в кодовую базу, чтобы продолжить работу над сайтом из готового макета.

Для профессиональной команды Figma остаётся инструментом совместной работы над дизайном. Claude Design помогает пройти раннюю стадию от запроса до прототипа внутри платного плана Claude. Если вы никогда не занимались дизайном, начните с такого рабочего варианта и уточняйте его по частям.

По теме: Клод и презентации: как сделать слайды и PPTX в Claude в 2026

Как писать промпты для дизайна

В запросе для дизайна укажите цель экрана, нужные блоки, стиль и требования к телефону:

• Тип экрана и цель: «лендинг онлайн-курса, задача: записать на бесплатный вебинар».
• Аудиторию и тон: «спокойный, деловой, без агрессивных продаж».
• Обязательные блоки: заголовок, выгоды, отзывы, форма, кнопка.
• Стиль и цвета: «тёплый бежевый фон, один акцентный оранжевый, крупная типографика».
• Адаптив: «чтобы нормально смотрелось на телефоне».
• Референс, если есть: опишите словами сайт, который нравится, или приложите скриншот.

Не пытайтесь получить идеал с первого запроса. Быстрее работает так: короткое общее описание, потом три-четыре точечные правки поверх готовой версии. Каждая правка отдельной фразой, а не списком из десяти пунктов сразу.

Ограничения и сколько это стоит

Обычные артефакты доступны бесплатно, а шаблон Claude Design требует платного плана. Claude Pro стоит $20 в месяц или $200 при оплате за год; на странице тарифов годовая цена показана как $17 в месяц, вся сумма списывается сразу.

Раньше у Claude Design был свой недельный лимит, теперь расход идёт из общего лимита плана вместе с чатом и Claude Code. Когда лимит исчерпан, Design недоступен до сброса; с включёнными usage credits можно продолжить работу. Если планируете много правок, учитывайте общий расход и лимиты Claude.

Для доступа из России включите VPN с сервером в поддерживаемой стране до открытия claude.ai: России нет в списке стран Anthropic. Страну VPN, мобильного номера и карты держите одинаковой и не переключайте регион туда-сюда, чтобы снизить риск блокировки.

Для регистрации нужен реальный мобильный номер поддерживаемой страны, на который придёт сообщение с кодом. VoIP, Google Voice, номера из приложений и стационарные номера не принимаются. Подготовьте номер до регистрации: без него подтвердить новый аккаунт не получится.

Для оплаты подписки Claude из России используйте карту иностранного банка: Anthropic проверяет страну выпуска и платёжный адрес на соответствие поддерживаемым странам. Платёжный адрес должен совпадать со страной выпуска карты.

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

В бете Claude Design пока нет истории версий. Перед сменой направления попросите: «сохрани текущий вариант и попробуй совсем другой подход». Claude сохранит текущий проект. Одновременная правка несколькими людьми работает ненадёжно; если встроенный комментарий не подхватился, вставьте замечание в чат. При ошибке chat upstream error начните новую вкладку чата в том же проекте.

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

Claude design это то же самое, что Artifacts?

Claude Design теперь работает как шаблон внутри Artifacts для макетов и прототипов на холсте. Его можно открыть в чате или во вкладке Artifacts. Для простого экрана можно обойтись обычным артефактом; шаблон Design добавляет работу на холсте с дизайн-системой и доступен только в платных планах.

Можно ли сделать дизайн в Claude бесплатно?

Да. На Free можно пользоваться Claude без подписки, в том числе делать базовые макеты через обычные артефакты в чате, хотя объём использования на Free ограничен. Шаблоны Design, Slides и Docs требуют платного плана.

Нужно ли уметь верстать, чтобы пользоваться?

Нет. Например, попросите по-русски: «лендинг онлайн-курса, задача: записать на бесплатный вебинар», а код Claude напишет сам. Умение читать код пригодится, только если захотите переносить макет на свой сайт и дорабатывать его руками.

Claude Design заменит Figma?

Для профессиональных команд полностью нет, Figma сильна в совместном векторном редактировании. Но для стадии от идеи до прототипа Claude Design закрывает путь запрос → макет → код внутри одной подписки, и для человека без дизайнерского опыта этого часто достаточно.