Claude Design позволяет создавать дизайны, интерактивные прототипы, презентации и многое другое, общаясь с Claude. Это руководство проведёт вас через создание первого проекта, итерацию дизайнов и максимальное использование инструмента.
Claude Design теперь доступен в бета-версии для планов Pro, Max, Team и Enterprise. Эта функция отключена по умолчанию для планов Enterprise. Вы можете использовать её в веб-версии на claude.ai/design или из боковой панели в Claude Desktop.
Это руководство предполагает, что система дизайна вашей организации уже настроена, поэтому всё, что вы создадите, автоматически будет использовать цвета, типографику и паттерны компонентов вашего бренда. Если вы руководитель дизайна, которому нужно настроить или изменить саму систему дизайна, см. Настройка системы дизайна в Claude Design.
Как работает Claude Design
Claude Design имеет две основные области: интерфейс чата слева и холст справа. Вы описываете, что хотите, в чате, а Claude генерирует рабочий дизайн на холсте. Затем вы итерируете — уточняя через разговор, встроенные комментарии и прямое редактирование на холсте, пока результат не будет идеальным.
Типичный процесс:
Создайте проект.
Прикрепите или импортируйте систему дизайна, с которой Claude должен работать.
Добавьте любой релевантный контекст (скриншоты, кодовую базу).
Опишите, что вы хотите создать.
Просмотрите, что Claude генерирует на холсте.
Уточняйте через чат, редактируйте прямо на холсте или оставляйте встроенные комментарии.
Экспортируйте или поделитесь, когда вы довольны результатом.
Переключение между Claude Design и Claude Code
Вы можете переключаться между работой в Claude Design и Claude Code, сохраняя синхронизацию вашей работы. Используйте /design-sync для импорта вашей системы дизайна, чтобы всё, что вы создаёте в Claude Design, начиналось с ваших существующих компонентов. Когда дизайн готов стать программным обеспечением, вы можете передать его в Claude Code, который продолжит работу с вашим существующим кодом вместо того, чтобы начинать заново со скриншота.
Если вы предпочитаете работать из Claude Code, подключите MCP-сервер Claude Design для создания и редактирования дизайнов, не покидая терминал:
Добавьте сервер:
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
2. Запустите /design-login для входа.
После подключения вы можете импортировать дизайн в вашу кодовую базу, экспортировать ваш код как живой прототип или позволить Claude создать всё с нуля.
Создание нового проекта
При создании проекта он автоматически наследует систему дизайна вашей организации. Вам не нужно загружать ресурсы бренда или что-либо настраивать — цвета вашего бренда, шрифты и компоненты уже на месте.
Прикрепление или импорт системы дизайна
Импортируйте одну или несколько систем дизайна из репозитория GitHub, файлов дизайна, прямых загрузок или вашей локальной кодовой базы, используя команду /design-sync в Claude Code. Claude создаёт с использованием ваших реальных компонентов системы дизайна, проверяет свой собственный результат на соответствие вашей системе дизайна и вносит исправления до того, как вы их увидите.
Для больших команд пользовательская роль администратора Claude Design позволяет администратору одобрить стандартную систему и заблокировать редактирование, чтобы работа всегда соответствовала рекомендациям вашей компании.
Добавление контекста к вашему проекту
Чем больше контекста вы предоставите Claude, тем лучше будет результат. Вы можете прикреплять справочный материал на любом этапе проекта.
Скриншоты, изображения или существующие ресурсы: Загружайте скриншоты существующих дизайнов, продуктов конкурентов, макетов или визуального вдохновения. Вы также можете прикрепить существующую колоду слайдов или документ со стилем дизайна, который хотите воспроизвести. Полезно для запросов типа «сделай это похожим на это».
Кодовые базы и существующие файлы дизайна: Свяжите репозиторий кода, чтобы Claude понимал ваши существующие компоненты, архитектуру и паттерны стилизации. Это делает прототипы более готовыми к производству с самого начала. Импорт также поддерживает несколько способов загрузки существующей работы по дизайну продукта.
Написание эффективных запросов
Вам не нужно быть дизайнером, чтобы получить отличные результаты. Будьте конкретны в том, что вы создаёте, для кого это и что важнее всего.
Хороший запрос включает цель (что вы создаёте), макет (как должны быть расположены элементы), содержание (какую информацию отображать) и аудиторию (кто это будет использовать). Claude также задаст уточняющие вопросы, если ему нужна дополнительная информация.
Вот несколько примеров запросов, которые хорошо работают:
«Создайте панель управления, показывающую ежемесячный доход с фильтрами по регионам и линиям продуктов».
«Разработайте поток адаптации мобильного приложения с 4 экранами, которые проведут пользователей через наши основные функции».
«Создайте целевую страницу для нашего нового продукта API с героическим разделом, примерами кода и ценами».
«Создайте форму для сбора отзывов клиентов с условными вопросами на основе категории».
«Разработайте внутренний инструмент для вашей команды операций для проверки и одобрения отправок контента».
Уточнение вашего дизайна
Первое поколение — это отправная точка. Реальная ценность приходит от итерации.
Использование чата
Чат лучше всего подходит для широких изменений, которые влияют на общий дизайн:
«Сделайте цветовую схему темнее и более минималистичной».
«Переставьте панель управления так, чтобы метрики были в верхней строке, а график ниже».
«Добавьте панель настроек с правой стороны».
«Покажите мне 2–3 альтернативных макета для этой страницы».
Вы также можете попросить Claude объяснить его решения по дизайну, предложить улучшения или проверить дизайн на доступность.
Использование встроенных комментариев
Встроенные комментарии позволяют щёлкнуть прямо на определённую часть холста и запросить целевое изменение. Это быстрее, чем описывать местоположение в чате.
Примеры хороших встроенных комментариев:
«Увеличьте отступ этой кнопки».
«Измените это на раскрывающееся меню вместо переключателей».
«Используйте основной цвет бренда здесь».
«Сделайте этот раздел сворачиваемым».
Примечание: Если ваши комментарии не подхватываются, вставьте отзыв прямо в чат. Это известный обходной путь для периодической проблемы, когда комментарии могут исчезнуть до того, как Claude их прочитает.
Прямое редактирование на холсте
Используйте богатые элементы управления макетом для быстрых визуальных и эстетических изменений, в частности для перетаскивания, изменения размера и выравнивания элементов прямо на холсте.
Когда использовать чат, комментарии или прямое редактирование
Используйте комментарии для целевых изменений на уровне компонентов («исправьте эту кнопку», «отрегулируйте этот отступ»). Используйте чат для структурных изменений, новых разделов или всего, что требует объяснения или контекста. Редактируйте прямо для быстрых визуальных и эстетических изменений.
Управление версиями и редакциями
Если вы хотите исследовать другое направление, не теряя текущую работу, скажите Claude: «Сохраните то, что у нас есть, и попробуйте совершенно другой подход». Claude сохранит ваш текущий проект и подтвердит, где он сохранён, чтобы вы могли легко ссылаться на более ранние итерации в разговоре.
Экспорт и совместное использование
Когда ваш дизайн готов, вы можете поделиться им с коллегами или экспортировать его для использования в другом месте. Правильный формат зависит от вашего варианта использования — получаете ли вы отзывы заинтересованных сторон, передаёте инженерам или представляете группе.
Используйте кнопку «Экспорт» в верхнем правом углу при просмотре вашего проекта, чтобы выбрать один из следующих форматов экспорта.
Загрузить как .zip
Экспортировать как PDF
Экспортировать как PPTX
Отправить в Canva
Экспортировать как автономный HTML
Отправляйте в инструменты, которые вы уже используете, включая Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel и Wix, с дополнительными направлениями, появляющимися в ближайшее время.
Передача в Claude Code
Отправить локальному агенту кодирования
Отправить в Claude Code Web
Вы также можете делиться проектами в вашей организации, используя ссылку для совместного использования. Параметры совместного использования включают доступ только для просмотра, комментирования и редактирования.
Использование и ценообразование
Claude Design учитывается в тех же лимитах использования, что и остальная часть Claude. Активность дизайна берёт из общего пула, который вы используете для чата, Claude Code и Cowork, поэтому нет отдельного лимита Claude Design для отслеживания. Сложные проекты с большими кодовыми базами или множеством итераций потребляют больше использования.
Если вы достигли лимитов использования, Claude Design недоступен до сброса лимитов. Если вы включили кредиты использования, вы можете продолжить работу после достижения включённых лимитов. Узнайте больше о том, как работают лимиты использования и длины.
Примечание: Claude Design ранее имел собственный еженедельный лимит, отдельный от других лимитов использования. Вся активность Claude Design теперь учитывается в общих лимитах вашего плана.
Советы для лучших результатов
Импортируйте полную систему дизайна. Импортируйте полную систему дизайна, которая включает ваши стили, шрифты и компоненты.
Начните с простого, затем добавляйте сложность. Начните с основного макета и содержания, затем добавьте взаимодействия, граничные случаи и полировку. Claude хорошо реагирует на пошаговые запросы.
Будьте конкретны в своих отзывах. «Это выглядит неправильно» сложно реализовать. «Сократите расстояние между полями формы до 8 пикселей» даёт Claude ровно то, что ему нужно.
Ссылайтесь на вашу систему дизайна. Если вы знаете, что компонент существует в системе вашего бренда, упомяните его по имени: «Используйте компонент Primary Button» или «Примените паттерн макета Card».
Подумайте об адаптивности рано. Упомяните, должен ли ваш дизайн работать на мобильных устройствах, планшетах и настольных компьютерах или только на одном из них.
Попросите варианты. Если вы не уверены в направлении, попросите Claude показать вам 2–3 варианта. Сравнение альтернатив намного быстрее, чем угадывание.
Попросите отзыв Claude. Claude может проверить ваш дизайн на доступность, коэффициенты контрастности, информационную иерархию и общую удобство использования. Относитесь к нему как к партнёру по дизайну, а не просто как к генератору.
Известные ограничения
Claude Design теперь доступен в бета-версии. Несколько вещей, о которых нужно знать:
Сохранение комментариев: Встроенные комментарии иногда не отображаются на странице, но вы всё ещё можете их видеть, открыв представление комментариев.
Большие кодовые базы: Рассмотрите возможность связывания очень больших репозиториев из Claude Code, чтобы избежать задержек или проблем с браузером. Для синхронизации системы дизайна используйте
/design-syncиз Claude Code.Ошибки чата: Если вы столкнулись с ошибкой «chat upstream error», попробуйте открыть новую вкладку чата в том же проекте.
Доступность: Claude Design доступен только в веб-версии и на рабочем столе.
Редактирование несколькими людьми: Редактирование проекта дизайна двумя или более людьми одновременно всё ещё находится на начальном этапе и может работать ненадёжно.
Импорт системы дизайна: Импорт системы дизайна настолько хорош, насколько хорош его источник. Беспорядочная кодовая база или неполный файл будут видны в результате.