Figma 파일에서 디자인 토큰, 화면 구조 및 시각적 참조를 추출합니다. 누군가가 Figma 토큰, 변수, 디자인 시스템 추출 또는 화면 캡처를 언급할 때 figma.com URL이 대화에 나타날 때마다 사용하세요. get_variable_defs, get_design_context, get_metadata 또는 get_screenshot을 호출할 때도 사용합니다. 이 기술은 이를 효과적으로 사용하는 방법을 정의합니다. "Figma에서 가져오기", "디자인 추출", "Figma 변수", "Figma에서 디자인 토큰", "화면 캡처" 또는 figma.com/design 링크와 같은 문구에 대해 트리거됩니다. 사용자가 별다른 설명 없이 그냥 Figma 링크를 붙여넣었다고 해도 이 스킬을 활용해 파싱하고 무엇을 추출할지 결정해보세요.
명령줄에서 figma-design-extraction AI 스킬을 개발 환경에 빠르게 설치
출처: petbrains/mvp-builder.
Extract design tokens, screen structure, and visual references from Figma files.
Process: CHECK → PARSE → DISCOVER → EXTRACT → ORGANIZE
The goal is to pull structured, source-tracked design data from Figma for use in design-setup pipelines, conflict resolution, and downstream code generation. Every extracted value carries its source tag — this matters because downstream consumers (like design-setup Phase 3) need to know whether a token came from an explicit Figma Variable definition or was inferred from applied styles, since that affects conflict...
Figma 파일에서 디자인 토큰, 화면 구조 및 시각적 참조를 추출합니다. 누군가가 Figma 토큰, 변수, 디자인 시스템 추출 또는 화면 캡처를 언급할 때 figma.com URL이 대화에 나타날 때마다 사용하세요. get_variable_defs, get_design_context, get_metadata 또는 get_screenshot을 호출할 때도 사용합니다. 이 기술은 이를 효과적으로 사용하는 방법을 정의합니다. "Figma에서 가져오기", "디자인 추출", "Figma 변수", "Figma에서 디자인 토큰", "화면 캡처" 또는 figma.com/design 링크와 같은 문구에 대해 트리거됩니다. 사용자가 별다른 설명 없이 그냥 Figma 링크를 붙여넣었다고 해도 이 스킬을 활용해 파싱하고 무엇을 추출할지 결정해보세요. 출처: petbrains/mvp-builder.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/petbrains/mvp-builder --skill figma-design-extractionFigma 파일에서 디자인 토큰, 화면 구조 및 시각적 참조를 추출합니다. 누군가가 Figma 토큰, 변수, 디자인 시스템 추출 또는 화면 캡처를 언급할 때 figma.com URL이 대화에 나타날 때마다 사용하세요. get_variable_defs, get_design_context, get_metadata 또는 get_screenshot을 호출할 때도 사용합니다. 이 기술은 이를 효과적으로 사용하는 방법을 정의합니다. "Figma에서 가져오기", "디자인 추출", "Figma 변수", "Figma에서 디자인 토큰", "화면 캡처" 또는 figma.com/design 링크와 같은 문구에 대해 트리거됩니다. 사용자가 별다른 설명 없이 그냥 Figma 링크를 붙여넣었다고 해도 이 스킬을 활용해 파싱하고 무엇을 추출할지 결정해보세요. 출처: petbrains/mvp-builder.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/petbrains/mvp-builder --skill figma-design-extraction 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/petbrains/mvp-builder