# UISandbox

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

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

## Что делает

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

Обработка интерфейса происходит целиком на стороне браузера через сервисный воркер, поэтому данные не сохраняются на удалённых серверах. Без собранного веб-билда или запущенного локального сервера запустить инспекцию не получится: мобильные проекты под iOS или темы для WordPress сервер не поддерживает. После настройки обновлённые параметры выгружаются как дизайн-токены или возвращаются агенту для правки файлов.

## Требования
- Нужно: Node.js (команды через npx)
- Переменные окружения: `UISANDBOX_URL` — это ключи и токены: значения спроси у человека, в репозиторий и общие файлы не записывай.

## Установка

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

**Командой платформы**
```bash
claude mcp add --env UISANDBOX_URL=<UISANDBOX_URL> --transport stdio uisandbox -- npx -y uisandbox-mcp
```
Вместо <…> подставьте свои значения

### Codex

**Командой платформы**
```bash
codex mcp add uisandbox --env UISANDBOX_URL=<UISANDBOX_URL> -- npx -y uisandbox-mcp
```
Вместо <…> подставьте свои значения

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "uisandbox": {
            "command": "npx",
            "args": [
                "-y",
                "uisandbox-mcp"
            ],
            "env": {
                "UISANDBOX_URL": "<UISANDBOX_URL>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "uisandbox": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "uisandbox-mcp"
            ],
            "env": {
                "UISANDBOX_URL": "<UISANDBOX_URL>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add -e UISANDBOX_URL=<UISANDBOX_URL> uisandbox npx -y uisandbox-mcp
```
Вместо <…> подставьте свои значения

## Когда брать
- настроить шрифты и цветовую гамму веб-интерфейса в браузере
- устранить типичные визуальные шаблоны ИИ-генерации в стилях
- экспортировать подогнанные токены в дизайн-систему проекта
- проверить совпадение вычисленных стилей через инструмент verify

## Примеры запросов агенту
- Открой текущий локальный проект в UISandbox для настройки темы.
- Запусти UISandbox и проверь различия стилей на главной странице.
- Передай выбранные токены оформления из UISandbox в проект.

## Похожие
- [Next AI Draw.io](https://affpapa.org/nevibecode/mcp/next-ai-drawio.md) — MCP-сервер · ★ 36427
- [tldraw](https://affpapa.org/nevibecode/mcp/tldraw.md) — MCP-сервер · ★ 51104
- [Figma-Context-MCP](https://affpapa.org/nevibecode/mcp/figma-context-mcp.md) — MCP-сервер · ★ 16073
- [Agent-Native Assets](https://affpapa.org/nevibecode/mcp/agent-native-assets.md) — MCP-сервер · ★ 7527
- [Remove AI Watermarks](https://affpapa.org/nevibecode/mcp/remove-ai-watermarks.md) — MCP-сервер · ★ 6144
- [Dembrandt](https://affpapa.org/nevibecode/mcp/dembrandt.md) — MCP-сервер · ★ 3851

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