Брендированный дизайн с Claude Design: от дизайн-системы до живого сайта [Встреча 25].

Большинство инструментов дизайна с искусственным интеллектом создают один красивый результат, а когда вы просите еще один, он получается совершенно в другом стиле. Другие цвета, другой шрифт, другое ощущение. Для бренда это катастрофа, потому что бренд живет за счет последовательности. На встрече 25 клуба AI Master Club мы разобрали Claude Design, новый инструмент дизайна от компании Anthropic (той самой, что создала Claude Code). Что его отличает, так это именно данный момент: вы один раз создаете Design System (логотип, цвета, типографику, кнопки, tone of voice), а все, что создается после · презентация, лендинг, карусель для Instagram, макет приложения · получается брендированным и единым, как будто все это делал один дизайнер. На встрече мы увидели это в действии: скопировали фирменный стиль огромного бренда с пугающей точностью, создали лендинг для пекарни с нуля, загрузили десятки изображений с реального сайта с помощью Firecrawl, а в конце превратили макет в живой сайт в сети. И все это на естественном языке, без написания единой строки кода. Данное руководство объединяет все, что мы прошли, шаг за шагом.

Что будет у вас в конце руководства

• Что такое Claude Design, как в него войти и в чем его отличие от любого другого инструмента дизайна
• Как создать Design System · сердце всего процесса · тремя способами в зависимости от вашего уровня опыта
• Как создавать презентацию, лендинг и карусель для Instagram в едином фирменном стиле
• Живая демонстрация: создание лендинга для пекарни с нуля, включая вопросы для уточнения деталей, которые задает Claude
• Импорт реальных изображений с любого сайта с помощью Firecrawl и их автоматическая интеграция в дизайн
• Как превратить макет в живой сайт в сети · Claude Code, Vercel и Supabase
• Самый важный совет встречи: как не исчерпать лимит токенов за полчаса

Что такое Claude Design и как в него войти

Обратите внимание на три момента перед началом: Claude Design требует платной подписки на Claude (бесплатного доступа нет), в настоящее время он работает только в браузере и имеет отдельный лимитированный счетчик токенов, отличный от обычного использования Claude. Этот счетчик обнуляется каждые 5 часов. Его можно проверить в кружке в верхней части экрана, перейдя в Settings, а затем в Usage. Все руководство построено вокруг этого момента: как выжать максимум из инструмента без пустой траты токенов.

Design System · сердце всего процесса

3 способа создать Design System

• Через Claude Code (рекомендуется, экономит больше всего токенов): попросите Claude Code создать Design System на основе вашего сайта, изображений, логотипа и шрифтов. В завершение запустите слэш-команду /Design и выберите Design Sync, после чего инструмент соберет все файлы и автоматически передаст их в Claude Design. Там под окном чата появится новая система, и вы дадите ей название.
• Прямо внутри Claude Design: зайдите в Projects, Design Systems, Create Design System, а затем в Create Here. Укажите сайт (если есть), загрузите файл Figma (для дизайнеров), нажмите Browse и перетащите туда все имеющиеся у вас элементы дизайна · логотип, изображения, посты из соцсетей. В поле Any other notes укажите текстовую инструкцию (например: я люблю синий цвет, хочу, чтобы все было в синих тонах). Дайте название и нажмите Generate. Обработка занимает около 5 минут.
• Упрощенная версия с использованием любой языковой модели: попросите ChatGPT изучить сайт или референс, составить Design System в виде PDF-файла и загрузите его в Claude Design. Это менее точный способ по сравнению с двумя предыдущими, но он работает, когда у вас нет кодовой базы.

Промпт для создания Design System в Claude Code

Я хочу, чтобы ты создал для меня полную Design System моего бренда. Источники: [вставьте сюда ссылку на ваш сайт или перетащите логотип, шрифты, скриншоты и посты из соцсетей]. Извлеки и определи: цветовую палитру с точными кодами, типографику (шрифты, размеры, толщину, иерархию), форму и размер кнопок, tone of voice и стиль общения (включая использование иврита), призывы к действию и политику в отношении эмодзи. Когда закончишь, запусти /Design и выбери Design Sync, чтобы перенести все в Claude Design.

Первая демонстрация · копирование фирменного стиля крупного бренда

Промпты для создания брендированных материалов

Презентация: Создай презентацию на тему [тема, например: новая коллекция 2026 года] на основе прикрепленной мной Design System и приложенных изображений. Лендинг продукта: Создай лендинг, рассказывающий об этом продукте [прикрепите изображения продукта], на основе Design System. Карусель для Instagram: Создай для меня карусель для Instagram на тему [тема] на основе Design System. Серия слайдов в едином фирменном стиле.

Ценный совет по контенту: карусели являются одним из самых вирусных форматов сегодня. Instagram и LinkedIn продвигают посты с несколькими изображениями гораздо активнее, чем одиночные картинки. Теперь, когда можно создать брендированную карусель за минуту, нет причин не публиковать хотя бы одну в неделю.

Ручное редактирование · секрет экономии токенов

Вторая демонстрация · лендинг для пекарни с нуля

Промпт для создания лендинга с нуля (с уточняющими вопросами)

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

Импорт реальных изображений с помощью Firecrawl

Клуб AI Master открывает для вас двери: живая встреча каждую неделю, записи и сообщество. 47 шекелей в месяц, отмена в любой момент.

Промпты Firecrawl + вставка изображений

Загрузка изображений (в Claude Code): Используй Firecrawl, чтобы скачать с этого сайта все изображения: [вставьте ссылку на сайт]. Сохрани их во вложенную папку проекта. Вставка в дизайн (в Claude Design, после Browse Files): Размести соответствующие изображения на сайте везде, где их не хватает. Подбери для каждого места наиболее подходящую картинку.

Анимация, правки и эффекты

От макета к живому сайту · Claude Code, Vercel и Supabase

Промпт для сборки и публикации (для Claude Code / Codex)

I want you to build this website from the attached HTML / project files. Match the design exactly. First run it locally so I can review it. Once I approve, upload it to Vercel and give me the live link. If the site needs to store data (emails, reviews), connect Supabase as the database.

Почему это важно для бизнеса: лендинг, подобный созданному нами для пекарни, у простого дизайнера стоит около 1000 шекелей, а у продвинутого · около 3000 шекелей. Здесь вы создали его самостоятельно за считанные минуты, с брендингом и возможностью публикации в сети. Это не заменяет профессионального дизайнера для каждого проекта, но для большинства текущих задач малого бизнеса этого более чем достаточно.

Все инструменты из встречи

Дом для Claude Design и Claude Code. Требуется платная подписка. Панель Design в настоящее время доступна только в браузере

Агент, который сканирует любой сайт и выгружает изображения и тексты. Подключается к Claude в качестве Skill и экономит токены. Есть бесплатный тариф

Публикация сайта в сети и ссылка для общего доступа. Claude Code подключается к нему в один клик. Щедрый бесплатный тариф

База данных для сайта · сохранение email-адресов, форм и отзывов. Подключается к Claude Code. Щедрый бесплатный тариф

Инструмент Google для дизайна макетов, с которым мы сравнивали решение на встрече. Дает более общие результаты, чем Claude Design

Подробное руководство по всем возможностям Claude Design, выходящим за рамки того, что было рассмотрено на этой встрече

Вопросы, возникшие на встрече

Нет. Требуется платная подписка на Claude. Токены для него также отдельны и лимитированы по сравнению с обычным использованием, и они обнуляются каждые 5 часов. С другой стороны, Vercel и Supabase, необходимые для публикации живого сайта, предлагают щедрый бесплатный тариф.

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

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

Конечно. Нажмите Edit, и весь текст станет доступен для клика и ручного редактирования. Вы также можете экспортировать результат в PDF, видео, PowerPoint или HTML. Рекомендуется производить ручное редактирование внутри Claude Design, вместо того чтобы просить агента вносить каждое мелкое изменение, так как ручные правки экономят массу токенов.

Экспортируйте дизайн в формате HTML или ZIP, передайте в Claude Code или Codex, и он напишет код и загрузит его на Vercel, который выдаст живую ссылку. Если необходимо сохранять данные с сайта, подключите Supabase в качестве базы данных. Вы также можете подключить собственный домен.

Можно, есть коннектор и MCP для WordPress. Но на встрече предпочли строить в Claude и развертывать на Vercel, так как работать с WordPress сложнее, чем с плавной связкой Claude Code и Vercel.

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

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

Что будет на следующей встрече

Полная запись 25-й встречи вместе со всеми навыками и промптами доступна членам клуба в библиотеке материалов. Создали что-то брендированное за минуты на встрече? Поделитесь этим в сообществе. Это именно те знания, ради которых существует клуб.

Часто задаваемые вопросы

Claude Design бесплатный?

Нет. Требуется платная подписка на Claude. Его токены также отдельны и ограничены по сравнению с обычным использованием, и они сбрасываются каждые 5 часов. В то же время Vercel и Supabase, необходимые для запуска живого сайта, предлагают щедрый бесплатный тариф.

Что такое дизайн-система и похоже ли это на Brand Book?

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

Как извлечь дизайн-систему с чужого сайта, например крупного бренда?

Можно попросить Claude Code проанализировать сайт и создать по нему дизайн-систему, но результат будет слабее, так как у вас нет исходного кода сайта. Это работает намного лучше, когда актив ваш, так как тогда Claude имеет доступ к коду и компонентам напрямую, а не только к внешнему виду.

Можно ли редактировать презентацию и страницу после создания?

Конечно. Нажимаете Edit, и весь текст становится доступным для клика и ручного редактирования. Также можно экспортировать в PDF, видео, PowerPoint или HTML. Рекомендуется редактировать вручную внутри Claude Design, вместо того чтобы просить агента о каждой мелочи, так как ручное редактирование экономит массу токенов.

Как превратить макет в живой сайт с доменом и хостингом?

Экспортируете дизайн в формате HTML или ZIP, передаете в Claude Code или Codex, и он создает код и загружает его на Vercel, который выдает живую ссылку. Если нужно сохранять данные с сайта, подключается Supabase в качестве базы данных. Также можно подключить собственный домен.

Можно ли загрузить это на существующий сайт WordPress?

Можно, есть коннектор и MCP для WordPress. Но на встрече предпочли строить в Claude и развертывать на Vercel, так как работать с WordPress сложнее, чем с плавной связкой Claude Code и Vercel.

Откуда брать навык Firecrawl?

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

Можно ли работать над этим в команде?

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