/flutter-dev:pixel-loop — 디자인 그대로 화면 맞추기#

한마디로#

방금 만든 화면이 디자인 시안(Figma)과 픽셀 단위로 똑같은지 자동으로 비교·교정해 주는 바로가기 명령입니다. 옷을 새로 맞춘 뒤 거울 앞에서 시안 사진과 나란히 놓고 차이 나는 부분을 다듬는 것과 같아요.

누가·언제 쓰나요#

• Flutter 기능 작업(/feature:create, /feature:presentation 등)을 막 끝내고, 다음 단계로 넘어가기 전에 화면이 시안대로 잘 나왔는지 확인하고 싶을 때
• 지금 작업 중인 기능의 대표 화면을 자동으로 잡아서 별도 설정 없이 바로 검증하고 싶을 때

무엇을 해주나요#

• 가장 최근에 작업한 화면(마지막으로 수정한 *_page.dart 또는 최근 .claude/docs/<기능>/ 폴더)을 자동으로 찾아냅니다.
• 그 기능의 디자인 시안 주소를 .claude/docs/<기능>/figma_analysis.md에서 알아서 연결합니다.
• 실제 검증 작업은 본체 명령인 cc-flutter-pixel-loop:pixel-loop(Figma + Maestro + Dart 픽셀 루프)에 넘겨서 진행합니다. 이 명령은 그 본체로 가는 지름길 역할이에요.

어떻게 쓰나요#

# 화면과 시안을 직접 지정해서 실행 (수동 지정)
/flutter-dev:pixel-loop --figma= < url >   --route=/posts/123

• 보통은 옵션 없이 실행하면 최근 작업한 화면과 시안을 자동으로 잡아줍니다.
• 자동으로 잡힌 화면이 맞지 않을 때만 --figma(시안 주소)와 --route(화면 경로)로 직접 지정하세요.

안에서 무슨 일이 벌어지나요#

1. 에이전트가 가장 최근에 손댄 화면/페이지를 찾습니다.
2. 그 기능의 Figma 시안 주소를 분석 문서에서 찾아 연결합니다.
3. 찾은 화면 경로와 시안 주소를 그대로 픽셀 루프 본체(/pixel-loop)에 넘겨 검증을 시작합니다.

/flutter-dev:pixel-loop --figma= < url >   --route=/posts/123