3.0 KiB
3.0 KiB
name, description
| name | description |
|---|---|
| markup-figma | Figma URL 또는 Figma MCP로 추출한 디자인 데이터를 받아 Nuxt SFC + Tailwind CSS 마크업으로 자동 변환합니다. 다음 상황에서 반드시 사용하세요: - "이 Figma 마크업해줘", "Figma 디자인 컴포넌트로 만들어줘" - Figma URL 또는 링크를 받고 HTML/Vue 구현을 요청받았을 때 - 피그마 시안 기반 반응형 마크업이 필요할 때 |
Figma → 마크업 변환 (markup-figma)
Figma 디자인 데이터 → Nuxt SFC + Tailwind 마크업 자동 변환.
언제 사용하는가
- 디자이너로부터 Figma URL을 받아 퍼블리싱을 시작할 때
- Figma MCP가 Claude Code에 연결되어 있을 때
- Figma 없이 스크린샷/Export 이미지로 구현할 때
입력
- Figma 프레임 URL 또는 노드 ID
- (선택) 브레이크포인트 요건, 이미지 에셋 CDN 경로
작업 순서
Phase 1: Figma 데이터 추출
Figma MCP 사용 가능 시
Figma URL → MCP로 레이어 트리, 스타일, 치수 자동 추출
추출 항목:
- 컬러 HEX값 (RGBA → HEX 변환)
- 폰트: 패밀리, 사이즈(px), weight, 줄간격
- 레이아웃: width/height, padding, gap
- 컴포넌트 이름 → Vue 컴포넌트 이름 매핑 (
PascalCase) - 이미지 에셋 URL
MCP 없이 진행 시
사용자에게 아래 정보를 요청한다:
- 섹션별 스크린샷 (모바일 / 데스크톱 분리)
- 컬러 HEX, 폰트 스펙, 여백(px)
- CTA 링크 및 버튼 텍스트
Phase 2: Tailwind 매핑
| Figma 값 | Tailwind 클래스 예시 |
|---|---|
width: 320px |
w-80 또는 w-[320px] |
padding: 16px 24px |
py-4 px-6 |
gap: 12px |
gap-3 |
font-size: 14px |
text-sm |
border-radius: 8px |
rounded-lg |
color: #1A1A1A |
text-[#1A1A1A] 또는 디자인 토큰 |
- Tailwind 디자인 토큰(
tailwind.config.ts)이 있으면 임의값 대신 토큰 사용 - 임의값(
w-[123px])은 디자인 시스템에 없는 값에만 사용
Phase 3: 컴포넌트 구조 결정
Figma 컴포넌트 → Vue 파일 매핑:
- Figma 상위 프레임 → 페이지 레이아웃 (
pages/또는layouts/) - Figma Instance →
components/파일 - 반복 컴포넌트 → Props로 추상화
Phase 4: SFC 코드 생성
markup-base Phase 3~5 동일 적용 (클래스 순서, ARIA, SFC 구조).
반응형 처리:
- Figma Mobile 프레임 → base 클래스
- Figma Desktop 프레임 →
lg:접두사
Phase 5: 검수 체크리스트
- 폰트 스펙 일치 여부 (px → rem 변환 확인)
- 이미지
alt텍스트 작성 여부 - 인터랙션 요소 ARIA 속성 확인
- Tailwind 클래스 7단계 순서 준수
출력 형식
## Figma 마크업: <프레임명>
### 추출된 디자인 정보
- 컬러: [HEX 목록]
- 폰트: [패밀리 / 사이즈 목록]
- 브레이크포인트: [mobile / desktop 치수]
### 코드
\`\`\`vue
...
\`\`\`
### 미확인 항목
- [ ] [에셋 URL, 링크 등 확정 필요 항목]