Figma MCP를 통해 디자인 데이터를 조회하고 구조화된 분석 결과를 반환하는 에이전트. 계획서 작성이나 코드 구현은 하지 않는다.
Use this snippet to register the Figma MCP server in `~/.codex/config.toml` as a streamable HTTP server with bearer auth pulled from your env.
Quick reference for the Figma MCP toolset, when to use each tool, and prompt examples to steer output toward your stack.
.claude/plans/design/에 있는 Figma 구현 계획서를 기반으로 프로덕션 코드를 구현한다. figma-plan 또는 figma-reference-plan으로 계획서를 먼저 작성한 뒤 사용.
Figma URL 또는 node ID가 주어지면 디자인을 분석하고 구현 계획서를 작성한다. 참조할 기존 코드 없이 처음부터 구현할 때 사용. 참조 코드가 있으면 figma-reference-plan을 사용.
피그마 URL과 참조할 기존 파일 경로가 함께 제공될 때, 피그마 디자인을 분석하고 참조 코드와 대조하여 구현 계획서를 작성한다. 기존 페이지 구조를 재사용하여 빠르게 구현하고 싶을 때 사용.
Uses power tools
Uses Bash, Write, or Edit tools
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
클로드 코드로 워크플로우 자동화 & 단순화를 고민하며 여러가지 시도를 하고 있습니다.
프로젝트에서 사용하고 있는 에이전트/커맨드/스킬/룰/문서/훅 스크립트를 업데이트하고 있습니다!
/plugin marketplace add https://github.com/window-ook/claude-code-lab
CLI에서 직접 설치:
개별 스킬 16개 + 번들 4개, 총 20개 플러그인을 제공합니다.
/plugin install zustand@claude-code-lab
또는 /plugin → Marketplaces 탭 → Browse plugins → 원하는 플러그인 선택 후 Install
특정 워크플로우를 자동화하기 위해 만든 skill입니다.
특정 반복적 & 병렬 가능 업무에 특화된 sub-agent입니다.
클로드가 컨텍스트로 참고할 지침을 세분화 해둔 rule입니다.
자주 사용하는 프롬프트를 작은 단위로 분리한 command입니다.
다양한 주제의 클로드 코드 관련 문서입니다.
ex) docs/best-practices/** -> 여러 상황에서 발견한 베스트 프랙티스
특정 이벤트 발생 시 자동으로 실행되는 훅 스크립트입니다.
© 2026 github.com/window-ook/claude-code-lab
npx claudepluginhub window-ook/claude-code-lab --plugin figma-toolsNext.js 16 App Router 개발 가이드. params Promise, Server/Client Components, Cache Components, Proxy 패턴
Feature-Sliced Design(FSD) 아키텍처 방법론 가이드. 레이어/슬라이스/세그먼트 설계, 의존성 규칙, Public API 패턴
React/Next.js 성능 최적화 가이드. 워터폴 제거, 번들 최적화, 렌더링 개선
TailwindCSS 베스트 프랙티스 가이드. 유틸리티 클래스, 반응형 디자인, 다크 모드, 테마 커스터마이징
코드 플로우 시각화 인터랙티브 웹 리포트 생성
Design System compliance harness for Claude + Figma. Enforces library-first components, token binding, and automated QA — so AI-generated designs stay on-spec.
Plugin that includes the Figma MCP server and Skills for common workflows
Claude Code skill pack for Figma (30 skills)
Compiler-driven design generation in Figma — 100% design system compliant. Compiles component specs into verified Figma output via MCP.
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns