Прототип лендинга и UX через Claude Design
Тема 5/5: Готовые сценарии для работы → Урок 6/8
Claude Design от Anthropic Labs — инструмент для продуктовых дизайнеров и менеджеров, которым нужно быстро перейти от идеи к работающему прототипу. В этом уроке разобран рабочий сценарий именно под продуктовую работу: быстрое прототипирование, подключение кодовой базы, итерации с реальными компонентами и передача в разработку через Claude Code.
Продуктовые сценарии
Самый частый продуктовый сценарий — когда есть идея функции и её нужно сделать осязаемой до того, как выделять инженерные ресурсы. Claude Design позволяет дойти от концепта до интерактивного прототипа за один разговор. Запросы здесь звучат так:
«Спроектируй новую страницу настроек для приложения — секции: аккаунт, оплата, уведомления, интеграции. С боковой навигацией, каждая секция раскрывается.»
«Создай онбординг-флоу для нового пользователя — 5 экранов, которые проводят через подключение источника данных, настройку первого дашборда и приглашение коллег.»
«Прототипируй поиск с фильтрами, фасетной выдачей и панелью деталей, которая выдвигается справа при клике на результат.»
«Собери интерфейс для согласования запросов — менеджеры могут просматривать, комментировать и одобрять или отклонять запросы в очереди.»
Прежде чем зафиксировать направление, часто нужна обратная связь от заинтересованных сторон, которым легче думать, когда есть что увидеть и потрогать. Claude Design настолько быстр, что можно сгенерировать два-три альтернативных подхода и показать их рядом — например попросить «три разных макета для страницы профиля: карточный, с левой боковой панелью, с верхними вкладками» или «две версии оформления заказа — одностраничную и пошаговую — чтобы сравнить на дизайн-ревью».
Прототипировать можно и целые пользовательские пути, а не только отдельные экраны: проведите Claude по маршруту, и он сгенерирует каждый экран в контексте — скажем, «распиши путь пользователя, который переходит с бесплатного плана на платный: от дашборда с предложением об апгрейде через страницу сравнения планов, форму оплаты, подтверждение и обновлённый дашборд с премиум-функциями». Хорошо ложатся на этот инструмент и внутренние инструменты — админ-панели, очереди модерации контента, операционные процессы, — потому что здесь скорость важнее пиксель-перфекта. Сюда подойдут запросы вроде «спроектируй админ-панель управления пользователями — таблица с поиском и фильтрами по плану и статусу, выезжающая панель с историей аккаунта и правкой прав» или «создай очередь модерации, где ревьюверы видят помеченные элементы и контекст и могут одобрять, отклонять или эскалировать горячими клавишами».
Подключение кодовой базы
Для продуктовых команд подключение кодовой базы — тот момент, где инструмент становится значительно полезнее. Вместо обобщённых прототипов Claude генерирует дизайны на ваших реальных компонентах, стилях и архитектуре. Это важно сразу по нескольким причинам. Прототипы используют ваши настоящие компоненты: видя библиотеку компонентов, Claude проектирует на тех кнопках, карточках, модальных окнах и макетах, которые уже существуют, — и при передаче в разработку больше не возникает «выглядит круто, но такого компонента у нас нет». Сохраняется и архитектурная согласованность: Claude разбирает ваши стилевые паттерны (CSS-модули, Tailwind, styled-components), шкалу отступов, цветовую систему и принципы вёрстки, так что новые дизайны остаются выровнены с уже выпущенным кодом. А поскольку прототип построен на ваших настоящих паттернах, разрыв между прототипом и кодом, который можно выкатывать, резко сокращается.
Подключить базу можно импортом из GitHub или подключением локальных директорий через кнопку Import. После этого кодовая база становится частью контекста проекта, и на конкретные компоненты можно ссылаться по имени — «используй ProductCard», «следуй тому же паттерну, что страница настроек». Из вашего кода Claude считывает структуру компонентов (строительные блоки интерфейса и то, как они собираются), стили и темизацию (цветовую систему, шкалу отступов, типографику, подход к CSS), паттерны фреймворка (управление состоянием, хуки, поток данных и прочие конвенции) и организацию файлов — как вы именуете и раскладываете компоненты и директории.
Стоит учитывать производительность. Подключение очень больших репозиториев может вызвать
подтормаживания или нестабильность браузера, поэтому для монорепозитория или базы, над которой
работают сотни человек, лучше подключать конкретный пакет или директорию с нужными компонентами,
а не весь репозиторий целиком. Chrome к тому же плохо справляется с большими файловыми деревьями,
так что подключайте папки внутри репозитория, чтобы не тянуть .git,
node_modules/ и другие тяжёлые папки.
Передача в Claude Code
Когда прототип готов к реализации, Claude Design передаёт его в Claude Code, сохраняя дизайн-замысел, выбор компонентов и архитектурные решения, — чтобы инженеры достраивали вашу работу, а не интерпретировали её заново. Для этого нажмите Export, затем Hand off to Claude Code. По умолчанию передаются дизайн-файлы проекта, чат и README, который объясняет модели, как продолжить работу.