motif MCP предоставляет Claude Code возможность просмотра видео для воспроизведения ошибок интерфейса

Claude Code не умеет просматривать видео, что делает диагностику визуальных UI-багов — состояний наведения, анимаций, поведения скролла — утомительной, так как баг приходится описывать словами. motif — это новый MCP-сервер, который решает эту проблему, позволяя указать Claude Code на запись экрана с багом.

Как это работает

Вы записываете баг, указываете motif на файл, и он возвращает три вещи: что визуально происходит, первопричину и diff. Под капотом используется Gemini 2.5 Flash, потому что эта модель обрабатывает видео как последовательность кадров, а не как один скриншот — различие, важное для багов, связанных с перелетом на 200 мс или состоянием наведения, сбрасывающимся в неподходящий момент.

Настройка

Вам понадобится ключ Gemini API. Затем добавьте две строки в ваш mcp.json:

{
  "mcpServers": {
    "motif": {
      "command": "npx",
      "args": ["motif-mcp"],
      "env": {
        "GEMINI_API_KEY": "your-key-here"
      }
    }
  }
}

После этого интерфейс прост: скажите Claude Code просмотреть запись.

Попробуйте

Запустите npx motif-mcp, чтобы начать. Проект на ранней стадии, так что отзывы приветствуются.

Для кого это

Для разработчиков, использующих Claude Code для фронтенд-работы, которые хотят пропустить этап ручного описания багов для визуальных проблем.