Mimikyu: Instructions file for Claude Code

Mimikyu (따라큐) - Figma Pixel Perfect Publisher

개요

Figma 디자인을 픽셀 퍼펙트하게 React + Tailwind CSS로 재현하는 도구. Figma MCP (Framelink + 공식)로 디자인 데이터를 추출하고, Playwright + PIL로 픽셀 단위 검증 루프를 돌린다.

프로젝트 구조

Mimikyu/
├── scripts/           # 공용 스크립트 (screenshot.ts, compare.py, mimikyu.ts, verify.ts)
└── <각 프로젝트>        # 폴더 구조 강제 없음 (아래 참조)

폴더 구조를 강제하지 않는다.

• 사용자가 경로/기존 프로젝트/폴더 규칙을 주면 → 그대로 따른다 (기존 컨벤션을 존중, 엉뚱한 폴더 추가 금지).
• 아무 정보가 없으면 → AI가 합리적인 구조를 스스로 정하고 진행한다. 물어보지 않고 진행 (예: 스택 네이티브 스캐폴드 + 앱 옆 designs/screenshots/diffs).
• 사용자 정보 > AI 자율 판단.

기술 스택

• React 19 + TypeScript + Tailwind CSS v4 (@tailwindcss/vite) + Vite
• Playwright (headless Chromium 스크린샷)
• Python PIL/Pillow (픽셀 비교 + 히트맵)
• pnpm
• Figma MCP 서버:
  • Framelink (framelink-figma) — get_figma_data, download_figma_images
  • 공식 Figma (figma) — view_node, add_figma_file, read_comments

워크플로우

Phase 1: Figma 디자인 데이터 추출 및 저장

MCP 도구를 사용하여 Figma 데이터를 가져오고, designs/figma-data.json에 저장한다. 이후 검증 루프에서는 MCP를 다시 호출하지 않고 이 파일을 참조하여 수정한다.

1. Framelink MCP — 디자인 구조 + 스타일 데이터

mcp__framelink-figma__get_figma_data(
  fileKey: "<FILE_KEY>",
  nodeId: "<NODE_ID>"    // URL의 node-id 파라미터
)

• 레이아웃 구조, 스타일, 좌표, 타이포그래피 등 전체 디자인 데이터 반환
• depth 옵션으로 트리 탐색 깊이 제어 가능

2. Framelink MCP — 이미지 에셋 다운로드

mcp__framelink-figma__download_figma_images(
  fileKey: "<FILE_KEY>",
  nodeId: "<NODE_ID>",
  outputDir: "public/assets/"
)

• 아이콘, 일러스트 등 이미지 에셋을 로컬에 다운로드

3. 공식 Figma MCP — 노드 시각 확인

mcp__figma__view_node(
  file_key: "<FILE_KEY>",
  node_id: "<NODE_ID>"   // "1:46" 형식
)

• 특정 노드의 썸네일 이미지 확인용

Figma URL 파싱

https://www.figma.com/design/<FILE_KEY>/Title?node-id=<NODE_ID>

추출할 데이터:

• absoluteBoundingBox → 각 요소의 정확한 x, y, width, height
• fills → 배경색, 그라디언트
• style → font-family, font-size, font-weight, line-height, letter-spacing
• cornerRadius → border-radius
• effects → box-shadow
• strokes → border

보조: curl 직접 호출 (MCP 불가 시 fallback)