cc-pixel-loop
Figma + Marionette + Dart MCP를 활용한 픽셀 퍼펙트 Flutter UI 에이전틱 루프 (Read → Write → Reload → Capture → Compare)
Figma + Marionette + Dart MCP를 활용한 픽셀 퍼펙트 Flutter UI 에이전틱 루프 (Read → Write → Reload → Capture → Compare)
Pixel-perfect Flutter UI agentic loop. The verdict is computed: skills/visual-verify/scripts/figma_compare.py
(standard library only) compares the Figma state frames with the render pixel by pixel, at the same size, scale and text scale.
| MCP | Role |
|---|---|
figma |
Reads the state frames, their design context and variables, and exports each frame at the comparison scale — the official Figma MCP , which this plugin does not register (see Prerequisite below). |
dart |
Hot-reloads a running Flutter app via Dart Tooling Daemon (DTD) — --source=device only. |
marionette |
Navigates the running app and takes screenshots over VM Service (shared with
cc-marionette
) —
--source=device
only.
|
The default render needs no device: a capture test draws each state the widgetbook use_case shows. The agent runs a
Read → Write → Reload → Capture → Compare loop until the comparison passes; /cc-pixel-loop:verify
runs the comparison once, without editing — the screen's completion gate.
Skills#
| 이름 | 설명 |
|---|---|
| pixel-loop-guide | Figma 시안으로 Flutter 화면을 만들거나 시안과 다른 부분을 고칠 때 사용합니다. 구현·렌더링·캡처·픽셀 비교를 반복하며 상태별 화면을 맞춥니다. Jaspr 화면은 웹 캡 |
| visual-verify | 구현한 Flutter·Jaspr 화면이 Figma 시안과 일치하는지 판정할 때 사용합니다. 상태·크기·테마·글꼴을 맞춰 픽셀을 비교하고 통과·실패·판정 불가와 차이 원인을 보고합니 |
Commands#
| 이름 | 설명 |
|---|---|
| /cc-pixel-loop:verify — 화면이 디자인대로 나왔는지 "계산으로 대조" | 화면이 Figma 시안대로 나왔는지 상태 프레임마다 라이트 · 다크로 결정적 픽셀 비교해 통과 · 실패 · 판정 불가를 정하고, 차이 이미지 · 영역별 보고서 · PR 본문용 요약 |
| /pixel-loop capture — 실행 중인 앱 화면 캡처 | Marionette MCP로 실행 중인 Flutter 앱의 라벨이 붙은 스크린샷을 캡처하고, 선택적으로 Dart MCP 위젯 트리 스냅샷도 함께 남깁니다. |
| /pixel-loop loop — 디자인이랑 같아질 때까지 자동 수정 | 화면이 Figma 상태 프레임과 같아질 때까지 고치기 → 다시 그리기 → 스크립트로 픽셀 비교를 반복하고, 반복마다 점수 · 남은 차이 영역 · 고칠 자리 판정을 남깁니다. 새 화 |
| /pixel-loop setup — 픽셀 루프 처음 한 번 준비하기 | 최초 설정: Claude Code에 Figma, Marionette, Dart MCP 서버를 설치하고 등록합니다. |
| pixel-loop | 앱 화면을 Figma 상태 프레임과 스크립트로 픽셀 비교해 차이를 찾고, 코드를 고쳐 다시 그리고 재비교해 통과할 때까지 반복하며, 비교 이미지와 보고서를 `.claude/docs |
References#
| 이름 | 설명 |
|---|---|
| 전 화면 Figma 일치 작업 | 여러 화면을 한꺼번에 맞추는 작업에서는 화면 일부의 개선이나 캡처 성공을 전체 완료로 보고하지 않는다. 아래 절차는 비교 수단을 바꾸는 규칙이 아니라, 구현·데이터·실행 검증의 누 |
관련 플러그인#
| 플러그인 | 설명 |
|---|---|
| cc-blueprint | 피그마 디자인·화면 개발 워크플로우 — CoUI Figma 라이브러리로 페이지 저작(/design), 프레젠테이션 온리 화면 개발 + 위젯북(/build), Figma↔Widget |
| cc-bricks | cob(co-bricks) 기반 브릭 생성 가이드. kobic Clean Architecture feature 모듈 11종 + 그린필드 프로젝트 초기 세팅(project-init |
| cc-compass | 코코드 스킬 저장소 나침반 — 작업 유형(워크플로우/도구/규칙/레퍼런스)에 따라 알맞은 플러그인·커맨드·스킬로 안내 |
| cc-coui | CoUI 컴포넌트 라이브러리 (크로스플랫폼 컴포넌트 128종) + 조합/확장 가이드 |
| cc-coui-upgrade | 앱이 참조하는 coui 버전 올리기(Flutter 앱·Jaspr 웹 앱) — 형제 패키지를 한 커밋으로 고정하는 핀 계산·검사(coui_pin.py), 홉 계획, 시각 회귀 게이트 |
| cc-dev | 개발 사이클 자동화 (이슈 사이클, 버그 사이클, 세션, ZenHub, Agent Teams) |
| cc-flutter | Flutter 개발 핵심 (UI 패턴, Feature 생성, BLoC, 테스트) |
| cc-jaspr-web | Jaspr Web 자동화 + Flutter Web 임베드 검증. CoUI Web 페이지를 점검하고, Web↔Flutter 듀얼 라이브 프리뷰를 구동하며, VM Service를 통해 |
| cc-marionette | Marionette MCP 래퍼 — CoUI 컴포넌트에 맞춘 위젯 트리 단위 Flutter 자동화 (Widgetbook 회귀 테스트, 커스텀 인터랙티브 위젯 감지, 인프로세스 탭/ |
| cc-mcp-toolkit | mcp_flutter / mcp_toolkit 래퍼 (Arenukvern) — Dynamic Tools Registration 기반 앱 내부 MCP. 실행 중인 Flutter 앱이 |
| cc-security | 보안 통합 — API/앱 보안, 보안 감사, CI 시크릿, 결제/IAP 엔드포인트 보안, 도서 PDF DRM (구 cc-uiux-security 확장) |
| cc-serverpod | Serverpod 백엔드 — 모델/엔드포인트 생성, 마이그레이션 + 심화 패턴(아키텍처, 인증, 캐싱, DB, IAP, 테스트; 구 cc-backend 통합) |
| cc-spec | Jev 판정 게이트 — Seed spec 을 쓰고 TypeSafe Jev(판정 전용 모델)로 모호성·3관점 패널·드리프트를 보정 확률로 판정해 잠금 |
설치#
curl -fsSL https://skills.cocode.im/install.sh | bash -s -- --plugin cc-pixel-loop