메뉴
Figma MCP 로 디자인을 픽셀 퍼펙트로 구현. 토큰 추출 → 테마 매핑 → 정확한 레이아웃 → 스크린샷 diff 검증 루프. Flutter/React 공용.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Flutter 외부/BaaS API 연동 풀 파이프라인. 계약 → retrofit 코드젠 → dio 인터셉터(auth/retry) → Result 매핑 → repository → 오프라인 캐시. dio-retrofit 스킬 심화.
TanStack Query v5 패턴 (React). 서버 상태 패칭/캐시/뮤테이션/낙관적 업데이트.
Supabase BaaS 연동 패턴 (Flutter). 인증/DB/리얼타임/스토리지/RLS.
Auth.js v5 (NextAuth) 패턴. 세션/미들웨어/Server Action 가드.
Cross-stack API 계약 동기화. NestJS DTO ↔ Flutter DTO 일치성 관리.
Dio+Retrofit API 통신 패턴. API 클라이언트, 인터셉터 작성 시 자동 참조.
| name | figma-pixel-perfect |
| description | Figma MCP 로 디자인을 픽셀 퍼펙트로 구현. 토큰 추출 → 테마 매핑 → 정확한 레이아웃 → 스크린샷 diff 검증 루프. Flutter/React 공용. |
| globs | client/**/presentation/**, client/**/widgets/**, client/**/screens/**, client/**/theme/**, client/src/features/**, client/src/shared/** |
Figma 를 눈으로 보고 손으로 옮기면 간격/폰트/색이 미묘하게 어긋난다. MCP 로 정확한 값을 뽑아서 구현하고, 렌더 결과를 Figma 이미지와 대조하는 검증 루프로 일치를 강제한다.
claude mcp add --transport http figma https://mcp.figma.com/mcp → /mcp 로 인증.
Figma 데스크톱 불필요. Dev/Full seat 필요.http://127.0.0.1:3845/mcp (Figma 앱 Dev Mode 에서 "Enable MCP server").npx -y figma-developer-mcp --stdio + FIGMA_API_KEY
(Figma personal access token). tools: get_figma_data, download_figma_images.연결된 MCP 가 노출하는 도구 이름은 서버마다 다르다. 아래 역할로 매핑해서 사용:
get_variable_defs / get_figma_dataget_image / get_screenshot / download_figma_imagesget_code / get_metadataget_code_connect_map사용자에게 Figma 에서 대상 프레임을 선택하게 하거나 node-id/URL 을 받는다.
get_metadata 로 프레임 크기(px) + 트리 구조 파악.
get_variable_defs 로 색상·타이포그래피·간격·radius·shadow 를 추출 →
프로젝트 디자인 토큰 레이어에 매핑. 위젯/컴포넌트에 hex/px 를 직접 박지 마라.
theme/ 의 ColorScheme + TextTheme + spacing 상수 (AppSpacing)로.
색은 Color(0xFFRRGGBB) 정확값. 타이포는 fontFamily/fontWeight/fontSize/height/letterSpacing 전부.theme.extend 또는 CSS 변수 토큰. shadcn 토큰과 정렬.get_code/get_metadata 로 auto-layout(방향·gap·padding·정렬)·constraint·크기를 읽는다.
Row/Column + MainAxisAlignment + spacing(gap),
React 는 flex + gap. constraint(hug/fill/fixed) → Expanded/Flexible/고정 크기.BoxShadow/BackdropFilter (React: box-shadow/backdrop-filter).download_figma_images 로 export (SVG 우선, 없으면 2x/3x PNG).토큰 + 측정값으로 위젯/컴포넌트 트리 작성. 재사용 단위 분리. const/RepaintBoundary(Flutter).
get_image 로 Figma 프레임 이미지 저장.matchesGoldenFile) 로 위젯 렌더, 또는 시뮬레이터에서
integration_test + takeScreenshot / 디바이스 스크린샷. flutter-driver-e2e 스킬 참조.page.screenshot() (playwright MCP 또는 e2e)."Figma 대비 일치 항목 / 남은 차이(있으면 사유) / 잠근 golden 목록"을 명시.