LogoSkills

pixel-loop:capture

Capture a labelled screenshot of the running Flutter app via Maestro MCP, with optional Dart MCP widget-tree snapshot.

ํ•ญ๋ชฉ๋‚ด์šฉ
Invoke/pixel-loop:capture
Categorycocode-flutter
Complexitysimple
MCP Serversmaestro, dart

/pixel-loop capture โ€” ์‹คํ–‰ ์ค‘์ธ ์•ฑ ํ™”๋ฉด ์บก์ฒ˜#

ํ•œ๋งˆ๋””๋กœ#

์ง€๊ธˆ ์‹คํ–‰ ์ค‘์ธ 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 โ€” ํ™”๋ฉด ๊ตฌ์กฐ ์ •๋ณด๋„ ํ•จ๊ป˜ ์ €์žฅ (์„ ํƒ, ๊ธฐ๋ณธ๊ฐ’ ๊บผ์ง)

์•ˆ์—์„œ ๋ฌด์Šจ ์ผ์ด ๋ฒŒ์–ด์ง€๋‚˜์š”#

  1. ์–ด๋–ค ๊ธฐ๊ธฐ์—์„œ ์ฐ์„์ง€ ๊ณ ๋ฆ…๋‹ˆ๋‹ค.
  2. ๋กœ๊ทธ์ธ ์ƒํƒœ๋ฅผ ์ง€์šฐ์ง€ ์•Š๊ณ  ์•ฑ์„ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  3. ํ™”๋ฉด์„ ๋ˆŒ๋Ÿฌ ์ด๋™ํ•˜๊ฑฐ๋‚˜ ๊ธ€์ž๋ฅผ ์ž…๋ ฅํ•ด ๊ฐ€๋ฉฐ ์›ํ•˜๋Š” ํ™”๋ฉด๊นŒ์ง€ ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค.
  4. ์Šคํฌ๋ฆฐ์ƒท์„ ์ฐ์–ด ์ด๋ฏธ์ง€ ํŒŒ์ผ๋กœ ์ €์žฅํ•ฉ๋‹ˆ๋‹ค.
  5. ์˜ต์…˜์ด ์ผœ์ ธ ์žˆ์œผ๋ฉด ํ™”๋ฉด ๊ตฌ์กฐ ์ •๋ณด๋„ ๋ณ„๋„ ํŒŒ์ผ๋กœ ํ•จ๊ป˜ ์ €์žฅํ•ฉ๋‹ˆ๋‹ค.

โš™๏ธ ์ƒ์„ธ ์˜ต์…˜ยท์‹คํ–‰ ๋ช…์„ธ (๊ฐœ๋ฐœ์ž / AI ์—์ด์ „ํŠธ์šฉ)

Parameters#

ParameterRequiredDescription
--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#

  1. Resolve target device (Maestro MCP).
  2. Launch app without clearState to keep auth.
  3. Navigate via Maestro flow (tapOn, inputText, deep-link openLink as appropriate).
  4. takeScreenshot โ†’ .claude/docs/pixel-loop/captures/<timestamp>_<label>.png.
  5. If --with-widget-tree, persist dart.getRootWidgetTree() to <timestamp>_<label>.tree.json.

Example#

/pixel-loop capture --route=/home --label=baseline --with-widget-tree

Use 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").