Claude Design: как пользоваться, от дизайн-системы до анимации

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

Покопался, перепробовал разные подходы и понял, что решает порядок действий, а длина и хитрость промпта почти ничего не меняют. Сейчас покажу, как настроить дизайн-систему на референсах и собрать сайт из готовых шрифтов, компонентов, иконок и анимаций так, чтобы он не выглядел как типовой AI-дизайн.

Что такое Claude Design и как получить доступ

Claude Design запустила Anthropic Labs 17 апреля 2026 года. По текстовому описанию он собирает макеты, прототипы, слайды и маркетинговые материалы. Живёт по адресу claude.ai/design.

На запуске инструмент вышел в режиме research preview (ранний доступ, где что-то может меняться и ломаться). Открыли его тем, кто платит за Claude по тарифам Pro, Max, Team или Enterprise, и отдельно платить за него не нужно, т.к. он просто расходует лимиты вашей подписки. В организациях на Enterprise он по умолчанию выключен, включает его администратор в Organization settings.

Чего ждать по скорости? Команда Brilliant рассказывала, что их самым сложным страницам в других инструментах требовалось больше 20 промптов, а Claude Design справился за два. Это опыт одной команды, а не независимый замер (доказательной базы под это, увы, нет). Но ради такого разобраться в инструменте всё-таки стоит.

Теперь про ограничение веб-версии, о котором лучше знать заранее. Файлы на вашем компьютере она не видит, пока вы не загрузите их по одному. То есть шрифты, иконки и скриншоты придётся закидывать руками.

Шаг 1. Дизайн-система для Claude Design: с неё начинается всё

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

Чтобы создать систему, откройте claude.ai/design и перейдите в Design systems→Create. С пустого листа начинать не обязательно. Загрузите презентацию, сайт или просто скриншот, который вам нравится, и Claude сам вытащит из него цвета, шрифты и компоненты. Подойдёт и ваш собственный сайт, если система нужна под уже существующий бренд.

Если своего референса нет, пригодится галерея styles.refero.design. В ней больше 2000 реальных дизайн-систем (среди них Mercury и Apple), и каждая design system for Claude там в понятном ему формате. Листать её вручную достаточно лень, да и не нужно. Дайте Claude ссылку на галерею и попросите подобрать три системы, которые ближе всего к вашему бизнесу, со ссылками на каждую. В итоге вам останется выбрать одну из трёх или взять лучшее из нескольких (как это сделать, расскажу в шаге 3).

Для тех, кто сидит в Claude Code, есть другой формат. Там дизайн-систему оформляют как собственный скилл, который её хранит и подключается, когда вы его вызываете.

Шаг 2. Шрифты, тексты и тон голоса

Многие дизайнеры считают, что AI-дизайн быстрее всего выдаёт шрифт, т.к. новички оставляют тот, что Claude поставил по умолчанию, и макет сразу выглядит типовым. Поменяли шрифт, и уровень работы поднимается почти мгновенно.

Бесплатные шрифты под бренд ищите на FontShare или Fontesk, а если нужна пара для заголовков и основного текста, её автоматически подберёт Font Joy. Выбранные файлы загрузите в Claude Design и закрепите в дизайн-системе, чтобы шрифт не терялся от макета к макету.

Вторая примета AI-дизайна – тексты из серии «решение для вашего бизнеса нового поколения». Чтобы они не звучали как написанные нейросетью, попросите Claude изучить пять лидеров вашей ниши, выделить общие приёмы в их текстах и добавить эти наблюдения в дизайн-систему. Тогда заголовки и кнопки заговорят на языке рынка, а не общими фразами.

Следующий уровень – скилл тона голоса. Соберите в нём три вещи:

• список слов, которые вы никогда не используете
• описание вашей манеры речи
• несколько ваших собственных формулировок как образец

Шаг 3. Свой стиль: смешивание и переиспользование систем

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

Это удобно и фрилансеру с несколькими клиентами. Под каждого можно собрать свою комбинацию из тех же источников, не начиная поиск заново, а только меняя пропорции.

Теперь второй приём, он экономит время на каждом следующем проекте. Когда работа в Claude Design закончена, сохраните ссылку на неё. Начиная новый проект, вставьте этот URL в новую сессию и попросите использовать дизайн-систему и материалы прошлого проекта для того, что собираетесь делать. Дизайн-система и материалы проекта переедут вместе с ним, и Claude не придётся угадывать ваш стиль с нуля.

То есть любая уже сделанная работа становится отправной точкой для следующего проекта.

Шаг 4. Готовые компоненты, иконки и изображения

Правило этого шага простое. Всё, что уже существует в хорошем качестве, не просите Claude рисовать с нуля. Генерация отдельных элементов как раз и даёт разнобой, по которому узнают AI-дизайн.

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

Когда готового элемента нет и его правда нужно нарисовать, просите SVG. Такой файл не размывается на больших экранах, его можно поправить вручную, а позже анимировать на шаге 6.

Шаг 5. Полировка: Tweaks, аудит и гайдлайны

Черновик готов, дальше уже его нужно довести до профессионального вида. Для ручной подстройки в Claude Design есть встроенная панель Tweaks. В ней шрифты, отступы и цвета крутятся ползунками, без нового промпта на каждую правку. Мелочь, а приятно.

Из скиллов для Claude Design на автоматическую проверку хорошо подходит Impeccable. Он проходит по сайту и смотрит иерархию, отступы, типографику, доступность и даже пустые состояния, а затем сам исправляет найденное. Достаточно удобный последний проход перед показом клиенту.

Если вы делаете экраны приложения, опирайтесь на правила Apple. Компания бесплатно публикует Human Interface Guidelines, где описаны раскладка, размеры шрифта, зоны нажатия и цвет. Превратите их в скилл, и Claude будет сверять с ними каждый экран.

Шаг 6. Анимация и работа в Claude Code

Движение делает сайт живым, но самодельная анимация легко выглядит дёргано, поэтому для плавной анимации и интерактива попросите Claude использовать GSAP (GreenSock Animation Platform). Это JavaScript-библиотека анимаций для веб-страниц, и с ней Claude не нужно изобретать переходы с нуля. SVG-иконки и иллюстрации из шага 4 здесь тоже пригодятся, их можно оживить.

Если вы работаете в Claude Code, там есть свой вход в дизайн. Наберите команду

/design

и дайте идею или скриншот. Откроется холст с редактируемыми артбордами, похожий на Figma, и при этом Claude учитывает правила и память проекта. Вспомните ограничение веб-версии из начала, она видит только файлы, загруженные по одному. Учитывайте это, когда решаете, где вести проект.

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

Ключевые термины

• Дизайн-система – Набор цветов, шрифтов, компонентов и правил, который Claude применяет ко всем макетам проекта.
• Research preview – Ранний доступ к продукту, в котором возможны ограничения и изменения.
• SVG – Векторный формат графики, который масштабируется без размытия и легко правится и анимируется.
• Скилл – Набор инструкций и материалов, который Claude подключает для определённой задачи, например для применения дизайн-системы.
• GSAP – JavaScript-библиотека для плавных анимаций и интерактива на веб-страницах.
• Артборд – Отдельная рабочая область на холсте, где размещается макет одного экрана или страницы.

Итог: чек-лист первого проекта в Claude Design

Пройдите по пунктам в первом проекте:

• Получить доступ к Claude.ai с подходящей подпиской (из России понадобятся VPN и оплата зарубежной подписки, порядок есть в курсе по оформлению Claude.ai)
• Открыть claude.ai/design и создать дизайн-систему в Design systems→Create
• Загрузить референс (сайт, презентацию или скриншот) или попросить Claude подобрать три системы из галереи styles.refero.design
• Заменить шрифт по умолчанию на шрифт с FontShare или Fontesk, пару подобрать в Font Joy
• Добавить в систему приёмы текстов пяти лидеров ниши и скилл тона голоса

Дальше уже про сам макет:

• Скачать один набор иконок на Iconify или Flaticon и отдать папку Claude
• Новые иконки и иллюстрации заказывать в SVG
• Прогнать макет через Impeccable и подправить детали в Tweaks
• Добавить анимацию через GSAP

Проверьте себя

1. Вы впервые открыли Claude Design и хотите сайт в своём стиле. С чего начать?

• А. Попросить Claude нарисовать логотип и иконки
• Б. Сразу описать страницу в промпте и править результат
• В. Создать дизайн-систему, загрузив свой сайт, презентацию или скриншот-референс

2. Макет выглядит как типовой «AI-дизайн». Что из этого поможет? (Верных ответов несколько.)

• А. Задать тон текстов через анализ лидеров ниши
• Б. Попросить больше градиентов
• В. Заменить шрифт по умолчанию на подходящий бренду

3. Нужны иконки в едином стиле. Как лучше поступить?

• А. Взять случайные иконки из разных наборов
• Б. Попросить Claude нарисовать каждую иконку отдельно
• В. Скачать набор одного стиля и отдать папку Claude

4. Вы оставили комментарий к блоку, но Claude его не учёл. Что делать?

• А. Пересоздать весь проект
• Б. Продублировать текст правки в чат
• В. Сменить тариф

5. Дизайн-система и материалы лежат в файлах на вашем компьютере. Где удобнее работать?

• А. В Claude Code, оформив дизайн-систему скиллом и используя /design
• Б. Разницы нет
• В. В веб-версии, загружая файлы по одному