Начните работу с Claude Design

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

В этом руководстве предполагается, что система дизайна вашей организации уже настроена, поэтому всё, что вы создадите, будет автоматически использовать цвета, типографику и паттерны компонентов вашего бренда. Если вы руководитель дизайна, которому нужно настроить или изменить саму систему дизайна, см. Настройка системы дизайна в Claude Design.

Создайте артефакт с Claude

Claude Design объединяет разговор с холстом. Вы описываете, что хотите, а Claude генерирует рабочий дизайн на холсте рядом с разговором. Затем вы улучшаете его — уточняя через разговор, встроенные комментарии и прямое редактирование на холсте, пока результат не будет идеальным.

Типичный процесс:

Вы можете переключаться между работой в Claude Design и Claude Code, сохраняя синхронизацию вашей работы. Используйте /design-sync для импорта вашей системы дизайна, чтобы всё, что вы создаёте в Claude Design, начиналось с ваших существующих компонентов. Когда дизайн готов стать программным обеспечением, вы можете передать его в Claude Code, который продолжит работу с вашей существующей работой вместо того, чтобы начинать заново со скриншота.

Из Claude Code используйте /design для импорта дизайна в вашу кодовую базу, экспорта вашего кода как живого прототипа или позвольте Claude создать всё с нуля.

Когда вы создаёте проект, он автоматически наследует систему дизайна вашей организации. Вам не нужно загружать ресурсы бренда или что-либо настраивать — цвета вашего бренда, шрифты и компоненты уже на месте.

Привнесите одну или несколько систем дизайна из репозитория GitHub, файлов дизайна, прямых загрузок или вашей локальной кодовой базы, используя команду /design-sync в Claude Code. Claude создаёт с использованием ваших реальных компонентов системы дизайна, проверяет свой собственный результат на соответствие вашей системе дизайна и вносит исправления до того, как вы их увидите.

В планах Enterprise администраторы могут зарезервировать публикацию, установку по умолчанию и удаление систем дизайна для конкретных пользователей. Узнайте больше в руководстве администратора артефактов для планов Team и Enterprise.

Системы дизайна, которые вы создали в отдельной версии на claude.ai/design, можно перенести, чтобы Claude мог использовать их в любом чате, включая Claude Code. Перенесите их до закрытия отдельной версии 14 декабря 2026 года. Узнайте больше в Миграция с отдельной версии Claude Design на Claude.

Чем больше контекста вы дадите Claude, тем лучше будет ваш результат. Вы можете прикрепить справочный материал на любом этапе проекта.

Вам не нужно быть дизайнером, чтобы получить отличные результаты. Будьте конкретны в том, что вы создаёте, для кого это и что важнее всего.

Хорошая подсказка включает цель (что вы создаёте), макет (как должны быть расположены элементы), содержание (какую информацию отображать) и аудиторию (кто это будет использовать). Claude также задаст уточняющие вопросы, если ему нужна дополнительная информация.

Вот несколько примеров подсказок, которые хорошо работают:

Первое поколение — это отправная точка. Реальная ценность приходит от итерации.

Чат лучше всего подходит для широких изменений, которые влияют на общий дизайн:

Вы также можете попросить Claude объяснить его решения по дизайну, предложить улучшения или проверить дизайн на доступность.

Встроенные комментарии позволяют щелкнуть непосредственно на определённую часть холста и запросить целевое изменение. Это быстрее, чем описывать местоположение в чате.

Примеры хороших встроенных комментариев:

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

Используйте комментарии для целевых изменений на уровне компонентов («исправьте эту кнопку», «отрегулируйте этот отступ»). Используйте чат для структурных изменений, новых разделов или всего, что требует объяснения или контекста. Редактируйте непосредственно для быстрых визуальных и эстетических изменений.

Чтобы войти в панель артефактов и выйти из неё, а также оставить комментарий из заголовка панели, см. Использование артефактов с клавиатурой или программой чтения с экрана. В этой статье также объясняется, что означает фокус, что делать на ноутбуке Mac или в Safari, и как интерпретировать таблицы клавиш.

Дизайн — это холст с артбордами. Каждый артборд содержит слои, такие как текст, фигуры и изображения, и слой может содержать другие слои внутри себя.

Нажмите F6, чтобы перейти в следующую область, и Shift+F6, чтобы перейти в предыдущую. Cmd+F6 (Ctrl+F6 в Windows) работает вместо F6, с Shift или без него. Области — это верхняя панель, холст и панель свойств. Когда что-то выбрано и панель свойств закрыта, F6 также останавливается на панели инструментов, которая плавает над выделением.

Нажимайте Tab, пока не достигнете названия артборда. Его имя включает его позицию, например артборд 1 из 7. Из названия Space выбирает артборд, а Return входит в него, к его слоям. После входа:

Когда вы редактируете текстовый слой, нажмите Escape или Tab по завершении. По мере перемещения редактор сообщает программам чтения с экрана, что выбрано и его позицию, например 1 из 5.

Чтобы переместить артборд, выберите его (Space на его названии) и нажимайте клавиши со стрелками. Он перемещается на один пиксель за раз или на 10 с Shift. Внутри артборда клавиши со стрелками делают что-то другое: с Shift или без него они перемещают вас к следующему или предыдущему слою и никогда не перемещают сам слой. Чтобы переместить слой, на котором вы находитесь, удерживайте Option (Alt в Windows) и нажимайте клавишу со стрелкой. Свободно размещённый слой перемещается на один пиксель или на 10 с Shift. Слой, который является частью строки, столбца или сетки, меняется местами со своим соседом: Up или Left перемещает его раньше, а Down или Right перемещает его позже. Редактор отправляет краткое подтверждение перемещения программам чтения с экрана.

Выбрав артборд или слой, нажмите Cmd+D (Ctrl+D в Windows), чтобы дублировать его, и Delete или Backspace, чтобы удалить его. Нажмите Cmd+Z (Ctrl+Z в Windows), чтобы отменить. Редактор отправляет краткое подтверждение каждого из этих действий программам чтения с экрана.

Панель инструментов, которая плавает над выделением, присутствует только при закрытой панели свойств, и F6 её достигает. В ней клавиши со стрелками перемещаются между её элементами управления, Home и End переходят к первому и последнему, а Escape возвращает вас на холст с сохранённым выделением. Вы также можете достичь каждого элемента управления с помощью Tab.

Cmd+\ (Ctrl+\ в Windows) открывает панель свойств и перемещает фокус в неё. Нажатие её снова закрывает панель, и фокус возвращается на кнопку «Свойства» в верхней панели. Всплывающие окна цвета, шрифта и других параметров в панели получают фокус при открытии, а Escape их закрывает. Когда вы выбираете цвет текста, средство выбора цвета сообщает вам, хороший или плохой контраст его на фоне.

В списке слоёв панели свойств: клавиши со стрелками вверх и вниз перемещаются между строками, клавиша со стрелкой вправо расширяет строку и затем входит в неё, клавиша со стрелкой влево её сворачивает и затем выходит, Return или Space выбирает этот слой на холсте, а Return снова на текстовом слое его редактирует.

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

Когда ваш дизайн готов, вы можете поделиться им с коллегами или экспортировать для использования в других местах. Правильный формат зависит от вашего случая использования — получаете ли вы отзывы заинтересованных сторон, передаёте инженерам или представляете группе.

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

Дизайны по умолчанию приватны для вас. Чтобы поделиться дизайном, нажмите «Поделиться» и выберите, кто может его открыть и что они могут делать. Люди, с которыми вы поделились дизайном, могут просматривать, комментировать или редактировать его. Узнайте больше о совместном доступе к артефактам.

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

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

Несколько вещей, о которых следует помнить: