Как использовать Inspo MCP: переносим дизайн-референсы и скриншоты в UI-разработку с Claude Code или Codex

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

Inspo решает именно эту задачу: прежде чем агент начнёт писать UI, ему можно передать подборку дизайн-референсов с реальных сайтов. На официальном сайте сейчас указаны 832 продакшен-сайта, 2 320 записей страниц с десктопными и мобильными снимками, 68 референсных компонентов, а также извлечённые из страниц палитры, шрифты, отступы, радиусы скругления, ширины контейнеров и сведения о структуре. Через MCP эти данные становятся доступны Claude Code, Codex и другим клиентам.

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

1. Подключить Inspo MCP и убедиться, что клиент действительно установил соединение.
2. Сначала попросить агента найти референсы, не переходя сразу к коду.
3. Проверить, какие записи страниц и URL изображений он получил и прочитал ли сами изображения.
4. Превратить выбранные материалы в явный «контракт референсов».
5. После реализации открыть настоящий рендер, сравнить его по пунктам и внести правки.

Ниже используется условная задача: создать для существующего проекта B2B-лендинг продукта, рассчитанного на разработчиков. Пример объясняет рабочий процесс, но не означает, что автор статьи запускал или тестировал ваш проект.

Что именно даёт Inspo MCP

Inspo — не просто поиск по скриншотам. Согласно официальной странице MCP и репозиторию проекта, агент может получить три типа материалов.

1. Страницы и скриншоты

search_screens позволяет искать реальные страницы по описанию на естественном языке, стилю, отрасли, типу страницы, цвету, светлой или тёмной теме и структуре. Результаты могут содержать:

• заголовок страницы, Inspo slug и адрес исходного сайта;
• URL десктопного и мобильного скриншотов;
• миниатюру страницы;
• палитру, шрифты, технологический стек и теги;
• анализ общего характера страницы и структуры её секций.

Чтобы подробно изучить один из вариантов, используйте get_screen: так вы получите полную запись именно по нему, а не будете сразу загружать в контекст множество кандидатов.

2. Структурированная дизайн-система

Для каждого сайта в коллекции есть файл DESIGN.md, сформированный на основе данных страницы. get_design_system может вернуть сведения о шрифтах, семантических цветах, шкале размеров текста, отступах, радиусах, CSS-переменных и ширине контейнеров.

Эти данные важны, потому что фраза «возьми этот сайт за референс» слишком расплывчата. А требования вроде «первый экран — в две колонки, контент ограничен контейнером, основная кнопка выделена контрастным акцентным цветом, между секциями заметные отступы» агент способен выполнить гораздо стабильнее.

3. Референсные компоненты и код

Inspo также предлагает примеры навигации, Hero-секций, блоков с ценами, футеров и других компонентов. Сначала агент может найти подходящий вариант через find_reference_components, а затем получить соответствующий JSX с помощью get_reference_jsx.

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

Начинать удобнее всего с recommend: вы описываете задачу обычным языком, а инструмент объединяет структуру страницы, сайты-кандидаты, референсные компоненты, палитру и рекомендации по компоновке. При первом использовании обычно эффективнее попросить агента вызвать recommend, а затем глубже изучить один-два варианта, чем сразу просматривать десяток страниц.

Не путайте подключение модели и Inspo MCP: это две разные цепочки

Для анализа кода, внесения изменений и рассуждений Claude Code или Codex требуется рабочее подключение к модели. Inspo MCP отвечает за внешние дизайн-материалы. У этих цепочек разные адреса, способы авторизации и причины сбоев.

Если вы уже используете Claude Code или Codex через BetterToken, сначала настройте модель по соответствующей инструкции:

• Инструкция по подключению Claude Code
• Инструкция по подключению Codex

После этого отдельно настройте Inspo. Не указывайте https://inspomcp.dev/api/mcp как Base URL модели и не передавайте Inspo API Key от BetterToken. Официальный хостинговый endpoint Inspo сейчас не требует аккаунта или API Key. BetterToken не размещает Inspo, не выдаёт права на сторонние дизайн-материалы и не гарантирует, что агент обязательно прочитает изображения или создаст интерфейс определённого вида.

Перед подключением достаточно убедиться, что:

• Claude Code или Codex установлен и выполняет обычные задачи по работе с кодом;
• клиент может открыть хостинговый адрес Inspo;
• на компьютере доступны Node.js и npx, если вы планируете использовать автоустановщик или локальный режим stdio.

Подключение Inspo MCP

У Inspo есть автоматический установщик, но можно воспользоваться и встроенными MCP-командами клиента. Если на компьютере установлено несколько AI-инструментов для программирования, сначала запустите --dry-run, чтобы увидеть, какие клиенты и конфигурации будут изменены.

Способ 1. Автоматический установщик Inspo

Проверить Claude Code без записи конфигурации:

npx -y inspo-mcp install --dry-run --client claude-code

После проверки установить:

npx -y inspo-mcp install --client claude-code

Проверить только Codex:

npx -y inspo-mcp install --dry-run --client codex

После проверки установить:

npx -y inspo-mcp install --client codex

Если не указывать --client, установщик проверит наличие Claude Code, Codex, Cursor, VS Code, Windsurf, Claude Desktop и Zed. Согласно официальному описанию Inspo MCP, сначала он показывает план и запрашивает подтверждение; --dry-run только выводит план и ничего не записывает, а -y пропускает подтверждение.

Способ 2. Добавить хостинговый MCP напрямую

Рекомендованный официальный endpoint Inspo:

https://inspomcp.dev/api/mcp

В официальном репозитории Inspo описан как сервис только для чтения, но это по-прежнему внешний сторонний MCP. В командной среде перед подключением стоит проверить репозиторий, область доступных данных и сетевые правила. Формулировка «только для чтения» не отменяет проверку доверия.

Согласно официальной документации Claude Code по MCP, удалённые сервисы следует добавлять по HTTP. Чтобы Inspo был доступен во всех локальных проектах, выполните:

claude mcp add --scope user --transport http inspo https://inspomcp.dev/api/mcp

Затем проверьте:

claude mcp get inspo
claude mcp list

В сеансе Claude Code также можно ввести:

/mcp

Сообщение Added означает лишь то, что конфигурация записана. Фактическое состояние соединения нужно смотреть через claude mcp list: только Connected означает успешное подключение. Состояния Failed to connect, Pending approval или отключённый сервис нужно устранить до продолжения работы.

В документации OpenAI по MCP в Codex указано, что Codex поддерживает Streamable HTTP и STDIO. Добавьте удалённый MCP:

codex mcp add inspo --url https://inspomcp.dev/api/mcp

Посмотрите список настроенных сервисов:

codex mcp list

В интерактивном интерфейсе Codex также можно использовать:

/mcp

Согласно актуальной документации OpenAI, Codex CLI, расширение для IDE и приложение ChatGPT для компьютера используют общую конфигурацию MCP, если работают на одном хосте Codex. После добавления или изменения сервиса перезапустите текущий клиент либо откройте новый сеанс и убедитесь, что Inspo появился.

stdio — лишь альтернативный способ передачи данных

Если клиенту неудобно подключаться к удалённому URL, он может запускать stdio-сервис через npx:

claude mcp add --scope user inspo -- npx -y inspo-mcp

codex mcp add inspo -- npx -y inspo-mcp

К команде автоматической установки также можно добавить --local. Однако в этом режиме каталог Inspo всё равно загружается с CDN: это не офлайн-работа и не полноценный самостоятельный хостинг.

При первом запуске сначала найдите референсы, а уже потом просите писать код

Распространённая ошибка — объединить поиск референсов и реализацию в одной фразе:

Используй Inspo и сделай мне красивый лендинг.

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

Надёжнее начать с такого запроса:

Пока не изменяй код и не начинай проектировать страницу.

Используй Inspo MCP и найди 4 варианта референсов для «B2B-лендинга AI API-продукта, рассчитанного на разработчиков».

Требования:
- сдержанный, профессиональный визуальный стиль без больших ярких градиентных областей;
- первый экран должен ясно передавать ценность продукта и содержать один основной CTA;
- можно показать интерфейс продукта или схему вызова, но страница не должна выглядеть как традиционный корпоративный сайт;
- проверь и десктопные, и мобильные референсы;
- начни с recommend, а search_screens, get_screen или get_design_system используй только при необходимости.

Для каждого варианта верни:
1. заголовок страницы, Inspo slug и sourceUrl;
2. URL десктопного и мобильного скриншотов, если они есть в результате инструмента;
3. macrostructure, основную палитру и шрифты;
4. 3 конкретных дизайнерских решения, которые стоит перенять;
5. элементы бренда, тексты или декор, которые копировать не следует.

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

Цель такого запроса — не получить больше красивых прилагательных, а заставить агента предоставить отслеживаемые идентификаторы страниц и доказательства. В ответе должны появиться конкретный slug, адрес исходного сайта, URL скриншотов и дизайн-данные, а не только формулировки вроде «современно, чисто и профессионально».

Как убедиться, что агент действительно получил референсы

Проверку удобно разделить на четыре уровня. Успех на одном уровне не доказывает успех на следующем.

Уровень	Наблюдаемое подтверждение	Что это доказывает
MCP настроен	Claude Code показывает Connected, либо Inspo присутствует в списке MCP Codex	Для Claude Code это подтверждает соединение; запись в списке Codex подтверждает конфигурацию, а доступ к сервису нужно подтвердить успешным вызовом инструмента
Инструмент вернул данные	В ответе есть настоящий slug, sourceUrl, цвета, шрифты, структура страницы и URL скриншотов	Агент вызвал Inspo и получил структурированную запись
Изображения прочитаны	Агент явно открывает URL скриншотов или использует доступный ему просмотр изображений и описывает конкретные детали	Агент прочитал не только текстовое описание или ссылки; наличие миниатюр в ответе само по себе этого не доказывает
Страница следует референсу	В реальном рендере можно объяснимо сопоставить структуру, иерархию, ритм и адаптивность с выбранным референсом	Референс действительно повлиял на реализацию

Это различие принципиально. Формат ответа Inspo всегда содержит структурированный текст и может содержать URL исходных изображений. В поддерживаемых сценариях миниатюры также могут передаваться в результате инструмента как нативные блоки изображений. Но реализация формата ответа проекта явно учитывает ещё два случая: если изображение не удалось получить, блок изображения может отсутствовать, хотя текст и URL сохранятся; при настройке с приоритетом текста ответ тоже может содержать только текст.

Поэтому наличие URL скриншота в ответе ещё не доказывает, что модель прочитала пиксели. Отправьте дополнительный запрос:

Сначала докажи, что основной референс действительно получен. Не начинай писать код.

Выведи:
- названия инструментов Inspo, фактически использованных в этом сеансе;
- slug, sourceUrl, URL десктопного скриншота и URL мобильного скриншота основного референса;
- по 3 конкретных визуальных факта, замеченных на десктопном и мобильном скриншотах: например, композицию первого экрана, положение навигации, выравнивание CTA, кадрирование изображения, расположение карточек или способ сворачивания;
- какие выводы сделаны по скриншотам, а какие получены только из текстовых полей Inspo.

Если текущий клиент получил только текст или URL и не прочитал пиксели изображений, явно напиши: «пиксели изображений не прочитаны». Не додумывай визуальные детали по описанию.

Хороший ответ — не длинная дизайнерская рецензия, а чёткое разделение между тем, что действительно видно на изображении, и тем, что следует из структурированных данных.

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

Превратите выбранные материалы в «контракт референсов»

После выбора кандидатов не ограничивайтесь фразой «сделай в духе референса A». Закрепите, за что отвечает каждый источник, и явно укажите, что копировать нельзя.

Попросите агента подготовить такой контракт:

На основе подтверждённых основного и вспомогательных референсов сначала составь «контракт референсов». Пока не изменяй код.

Включи:

1. Основной референс
- slug / sourceUrl:
- Отвечает только за: общую структуру страницы, композицию первого экрана, ритм секций

2. Вспомогательный референс A
- slug / sourceUrl:
- Отвечает только за: типографическую иерархию, ширину основного текста, свободное пространство

3. Вспомогательный референс B (только если он действительно нужен)
- slug / sourceUrl:
- Отвечает только за: один конкретный компонент или способ перестройки на мобильном устройстве

4. В текущем проекте необходимо сохранить
- существующий технологический стек, маршрутизацию и соглашения по компонентам
- реальные тексты продукта, границы функциональности и фирменные цвета
- существующие взаимодействия, требования доступности и производительности

5. Явно запрещено
- копировать логотип, название бренда, иллюстрации, фотографии и исходные тексты сайта-источника
- воспроизводить весь сайт пиксель в пиксель
- выдумывать несуществующие функции текущего продукта ради сходства с референсом

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

Такой контракт превращает вдохновение в ограничения. Основной референс управляет общей структурой, а вспомогательные решают локальные задачи. Больше референсов — не всегда лучше: если пять сайтов одновременно определяют цвета, шрифты, карточки и Hero, итог часто снова превращается в универсальную AI-страницу без чётких приоритетов.

Переходим к реализации в Claude Code или Codex

После подтверждения референсов и критериев приёмки позвольте агенту изучить репозиторий и изменить код. В запросе ниже намеренно не закреплены npm run dev, каталог конкретного фреймворка или команда тестирования: их нужно определить по текущему проекту, а не угадывать.

Теперь начинай реализацию.

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

Требования к реализации:
- используй существующий фреймворк, систему компонентов и зависимости; не добавляй новый UI-фреймворк без реальной необходимости;
- сохрани настоящий контент и функциональность продукта, не копируй брендовые материалы или тексты сайтов-референсов;
- преобразуй референсы в собственную компоновку, CSS-переменные и компоненты текущего проекта;
- осознанно реализуй десктопную и мобильную версии; не оставляй мобильную версию на конец в надежде на автоматическое масштабирование;
- сначала исправь общую структуру, информационную иерархию и отступы, затем занимайся тенями, радиусами и другим декором;
- не перезаписывай существующие компоненты проекта только потому, что Inspo предоставляет JSX.

Перед изменением файлов кратко объясни:
1. какие файлы планируется изменить;
2. в какой компонент или правило стилей попадёт каждый пункт референса;
3. какой существующий контент должен остаться без изменений.

После завершения:
- запусти имеющиеся в репозитории форматирование, проверку типов или тесты;
- запусти доступный локальный предпросмотр;
- перечисли фактически изменённые файлы;
- выведи соответствие «пункт референса → место реализации»;
- не оценивай результат только словами «современнее» или «премиальнее».

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

Окончательная оценка должна опираться на реальный рендер, а не на diff кода

Если страница компилируется, это доказывает только работоспособность кода. Чтобы понять, отражает ли она референсы, нужно посмотреть настоящую страницу.

В Inspo обычно есть десктопные и мобильные снимки. В официальном Colophon указано, что архив формируется при ширине 1440 и 375 пикселей. Точно повторять высоту не обязательно, но проверка при близкой ширине упрощает сравнение общей структуры и мобильной перестройки.

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

Предложите ему такой формат проверки:

Сравни:
- подтверждённые десктопный и мобильный скриншоты основного референса;
- реальные скриншоты текущей страницы при ширине примерно 1440px и 375px.

Пока не меняй дизайн и код. Сначала выведи таблицу различий:

| Критерий | Наблюдаемое подтверждение в референсе | Текущая реализация | Различие | Рекомендуемое изменение |
| --- | --- | --- | --- | --- |
| Структура первого экрана |  |  |  |  |
| Иерархия заголовка и CTA |  |  |  |  |
| Контейнер и свободное пространство |  |  |  |  |
| Типографическая иерархия |  |  |  |  |
| Цвет и контраст |  |  |  |  |
| Расположение компонентов |  |  |  |  |
| Перестройка на мобильном |  |  |  |  |

Затем выбери только 3 различия с наибольшим влиянием и исправь их. После изменений заново отрендери страницу и проверь результат. Не добавляй в этой же итерации новое направление дизайна.

Хорошая рекомендация должна быть наблюдаемой и выполнимой. Например:

• Не стоит писать: «Hero пока выглядит недостаточно премиально».
• Лучше написать: «В основном референсе заголовок, CTA и интерфейс продукта видны в пределах первого экрана. В текущей странице слишком большие вертикальные отступы, поэтому интерфейс оказывается ниже первого экрана. Уменьши вертикальные отступы Hero, ограничь ширину заголовка и размести главный визуальный элемент в пределах обычной высоты десктопного viewport».

Ещё один пример:

• Не стоит писать: «Мобильная версия недостаточно похожа на референс».
• Лучше написать: «В мобильном референсе сначала идут заголовок и CTA, затем одноколоночная карточка продукта. Текущая реализация сохраняет десктопную двухколоночную схему, поэтому текст и изображение становятся слишком узкими. Перейди на одну колонку на мобильных устройствах и оставь CTA перед главным визуальным элементом».

Если в каждой итерации исправлять несколько самых значимых расхождений, результат обычно сходится быстрее, чем при повторяющейся просьбе «сделай ещё красивее».

Частые проблемы

Команда настройки выполнилась, но агент не находит Inspo

Сначала проверьте состояние клиента, а не переустанавливайте всё заново.

Claude Code:

claude mcp get inspo
claude mcp list

Codex:

codex mcp list

Убедитесь, что в адресе сервиса нет лишних символов, затем перезапустите клиент. Если Claude Code использует проектный .mcp.json, возможно, потребуется одобрить сервис в доверенной рабочей области.

MCP подключён, но агент никогда не вызывает Inspo

Разделите получение материалов и написание кода. Явно укажите в запросе: «Сначала вызови Inspo, верни slug, sourceUrl и URL скриншотов; не изменяй код до подтверждения референсов». Также проверьте через /mcp, что сервис включён.

Агент вернул описание страницы, но изображения не видно

Возможно, вызов вернул только текст, загрузка миниатюры не удалась, клиент не показывает блоки изображений MCP или используемая модельная цепочка не обрабатывает изображения. Проверьте, остались ли URL десктопного и мобильного скриншотов, и попросите агента явно сказать, читал ли он пиксели. Если текущий клиент и модель поддерживают визуальный ввод, откройте URL браузерным инструментом или приложите скриншоты как изображения. Для текстовой модели это не поможет: работайте со структурированными данными либо переключитесь на визуальную цепочку.

Страница всё ещё похожа на типовой шаблон

Обычно не нужно искать ещё десять референсов. Лучше сузить роли: один основной источник отвечает за макроструктуру, один вспомогательный — за типографику и свободное пространство, ещё один максимум — за конкретный компонент. Зафиксируйте это в контракте и потребуйте соответствие «пункт референса → место в коде».

Контекст стал слишком большим, и агент начал путать референсы

Сначала получите кандидатов через recommend, затем вызывайте get_screen или get_design_system только для одного-двух выбранных вариантов. Не загружайте одновременно множество полных записей страниц и исходников компонентов. get_reference_jsx вызывайте только тогда, когда нужен конкретный компонент.

Исходный сайт уже не совпадает со скриншотом Inspo

Inspo хранит данные страницы на момент съёмки, а исходный сайт впоследствии мог измениться. Сравнивайте результат с выбранным скриншотом и записью Inspo. sourceUrl нужен для отслеживания источника; не следует ожидать, что внешний сайт всегда будет выглядеть так же, как архив.

Главное — не просто «установить MCP», а выстроить цепочку доказательств

Ценность Inspo MCP не в том, что он автоматически решает, какой дизайн хороший. Он превращает формулировку «хочу примерно такое ощущение» в отслеживаемые страницы, скриншоты, дизайн-данные и референсные компоненты.

Надёжная итерация UI-разработки должна оставить четыре вида подтверждений:

1. клиент подтверждает, что Inspo подключён;
2. агент возвращает конкретные страницы и дизайн-материалы;
3. можно убедиться, что он прочитал скриншоты, либо он честно сообщает, что получил только текст;
4. в финальном рендере можно по пунктам объяснить, какие правила структуры, иерархии и адаптивности пришли из референсов.

Если разделить поиск, подтверждение, реализацию и проверку, Claude Code или Codex перестаёт просто «делать красивую страницу по ощущениям». Он работает в дизайн-контексте, который можно проверить, скорректировать и использовать повторно.