도입 문의Claude 사용해 보기

Figma

Figma 연동: 디자인 파일 접근, 컴포넌트 추출, 토큰 읽기, 코드 변환. 디자인과 개발의 간극을 해소합니다.

Figma 플러그인은 Claude Code를 Figma 디자인 파일과 직접 연결하여 디자인과 개발 사이의 간극을 해소합니다. 디자인 컨텍스트 접근, 컴포넌트 정보 추출, 디자인 토큰 조회, 픽셀 퍼펙트 수준의 프로덕션용 코드 변환을 지원합니다.

주요 기능으로는 Figma 프레임에서 레이아웃·타이포그래피·색상 등 구조화된 디자인 데이터 추출, 디자인 변수 및 토큰 조회, Code Connect를 통한 Figma 컴포넌트와 기존 코드베이스 매핑, 검증을 위한 시각적 참조 캡처가 있습니다. Figma 클라우드 서버와 데스크톱 앱 모두 지원합니다.

사용 방법: Figma URL을 공유하고 Claude에게 디자인 구현을 요청하세요. /implement-design을 사용하면 프로젝트의 디자인 시스템을 활용해 Figma 프레임을 코드로 변환합니다. /create-design-system-rules를 사용하면 팀의 개발 컨벤션을 반영한 커스텀 가이드라인을 생성합니다. /code-connect-components를 사용하면 Figma 컴포넌트와 코드베이스 구현체 간 매핑을 설정합니다.

예시 프롬프트: "이 Figma 디자인을 구현해 줘: [Figma URL 붙여넣기]", "내 React 프로젝트에 맞는 디자인 시스템 규칙 만들어 줘", "Button 컴포넌트를 Figma 대응 컴포넌트와 연결해 줘", "이 디자인 파일에서 색상 변수를 추출해 줘".

기타 플러그인

Frontend Design

Frontend design skill for UI/UX implementation

Superpowers

Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques

Code Review

Automated code review for pull requests using multiple specialized agents with confidence-based scoring

Context7

Upstash Context7 MCP server for up-to-date documentation lookup. Connects to Context7's hosted remote MCP server (https://mcp.context7.com/mcp) — no local Node.js or npx required — to pull version-specific documentation and code examples directly from source repositories into your LLM context. Authenticate with Context7 when prompted.

Code Simplifier

Agent that simplifies and refines code for clarity, consistency, and maintainability while preserving functionality

Playwright

Browser automation and end-to-end testing MCP server by Microsoft. Enables Claude to interact with web pages, take screenshots, fill forms, click elements, and perform automated browser testing workflows.