browser-visual-difflisted

# browser-visual-diff Figma 디자인과 라이브 렌더를 비교해 UI 충실도를 끌어올리는 워크플로우. **Phase 1~4의 실제 실행 주체는 `browser-visual-diff-capture` 에이전트이다.** 스크린샷·멀티모달 바이트는 에이전트 컨텍스트에 격리되고, 메인 루프에는 **충실도 리포트만** 리턴된다. ## 필요 MCP Phase 1~4는 `browser-visual-diff-capture` 에이전트가 수행하며, 에이전트가 아래 MCP를 로드한다. | MCP | 역할 | 필수 여부 | |-----|------|----------| | Figma MCP (`mcp__plugin_figma_figma__*`) | Figma 디자인 캡처 + 메타데이터 추출 | **필수** | | Chrome DevTools MCP (`mcp__chrome-devtools-attach__*`) | 라이브 ��더 캡처 (**기본 도구**) | **필수** | | Playwright MCP (`mcp__plugin_playwright_playwright__*`) | 라이브 렌더 캡처 (폴백 도구) | Chrome DevTools MCP 불가 시 사용 | ### ToolSearch 로드 순서 (에이전트 내부 규칙) > ⚠️ **캡처 도구는 반드시 아래 순서대로 로드하고 시도한다. 에이전트가 이 규칙을 준수한다.** 1. **Chrome DevTools MCP 스키마를 먼저 로드한다.** 2. **디버깅 가능한 Chrome 브라우저 연결 상태를 사전 확인한다** (`list_pages` 호출): - 연결 실패 → 에이전트가 리포트에 "Chrome DevTools MCP 연결 실패" 기록 → 이 스킬(메인 루프)에서 사용자에게 1줄 요청: `"Chrome 브라우저를 --remote-debugging-port=9222 옵션으로 실행해 주세요."` 후 재시도. 3. **Chrome DevTools MCP 호출이 실패한 경우에만** Playwright MCP로 폴백. ## 호출 방법 ``` /browser-visual-diff [figma-url=<Figma URL>] [component=<컴포넌트 파일 경로>] [route=<라이브 라우트>] [design-guide=<디자인 가이드 파일 경로>] ``` **예시:** ``` /browser-visual-diff figma-url=https://www.figma.com/design/ABC123/MyApp?node-id=100-200 component=src/components/ResultCard.jsx route=/result ``` 인자가 없어도 동작하지만, Phase 0 슬롯 합의 단계에서 사용자에게 1회 확인한다. ## 추상 슬롯 (프로젝트별 사용자가 채움) | 슬롯 | 의미 | 입력 방법 | |------|------|----------| | `<FigmaNodeId>` | 비교 대상 Figma 노드 ID | `figma-url` 인자에서 자동 추출