Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговое руководство по связке Claude Code (с моделью Opus) и MCP-сервера Mobbin (база из 600 000+ экранов и 320 000+ пользовательских сценариев). Автор демонстрирует, как превратить AI в Senior Product Designer: от генерации первого драфта мобильного мессенджера и создания детального HTML-отчёта по дизайн-паттернам до полной переработки интерфейса в интерактивный прототип и создания согласованного лендинга.
👤 Кому будет полезно: Вайбкодерам, инди-хакерам, frontend-разработчикам и продуктовым дизайнерам, которые создают интерфейсы приложений и сайтов с помощью AI и хотят избавиться от «галлюцинаций» и шаблонного дизайна начального уровня.
✨ Что получите: Готовый фреймворк работы с Mobbin MCP: от подключения коннектора в Claude Code до правильных промптов для аудита, редизайна, сборки интерактивных дизайн-систем и посадочных страниц на реальных референсах лидеров рынка (Telegram, WhatsApp, Instagram).
1. Подключение Mobbin MCP: интеграция базы из 600 000+ реальных экранов в Claude Code
Контекст: Ни одна языковая модель по умолчанию не понимает до конца, что такое по-настоящему качественный и удобный UI/UX, пока ей не предоставлены актуальные референсы. Без насмотренности AI выдаёт функциональные, но визуально слабые макеты с нарушением иерархии и отступов. Mobbin решает эту проблему, предоставляя библиотеку из 1 400+ приложений, 600 000+ UI-экранов и 320 000+ пользовательских сценариев (User Flows). Подключение Mobbin через протокол MCP (Model Context Protocol) позволяет агенту напрямую искать и анализировать решения топовых продуктовых команд перед генерацией кода.
Тайминг: , , ,
Выгода: Экономия десятков часов на ручном поиске скриншотов и мудбординге. AI-агент автоматически подтягивает проверенные рынком паттерны проектирования.
Как применить:
Шаг 1: Настройка в Claude Code Desktop — Откройте боковую панель приложения Claude Code, перейдите во вкладку Customize и откройте раздел Connectors (или MCP servers).
Шаг 2: Поиск и авторизация коннектора — В поисковой строке введите Mobbin, нажмите кнопку Connect и пройдите авторизацию своей учётной записи Mobbin.
Шаг 3: Проверка статуса подключения — Убедитесь, что коннектор активен (в чате отображается зелёный статус коннектора Mobbin), после чего начинайте сессию с флагманской моделью (Opus).
Результат: Claude Code получает прямой доступ к поиску и извлечению дизайн-паттернов из базы Mobbin в режиме реального времени через MCP-инструменты.
2. Двухэтапный воркфлоу проектирования: от сырого драфта к HTML-аудиту интерфейса
Контекст: Типичная ошибка при работе с AI — просить модель сразу сгенерировать идеальный финальный интерфейс. На первом проходе нейросеть делает около 80% необходимой работы: закладывает базовые экраны и моковые данные, но допускает визуальные огрехи (неправильные отступы, слабая типографика, несогласованная цветовая тема). Вместо мгновенной слепой переделки эффективнее заставить Claude Code сначала изучить референсы через Mobbin MCP и скомпилировать визуальный HTML-отчёт с анализом лучших практик лидеров ниши.
Тайминг: , , , ,
Выгода: Предотвращение хаотичных правок. Вы получаете наглядную стратегию редизайна с готовой дизайн-системой (color tokens, typography, component states) до внесения изменений в код.
Как применить:
Шаг 1: Генерация базового каркаса приложения — Claude Code] — Отправьте первичный промпт для создания интерактивного макета со всеми ключевыми экранами:
I want to design a complete messaging app. So think Telegram, Discord, iMessage, or WhatsApp. Include an inbox with pinned and unread chats, a one-on-one chat screen with reactions, replies, voice notes, and shared photos, a group chat with member info, a new message flow, and settings. Build an in-depth fully interactive app with mock data laid out across a canvas.
Шаг 2: Запрос аналитического HTML-отчёта через Mobbin MCP — Claude Code] — Не просите сразу редизайн. Заставьте модель исследовать конкурентов и выдать структурированный отчёт:
Give me an HTML-based report of the most relevant social messaging apps and what they do well as far as design patterns and visual direction, and then plan out how our designs need to be improved via a full redesign based on your findings and insights from Mobbin.
Шаг 3: Анализ результатов ресёрча — Изучите сгенерированный HTML-артефакт. Модель выделит сильные стороны референсов (например, свайп-действия в Telegram/WhatsApp, структуру голосовых сообщений в Instagram, организацию списков чатов) и предложит цветовую палитру и токены.
Результат: Подробный визуальный HTML-документ с декомпозицией каждого экрана, сопоставлением с лидерами рынка и чётким планом улучшений.
3. Выполнение глубокого редизайна и сборка интерактивного прототипа
Контекст: После того как Claude Code сформировал план на базе референсов, модель готова переписать UI с соблюдением актуальных гайдлайнов (например, iOS Human Interface Guidelines). В процессе редизайна создаются не просто статичные картинки, а полноценный интерактивный холст (Canvas): светлая и тёмная темы, состояния компонентов (active, hover, empty states), адаптивные панели настроек и модальные шторки (sheets).
Тайминг: , , , ,
Выгода: Получение продакшен-готового кликабельного прототипа с рабочей логикой переключения тем оформления, фильтрацией чатов и масштабированием шрифтов без единой строчки ручного CSS.
Как применить:
Шаг 1: Запуск редизайна на базе отчёта — Claude Code] — Отправьте команду на реализацию запланированных изменений:
Now execute the redesign based on your findings, verifying after your redesign that you've landed on a beautiful visual direction with the established design patterns listed in the report.
Шаг 2: Проверка архитектуры холста — Убедитесь, что артефакт содержит:
Верхний ряд: экраны приложения в Light Mode.
Средний ряд: экраны приложения в Dark Mode.
Нижний ряд: изолированные компоненты и специфические состояния (empty states, dropdowns, sheets).
Шаг 3: Тестирование в полноэкранном режиме — Нажмите кнопку Play (Full Screen) на артефакте Claude Code и проверьте интерактивность:
Фильтрацию чатов в реальном времени.
Открытие карточки контакта из шапки диалога.
Работу экрана настроек (Appearance Panel) с живым переключением Dark/Light mode и изменением размера текста.
Результат: Полнофункциональный интерактивный прототип мобильного приложения с профессиональным UI, выверенными отступами и продуманным UX.
4. Генерация согласованного лендинга с реальными мокапами продукта
Контекст: Любому цифровому продукту необходима маркетинговая посадочная страница. Частая проблема при генерации лендингов через AI — несоответствие стилистики лендинга самому приложению и использование абстрактных заглушек вместо экранов продукта. Работая в той же сессии, Claude Code сохраняет контекст дизайна приложения, а с помощью Mobbin MCP подбирает конверсионные паттерны лендингов ведущих consumer-сервисов (Headspace, Partyful, WhatsApp).
Тайминг: , , , ,
Выгода: Создание стильного маркетингового сайта с анимациями появления (fade-in), идеально повторяющего брендинг, типографику и цветовую палитру разработанного приложения.
Как применить:
Шаг 1: Запрос лендинга на базе Mobbin Web Research — Claude Code] — Отправьте промпт в той же сессии, где создавалось приложение:
Design a marketing landing page for this messaging app that we just built. Use the app's existing name, colors, typography, and visual style so the page feels like the same brand. Important: Use real screens from the app in the phone mockups rather than generic visuals. Before designing, use the Mobbin MCP to search for landing pages and website sections from top consumer apps and let your research and analysis guide the design of the site. Once designed and built, tell me what aspects of the design you landed on directly from your Mobbin research.
Шаг 2: Анализ применённых референсов — Проверьте в чате источники вдохновения (например, сплит-герой: текст слева, мокап справа от Partyful/Headspace; блок цитат в форме облачков сообщений от WhatsApp/MyMind).
Шаг 3: Проверка вёрстки и анимаций — Откройте сгенерированный HTML/CSS-код в браузере на всю ширину и протестируйте плавность анимаций при скролле и адаптивность блоков.
Результат: Готовая посадочная страница с интерактивными мокапами созданного приложения, плавной анимацией и структурой блоков от ведущих мировых SaaS и B2C продуктов.
5. Использование Mobbin Flows и AI Search для проектирования сложных пользовательских сценариев
Контекст: Дизайн — это не только статичные экраны, но и последовательность действий пользователя (User Flows): онбординг, чекаут, прикрепление файлов, запись голосовых заметок. В интерфейсе самого Mobbin доступен раздел Flows с видеозаписями реальных взаимодействий в приложениях уровня Shopify, Slack, Airbnb и Microsoft Copilot. Для поиска узкоспециализированных флоу можно использовать встроенный AI-поиск (Standard AI Search и Deep AI Search).
Тайминг: , , , ,
Выгода: Исключение догадок при проектировании сложных микро-взаимодействий и пошаговых сценариев авторизации, чата или онбординга.
Как применить:
Шаг 1: Поиск по категориям сценариев — В веб-интерфейсе Mobbin выберите раздел Flows и перейдите в категорию вашей задачи (например, Chatting & Sending Messages или Sign Up / Login).
Шаг 2: Использование AI Search — В поисковой строке введите текстовый запрос (например, instant messaging flows). При необходимости переключите режим поиска через меню трёх точек:
Standard AI Search — быстрый семантический поиск подходящих экранов и видео.
Deep AI Search — углублённый анализ базы для нестандартных кейсов.
Шаг 3: Анализ видеозаписей взаимодействий — Откройте карточку флоу, просмотрите пошаговое видео каждого тапа и используйте обнаруженные UX-паттерны в инструкциях для AI-агента.
Результат: Точное понимание логики экранов и состояний интерфейса перед их реализацией в коде.
FAQ
В: Обязательно ли иметь платную подписку Mobbin для работы с MCP?
О: Да, доступ к MCP-серверу Mobbin является платной функцией сервиса. Однако вы можете зарегистрироваться в Mobbin бесплатно для ручного просмотра базовых референсов, а при переходе на платный тариф подключить интеграцию с Claude Code.
В: Работает ли этот воркфлоу только с Claude Opus или можно использовать Sonnet?
О: Связка с Mobbin MCP отлично работает как на модели Claude 3.5 Sonnet / Claude Sonnet 5, так и на моделях линейки Opus. Opus демонстрирует более глубокое понимание сложной композиции и дизайн-систем, но Sonnet также выдаёт качественный результат при наличии чётких референсов.
В: Почему нельзя сразу попросить Claude Code сделать красивый дизайн без шага с HTML-отчётом?
О: Когда модель сразу приступает к генерации финального кода, она часто упускает системные вещи: токены отступов, контрастность цветов, структуру навигации. Промежуточный шаг с отчётом заставляет AI явно сформулировать правила дизайн-системы на основе референсов, что в разы повышает качество итогового кода.
В: Может ли AI скопировать чужой дизайн один в один через Mobbin MCP?
О: Нет, цель интеграции — не прямое копирование, а заимствование проверенных UX-паттернов (расположение кнопок, структура вкладок, поведение модальных окон) и насмотренность. Модель синтезирует лучшие практики нескольких приложений и создаёт уникальный дизайн под ваши требования.
В: В каком формате Claude Code выдаёт результат мобильного приложения?
О: Claude Code генерирует интерактивный веб-артефакт (HTML, CSS/Tailwind, JavaScript), организованный в виде холста (Canvas). Вы можете просматривать статичные ряды экранов (Light/Dark mode) или запустить интерактивный эмулятор в полноэкранном режиме с живыми кликами и переключателями.
Ресурсы и ссылки
Claude Code — десктопное приложение и CLI-агент от компании Anthropic — упомянут в видео.
Mobbin — библиотека референсов реального UI/UX дизайна (600k+ экранов, 320k+ флоу) с поддержкой MCP-сервера — упомянут в видео.
Конспект создан на основе видео «I Connected Claude 3.5 Opus to 600,000 Real Apps... The UI is INSANE» канала Quick AI. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=-Lt3-rAJ2Cw
