implement-design

작성자: figma

Figma 디자인을 픽셀 단위로 완벽하게 일치하는 프로덕션 준비 코드로 변환합니다. Figma MCP 서버 연결과 파일 키 및 노드 ID가 포함된 Figma URL이 필요하여 디자인 컨텍스트, 스크린샷, 에셋을 추출합니다. 7단계 구조화된 워크플로우: URL 파싱, 디자인 컨텍스트 가져오기, 시각적 참조 캡처, 에셋 다운로드, 프로젝트 규칙에 맞게 변환, 1:1 일치 달성, Figma에 대해 검증합니다. 중복보다 디자인 시스템 재사용을 우선시하며, Figma 토큰을 프로젝트 디자인에 매핑합니다...

npx skills add https://github.com/figma/mcp-server-guide --skill implement-design

ZIP 다운로드 GitHub

figma의 다른 스킬

video-interaction-mapper

이 스킬은 사용자가 UI 화면 녹화를 분석하고 상호작용 상태를 Figma에 매핑해 달라고 요청할 때 사용해야 합니다. "비디오를 넣어줘..."와 같은 요청에 의해 트리거됩니다.

figma-code-connect

Figma 컴포넌트를 코드 스니펫에 매핑하는 Figma Code Connect 템플릿 파일을 생성하고 유지 관리합니다. 사용자가 Code Connect, Figma 컴포넌트를 언급할 때 사용합니다.

create-design-system-rules

프로젝트 전반에 걸쳐 일관된 Figma-to-code 구현을 위한 맞춤형 디자인 시스템 규칙입니다. 컴포넌트 구성, 스타일링, 디자인 토큰, 에셋 처리를 위한 프로젝트별 규칙을 생성하여 AI 에이전트가 일관된 코드를 생성하도록 안내합니다. CLAUDE.md(Claude Code용), AGENTS.md(Codex CLI용), .cursor/rules/figma-design-system.mdc(Cursor용)의 세 가지 규칙 파일 형식을 지원합니다. 규칙 생성을 위해 Figma MCP 서버 연결과 기존 패턴을 발견하기 위한 코드베이스 분석이 필요합니다...

figma-implement-motion

Figma의 모션과 애니메이션을 프로덕션에 바로 적용 가능한 애플리케이션 코드로 변환합니다. Figma 디자인에서 애니메이션/모션을 구현할 때 사용하세요 — 사용자가 언급하는 경우…

SwiftUI ↔ Figma 변환. 사용자가 Swift, SwiftUI, iOS, iPhone 또는 iPad를 언급할 때마다 사용하세요 — 어느 방향이든 — Figma 디자인을 변환하여…

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

이 스킬은 에이전트가 Slides 컨텍스트에서 Figma의 use_figma MCP 도구를 사용할 수 있도록 도와줍니다. Figma 사용에 대한 기본 컨텍스트를 제공하는 figma-use와 함께 사용할 수 있습니다.

figma-use-figjam

이 스킬은 에이전트가 FigJam 컨텍스트에서 Figma의 use_figma MCP 도구를 사용할 수 있도록 도와줍니다. 사용에 대한 기본 컨텍스트를 제공하는 figma-use와 함께 사용할 수 있습니다…