Claude Design от Anthropic Labs позволяет создавать дизайны, интерактивные прототипы, презентации и многое другое, общаясь с Claude. Это руководство проведёт вас через создание первого проекта, итерацию дизайна и максимальное использование инструмента.
Claude Design от Anthropic Labs теперь доступен в режиме исследовательского предпросмотра для планов Pro, Max, Team и Enterprise. Для планов Enterprise эта функция отключена по умолчанию.
В этом руководстве предполагается, что система дизайна вашей организации уже настроена, поэтому всё, что вы создадите, будет автоматически использовать цвета, типографику и паттерны компонентов вашего бренда. Если вы руководитель дизайна, которому нужно настроить или изменить саму систему дизайна, см. Настройка системы дизайна в Claude Design.
Как работает Claude Design
Claude Design имеет две основные области: интерфейс чата слева и холст справа. Вы описываете, что хотите, в чате, а Claude генерирует рабочий дизайн на холсте. Затем вы итерируете — уточняя через разговор и встроенные комментарии, пока не получится правильно.
Типичный процесс:
Создайте проект и добавьте любой релевантный контекст (скриншоты, кодовую базу).
Опишите, что вы хотите создать.
Просмотрите то, что Claude генерирует на холсте.
Итерируйте, используя сообщения чата и встроенные комментарии.
Экспортируйте или поделитесь, когда вы довольны результатом.
Создание нового проекта
Когда вы создаёте проект, он автоматически наследует систему дизайна вашей организации. Вам не нужно загружать ресурсы бренда или что-либо настраивать — цвета, шрифты и компоненты вашего бренда уже на месте.
Добавьте контекст к вашему проекту
Чем больше контекста вы дадите Claude, тем лучше будет ваш результат. Вы можете прикрепить справочный материал на любом этапе проекта.
Скриншоты, изображения или существующие ресурсы: Загружайте скриншоты существующих дизайнов, продуктов конкурентов, макетов или визуального вдохновения. Вы также можете прикрепить существующую колоду слайдов или документ со стилем дизайна, который вы хотите воспроизвести. Полезно для запросов типа «сделай это похожим на это».
Кодовые базы и существующие файлы дизайна: Свяжите репозиторий кода, чтобы Claude понимал ваши существующие компоненты, архитектуру и паттерны стилизации. Это делает прототипы более готовыми к производству с самого начала. Импорт также поддерживает несколько способов загрузки существующей работы по дизайну продукта.
Напишите эффективные подсказки
Вам не нужно быть дизайнером, чтобы получить отличные результаты. Будьте конкретны в том, что вы создаёте, для кого это и что важнее всего.
Хорошая подсказка включает цель (что вы создаёте), макет (как должны быть расположены элементы), содержание (какую информацию отображать) и аудиторию (кто это будет использовать). Claude также задаст уточняющие вопросы, если ему нужна дополнительная информация.
Вот несколько примеров подсказок, которые хорошо работают:
«Создайте панель управления, показывающую ежемесячный доход с фильтрами по регионам и линиям продуктов».
«Разработайте поток адаптации мобильного приложения с 4 экранами, которые проведут пользователей через наши основные функции».
«Создайте целевую страницу для нашего нового продукта API с героическим разделом, примерами кода и ценами».
«Создайте форму для сбора отзывов клиентов с условными вопросами на основе категории».
«Разработайте внутренний инструмент для вашей команды операций для проверки и одобрения отправок контента».
Итерируйте свой дизайн
Первое поколение — это отправная точка. Реальная ценность приходит от итерации.
Использование чата
Чат лучше всего подходит для широких изменений, которые влияют на общий дизайн:
«Сделайте цветовую схему темнее и более минималистичной».
«Переставьте панель управления так, чтобы метрики были в верхней строке, а график ниже».
«Добавьте панель настроек с правой стороны».
«Покажите мне 2–3 альтернативных макета для этой страницы».
Вы также можете попросить Claude объяснить свои решения по дизайну, предложить улучшения или проверить дизайн на доступность.
Использование встроенных комментариев
Встроенные комментарии позволяют щёлкнуть непосредственно на определённую часть холста и запросить целевое изменение. Это быстрее, чем описывать местоположение в чате.
Примеры хороших встроенных комментариев:
«Сделайте отступ этой кнопки больше».
«Измените это на раскрывающееся меню вместо переключателей».
«Используйте основной цвет бренда здесь».
«Сделайте этот раздел сворачиваемым».
Примечание: Если ваши комментарии не подхватываются, вставьте отзыв непосредственно в чат. Это известный обходной путь для периодической проблемы, когда комментарии могут исчезнуть до того, как Claude их прочитает.
Когда использовать чат и комментарии
Используйте комментарии для целевых изменений на уровне компонентов («исправить эту кнопку», «отрегулировать этот интервал»). Используйте чат для структурных изменений, новых разделов, эстетических сдвигов или всего, что требует объяснения или контекста.
Управление версиями и редакциями
Если вы хотите исследовать другое направление, не теряя текущую работу, скажите Claude: «Сохраните то, что у нас есть, и попробуйте совершенно другой подход». Claude сохранит ваш текущий проект и подтвердит, где он сохранён, чтобы вы могли легко ссылаться на более ранние итерации в разговоре.
Экспорт и общий доступ
Когда ваш дизайн готов, вы можете поделиться им с коллегами или экспортировать его для использования в другом месте. Правильный формат зависит от вашего варианта использования — получаете ли вы отзывы заинтересованных сторон, передаёте инженерам или представляете группе.
Используйте кнопку «Экспорт» в верхнем правом углу при просмотре вашего проекта, чтобы выбрать из следующих форматов экспорта.
Загрузить как .zip
Экспортировать как PDF
Экспортировать как PPTX
Отправить в Canva
Экспортировать как автономный HTML
Передача в Claude Code
Отправить локальному агенту кодирования
Отправить в Claude Code Web
Вы также можете делиться проектами в вашей организации, используя ссылку для общего доступа. Параметры общего доступа включают доступ только для просмотра, комментирования и редактирования.
Использование подписки и ценообразование
Дополнительные сведения см. здесь: Использование подписки Claude Design и ценообразование.
Советы для лучших результатов
Начните с простого, затем добавляйте сложность. Начните с основного макета и содержания, затем добавьте взаимодействия, граничные случаи и полировку. Claude хорошо реагирует на пошаговые запросы.
Будьте конкретны в своих отзывах. «Это выглядит неправильно» сложно реализовать. «Сократите интервал между полями формы до 8 пикселей» даёт Claude ровно то, что ему нужно.
Ссылайтесь на вашу систему дизайна. Если вы знаете, что компонент существует в системе вашего бренда, упомяните его по имени: «Используйте компонент Primary Button» или «Примените паттерн макета Card».
Подумайте об адаптивности рано. Упомяните, должен ли ваш дизайн работать на мобильных устройствах, планшетах и настольных компьютерах или только на одном из них.
Попросите варианты. Если вы не уверены в направлении, попросите Claude показать вам 2–3 варианта. Сравнение альтернатив намного быстрее, чем угадывание.
Попросите отзыв у Claude. Claude может проверить ваш дизайн на доступность, коэффициенты контрастности, информационную иерархию и общую удобство использования. Относитесь к нему как к партнёру по дизайну, а не просто как к генератору.
Известные ограничения
Claude Design доступен как экспериментальный предпросмотр от Anthropic Labs. Несколько вещей, о которых нужно знать:
Сохранение комментариев: Встроенные комментарии иногда исчезают до того, как Claude их прочитает. Чтобы обойти это, вставьте текст комментария в чат.
Ошибки сохранения в компактном представлении: Режим компактного макета может вызвать ошибки сохранения. Если это произойдёт, переключитесь на полное представление и повторите попытку.
Большие кодовые базы: Связывание очень больших репозиториев может вызвать задержку или проблемы с браузером. Свяжите определённые подкаталоги вместо целых монорепозиториев.
Ошибки чата: Если вы столкнулись с ошибкой «chat upstream error», попробуйте начать новую вкладку чата в том же проекте.