Claude Design 2.0. Дизайн-система, магазин, презентация и 3D на одном бренде

Что внутри

• 01Что обновили

  Шаблоны, общий лимит с обычным Claude, доводка макета и экспорт.

• 02Дизайн-система

  Зачем её собирать до первой задачи и что проверить перед сохранением.

• 03Кейс «Перевал»

  Один бренд через магазин, презентацию, счёт, приложение и диаграмму.

• 04Промпты

  Семь запросов из ролика и сценария к нему, дословно.

• 053D и видео

  Как грубая 3D-сцена становится инструкцией для видеомодели.

Claude Design снова обновили. Когда инструмент только появился, лимит мог закончиться после двух генераций, поэтому советовать его для работы было рано. Сейчас лимиты объединили с обычным Claude: чат, код и дизайн тратят общий запас. Так было на момент съёмки.

Найти инструмент просто: откройте Claude на сайте и внизу слева нажмите «Design». На 13.08.2026 нужна любая платная подписка.

Что умеет Claude Design 2.0

Шаблоны

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

Доводка без пересборки

После первой генерации макет правится тремя способами.

• Tweaks

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

• Ручное редактирование

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

• Комментарии на макете

  Каждый комментарий привязан к элементу. Собираете пачку замечаний и отправляете за один проход.

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

Экспорт и перенос в Claude Code

Готовый макет можно опубликовать, отдать ссылкой или выгрузить в PDF, редактируемый PowerPoint, PNG, MP4 или ZIP-архив. Можно сразу передать проект в Claude Code: выбрать локальный агент или веб-сессию, добавить файлы и инструкции. Проект передаётся в одну сторону, из Claude Design в Claude Code: визуальную часть собираете в Claude Design, базу, оплату и остальную разработку доводите в Claude Code. Обратно правки из Claude Code сами не возвращаются.

Кейс, бренд «Перевал» от системы до счёта

Сквозной пример ролика: «Перевал», бренд походного снаряжения (палатки, спальники, горелки, фонари). Это учебный бренд, его придумали под ролик, а логотип и фото товаров сгенерировали заранее. На нём видно главное: один бренд держится во всех форматах.

1. Дизайн-система

   В форме указываете название бренда и коротко пишете, что он продаёт. Добавляете исходники: ссылку на GitHub, код с компьютера, файл Figma, шрифты, логотипы, документы, фото. Для «Перевала» хватило логотипа и пяти изображений товаров. На этом шаге советую модель помощнее (Opus 5, Fable 5): систему собираете один раз, а используете во всех проектах.

2. Проверка системы

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

3. Магазин

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

4. Проверка логики

   Открыть товар, добавить в корзину, поменять количество, перейти к заказу. Сумма пересчитывается, выбирается способ доставки, появляется подтверждение. На iPhone Pro Max вёрстка перестраивается, каталог листается, заказ оформляется.

5. Живой первый экран

   Я сгенерировал в Google Flow замедленный наезд на кадр первого экрана, загрузил видео обратно в Claude Design и одной фразой попросил поставить его фоном. Текст и кнопки остались сверху, мобильная версия подстроилась.

6. Презентация для партнёров

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

7. Счёт и документы

   Счёт по российской форме: реквизиты, позиции, итоговая сумма, место для подписи. Правится комментарием так же, как презентация. Там же в ролике многостраничный документ про апарт-отели, печатные флаеры и резюме основателя «Перевала» с таймлайном.

8. Приложение и диаграмма

   Одной строкой запрошен мобильный магазин с каталогом, корзиной и отслеживанием доставки: Claude уточнил детали и собрал связанный прототип под iPhone. Путь заказа от склада до покупателя он разложил в диаграмму по этапам и срокам в стиле бренда.

Итог кейса: интернет-магазин, презентация, счёт, приложение и схема доставки выглядят как один бренд. В следующих запросах мне не пришлось заново объяснять, как выглядит «Перевал».

Промпты из ролика

Промпты магазина и презентации видны в кадре. Остальные взяты из сценария к ролику: в самом видео показан результат, а не поле ввода.

Дизайн-система

Промпта как такового нет: логотип, фото товаров и одна строка описания бренда.

Магазин

Шаблон UI-макета, дизайн-система «Перевал». Всё остальное лежит в системе.

Презентация

Шаблон Make a deck, дизайн-система «Перевал».

Счёт

Шаблон Make a doc, дизайн-система «Перевал». Для ООО с НДС меняются два слова и в таблицу добавляется ставка.

Анимация под свой ролик

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

Для вертикальной версии под рилс и сторис меняются две строки: «Соотношение сторон: 9:16» и «Место под говорящую голову: снизу».

Анимации, 3D и связка с видео

Самая интересная часть ролика: 3D-сцена как визуальная инструкция для видеомодели.

1. Тест 1. Комната с лампой

   Грубая сцена в Claude Design: тёмная комната, круглый стол, лампа, несколько людей и камера. Важны только расположение объектов и движение камеры. Запись экрана ушла в Seedance 2.5 через Weavy вместе с текстовым запросом и картинкой-референсом. Картинка задаёт персонажей и свет, серый ролик задаёт композицию, тайминг и движение камеры. С первой попытки персонажи ожили, а камера прошла почти по заданной траектории.

2. Тест 2. Птица между высотками

   Маршрут полёта и камеры построен в простой 3D-сцене, запись снова отдана видеомодели. Она довольно близко повторила и полёт, и движение камеры.

Итог

Если оставить из ролика одну мысль, это дизайн-система. Соберите её один раз, проверьте руками, и дальше один стиль держится на сайте, в презентации, документе и приложении. Промпты при этом остаются короткими: вся конкретика бренда живёт в системе, а не в запросе.

Рабочий цикл такой: шаблон и система, короткий запрос, ответы на вопросы Claude, мелкие правки руками, одна пачка комментариев. Когда макет согласован, его можно отдать в Claude Code и довести до рабочего продукта.