샘플

현재 Figma에서 선택된 컴포넌트를 React + TypeScript + Tailwind로 만들어줘. 파일은 src/components/UserCard.tsx로 생성해줘.

1. get_selection() → { nodeId: "123:45", name: "UserCard" } 2. get_code(nodeId) → JSX/CSS 구조 3. get_variable_defs(nodeId) → { color.primary: "#2563EB", ... } 4. get_image(nodeId) → PNG (LLM 보조)

// src/components/UserCard.tsx type UserCardProps = { name: string role: string avatarUrl: string } export function UserCard({ name, role, avatarUrl }: UserCardProps) { return ( <div className="flex items-center gap-3 rounded-lg bg-white p-4 shadow-sm"> <img src={avatarUrl} alt={name} className="h-12 w-12 rounded-full" /> <div> <p className="text-base font-semibold text-gray-900">{name}</p> <p className="text-sm text-gray-500">{role}</p> </div> </div> ) }

현재 페이지에서 사용된 모든 Color/Spacing/Typography Variable을 tokens.ts 파일로 export해줘.

// src/design-system/tokens.ts export const tokens = { color: { primary: '#2563EB', secondary: '#10B981', 'text-primary': '#111827', 'text-secondary': '#6B7280', }, spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24, }, fontSize: { sm: 14, base: 16, lg: 18, xl: 20, }, } as const

선택한 "Dashboard" 프레임을 Next.js App Router 구조로 만들어줘. - app/dashboard/page.tsx - 섹션을 SidebarNav, MetricCard, ChartPanel 컴포넌트로 분리 - 기존 src/components의 Button, Card 컴포넌트 재사용

선택한 Button 컴포넌트가 코드의 어떤 컴포넌트와 매핑되어 있는지 알려줘.

get_code_connect_map(nodeId) → { figmaComponent: "Button/Primary", codeComponent: "@/components/ui/button", importPath: "import { Button } from '@/components/ui/button'", propsMapping: { variant: "primary", size: "md" } }

선택한 LoginForm을 코드로 변환했을 때 누락되거나 다른 부분이 있을지 검토해줘. 스크린샷과 변환 결과를 비교해줘.