/pixel-loop capture — 실행 중인 앱 화면 캡처
Marionette MCP로 실행 중인 Flutter 앱의 라벨이 붙은 스크린샷을 캡처하고, 선택적으로 Dart MCP 위젯 트리 스냅샷도 함께 남깁니다.
| 항목 | 내용 |
|---|---|
| 실행 명령 | /cc-pixel-loop:capture |
| 분류 | Flutter |
| 난이도 | ●○○ 간단 |
| MCP 서버 | marionette, dart |
한마디로#
지금 실행 중인 Flutter 앱의 특정 화면으로 이동해서 스크린샷을 한 장 찍어 저장해 주는 명령입니다. "이 화면 지금 어떻게 보이는지 사진으로 남겨줘"라고 말하는 것과 같아요.
누가·언제 쓰나요#
- 화면을 고치기 전에 현재 상태를 사진으로 남겨두고 싶을 때 (예: "이 화면 리팩터링하기 전에 지금 모습 저장해 줘")
- 새 버전을 내보낸 뒤 화면이 멀쩡한지 빠르게 눈으로 확인하고 싶을 때
- PR(코드 리뷰)에 "새 설정 화면 스크린샷 붙여줘" 처럼 화면 사진을 첨부하고 싶을 때
무엇을 해주나요#
-
지정한 화면으로 앱을 이동시킨 뒤 스크린샷을 찍어,
.claude/docs/pixel-loop/captures/폴더에시간_라벨.png형식의 이미지 파일로 저장합니다. - 이미 실행 중인 앱에 그대로 붙어서 캡처하므로 로그인 상태가 유지되고, 로그인 후에만 보이는 화면도 그대로 찍을 수 있습니다.
- 옵션을 켜면 화면 구조 정보(위젯 트리)도 함께
시간_라벨.tree.json파일로 남겨, 나중에 화면 구성을 분석할 수 있습니다.
어떻게 쓰나요#
/pixel-loop capture --route=/home --label=baseline --with-widget-tree--route=/home— 캡처할 화면 경로 (필수). 예:/home--label=baseline— 저장 파일 이름에 붙일 꼬리표 (선택, 기본값capture)-
--target— 어떤 기기에서 찍을지 (선택, 기본값auto— 자동 선택).ios/android/macos/linux/windows중 지정 가능 --with-widget-tree— 화면 구조 정보도 함께 저장 (선택, 기본값 꺼짐)
안에서 무슨 일이 벌어지나요#
- 어떤 기기에서 찍을지 고릅니다.
- 이미 디버그 모드로 실행 중인 앱에 연결합니다(앱을 새로 띄우지 않으므로 로그인 상태가 그대로 유지됩니다).
- 화면을 눌러 이동하거나 글자를 입력해 가며 원하는 화면까지 들어갑니다.
- 스크린샷을 찍어 이미지 파일로 저장합니다.
- 옵션이 켜져 있으면 화면 구조 정보도 별도 파일로 함께 저장합니다.
⚙️ 상세 옵션·실행 명세 (개발자 / AI 에이전트용)
Parameters#
| Parameter | Required | Description |
|---|---|---|
--route | ✅ | In-app route to navigate to (e.g. /home) |
--label | ❌ | Filename suffix (default capture) |
--target | ❌ | ios/android/macos/linux/windows/auto (default auto) |
--with-widget-tree | ❌ | Also dump the widget tree via Dart MCP (default false) |
Behavior#
- Resolve target device and
marionette.connectto the running app's VM Service URI. - Attach to the already-running debug app — no relaunch, so auth state is preserved.
- Navigate with
marionette.tap/enter_text/scroll_to(preferValueKeymatches over text). marionette.take_screenshots→.claude/docs/pixel-loop/captures/<timestamp>_<label>.png.- If
--with-widget-tree, persistdart.getRootWidgetTree()to<timestamp>_<label>.tree.json.
Example#
/pixel-loop capture --route=/home --label=baseline --with-widget-treeUse Cases#
- Pre-loop baseline ("save the current state before I start refactoring this screen").
- Post-release smoke verification.
- Visual review on a PR ("attach a screenshot of the new settings page").