Система дизайна фиксирует ваши цвета, типографику, компоненты и шаблоны макетов, чтобы Claude применял их к каждому новому дизайну и презентации. Claude извлекает их из предоставленных вами ресурсов, таких как кодовые базы, слайд-деки или другие справочные материалы по дизайну.
Системы дизайна доступны в бета-версии на планах Pro, Max, Team и Enterprise. Они включены по умолчанию на планах Pro, Max и Team. На планах Enterprise они отключены до тех пор, пока владелец не включит Design systems в Organization settings > Artifacts. Отдельный Claude Design на claude.ai/design имеет собственный отдельный параметр.
Это руководство предназначено для дизайнера или владельца бренда, который будет настраивать систему дизайна. На планах Team и Enterprise вам нужно сделать это только один раз, и все остальные смогут использовать её после этого.
Перед началом
На планах Team и Enterprise Design systems должна быть включена для вашей организации, и владелец может ограничить, кто может публиковать или устанавливать значение по умолчанию.
Вам потребуется хотя бы один из следующих материалов:
Кодовая база с вашей системой дизайна или библиотекой компонентов
Слайд-дек или документ, отражающий вашу визуальную идентичность
Ресурсы руководства по бренду (логотипы, палитры цветов, спецификации типографики)
Создайте систему дизайна
Из чата
Попросите Claude создать систему дизайна из ваших подключённых приложений, загруженных файлов, файлов Figma, презентаций, логотипов и шрифтов. Это работает лучше всего для систем дизайна бренда со шрифтами, цветами и руководствами.
Из Claude Code
Если ваша система дизайна уже существует как компоненты React, запустите /design-sync в Claude Code. Она читает ваши токены и компоненты напрямую и работает лучше всего для систем дизайна продуктов в коде.
Перенесите систему дизайна из claude.ai/design
Откройте вкладку «Design» в нижней части боковой панели.
Нажмите «Migrate team design systems» в баннере.
Каждая система дизайна становится артефактом, который Claude может использовать в любом чате, включая Claude Code. Перенесённые системы дизайна могут потребовать некоторой очистки, поэтому каждая из них показывает баннер, где вы можете нажать «Let Claude clean it up», и Claude приводит в порядок её руководство, токены и компоненты.
Управляйте вашими системами дизайна
Управляйте вашими системами дизайна в Settings > Design systems. На планах Enterprise администраторы могут зарезервировать публикацию, установку организационного значения по умолчанию и удаление систем дизайна для конкретных пользователей. Узнайте больше в Artifacts admin guide for Team and Enterprise plans.
Используйте систему дизайна с клавиатурой
Чтобы войти в панель артефактов и выйти из неё, см. Use artifacts with a keyboard or screen reader. В этой статье также объясняется, что означает фокус, что делать на ноутбуке Mac или в Safari, и как написаны ярлыки.
Система дизайна открывается как список разделов рядом с разделом, который вы читаете. Return в разделе списка переходит в него, Cmd+F6 (Ctrl+F6 в Windows) переключается между списком и разделом, а Cmd+Z (Ctrl+Z в Windows) отменяет изменение, когда вы не находитесь в текстовом поле.
Примечание: Живые предпросмотры компонентов в системе дизайна недоступны с помощью Tab, поэтому они не могут управляться с клавиатуры. Имя и примечания каждого компонента можно прочитать.
Настройте систему дизайна на claude.ai/design
Эти шаги используют отдельный Claude Design.
Создайте или переключитесь на вашу организацию
Откройте Claude Design.
В нижнем левом углу средства выбора проекта нажмите на название текущей организации.
Выберите вашу организацию или создайте новую.
Завершите процесс адаптации, на который вы будете перенаправлены.
Загрузите ресурсы вашего бренда и продукта
Во время адаптации или позже из параметров вашей организации загрузите ресурсы, которые определяют ваш бренд и продукт. Claude анализирует их и извлекает переиспользуемую систему дизайна.
Кодовые базы: Если ваша система дизайна находится в коде, например в библиотеке компонентов React, свяжите или загрузите репозиторий. Claude читает компоненты и стили.
Прототипы: Скриншоты, веб-потоки и существующие файлы дизайна.
Слайд-деки или документы: Даже хорошо оформленная PowerPoint или PDF, отражающая ваш бренд, может работать. Claude извлекает цвета, шаблоны макетов и типографические выборы.
Отдельные ресурсы: Логотипы, файлы палитры цветов, образцы типографики.
Вам нужен только один источник для начала, но больше источников дают Claude больше материала для работы.
Проверьте созданную систему дизайна
После загрузки Claude создаёт систему дизайна для вашей организации. Обычно она включает:
Палитра цветов: Основные, вторичные и акцентные цвета, извлечённые из ваших ресурсов.
Типографика: Семейства шрифтов, размеры и веса.
Компоненты: Кнопки, карточки, элементы навигации и другие переиспользуемые шаблоны пользовательского интерфейса.
Шаблоны макетов: Интервалы, системы сеток и структуры страниц.
Чтобы проверить её, создайте тестовый проект и проверьте, соответствует ли результат вашему бренду. Попробуйте подсказки вроде:
«Создайте целевую страницу для [вашего продукта].»
«Разработайте панель управления, показывающую [релевантные метрики].»
«Создайте одностраничный документ о [теме, которую ваша команда часто представляет].»
Сделайте её доступной для вашей команды
Когда вы будете довольны системой дизайна, включите переключатель «Published». После публикации проекты, созданные с главного экрана Claude Design в вашей организации, будут использовать вашу систему дизайна вместо значения по умолчанию.
Обновите вашу систему дизайна
Когда ваша система дизайна изменяется, вы можете обновить её в Claude Design. Из параметров организации Claude Design нажмите кнопку «Open» рядом с системой дизайна, которую вы хотите отредактировать. Нажмите кнопку «Remix» в верхнем правом углу, чтобы открыть интерфейс чата с левой стороны окна. Отсюда вы можете работать с Claude, чтобы изменить вашу систему дизайна.
Советы для лучших результатов
Включайте реальные примеры, а не только спецификации. Готовая целевая страница или маркетинговый сайт рассказывает Claude больше о ощущении вашего бренда, чем одна палитра цветов.
Итерируйте. Если первое извлечение не захватило ваш бренд хорошо, попробуйте загрузить дополнительные или другие ресурсы.