cc-pixel-loop

Figma + Marionette + Dart MCP를 활용한 픽셀 퍼펙트 Flutter UI 에이전틱 루프 (Read → Write → Reload → Capture → Compare)

cc-pixel-loop#

Figma + Marionette + Dart MCP를 활용한 픽셀 퍼펙트 Flutter UI 에이전틱 루프 (Read → Write → Reload → Capture → Compare)

Pixel-perfect Flutter UI agentic loop powered by three MCPs:

MCP	Role
`figma`	Reads design tokens, layout, and component overrides directly from Figma.
`dart`	Hot-reloads a running Flutter app via Dart Tooling Daemon (DTD).
`marionette`	Navigates the running app and takes screenshots over VM Service (shared with `cc-marionette` ).

The agent runs a Read → Write → Reload → Capture → Compare loop until the rendered Flutter screen matches the Figma design.

Skills#

이름	설명
pixel-loop-guide	Figma MCP, Dart MCP(Dart Tooling Daemon hot-reload), Marionette MCP(VM Service 스크린샷)로 구동되는 에이전틱 Read
visual-verify	Flutter 화면을 Figma 디자인과 대조하는 런타임 시각적 검증. 실행 중인 앱의 Marionette 스크린샷을 캡처하고, 필요하면 Dart MCP로 핫 리로드한 뒤 Figm

Commands#

이름	설명
/cc-pixel-loop:verify — 화면이 디자인대로 나왔는지 "사진 찍어 대조"	런타임 시각적 검증: Marionette 스크린샷 + Figma diff (코드 수정 없음).
/pixel-loop capture — 실행 중인 앱 화면 캡처	Marionette MCP로 실행 중인 Flutter 앱의 라벨이 붙은 스크린샷을 캡처하고, 선택적으로 Dart MCP 위젯 트리 스냅샷도 함께 남깁니다.
/pixel-loop loop — 디자인이랑 똑같아질 때까지 자동 수정	렌더링된 Flutter 화면이 Figma 디자인과 일치할 때까지 Read → Write → Reload → Capture → Compare 전체 루프를 실행합니다.
/pixel-loop setup — 픽셀 루프 처음 한 번 준비하기	최초 설정: Claude Code에 Figma, Marionette, Dart MCP 서버를 설치하고 등록합니다.
pixel-loop	앱 화면을 Figma 시안과 픽셀 비교해 차이를 찾고 코드를 고쳐 새로고침·재비교를 만족할 때까지 반복하며, 스크린샷과 비교 결과를 `.claude/docs/pixel-loop/<

관련 플러그인#

플러그인	설명
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-dev	개발 사이클 자동화 (이슈 사이클, 버그 사이클, 세션, ZenHub, Agent Teams)
cc-flutter	Flutter 개발 핵심 (UI 패턴, Feature 생성, BLoC, 테스트)
cc-inspector	Flutter Inspector 디버깅 (Master + 9 전문 Inspectors)
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	스펙 명확성 검증 (소크라테스식 인터뷰, Seed spec, 모호성 스코어링, contrarian/simplifier 에이전트, 3단계 평가)

설치#

claude plugins install coco-de/skills/plugins/cc-pixel-loop