Claude Design: рабочий прототип интерфейса за один разговор

Обычная сцена в продуктовой команде: у менеджера есть идея фичи, но пока её никто не видит, обсуждение идёт про слова. Дизайнер тратит два дня на макет, команда смотрит и говорит «а давайте наоборот» — и цикл начинается заново. Дорого выходит не рисование, а то, что до первой картинки все спорят вслепую.

Что делает Claude Design

Claude Design — отдельный инструмент от Anthropic Labs, который собирает не картинку, а работающий прототип: по нему можно кликать, открывать экраны, проходить сценарий целиком. Смысл в скорости: сделать три варианта и посмотреть на них живьём дешевле, чем неделю обсуждать один.

Запрос пишется как техзадание вслух: «Собери страницу настроек для SaaS-сервиса: разделы аккаунт, оплата, уведомления, интеграции, слева навигация, каждый раздел раскрывается». Или сразу целый путь пользователя: «Разложи сценарий перехода с бесплатного тарифа на платный — от подсказки в дашборде через сравнение тарифов, форму оплаты и подтверждение до обновлённого дашборда».

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

Подключить свой код — и прототипы перестают быть фантазией

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

Дальше в запросах можно ссылаться на компоненты по имени: «используй ProductCard», «свёрстай как на странице настроек». Осторожнее с размером: монорепозиторий целиком подключать не стоит, браузер подтормаживает — берите конкретный пакет или папку с нужными компонентами.

Передача в разработку

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

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

Совет

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

Где купить Claude

Российская карта на сайте Anthropic не проходит. У нас в каталоге Claude Pro (2 090 ₽/мес), Max 5x (11 010 ₽/мес), Max 20x (22 010 ₽/мес) и пополнение API от $20 — оплата картой РФ или СБП, поддержка на русском.