UISandbox — MCP-сервер для Claude Code: что делает и как установить
Открывает веб-приложение в браузере для интерактивной настройки цветов, шрифтов и отступов. Помогает передать подогнанные токены обратно ИИ-агенту.
claude mcp add --env UISANDBOX_URL=<UISANDBOX_URL> --transport stdio uisandbox -- npx -y uisandbox-mcpЧто делает UISandbox
Инструмент запускает визуальную песочницу в браузере поверх запущенного проекта или собранного билда. Все стили страницы превращаются в интерактивные регуляторы. Вы можете менять палитру и скругления прямо на живом интерфейсе. MCP-сервер позволяет ассистенту открывать приложение в редакторе, изменять параметры, проверять стили через инструмент verify и делать снимки экрана.
Обработка интерфейса происходит целиком на стороне браузера через сервисный воркер, поэтому данные не сохраняются на удалённых серверах. Без собранного веб-билда или запущенного локального сервера запустить инспекцию не получится: мобильные проекты под iOS или темы для WordPress сервер не поддерживает. После настройки обновлённые параметры выгружаются как дизайн-токены или возвращаются агенту для правки файлов.
Какие задачи решает
- настроить шрифты и цветовую гамму веб-интерфейса в браузере
- устранить типичные визуальные шаблоны ИИ-генерации в стилях
- экспортировать подогнанные токены в дизайн-систему проекта
- проверить совпадение вычисленных стилей через инструмент verify
Примеры запросов агенту
- Открой текущий локальный проект в UISandbox для настройки темы.
- Запусти UISandbox и проверь различия стилей на главной странице.
- Передай выбранные токены оформления из UISandbox в проект.
Как установить UISandbox
Командой платформы
claude mcp add --env UISANDBOX_URL=<UISANDBOX_URL> --transport stdio uisandbox -- npx -y uisandbox-mcpВместо <…> подставьте свои значения
Командой платформы
codex mcp add uisandbox --env UISANDBOX_URL=<UISANDBOX_URL> -- npx -y uisandbox-mcpВместо <…> подставьте свои значения
Файл настроек
{
"mcpServers": {
"uisandbox": {
"command": "npx",
"args": [
"-y",
"uisandbox-mcp"
],
"env": {
"UISANDBOX_URL": "<UISANDBOX_URL>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"servers": {
"uisandbox": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"uisandbox-mcp"
],
"env": {
"UISANDBOX_URL": "<UISANDBOX_URL>"
}
}
}
}Вместо <…> подставьте свои значения
Командой платформы
gemini mcp add -e UISANDBOX_URL=<UISANDBOX_URL> uisandbox npx -y uisandbox-mcpВместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о UISandbox
Как установить UISandbox в Claude Code?
Выполните в терминале команду claude mcp add uisandbox -- npx -y uisandbox-mcp. После этого MCP-сервер станет доступен вашему агенту.
Что делает UISandbox?
Сервер открывает интерфейс вашего веб-приложения в браузере и связывает его с интерактивными регуляторами оформления. Вы настраиваете отступы, шрифты и цвета, а агент получает готовые токены или патчи для файлов.
Какие проекты поддерживает UISandbox?
Инструмент работает с веб-проектами, имеющими скомпилированный билд или активный сервер разработки. Нативные мобильные приложения для iOS или Android, а также темы для WordPress без сборки не поддерживаются.
