Figma to Code Skill
이 스킬은 피그마 설계를 분석하여 Seoul Moment 프로젝트의 표준 기술 스택과 컨벤션에 맞는 React 코드로 변환하는 가이드를 제공합니다.
프로젝트 표준 기술 스택
- Framework: Next.js (App Router) 또는 Vite (React)
- Styling: Tailwind CSS v4
- UI Library:
@seoul-moment/ui(내부 컴포넌트 라이브러리) - Icons: Lucide React (또는 프로젝트 내 SVG)
- State Management: Zustand
- Data Fetching: TanStack Query (React Query)
워크플로우
- 디자인 분석 (
get_design_context): 피그마 URL 또는 Node ID를 사용하여 디자인 메타데이터와 코드를 추출합니다. - 컴포넌트 매핑: 디자인의 각 요소를
@seoul-moment/ui컴포넌트로 매핑합니다. - 레이아웃 구조화:
VStack,HStack,Flex컴포넌트를 사용하여 레이아웃을 구성합니다. - 스타일링 적용: Tailwind v4 유틸리티 클래스를 사용하여 세부 스타일을 조정합니다.
- 인터랙션 및 상태 추가: 필요한 경우 클릭 핸들러, 로딩 상태, Zustand 스토어 연결 등을 추가합니다.
코드 변환 원칙
1. @seoul-moment/ui 우선 사용
디자인 요소가 UI 라이브러리에 존재하는 경우, 직접 구현하는 대신 라이브러리 컴포넌트를 사용합니다.
Button,Input,Badge,Card,Dialog,Tabs등- 레이아웃:
VStack(세로),HStack(가로),Flex(유연한 레이아웃)
2. 레이아웃 컨벤션
- 마진(Margin) 대신 Gap 사용을 권장합니다 (
VStack,HStack의gap속성 활용). - 패딩(Padding)은 컨테이너 컴포넌트에서 Tailwind 클래스로 처리합니다 (
p-4,px-6등).
3. 스타일링 (Tailwind v4)
- 하드코딩된 색상값 대신 Tailwind 테마 변수를 사용합니다.
- 폰트 크기, 간격 등은 테마 시스템에 정의된 값을 따릅니다.
4. 코드 구조
- Client Component: 인터랙션이 필요한 경우 파일 상단에
'use client';를 명시합니다. - Props: 컴포넌트의 Props 타입을 명확히 정의합니다.
예시: 변환 패턴
가로 배치 (Header/Action Bar)
tsx1import { HStack, Button } from "@seoul-moment/ui"; 2 3export function Header() { 4 return ( 5 <HStack justify="between" align="center" className="w-full py-4 px-6 border-b border-neutral-100"> 6 <h1 className="text-xl font-bold">제목</h1> 7 <HStack gap={8}> 8 <Button variant="outline">취소</Button> 9 <Button>저장</Button> 10 </HStack> 11 </HStack> 12 ); 13}
세로 배치 (Card List)
tsx1import { VStack, Card } from "@seoul-moment/ui"; 2 3export function ProfileCard() { 4 return ( 5 <Card className="p-6"> 6 <VStack gap={16} align="center"> 7 <div className="w-20 h-20 rounded-full bg-neutral-200" /> 8 <VStack gap={4} align="center"> 9 <span className="text-lg font-semibold">사용자 이름</span> 10 <span className="text-sm text-neutral-500">user@example.com</span> 11 </VStack> 12 </VStack> 13 </Card> 14 ); 15}
참고 사항
- 디자인의 복잡도가 높은 경우, 작은 단위의 컴포넌트로 분할하여 구현합니다.
- 이미지 자산은
public/디렉토리에 배치하고 Next.jsImage컴포넌트를 사용합니다.
