Figma 컴포넌트 → Vue 컴포넌트 변환 템플릿 프롬프트

현재 Figma에서 선택된 컴포넌트를 정확히 동일한 디자인과 기능을 가진 Vue 3 컴포넌트로 구현해주세요.

• REQUIRED: 먼저 다음 MCP 도구들을 사용하여 Figma 정보를 수집하세요:
  • mcp__figma-dev-mode-mcp-server__get_code: 현재 선택된 컴포넌트의 코드 생성
  • mcp__figma-dev-mode-mcp-server__get_image: 컴포넌트 이미지 확인
  • mcp__figma-dev-mode-mcp-server__get_variable_defs: 디자인 토큰 정보 수집
• Figma의 Properties, 색상, 폰트, 간격, 보더 등을 100% 정확하게 구현
• Figma 컴포넌트의 모든 상태(variants, properties)를 Vue props로 매핑

// 컴포넌트 구조 예시
<template>
  <div class="component-name" data-testid="component-name">
    <!-- Figma 구조와 정확히 일치하는 HTML 구조 -->
  </div>
</template>

<script setup lang="ts">
// 1. Figma Properties를 기반으로 한 TypeScript 인터페이스
interface ComponentProps {
  // Figma의 모든 Properties를 boolean, string, object 등으로 매핑
  // 예: variant?: 'primary' | 'secondary'
  // 예: text?: string
  // 예: items?: Array<{title: string, data: string}>
}

// 2. Props 정의 (기본값은 Figma의 기본 상태)
const props = withDefaults(defineProps<ComponentProps>(), {
  // Figma 기본값들
})

// 3. 이벤트 정의
const emit = defineEmits<{
  click: [event: MouseEvent]
  close: []
  // 기타 상호작용 이벤트들
}>()

// 4. 동적 데이터 처리 로직
</script>

<style scoped>
/* Figma 디자인 토큰을 CSS 변수로 정의 */
.component-name {
  --token-name: value;
  /* Figma와 정확히 일치하는 스타일 */
}
</style>

3. 개발자 친화적 개선사항

• 동적 데이터: 하드코딩된 텍스트를 props로 받도록 구현

• 이벤트 처리: 모든 상호작용 요소에 이벤트 emit 구현

• 접근성: 적절한 ARIA 속성, 키보드 내비게이션, data-testid 추가

• 타입 안전성: 모든 props와 emit에 TypeScript 타입 정의

  4. 테스트 파일 생성

  Unit Test (ComponentName.spec.ts)

  // 다음 테스트 케이스들을 포함: // - 기본 렌더링 테스트 // - 모든 props 조합 테스트
  // - 이벤트 emit 테스트 // - 접근성 테스트 // - 조건부 렌더링 테스트

  Storybook Stories (ComponentName.stories.ts)

  // 다음 스토리들을 포함: // - Playground (모든 controls) // - Default // - 각 variant/state별 스토리 // - Edge cases 스토리 // - Interactive 테스트가 포함된 play 함수

  5. 프로젝트 구조 준수

• 현재 프로젝트의 코딩 컨벤션 따르기

• 기존 컴포넌트 구조와 일관성 유지

• Vue 3 Composition API + TypeScript 사용

• Scoped CSS 사용 (Tailwind 미사용)

  제약사항

• Figma 디자인에서 절대 벗어나지 않기

• 임의로 기능 추가하거나 디자인 변경 금지

• 모든 Figma Properties는 Vue props로 완전히 매핑되어야 함

• 프로젝트의 기존 패턴과 충돌하지 않아야 함

  결과물

  1. ComponentName.vue - 메인 컴포넌트
  2. ComponentName.spec.ts - 단위 테스트
  3. ComponentName.stories.ts - 스토리북 스토리

모든 파일은 src/components/ 디렉토리에 생성하고, 기존 컴포넌트들과 동일한 품질과 구조를 유지해주세요.