figma-implement-design목적, 사용법 및 출처

이 스킬의 기능

Figma 디자인을 실제 운영 환경에서 사용할 수 있는 애플리케이션 코드로 변환합니다.1:1시각적 충실도. Figma 파일에서 UI 코드를 구현할 때, 사용자가 "디자인 구현", "코드 생성", "컴포넌트 구현"을 언급하거나 Figma URL을 제공하거나 Figma 사양에 맞는 컴포넌트를 빌드하도록 요청할 때 사용합니다. Figma 캔버스의 경우 다음을 통해 작성합니다.use_figma, 사용figma-use.

업스트림 워크플로우 작동 방식

get_design_context(fileKey=":fileKey", nodeId="1-2")

요구 사항 및 설정

제한 사항 및 품질 검사

안전한 시험 사용부터 시작하세요

1. 지원되는 호스트와 저장소 설치 지침을 확인하세요. 스킬 디렉토리와 해당 디렉토리에서 참조하는 스크립트, 자산 및 문서를 함께 보관하세요.SKILL.md단독으로는 종속성을 생략할 수 있습니다.
2. 에이전트에 실제 입력값, 원하는 출력값 및 승인 기준을 제공하십시오. 호출 구문 및 사용 가능한 도구는 호스트에 따라 다르므로 이 사이트는 범용 설치 명령을 제공하지 않습니다.
3. 원본 워크플로를 임시 프로젝트 또는 복사본에서 테스트해 보세요. 파일, 원격 서비스 또는 유료 리소스를 변경하는 작업은 허용하기 전에 검토하십시오.
4. 출력 결과를 원본 품질 검사 및 자체 요구 사항에 맞춰 검증하십시오. 트리거가 성공적으로 작동했거나 저장소의 별점 수가 높다고 해서 반드시 올바른 결과가 나오는 것은 아닙니다.

기술 형식 및 디렉토리 사양 ↗

원문에서 더 자세한 내용을 읽어보세요.

• 개요
• 기술 한계
• 필수 조건
• 필수 워크플로
• 옵션 A: Figma URL에서 파싱
• 옵션 B: Figma 데스크톱 앱에서 현재 선택 항목 사용 (figma-desktop MCP에서만 사용 가능)
• 단계2디자인 컨텍스트 가져오기
• 단계3: 시각적 참조 캡처
• 단계4필수 에셋 다운로드
• 단계5프로젝트 규칙에 맞춰 번역하세요
• 단계6: 성취하다1:1시각적 동등성
• 단계7Figma와 비교하여 유효성을 검사합니다.
• 구성 요소 조직
• 설계 시스템 통합
• 코드 품질
• 예1버튼 컴포넌트 구현하기
• 예2대시보드 레이아웃 구축하기
• 항상 맥락부터 시작하세요
• 점진적 검증
• 문서 편차
• 여가 활동보다 재활용이 더 중요하다
• 디자인 시스템 우선
• 문제: Figma 출력 결과가 잘립니다
• 문제: 구현 후 설계와 설계가 일치하지 않음
• 문제: 에셋이 로드되지 않음
• 문제: 디자인 토큰 값이 Figma와 다릅니다.
• 설계 구현 이해하기
• 추가 자료

관련 기술

• chatgpt-appsopenai/skills
• figmaopenai/skills
• figma-code-connect-componentsopenai/skills
• figma-create-design-system-rulesopenai/skills

번역 및 범위

이 독서 안내서는 고정된 상류 지역에서 발췌한 구절들을 소개합니다.SKILL.md본 번역은 보조 번역이며, 완전한 설명서 또는 호환성 테스트를 보장하는 것은 아닙니다. 사용 전에 원본 및 참조 파일을 반드시 읽어 주십시오.

이 소개글은 아래 고정된 버전을 참조하며, 현재 저장소 활동 및 수집 시간은 별도로 표시됩니다.

고정된 소스

원문을 읽어보세요 ↗

출처 검색됨

2026-10-29T09:32:23Z

소스 커밋

49f948faa9258a0c61caceaf225e179651397431

출처 SHA-256

63f3d12d444547bbf68c10a12982b1f42e0f6e26fc074324564a13184d4b15ad