# inspo

Даёт агенту реальные примеры сайтов, палитры, шрифты и JSX-компоненты перед созданием интерфейса. Полезен для поиска визуальных референсов.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed · ★ 919
- Автор: Nutlope
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/Nutlope/inspo
- Обновлён: 2026-10-01
- HTML: https://affpapa.org/nevibecode/mcp/inspo

## Что делает

inspo подключает к агенту каталог реальных сайтов и страниц. Для каждого примера доступны палитра, шрифты, обнаруженный стек, разбор экрана по блокам и описание дизайн-системы в формате `DESIGN.md`. В каталоге 2,320 страниц с 832 сайтов и 68 эталонных компонентов с JSX.

MCP-сервер предоставляет пятнадцать инструментов, включая `recommend(brief)`, `find_similar`, `find_components` и `get_design_system`. Есть транспорт stdio через `npx` и Streamable HTTP через `https://inspomcp.dev/api/mcp`. Инструменты работают в режиме чтения. При вызове `get_design_system(live:true)` сервер принимает только публичные хосты и порты 80 и 443, поэтому локальный адрес или другой порт не подойдут.

## Требования
- Нужно: Node.js (команды через npx)
- Удалённый сервер: `https://inspomcp.dev/api/mcp`
- Переменные окружения: `TOGETHER_API_KEY`, `INSPO_CATALOGUE_URL`, `INSPO_PROFILE`, `INSPO_IMAGES`, `INSPO_MAX_TOKENS` — это ключи и токены: значения спроси у человека, в репозиторий и общие файлы не записывай.
- Работает с: Playwright

## Установка

### Claude Code (родная платформа)

1. **Командой платформы: удалённый сервер**
```bash
claude mcp add --transport http inspo https://inspomcp.dev/api/mcp
```

2. **Командой платформы**
```bash
claude mcp add --env TOGETHER_API_KEY=<TOGETHER_API_KEY> --env INSPO_CATALOGUE_URL=<INSPO_CATALOGUE_URL> --env INSPO_PROFILE=<INSPO_PROFILE> --env INSPO_IMAGES=<INSPO_IMAGES> --env INSPO_MAX_TOKENS=<INSPO_MAX_TOKENS> --transport stdio inspo -- npx -y inspo-mcp
```
Вместо <…> подставьте свои значения

### Codex

1. **Командой платформы: удалённый сервер**
```bash
codex mcp add inspo --url https://inspomcp.dev/api/mcp
```

2. **Командой платформы**
```bash
codex mcp add inspo --env TOGETHER_API_KEY=<TOGETHER_API_KEY> --env INSPO_CATALOGUE_URL=<INSPO_CATALOGUE_URL> --env INSPO_PROFILE=<INSPO_PROFILE> --env INSPO_IMAGES=<INSPO_IMAGES> --env INSPO_MAX_TOKENS=<INSPO_MAX_TOKENS> -- npx -y inspo-mcp
```
Вместо <…> подставьте свои значения

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "inspo": {
            "url": "https://inspomcp.dev/api/mcp"
        }
    }
}
```
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "inspo": {
            "command": "npx",
            "args": [
                "-y",
                "inspo-mcp"
            ],
            "env": {
                "TOGETHER_API_KEY": "<TOGETHER_API_KEY>",
                "INSPO_CATALOGUE_URL": "<INSPO_CATALOGUE_URL>",
                "INSPO_PROFILE": "<INSPO_PROFILE>",
                "INSPO_IMAGES": "<INSPO_IMAGES>",
                "INSPO_MAX_TOKENS": "<INSPO_MAX_TOKENS>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "inspo": {
            "type": "http",
            "url": "https://inspomcp.dev/api/mcp"
        }
    }
}
```
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "inspo": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "inspo-mcp"
            ],
            "env": {
                "TOGETHER_API_KEY": "<TOGETHER_API_KEY>",
                "INSPO_CATALOGUE_URL": "<INSPO_CATALOGUE_URL>",
                "INSPO_PROFILE": "<INSPO_PROFILE>",
                "INSPO_IMAGES": "<INSPO_IMAGES>",
                "INSPO_MAX_TOKENS": "<INSPO_MAX_TOKENS>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### Gemini CLI

1. **Командой платформы: удалённый сервер**
```bash
gemini mcp add -t http inspo https://inspomcp.dev/api/mcp
```

2. **Командой платформы**
```bash
gemini mcp add -e TOGETHER_API_KEY=<TOGETHER_API_KEY> -e INSPO_CATALOGUE_URL=<INSPO_CATALOGUE_URL> -e INSPO_PROFILE=<INSPO_PROFILE> -e INSPO_IMAGES=<INSPO_IMAGES> -e INSPO_MAX_TOKENS=<INSPO_MAX_TOKENS> inspo npx -y inspo-mcp
```
Вместо <…> подставьте свои значения

## Когда брать
- найти визуальные референсы под бриф
- подобрать палитру и шрифтовую пару
- сравнить похожие страницы
- взять JSX-структуру для hero или pricing
- собрать дизайн-систему сайта

## Примеры запросов агенту
- Подбери референсы для лендинга по этому брифу через `recommend`.
- Найди похожие страницы для этого интерфейса через `find_similar`.
- Покажи структуру hero-компонента и JSX из каталога.

## Похожие
- [ux-extract](https://affpapa.org/nevibecode/skills/ux-extract.md) — скилл · 664 установки
- [prototype](https://affpapa.org/nevibecode/skills/adobe-prototype.md) — скилл · 524 установки
- [frontend-visual-qa](https://affpapa.org/nevibecode/skills/frontend-visual-qa.md) — скилл · 572 установки
- [frontend-app-builder](https://affpapa.org/nevibecode/skills/frontend-app-builder.md) — скилл · 252 установки
- [frontend-developer](https://affpapa.org/nevibecode/skills/frontend-developer.md) — скилл · 1300 установок
- [webapp-testing](https://affpapa.org/nevibecode/commands/webapp-testing.md) — команда · 259 установок

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md