Repolode
Предложить
Nutlope

Nutlope/inspo

MCP-сервер, который помогает coding-агентам искать референсы дизайна на реальных сайтах: скриншоты, палитры, шрифты и файлы DESIGN.md.

Открыть на GitHubСайт
Звёзды
910
Форки
58
Открытые issues
1
Последний коммит
20 дней назад

Что это?

Inspo — это архив реальных сайтов, доступный coding-агентам через Model Context Protocol (MCP). Прежде чем писать UI, агент может найти в архиве референсы, а не полагаться только на собственное представление о дизайне. Сейчас каталог включает 2 320 страниц с 832 сайтов: каждая снята в версиях для компьютера и мобильных устройств, а также дополнена извлечёнными палитрами и шрифтами, определёнными технологиями и разбором по секциям от верха до низа страницы.

Помимо снимков целых страниц, в архиве есть 68 типовых компонентов для референсов — например, hero-блоки, секции с ценами, футеры и панели навигации. Для каждого компонента доступен JSX, который можно скопировать и вставить. Для каждого сайта также генерируется DESIGN.md на основе DOM: в нём перечислены семантические роли цветов, шкала типографики, интервалы, CSS-переменные и ширина контейнера. Пятнадцать инструментов обеспечивают поиск и получение данных, а инструмент `recommend(brief)` объединяет несколько из них в один вызов.

Сервер работает через stdio, запускаясь с помощью npm, или по протоколу Streamable HTTP на inspomcp.dev. Команда установки настраивает популярные клиенты, например Claude Code, Cursor, Codex, VS Code и Zed. В репозитории также есть галерея на Next.js для просмотра архива и воркер для захвата страниц на базе Playwright.

Ключевые возможности

  • 01Ищет среди 2 320 сохранённых страниц с 832 реальных сайтов в версиях для компьютера и мобильных устройств
  • 02Предоставляет 68 типовых компонентов для референсов с JSX, который можно скопировать и вставить
  • 03Создаёт для каждого сайта DESIGN.md с ролями цветов палитры, шкалой типографики и CSS-переменными
  • 04Предоставляет 15 инструментов MCP, включая инструмент recommend, объединяющий несколько запросов
  • 05Работает через stdio с запуском через npm или как размещённая в сети конечная точка Streamable HTTP

Сценарии использования

  • Подобрать референсы для coding-агента перед созданием лендинга
  • Найти реальные примеры секций с ценами, hero-блоков или футеров для адаптации
  • Изучить палитру цветов, шкалу типографики и интервалы сайта для вдохновения
  • Просматривать подобранные примеры веб-дизайна во встроенной галерее

Быстрый старт

  1. 1

    Запустите установщик одной командой для вашего MCP-клиента

    npx -y inspo-mcp install
  2. 2

    Или добавьте размещённую конечную точку в Claude Code

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

    Или клонируйте репозиторий и установите зависимости

    git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install

Что важно знать

  • Архив представляет собой статический начальный набор данных, поэтому в него входят только сайты и страницы, собранные на данный момент.
  • Права на скриншоты принадлежат их создателям; на них распространяется авторское право, и создатели могут потребовать их удалить.

Темы

#mcp#design-system#ui-design#ai-agents#screenshots#css#typescript#nextjs

Частые вопросы

Что такое inspo?
MCP-сервер, который помогает coding-агентам искать референсы дизайна на реальных сайтах: скриншоты, палитры, шрифты и файлы DESIGN.md. Inspo — это архив реальных сайтов, доступный coding-агентам через Model Context Protocol (MCP). Прежде чем писать UI, агент может найти в архиве референсы, а не полагаться только на собственное представление о дизайне. Сейчас каталог включает 2 320 страниц с 832 сайтов: каждая снята в версиях для компьютера и мобильных устройств, а также дополнена извлечёнными палитрами и шрифтами, определёнными технологиями и разбором по секциям от верха до низа страницы.
inspo можно использовать бесплатно? Какая у него лицензия?
inspo распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
inspo всё ещё поддерживается?
Активно поддерживается. Последний коммит в inspo — 1 окт. 2026 г..
Для чего можно использовать inspo?
Подобрать референсы для coding-агента перед созданием лендинга Найти реальные примеры секций с ценами, hero-блоков или футеров для адаптации Изучить палитру цветов, шкалу типографики и интервалы сайта для вдохновения Просматривать подобранные примеры веб-дизайна во встроенной галерее
Как установить inspo?
Запустите установщик одной командой для вашего MCP-клиента: npx -y inspo-mcp install Или добавьте размещённую конечную точку в Claude Code: claude mcp add --transport http inspo https://inspomcp.dev/api/mcp Или клонируйте репозиторий и установите зависимости: git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install
Где скачать inspo?
Исходный код и инструкции по установке — на GitHub: https://github.com/Nutlope/inspo

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

modelcontextprotocol / modelcontextprotocol

Спецификация, определения на TypeScript и JSON Schema, а также официальная документация Model Context Protocol (MCP) — открытого стандарта для подключения AI-приложений к внешним инструментам и данным.

ИИ и машинное обучение#mcp#ai-agents#specification
9,5 тыс.1,9 тыс.TypeScriptOtherОбновлён позавчера