one-shot-ui — MCP-сервер для Claude Code: что делает и как установить
Сравнивает скриншот вёрстки с эталоном, находит расхождения в пикселях и разметке и выдаёт готовые строки CSS. Работает локально без внешних API-ключей.
claude mcp add one-shot-ui -- npx -y one-shot-uiЧто делает one-shot-ui
Служебные агенты часто собирают интерфейс лишь приблизительно, ошибаясь в оттенках, отступах или тенях. MCP-сервер one-shot-ui разбирает исходный скриншот на структуру, палитру цветов и типографику. Затем он сопоставляет полученную разметку с реализацией и генерирует конкретные правила стилей.
Инструмент вычисляет структурные сдвиги, скрытые элементы и отсекает неустранимую разницу вроде сглаживания шрифтов. С его помощью также извлекают дизайн-токены в форматах для Tailwind CSS или shadcn, чтобы проверять новые страницы на соответствие общему стилю.
Для браузерных операций захвата и запуска цикла схождения понадобится Playwright с установленным пакетом Chromium. Все вычисления, оптическое распознавание символов и сравнение картинок проходят на вашей машине.
Какие задачи решает
- найти точные расхождения между эталонным макетом и готовой вёрсткой
- получить готовый набор CSS-свойств для исправления отступов и цветов
- извлечь дизайн-токены и палитру из картинки для Tailwind CSS или shadcn
- проверить соответствие новой страницы визуальному стилю референса
Примеры запросов агенту
- Сравни текущую страницу с reference.png через one-shot-ui и предложи CSS-правки
- Вытащи цветовую палитру и отступы из mock.png в формате shadcn
- Запусти цикл converge для index.html против макета screen.png
Как установить one-shot-ui
Командой платформы
claude mcp add one-shot-ui -- npx -y one-shot-uiКомандой платформы
codex mcp add one-shot-ui -- npx -y one-shot-uiФайл настроек
{
"mcpServers": {
"one-shot-ui": {
"command": "npx",
"args": [
"-y",
"one-shot-ui"
]
}
}
}Файл настроек
{
"servers": {
"one-shot-ui": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"one-shot-ui"
]
}
}
}Командой платформы
gemini mcp add one-shot-ui npx -y one-shot-uiПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о one-shot-ui
Как установить one-shot-ui в Claude Code?
Выполните в терминале команду: claude mcp add one-shot-ui -- npx -y one-shot-ui. Она подключит сервер через stdio.
Что делает MCP-сервер one-shot-ui?
Он переводит эталонный снимок экрана в структурированные данные и сверяет с ним сборку проекта. Сервер находит смещения блоков, ошибки в тенях или цветах и выдаёт точный CSS для их исправления.
Нужны ли серверу внешние API или токены?
Внешние ключи не требуются: диффинг, OCR и разбор вёрстки выполняются локально. Однако для команд захвата экрана нужен предварительно установленный Chromium через Playwright.
