Figma 디자인-투-코드 자동화 번들: 디자인 분석, 구현 계획, 참조 기반 계획, 실행 스킬 및 Figma MCP 통합
npx claudepluginhub window-ook/claude-code-lab --plugin figma-toolsFigma 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과 참조할 기존 파일 경로가 함께 제공될 때, 피그마 디자인을 분석하고 참조 코드와 대조하여 구현 계획서를 작성한다. 기존 페이지 구조를 재사용하여 빠르게 구현하고 싶을 때 사용.
클로드 코드로 워크플로우 자동화 & 단순화를 고민하며 여러가지 시도를 하고 있습니다.<br> 프로젝트에서 사용하고 있는 에이전트/커맨드/스킬/룰/문서/훅 스크립트를 업데이트하고 있습니다!<br>
/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
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Uses power tools
Uses Bash, Write, or Edit tools
Qiushi Skill: methodology skills for AI agents guided by seeking truth from facts, with Claude Code, Cursor, OpenClaw, Codex, OpenCode, and Hermes guidance.