설계 증거(코드 스냅샷, 구조, 자산, 토큰, codegen 구성)의 유일한 소스로 TemPad Dev MCP를 사용하여 Figma 선택 또는 제공된 nodeId에서 통합 지원 UI 코드를 구현합니다. 먼저 대상 저장소 스택과 규칙을 감지한 다음 새로운 종속성을 추가하지 않고 TemPad Dev의 Tailwind와 유사한 JSX/Vue IR을 프로젝트 네이티브 코드로 변환합니다. 주요 스타일이나 치수를 추측하지 마세요. 필요한 증거가 누락/모순되거나 repo 정책에 따라 자산을 처리할 수 없는 경우 명시적인 경고 및 누락과 함께 안전한 기반을 중지하거나 배송하십시오.
명령줄에서 figma-design-to-code AI 스킬을 개발 환경에 빠르게 설치
출처: ecomfe/tempad-dev.
This skill requires TemPad Dev MCP. If tempad-dev: tools are unavailable/inactive/unauthorized, stop and tell the user to install TemPad Dev MCP and ensure it is activated in the TemPad Dev panel in the Figma design file.
TemPad Dev outputs Tailwind-like IR in either JSX or Vue. Treat MCP outputs as design facts. Never guess key styles.
Never invent: colors, typography (size/weight/line-height/letter-spacing), spacing, radius, borders, shadows, gradients, opacity/overlays, blur.
설계 증거(코드 스냅샷, 구조, 자산, 토큰, codegen 구성)의 유일한 소스로 TemPad Dev MCP를 사용하여 Figma 선택 또는 제공된 nodeId에서 통합 지원 UI 코드를 구현합니다. 먼저 대상 저장소 스택과 규칙을 감지한 다음 새로운 종속성을 추가하지 않고 TemPad Dev의 Tailwind와 유사한 JSX/Vue IR을 프로젝트 네이티브 코드로 변환합니다. 주요 스타일이나 치수를 추측하지 마세요. 필요한 증거가 누락/모순되거나 repo 정책에 따라 자산을 처리할 수 없는 경우 명시적인 경고 및 누락과 함께 안전한 기반을 중지하거나 배송하십시오. 출처: ecomfe/tempad-dev.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code설계 증거(코드 스냅샷, 구조, 자산, 토큰, codegen 구성)의 유일한 소스로 TemPad Dev MCP를 사용하여 Figma 선택 또는 제공된 nodeId에서 통합 지원 UI 코드를 구현합니다. 먼저 대상 저장소 스택과 규칙을 감지한 다음 새로운 종속성을 추가하지 않고 TemPad Dev의 Tailwind와 유사한 JSX/Vue IR을 프로젝트 네이티브 코드로 변환합니다. 주요 스타일이나 치수를 추측하지 마세요. 필요한 증거가 누락/모순되거나 repo 정책에 따라 자산을 처리할 수 없는 경우 명시적인 경고 및 누락과 함께 안전한 기반을 중지하거나 배송하십시오. 출처: ecomfe/tempad-dev.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/ecomfe/tempad-dev