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

Почему всё выглядит по-разному — и что с этим делает Claude Design

Попроси нейросеть «сделай красиво» — и каждый раз получишь случайный набор цветов, шрифтов и отступов. Поэтому слайды, сайт, PDF-гайд и лид-магнит одного проекта выглядят так, будто их делали четыре разных человека. Claude Design от Anthropic решает это иначе: сначала ты собираешь дизайн-систему — шрифты, цвета, логотип, компоненты, — а уже потом в ней делаешь любые материалы.

Метод показал Николай Волосянков на NeyroSummit 17. Вживую — весь путь от скриншота до дизайн-системы, сайта и презентации вымышленной студии «На коленке». Из заготовок для своей компании — сертификат для учеников, пять слайдов о проекте и лендинги.

Главная находка, по словам Николая, — в устройстве инструмента: любой дизайн здесь — это HTML-файлы (или PDF из HTML), код, который выглядит как работа дизайнера. Поэтому и дизайн-система — набор файлов: её можно скачать и унести в другую нейросеть.

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

На дату доклада инструмент был в research preview, а отдельный дизайн-лимит, по словам Николая, к эфиру уже заменили общими лимитами подписки. Порядок работы такой:

1. Дизайн-система — один раз на бренд.
2. Проект под задачу: прототип сайта, слайды, сертификат. При создании выбираешь свою дизайн-систему.
3. Задание — обычным текстом или голосом, как подрядчику.
4. Ответы на вопросы. Claude Design, как и Claude с Codex, сначала спрашивает: длительность, аудитория, стиль, нужны ли кейсы. Николаю это особенно нравится.
5. Выбор из вариантов и правки. Инструмент предлагает несколько вариантов, а ты говоришь, что нравится, а что нет.

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

Шаг 1. Дизайн-система из своих материалов или из скриншота

Дизайн-систему Николай собирал двумя путями.

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

Каждую часть можно обсудить. На предложенный шрифт Geist Николай спросил про Montserrat — и получил документ с четырьмя вариантами системы (Montserrat с Geist, только Montserrat, только Geist…) с примерами текстов и кнопок. «Как будто перед вами дизайнер, и вам нужно только выбрать», — говорит Николай. Сам он не дизайнер и не всегда видит разницу, поэтому взял вариант, который рекомендовал Claude.

Из одного скриншота. Вторая дизайн-система на эфире собиралась с нуля: новый проект, описание «это дизайн-студия» и один скриншот сайта. Claude Design угадал шрифты и цвета, собрал форму подписки, текстуры и даже придумал логотип.

Чтобы систему можно было выбрать в новом проекте, её нужно опубликовать: на эфире Николай нашёл её в списке только после публикации.

Создай дизайн-систему для моего проекта: [что за проект, для кого, какое настроение].

Во вложениях — мои материалы: скриншоты сайта и соцсетей, логотип, фирменные цвета [HEX-коды, если есть], ссылка на репозиторий сайта.

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

Если сомневаешься между вариантами — покажи 2–4 варианта рядом, я выберу. Задавай вопросы, прежде чем начинать.

Шаг 2. Референс лучше сгенерировать, чем взять чужой

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

1. В ChatGPT попроси картинкой скриншот своего будущего сайта (Николай называет GPT Image 2).
2. Правь словами: «это не нравится, то не нравится», пока не получишь идеальный скриншот с нужными цветами.
3. Загрузи его в Claude Design и попроси сделать по нему дизайн-систему.

Такого сайта нигде нет, и спорить о заимствовании не с кем. Как добиться от генерации картинки, которая выглядит дорого, а не как нейрослоп, — в методе Полины Громовой: бриф, референсы и проверка кадра.

Сгенерируй скриншот главной страницы сайта для [проект: что делает, для кого]. Настроение: [например, дерзко и контрастно / спокойно и дорого]. Цвета: [фирменные цвета или «подбери сам»].

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

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

Шаг 3. Прикладывай систему к любой задаче: сертификат, лендинг, сайт

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

Сертификат. Николаю нужен был сертификат для учеников — в фирменном стиле и «минимально похожий на то, что сгенерировано нейросетью». Он описал требования, приложил дизайн-систему, ответил на вопросы и получил HTML с тремя вариантами — минимализм, брендовая плашка, полупрозрачный логотип на весь лист — и версией для печати. Без ошибок не обошлось: в первом варианте логотип вышел крошечным, а при экспорте пропали изображения — тогда Claude по просьбе собрал все три сертификата в один файл для печати. «Я бы такое без дизайн-системы раньше бы не сделал», — говорит Николай.

Сделай сертификат об окончании курса [название] в моей дизайн-системе (она приложена).

Обязательно на сертификате: [имя ученика — поле для подстановки, название курса, дата, номер сертификата, подпись, логотип, QR или ссылка для проверки].

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

Нейросеть для дизайна сайта. Лендинги — так же: пример или задача, зачем нужна страница, и дизайн-система. Форматов для сайта два: Wireframe — схема блоков, как раньше рисовали на бумаге, — и High Fidelity, интерактивный прототип. Wireframe Николаю не понравился, High Fidelity с одним развёрнутым промптом — да: свой сайт в фирменном стиле он, по его словам, получил с первого раза без правок. Сайт студии «На коленке» на эфире собрался по скриншоту и одной реплике:

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

Мобильную версию стоит попросить отдельно и с самопроверкой. Николай сказал так: «Этот сайт должен хорошо выглядеть в мобильной вёрстке. Сделай и сам перепроверь». Claude собрал отдельную страницу Mobile Preview — но и она, по оценке Николая, вышла «кривовато».

Tweaks: варианты одного макета без новой генерации

Обычно после генерации видишь один вариант, а в Claude Design есть Tweaks — переключатели прямо в готовом макете. На лендинге пятидневного марафона Николай показал:

• тон: тёплый, энергичный, сдержанный (разницу между двумя последними он, честно говоря, не увидел);
• программа по дням — табами, аккордеоном или карточками;
• VIP-плашка — слева или справа;
• блоки «быстрые факты» и «частые вопросы» — показать или убрать;
• текст даты — поменять.

Так быстро выбираешь вариант каждого элемента, не перегенерируя страницу — и не тратя лимит.

Как сделать презентацию с помощью нейросети в своём стиле

Слайды для презентации нейросеть в Claude Design делает тем же путём, но проект нужен другой — Slide deck:

1. Создай Slide deck, назови презентацию.
2. Выбери дизайн-систему — или не выбирай, тогда Claude придумает стиль сам.
3. Поставь галочку speaker notes — будут заметки для спикера.
4. Дай задание и ответь на вопросы.

Так Николай заранее сделал пять слайдов о своём проекте: техзадание написала нейросеть, он добавил своё фото и номер лицензии, остальное Claude придумал сам в фирменном стиле. Слайды листаются, элементы правятся прямо в инструменте — фон, шрифт, положение. На эфире он надиктовал презентацию для той же студии:

Твоя задача — сделай презентацию для дизайн-студии, которая называется «На коленке». Это дизайн-студия молодых, ярких, дерзких дизайнеров, которые делают презентации быстро, дорого, с помощью AI за 5 минут. Сделай презентацию, где они рассказывают про свой проект и предлагают купить их услуги.

Дальше Claude спросил про длительность (3–5 минут), аудиторию (фаундеры и стартапы), стиль (дерзкий, контрастный, бруталистский), тон (самоирония и наглость) и нужны ли кейсы и команда. Вышло, по словам Николая, «не идеально, но свежо и дерзко», а правки дальше наговариваешь голосом. Он даже думает перейти на Claude Design для презентаций.

Экспорт: дизайн-система — это просто папка с файлами

Можно ли унести стиль в конструктор сайтов? В ответ на вопрос зрителя Николай открыл дизайн-систему: это просто файлы. Внутри:

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

Всё это скачивается zip-архивом. Дальше можно сказать другой нейросети: «используй эту дизайн-систему». Именно так Николай потом собирал сайт голосом в ChatGPT — эта статья про следующий шаг.

С сайтом сложнее: на выходе HTML с ассетами и шрифтами. В Тильду его в теории можно вставить, но «не слишком нативно», а формы, ссылки, домен и хостинг — отдельная работа. Сам Николай такие сайты в работе ещё не использовал; понадобится — скачает файл и попросит другого агента доделать и выложить, например на российский сервер.

Минусы: лимиты, картинки и типографика

• Лимиты. Дизайнерские задачи съедают очень много токенов. В день запуска Claude Design Николай сел «на пять минут» и, по его словам, за два часа израсходовал весь отдельный лимит дизайна на подписке за $200. Сам инструмент, по его ощущению, работает и на тарифе за $20.
• Картинки. Своей модели для изображений у Claude нет: со скриншота он может вырезать элементы, но нормальную графику сам не нарисует — на эфире ошибся и тут.
• Типографика. На вопрос зрителя «типографика страдает?» Николай ответил: «Конечно, страдает, если я это сделал за пять минут». На его собственном сайте Claude ещё и ошибся в фамилии автора — тексты надо вычитывать.

Чем заменить Claude Design: Open Design на своём компьютере

В конце доклада Николай дал «домашку» — Open Design, бесплатную альтернативу: выглядит почти так же, но запускается у тебя на компьютере и работает не только с Claude, но и с Codex или другой моделью. Ставить её он советует через агента: дать Codex или Claude Code ссылку на проект и попросить «установи вот эту штуку и объясни, как она работает».

Вот официальный репозиторий: https://github.com/nexu-io/open-design. Установи эту штуку на мой компьютер, запусти и объясни простыми словами, как она работает и как сделать в ней дизайн-систему моего бренда. Перед каждой командой, которая что-то ставит, скажи, что она делает.

С чего начать сегодня

Вопросы и ответы