motif MCP가 Claude Code에 UI 버그 재현을 위한 동영상 시청 기능을 제공하다

Claude Code는 기본적으로 비디오를 시청할 수 없어서 호버 상태, 애니메이션, 스크롤 동작 같은 시각적 UI 버그를 진단할 때 버그를 글로 설명해야 하므로 번거롭습니다. motif는 새로운 MCP 서버로, Claude Code가 버그의 화면 녹화를 가리키게 하여 이 문제를 해결합니다.
작동 방식
버그를 녹화하고 motif에 파일을 지정하면 세 가지 결과를 반환합니다: 시각적으로 발생하는 현상, 근본 원인, diff입니다. 내부적으로 Gemini 2.5 Flash를 사용하는데, 이 모델은 단일 스크린샷이 아닌 프레임 시퀀스로 비디오를 처리하기 때문에 200ms 오버슛이나 잘못된 타이밍에 리셋되는 호버 상태와 관련된 버그에 중요합니다.
설정
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를 사용하는 개발자로서, 시각적 문제에 대해 수동으로 버그를 설명하는 단계를 건너뛰고 싶은 분들입니다.
📖 전체 소스 읽기: r/ClaudeAI
👀 See Also

클로드용 자체 호스팅 메모리 레이어, 클라우드플레어에서 무료 실행
Cloudflare Worker MCP 서버는 Workers AI와 Vectorize를 사용하여 Claude가 의미론적 검색을 통해 메모를 기억하고 불러올 수 있게 해줍니다. 모두 무료 요금제로 가능합니다.

NervMap: 단일 명령 서버 서비스 탐색 및 진단 도구
NervMap은 1초 이내에 Docker 컨테이너, systemd 서비스, 베어 프로세스를 탐지하고, 이들 간의 의존성을 매핑하며, 심각도 분석과 수정 제안을 통해 문제를 진단하는 Linux 도구입니다.

오픈클로 에이전트를 위한 신원 및 평판 레이어
개발자 팀이 다단계 에이전트 워크플로우에서 발생하는 신원 손실 문제를 해결하기 위해 MCP-I와 IdentiClaw를 구축했으며, 평판 레지스트리로 knowthat.ai를 개발했습니다. 그들은 MCP-I 사양을 탈중앙 신원 재단에 기부했습니다.
Anthropic의 llama.cpp 기반 자연어 오토인코더를 위한 UI 및 서버
Anthropic의 오픈 가중치 Natural Language Autoencoder를 위한 맞춤형 llama.cpp 서버와 Mikupad UI입니다. 활성화 추출, 설명, 재구성 및 설명 편집을 통한 조종을 지원합니다.