pixel-loop:setup

One-time setup: install + register Figma, Maestro, and Dart MCP servers for Claude Code.

항목	내용
Invoke	/pixel-loop:setup
Category	cocode-flutter
Complexity	simple

/pixel-loop setup — 픽셀 루프 처음 한 번 준비하기#

한마디로#

디자인(Figma)과 실제 앱 화면을 픽셀 단위로 맞추는 작업을 시작하기 전에, 필요한 도구 3종을 한 번에 설치하고 연결하는 초기 세팅 단계입니다. 새 작업실에 들어가서 책상, 모니터, 전화선을 한꺼번에 깔아두는 것과 같아요. 한 번만 해두면 됩니다.

누가·언제 쓰나요#

픽셀 퍼펙트 루프(디자인과 앱 화면을 똑같이 맞추는 작업)를 처음 시작하는 사람
새 컴퓨터·새 작업 환경에서 도구가 아직 연결되어 있지 않을 때

👉 이미 한 번 해뒀어도 다시 실행해도 안전합니다(중복 설치되지 않음). 도구 연결이 끊겼을 때 다시 맞추는 용도로도 씁니다.

무엇을 해주나요#

Claude Code에 세 가지 도구(MCP 서버)를 설치하고 연결해 줍니다.

Figma MCP — 디자인 파일을 읽어오는 통로
Maestro MCP — 실제 앱 화면을 조작·확인하는 도구
Dart MCP — 실행 중인 Flutter 앱과 대화하는 연결선

마무리되면 이 세 항목이 Claude Code 전역 설정(~/.claude.json 또는 작업공간의 .mcp.json)에 등록됩니다. 저장소에도 plugins/cc-flutter-pixel-loop/.mcp.json이 함께 들어 있어, 저장소를 내려받는 누구나 같은 연결을 쓸 수 있습니다.

어떻게 쓰나요#

# 1) Figma 플러그인 설치
claude plugin install figma@claude-plugins-official

# 2) Maestro 설치 + 등록
curl -Ls  " https://get.maestro.mobile.dev "   | bash
claude mcp add maestro -- maestro mcp

# 3) Dart MCP 등록
claude mcp add dart -- dart mcp-server

# 4) 잘 붙었는지 최종 확인
claude mcp list

Figma는 설치 후 Claude Code 안에서 /mcp를 실행해 figma 서버를 고르고, 자동으로 열리는 브라우저에서 로그인(OAuth)을 마치면 연결됩니다. Dart는 앱을 flutter run --print-dtd로 실행할 때 콘솔에 찍히는 연결 주소(ws://...)를 알려주면 됩니다. 마지막 claude mcp list에서 세 서버가 모두 connected로 보이면 준비 완료입니다. 끊긴 항목이 있으면 해당 단계만 다시 실행하세요.

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

Figma 연결 — Figma 플러그인을 설치하고, 브라우저 로그인으로 디자인 읽기 권한을 받아옵니다.
Maestro 연결 — Maestro 도구를 내려받아 설치하고, Claude Code에 화면 조작 도구로 등록합니다.
Dart 연결 — 실행 중인 Flutter 앱과 이어주는 Dart 도구를 등록하고, 앱이 알려준 연결 주소로 연결합니다.
최종 점검 — 세 도구가 모두 정상 연결됐는지 한눈에 확인하고, 끊긴 게 있으면 그 부분만 다시 맞춥니다.

참고: 웹(Flutter web)에서는 Maestro가 안정적이지 않아, 이 경우 다른 대체 경로를 안내합니다. iOS·Android 실제 기기를 쓸 때는 기기와 컴퓨터가 같은 네트워크에 있거나 USB 디버깅이 켜져 있어야 합니다.

⚙️ 상세 옵션·실행 명세 (개발자 / AI 에이전트용)

Steps#

1. Figma MCP#

# Install the official Figma plugin for Claude Code
claude plugin install figma@claude-plugins-official

Then authenticate:

In a Claude Code session, run /mcp.
Select the figma server.
Complete the OAuth flow (browser opens automatically).
Confirm with: claude mcp list | grep figma → should print figma: connected.

2. Maestro MCP#

# Maestro CLI (bundles the MCP server)
curl -Ls  " https://get.maestro.mobile.dev "   | bash

# Verify
maestro --version

# Register as an MCP for Claude Code
claude mcp add maestro -- maestro mcp

3. Dart MCP#

Requires Dart SDK 3.9 or later (bundled with current Flutter stable).

# Register
claude mcp add dart -- dart mcp-server

The Dart MCP connects to a running Flutter app via Dart Tooling Daemon (DTD). Start the app like this:

flutter run --print-dtd

The console prints a line:

The Dart Tooling Daemon is listening on ws://127.0.0.1:54321/abc123token

Provide this URI when Dart MCP prompts for dtdUri, or paste the full flutter run output into the Claude Code session — the agent extracts the URI automatically.

Tip: From the Claude Code prompt, the ! prefix runs a shell command in-session and feeds its stdout into the conversation:
>   ! flutter run --print-dtd
 >  

4. Sanity Check#

claude mcp list
# expected (subset):
# figma   ✓ connected
# maestro ✓ connected
# dart    ✓ connected

If any server shows disconnected, re-run the corresponding step above.

Platform Notes#

Flutter web: Maestro web is not stable. The pixel-loop skill bails out on web targets and instructs the user to use the Playwright fallback in cc-flutter-dev:figma:analyze.
iOS physical device: Maestro requires the device and the host to be on the same network and the WebDriverAgent helper to be installed (maestro test once will provision it).
Android physical device: USB debugging enabled; the device must appear in adb devices.

Where these end up#

After setup, three MCP entries appear in your global Claude Code config (~/.claude.json or workspace .mcp.json). The cocode/skills repo also ships a per-plugin plugins/cc-flutter-pixel-loop/.mcp.json so the same wiring is available to anyone cloning the repo.