MCP 서버 도구를 사용하여 Figma 디자인을 생산 가능한 코드로 변환합니다. 사용자가 Figma URL을 제공하거나, 디자인에서 코드로의 변환을 요청하거나, Figma 모형 구현을 요청하거나, Figma 파일에서 디자인 토큰 및 시스템 값을 추출해야 하는 경우 이 기술을 사용하세요. 프레임, 구성 요소 및 전체 디자인 파일을 사용하여 HTML, CSS, React 또는 기타 프런트엔드 코드를 생성합니다.
명령줄에서 figma-mcp AI 스킬을 개발 환경에 빠르게 설치
출처: tdimino/claude-code-minoan.
This skill enables accurate design-to-code conversion by leveraging Figma's MCP (Model Context Protocol) server to access structured design data directly from Figma files. Unlike screenshot-based approaches, the Figma MCP provides semantic information about every design element including exact spacing, colors, typography, component hierarchy, and design system tokens, resulting in significantly more accurate code...
When a user provides a Figma URL or requests design implementation:
Use the available Figma MCP tools to retrieve structured design data:
MCP 서버 도구를 사용하여 Figma 디자인을 생산 가능한 코드로 변환합니다. 사용자가 Figma URL을 제공하거나, 디자인에서 코드로의 변환을 요청하거나, Figma 모형 구현을 요청하거나, Figma 파일에서 디자인 토큰 및 시스템 값을 추출해야 하는 경우 이 기술을 사용하세요. 프레임, 구성 요소 및 전체 디자인 파일을 사용하여 HTML, CSS, React 또는 기타 프런트엔드 코드를 생성합니다. 출처: tdimino/claude-code-minoan.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/tdimino/claude-code-minoan --skill figma-mcpMCP 서버 도구를 사용하여 Figma 디자인을 생산 가능한 코드로 변환합니다. 사용자가 Figma URL을 제공하거나, 디자인에서 코드로의 변환을 요청하거나, Figma 모형 구현을 요청하거나, Figma 파일에서 디자인 토큰 및 시스템 값을 추출해야 하는 경우 이 기술을 사용하세요. 프레임, 구성 요소 및 전체 디자인 파일을 사용하여 HTML, CSS, React 또는 기타 프런트엔드 코드를 생성합니다. 출처: tdimino/claude-code-minoan.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/tdimino/claude-code-minoan --skill figma-mcp 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/tdimino/claude-code-minoan