execute-figma-plan

Execute Figma Plan

.claude/plans/design/에서 계획서를 읽고 계획서의 구현 순서에 따라 직접 코드를 구현한다.

🔑 활성화 조건

활성화 키워드

• "피그마 계획서 실행", "계획서대로 구현", "디자인 구현 시작"
• "figma plan 실행", "execute figma plan"
• .claude/plans/design/ 경로의 계획서 파일이 언급될 때

선행 조건

• figma-plan 또는 figma-reference-plan으로 계획서가 이미 작성되어 있어야 함
• 계획서가 없으면 먼저 계획서 작성 스킬을 안내

사용하지 않을 때

• 계획서 없이 피그마에서 바로 구현 → figma-plan 먼저 실행
• 피그마 없이 자유 디자인 → frontend-design

워크플로우

Step 1: 계획서 확인

.claude/plans/design/에서 해당 계획서를 Read로 읽는다. 계획서에 피그마 URL이 있으면 get_screenshot으로 시각적 기준점을 확보한다.

Step 2: 프로젝트 컨벤션으로 변환

Figma MCP 출력(React + Tailwind)은 참고용. 이 프로젝트 기준으로 변환:

• Tailwind → Emotion CSS (style.ts 파일로 분리)
• 색상 → @/style의 color 토큰
• 타이포그래피 → @/style의 typography 토큰
• 기존 컴포넌트(@/common/components, @/ds/components) 재사용
• 라우팅/상태관리/데이터 페칭은 기존 패턴 따르기

Step 3: 계획서 순서대로 구현

계획서의 "구현 순서" 섹션을 따라 파일을 생성/수정한다.

Step 4: 시각적 일치 검증

구현 완료 전 Figma 스크린샷과 비교:

• 레이아웃, 간격, 정렬, 크기
• 타이포그래피 (폰트, 크기, 굵기, 행간)
• 색상
• 인터랙티브 상태 (hover, active, disabled)

에셋 규칙

• localhost URL로 제공된 이미지/SVG는 그대로 사용
• 새 아이콘 패키지 추가 금지
• localhost URL이 있는 경우 플레이스홀더 생성 금지

코드 스타일 규칙

• CSS는 별도 style.ts 파일로 분리, .tsx에 직접 작성 금지
• TypeScript 코드에 주석 작성 금지
• Zod 스키마에 .passthrough() 금지
• Promise 반환 시 void 접두사
• useEffect 내부에서 setState 직접 호출 금지