design-inspiration

MCP-сервер для поиска вдохновения по UI-дизайну на Dribbble, Behance, Awwwards, Mobbin и Pinterest. Создан для Claude Code, но работает с любым MCP-клиентом.

Использует Serper API (поиск Google) с фильтрами site:, чтобы ограничить результаты только дизайн-платформами. Также умеет извлекать реальные дизайн-токены (цвета, шрифты, отступы) с любого живого сайта через headless-браузер.

Находите вдохновение, затем извлекайте точные токены с понравившихся сайтов.

Зачем

Я хотел, чтобы Claude подтягивал дизайн-референсы при создании UI — смотрел реальные работы на Dribbble, находил цветовые палитры, просматривал паттерны вёрстки — не выходя из терминала. Существующие варианты либо требовали Playwright (тяжело), либо не возвращали URL изображений, которые я мог бы скачать и посмотреть.

Поисковая часть оборачивает эндпоинты изображений и веб-поиска Serper с предварительно настроенными фильтрами по сайтам. Просто.

Извлечение токенов появилось из другой потребности: я находил понравившийся сайт на Dribbble, открывал его, а затем вручную вылавливал цвета пипеткой и изучал шрифты. Теперь я просто указываю design_extract_tokens на URL и получаю точные значения.

Инструменты

design_search_images — Поиск изображений по дизайн-платформам. Возвращает URL изображений, размеры, ссылки на источники. Подходит для поиска визуальных референсов под конкретный UI-паттерн.

design_search_references — Веб-поиск, ограниченный дизайн-сайтами. Возвращает заголовки статей, сниппеты, ссылки. Лучше подходит для поиска кейсов, документации по дизайн-системам или объяснений паттернов.

design_search_styles — Ищет конкретное эстетическое направление (цветовая палитра, типографика, вёрстка, анимация). Запускает поиск изображений и веб-поиск параллельно, возвращает объединённые результаты.

design_extract_tokens — Извлекает дизайн-токены с живого сайта. Укажите любой URL и получите цвета, типографику, отступы, радиусы скругления и тени. Поддерживает флаги dark_mode и mobile. Требует глобально установленный dembrandt (npm install -g dembrandt).

Три поисковых инструмента принимают параметр sites для фильтрации по конкретным платформам и параметр num для управления количеством результатов.

Установка

Для поисковых инструментов нужен API-ключ Serper. Бесплатный тариф даёт 2 500 поисков без кредитной карты.

1. Зарегистрируйтесь на serper.dev

2. Скопируйте ваш API-ключ

Для извлечения токенов установите dembrandt глобально:

npm install -g dembrandt

Claude Code

claude mcp add design-inspiration -e SERPER_API_KEY=your-key-here -- node /path/to/design-inspiration-mcp-server/dist/index.js

Любой MCP-клиент (stdio)

{
  "design-inspiration": {
    "type": "stdio",
    "command": "node",
    "args": ["/path/to/design-inspiration-mcp-server/dist/index.js"],
    "env": {
      "SERPER_API_KEY": "your-key-here"
    }
  }
}

Сборка из исходников

git clone https://github.com/YonasValentin/design-inspiration-mcp-server.git
cd design-inspiration-mcp-server
npm install
npm run build

Как это работает на самом деле

Каждый инструмент формирует поисковый запрос, добавляя site:dribbble.com OR site:behance.net OR ... к тому, что вы ищете. Затем обращается к эндпоинту /images или /search Serper и форматирует ответ.

Инструмент design_search_styles запускает оба эндпоинта параллельно (Promise.all), чтобы получить изображения и статьи по одному запросу.

design_extract_tokens вызывает dembrandt (через child_process.execFile) с флагом --json-only, разбирает JSON-вывод и форматирует его в markdown + структурированные данные. Таймаут 60 секунд. Никаких лишних npm-зависимостей — dembrandt работает как глобальный CLI, а child_process встроен.

Результаты возвращаются и в виде markdown (для отображения), и в виде структурированного JSON (для программного использования). Ответы обрезаются на 25 000 символов, чтобы не переполнять контекстное окно.

Советы по использованию

Ищите конкретные UI-паттерны, а не общие термины:

# good
"fintech dashboard dark mode"
"mobile onboarding flow card swipe"
"saas pricing page comparison table"

# too vague
"nice website"
"good design"

Вы можете скачать возвращённые URL изображений и дать Claude посмотреть на них напрямую:

curl -sL "https://cdn.dribbble.com/..." -o /tmp/reference.jpg

Затем попросите Claude прочитать файл изображения — он увидит и опишет дизайн.

Лицензия

MIT

Декларативный рабочий процесс с 3D-ассетами

Референсы могут объявлять, что концепция сайта требует 3D-ассетов. design_prepare_references проверяет требование и возвращает assetPlan; он не создаёт файлы, не вызывает Blender и не обращается к другому MCP.

Когда план ассетов содержит route: "blender", хост-приложение или агент должно направить эту задачу в доступный Blender MCP. Это маршрутизация на уровне хоста, а не вызов, выполняемый этим сервером. Сохраняйте ID ассета и требования к приёмке в задаче для Blender.

Используйте examples/blender-asset-task.json как форму передачи. Включите предмет, визуальную концепцию, камеру, композицию, материалы, освещение, анимацию, веб-форматы вывода, ограничения производительности и ожидания по приёмке. Веб-вывод обычно включает сжатые .glb или .gltf плюс запасной вариант .png или .webp. Приёмка проверяет загрузку в чистом вьювере, кадрирование, материалы, анимации и бюджеты производительности.

Ожидаемая передача: design_prepare_references -> assetPlan.route = "blender" -> хост-приложение -> Blender MCP -> нативная реализация сайта и QA в браузере.

Не заменяйте объявленное 3D-требование на CSS или заглушку без одобрения пользователя. Если Blender недоступен, сообщите о заблокированной задаче с ассетом и сохраните декларативную передачу.