Дизайн-система в Claude: как научить его фирменному стилю один раз и для всей команды

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

Что такое дизайн-система и что она меняет

Дизайн-система это решения компании по оформлению, записанные один раз так, чтобы ими пользовались и люди, и программы: цвета, стили текста, шрифты, отступы, скругления, логотипы, компоненты интерфейса и правила, когда что применять.

Когда она подключена, Claude берёт ваши цвета и шрифты для колод, макетов и прототипов, а в макетах и прототипах ещё и настоящие компоненты вашей команды, если они есть в системе. Проверить, какой компонент он взял, просто: выделите кусок макета, контур подсветится другим цветом, а в списке Layers будет видно имя компонента.

Кому доступно

Дизайн-системы сейчас в бете на тарифах Pro, Max, Team и Enterprise. На бесплатном тарифе их нет.

На Team и Enterprise функцию включает владелец организации в настройках организации, раздел Artifacts. На Enterprise она по умолчанию выключена, поэтому если пункта Design system нигде нет, начинать стоит с этой настройки. Создать систему, пользоваться ей и делиться с отдельными людьми может любой, у кого есть доступ. Открыть её всей организации и сделать системой по умолчанию может только владелец.

Как создать

Есть два входа. В поле сообщения любого разговора откройте меню «+», выберите Design system, затем New design system. Или зайдите в Settings, раздел Design systems, там есть кнопка создания. Сама дизайн-система тоже артефакт: страница, которую можно открыть, править и показывать, она лежит на странице Artifacts вместе с остальной работой. Что такое артефакты в новом виде, мы разбирали в статье артефакты для команды.

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

• Синхронизация с GitHub. Если цвета, шрифты и компоненты уже описаны в коде. Claude спросит, какой репозиторий читать и что забрать, и заполнит страницу, не меняя сам репозиторий. Цвета, стили текста, отступы, скругления, шрифты, логотипы и документацию он переносит сам, компоненты по вашему выбору: он покажет найденные и спросит, какие брать. Чтобы перенести компоненты, ему нужно запустить сборку проекта, на это он спросит разрешения. Подскажите папку с кодом интерфейса, чтобы он не читал весь репозиторий.
• Из подключённых сервисов. Если бренд лежит в инструменте дизайнеров, на общем диске или во внутренней вики, подключённых к Claude. Он сам найдёт, где есть материалы по бренду, скажет, что нашёл, и предложит собрать систему оттуда. Если ничего не подключено, задаст несколько вопросов о бренде и сделает черновик по ответам.
• Загрузить файлы бренда. Логотипы, шрифты, брендбук в PDF, файл токенов, несколько готовых слайдов или экранов. Совет из урока: готовые презентации и скриншоты продукта дают Claude больше, чем один брендбук, потому что показывают бренд в деле.

Есть и вариант через Claude Code, если система уже живёт в репозитории: он прочитает токены и компоненты прямо из кода.

Первый черновик Claude специально делает небольшим и спрашивает, достаточно ли этого или доработать. Значения, которых в ваших файлах нет, он старается не придумывать, а спрашивать.

Проверьте черновик, прежде чем раздавать

Прочитайте обзор, который написал Claude, и пройдите по разделам. Значения и тексты можно править прямо на странице, а можно просить в разговоре рядом. Просите конкретно: не «сделай красивее», а «у бейджа слишком тесные внутренние отступы». Новую тему оформления или изменение кода компонента делают только через разговор.

Заметки об использовании: самое полезное место

К каждому цвету, стилю текста и компоненту можно оставить заметку: как его применять и когда нельзя. Например, «призрачная кнопка только для панелей инструментов» или «этот цвет никогда для основного текста». Claude читает заметку компонента перед тем, как строить с ним.

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

Как Claude её читает

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

Если у организации есть система по умолчанию, Claude использует её без вопросов. Если систем несколько, а основной нет, он спросит, какую взять.

Как раздать команде

1. Проверьте на себе. Система появляется в вашем меню «+» → Design system, как только в ней что-то сохранено. Попросите обычную колоду и ничего не говорите про бренд. Если колода похожа на вашу компанию, система работает.
2. Покажите тем, кто будет проверять. Кнопка Share вверху страницы системы, приглашение конкретных людей. Тем, кто должен её менять, дайте право редактирования.
3. Попросите владельца организации открыть её всем. Пригласите его через Share с правами Owner, дальше он выбирает аудиторию «все в организации» и подтверждает.
4. Сделайте системой по умолчанию, если нужно. Это тоже делает владелец: переключатель Default design system в Share или Set as default в Settings → Design systems. Основная система в организации одна, новая заменяет старую.

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

Повседневная работа

• Несколько систем сразу. Отметьте галочками нужные и скажите Claude, какой следовать там, где они пересекаются. Он читает все отмеченные вместе с запросом, поэтому лишние не включайте. Для презентаций удобно держать отдельную компактную систему только под слайды.
• Работа без системы. Снимите все галочки, под полем ввода появится No design system.
• Обновления. Мелочи правьте на странице, крупное просите в разговоре, а систему из кода обновляйте в коде и синхронизируйте с GitHub заново: ваши заметки и правки на странице сохранятся.
• Старые колоды и макеты хранят копию системы на момент создания. Чтобы подтянуть новую версию, попросите Claude обновить.

Если команда уже собирала системы в отдельном Claude Design на claude.ai/design, их не нужно делать заново: есть перенос для всей организации со страницы Artifacts. Отдельная версия Claude Design закрывается, так что с переносом лучше не тянуть.

Если что-то не так

• Похоже на бренд, но не то. Дайте больше примеров: готовые колоды, скриншоты продукта или синхронизацию с кодом. Потом скажите точно, что поменять.
• Один цвет или компонент упорно ставится не туда. Пишите правило в его заметку.
• Claude не взял систему. Посмотрите на плашку под полем ввода. Если там No design system, выберите систему в меню «+».
• Шрифты подменились. Загрузите файлы шрифтов в раздел Typography. Шрифт, который на странице только назван, но файла нет, Claude использовать не может.
• Пункта Design system нет в меню. На Team и Enterprise его включает владелец, на бесплатном тарифе его нет совсем.

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

Где купить Claude

Дизайн-системы работают только на платных тарифах, начиная с Pro. Российские карты Anthropic не принимает, поэтому напрямую подписку из России не оформить. Через нас можно подключить Claude Pro или Max на ваш аккаунт с оплатой картой РФ или через СБП, актуальные цены на витрине.