108 lines
3.0 KiB
Markdown
108 lines
3.0 KiB
Markdown
---
|
|
name: markup-figma
|
|
description: |
|
|
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, 링크 등 확정 필요 항목]
|
|
```
|