irinabandura/claude-skill-figma-implement

Figma Implement — Design to Code

모든 Figma 디자인을 프로덕션 코드로 변환합니다. 가이드 워크플로우가 프로젝트를 발견하고, 디자인 시스템 컴포넌트를 코드 컴포넌트에 매핑하며, 프로젝트 규칙에 맞는 코드를 생성합니다.

활성화 시

현재 모델을 확인합니다. Opus가 아니면 사용자에게 경고합니다:

"알림 — 현재 [모델 이름] 을(를) 사용 중입니다. 이 플러그인은 정확한 디자인-코드 변환을 위해 Claude Opus와 가장 잘 작동합니다. 전환하려면 다음을 실행하세요:

/model opus

또는 원하는 경우 현재 모델로 계속 진행하세요."

이미 Opus라면 이 메시지를 조용히 건너뜁니다.

그런 다음 가이드 워크플로우를 시작합니다. 한 번에 하나의 질문을 하고 각 응답을 기다립니다.

---

0단계: Figma 연결

Figma MCP가 연결되었는지 확인합니다.

mcp__figma__whoami 또는 mcp__plugin_figma_figma__whoami를 조용히 호출해 봅니다. 성공하면 1단계로 건너뜁니다.

실패하는 경우:

"Figma MCP가 연결되지 않았습니다. 플러그인 README(Figma MCP 설정 섹션)의 설정 지침을 따르세요 — Figma 액세스 토큰과 하나의 CLI 명령이 필요합니다. 준비가 되면 알려주시면 확인하겠습니다."

응답을 기다립니다. whoami를 다시 시도합니다. 작동하면 계속 진행합니다. 여전히 실패하면 토큰을 확인하고 Claude Code를 다시 시작하도록 제안합니다.

---

1단계: 프로젝트 발견

프로젝트를 스캔하여 스택, 규칙 및 기존 컴포넌트를 파악합니다.

"코드 작성 방식을 이해하기 위해 프로젝트를 스캔하겠습니다..."

다음 검사를 조용히 실행합니다:

1a. 프레임워크 탐지

package.json 읽기 → 식별: React? Vue? Svelte? Next.js? Remix? Astro?
tsconfig.json 읽기 → TypeScript 또는 JavaScript?

1b. CSS 프레임워크 탐지

확인: tailwind.config.* → Tailwind CSS
확인: *.module.css → CSS Modules
확인: styled-components 또는 @emotion → CSS-in-JS
확인: .scss 파일 → Sass
확인: 일반 .css → 바닐라 CSS

1c. 컴포넌트 라이브러리 탐지

package.json dependencies 읽기:
  @mui/* → Material UI
  @chakra-ui/* → Chakra UI
  antd → Ant Design
  @eds/* → Epic Design System
  @radix-ui/* → Radix
  사용자 정의 → src/components/ 스캔하여 내부 라이브러리 확인

1d. 기존 컴포넌트 인벤토리

Glob: src/components/**/*.{tsx,jsx,vue,svelte}
각각에 대해: 컴포넌트 이름, props 인터페이스, 사용 패턴 추출

1e. 코드 규칙

파일 이름 확인: PascalCase.tsx? kebab-case.tsx? 폴더 내 index.tsx?
가져오기 스타일 확인: 절대 경로(@/components) 또는 상대 경로(../components)?
내보내기 스타일 확인: default export 또는 named export?

발견 결과를 제시합니다:

"프로젝트에서 찾은 내용은 다음과 같습니다:

프레임워크: [React/Vue/등] with [TypeScript/JavaScript] CSS: [Tailwind/CSS Modules/등] 컴포넌트 라이브러리: [MUI/Chakra/사용자 정의/없음] 기존 컴포넌트: [N]개가 src/components/에 있습니다 [상위 10~15개 컴포넌트 이름 나열] 규칙: [PascalCase 파일, 절대 경로 가져오기, default export 등]

이것이 올바른가요? 프로젝트 설정에 대해 알려야 할 사항이 있나요?"

응답을 기다립니다. 사용자가 수정하는 사항이 있으면 이해를 조정합니다.

---

2단계: Figma 디자인 가져오기

"Figma 디자인 URL을 공유해 주세요(특정 프레임/노드가 선택된 상태)."

응답을 기다립니다. URL에서 fileKey와 nodeId를 추출합니다.

그런 다음 디자인을 가져옵니다:

get_design_context({ nodeId, fileKey })
get_screenshot({ nodeId, fileKey })

스크린샷을 보여줍니다:

"구현할 디자인은 다음과 같습니다: [스크린샷]

다음을 볼 수 있습니다: [섹션 및 요소에 대한 간략한 설명]

이것이 올바른 프레임인가요?"

확인을 기다립니다.

---

3단계: 컴포넌트 매핑

모든 Figma 요소를 코드 컴포넌트에 매핑합니다. 이것은 중요한 단계입니다.

"디자인을 코드 컴포넌트에 매핑하겠습니다..."

Figma 디자인의 각 요소에 대해:

1. 프로젝트에 일치하는 컴포넌트가 있는지 확인합니다(1d 단계 인벤토리에서).
2. 있으면 → 올바른 props와 함께 재사용합니다.
3. 없으면 → 프로젝트 규칙에 따라 새 컴포넌트를 생성합니다.

매핑 결과를 제시합니다:

"구현 계획은 다음과 같습니다:

기존 컴포넌트 재사용:

Figma 요소	사용자 컴포넌트	설정할 Props
기본 버튼	<Button variant="primary">	label, onClick
텍스트 입력	<TextField>	label, placeholder
아바타	<Avatar>	src, name, size
...	...	...

생성할 새 컴포넌트:

Figma 요소	새 컴포넌트	위치
통계 카드	<StatsCard>	src/components/StatsCard.tsx
...	...	...

[N]개 요소는 기존 컴포넌트를 재사용합니다. [M]개의 새 컴포넌트가 필요합니다.

계속 진행할까요?"

확인을 기다립니다.

---

4단계: 섹션별 구현

한 번에 모두 구현하지 않고 증분 방식으로 구축합니다:

1. 레이아웃 구조 — 외부 컨테이너, 그리드, 반응형 중단점
2. 내비게이션 — 헤더, 사이드바, 브레드크럼(가능하면 기존 것 재사용)
3. 기본 콘텐츠 — 주요 기능 영역
4. 보조 콘텐츠 — 사이드바, 푸터
5. 데이터 콘텐츠 — 테이블, 카드, 실제 데이터가 있는 폼

각 섹션 후:

• 파일 저장
• dev 서버가 실행 중이면 브라우저에서 확인
• Figma 스크린샷과 비교

구현 규칙

1. 기존 컴포넌트를 재사용하세요. Button이 이미 존재하면 새로 만들지 마세요.
2. 규칙을 따르세요. 파일 이름, 가져오기, 내보내기 — 프로젝트가 이미 하는 방식을 따르세요.
3. CSS 방식을 일치시키세요. Tailwind라면 Tailwind를, CSS Modules라면 CSS Modules를 사용하세요. 혼합하지 마세요.
4. Figma 사양이 진리입니다. 간격, 색상, 타이포그래피를 정확히 일치시키세요.
5. 위치 계산: 절대 위치 요소의 경우 CSS 위치 = Figma 자식 − Figma 부모. 자동 레이아웃에는 flexbox/grid를 사용하세요.
6. SVG 정리. SVG에서 preserveAspectRatio="none"을 제거하세요.

---

5단계: Playwright로 검증

"구현이 완료되었습니다. 디자인과 일치하는지 확인하겠습니다..."

Playwright MCP를 사용하여 구현을 Figma와 비교합니다:

1. 알려지지 않은 경우 dev 서버 URL을 묻습니다(예: http://localhost:5173)
2. 이동: browser_navigate({ url })
3. 뷰포트를 Figma 프레임 크기에 맞춤: browser_resize({ width: [figma width], height: [figma height] })
4. 브라우저 스크린샷 촬영: browser_take_screenshot({ type: "png" })
5. 2단계의 Figma 스크린샷과 비교
6. 콘솔 오류 확인: browser_console_messages({ level: "error" })
7. 접근성 스냅샷 가져오기: browser_snapshot() — 구조가 일치하는지 확인

"비교 결과는 다음과 같습니다:

• Figma: [스크린샷]
• 브라우저: [스크린샷]
• 콘솔 오류: [오류가 있거나 '없음']
• 불일치: [차이점 목록, 또는 '이상적입니다!']

조정할 사항이 있나요, 아니면 /figma-validate로 전체 검증을 실행할까요?"

---

중요 규칙

• 0단계는 필수입니다. Figma 연결 확인을 절대 건너뛰지 마세요.
• 1단계는 프로젝트당 한 번 실행됩니다. 세션 동안 발견 결과를 캐시하세요.
• 3단계 매핑은 확인이 필요합니다. 사용자가 계획을 승인할 때까지 코드를 생성하지 마세요.
• 재생성이 우선입니다. 항상 먼저 기존 컴포넌트를 확인하세요.
• 프로젝트에 맞추세요. 새로운 패턴, 프레임워크 또는 규칙을 강요하지 마세요.
• 섹션별로 구현하세요. 전체 페이지를 한 번에 생성하지 마세요.