5단계 — Context7 · Figma MCP

AI 가 내부 정보만 알면 한계가 명확해요. Context7 으로 라이브러리 최신 문서를, Figma MCP 로 디자인 파일을 끌어와 사실 기반 코딩을 합니다.

Context7 — 라이브러리 문서

LLM 이 학습한 시점 이후의 최신 문서 가 필요할 때 (Next.js 16, React 19 처럼).

설치:

claude mcp add context7 -- npx -y @upstash/context7-mcp

사용:

> Next.js 16 의 App Router 에서 metadata 객체 spec 알려줘 — context7 사용

Claude Code 가 자동으로 Context7 MCP 를 호출해 최신 공식 문서 를 가져와 답해요.

LLM 학습 데이터는 시점이 고정 — 새 버전 출시 후 며칠은 모르거나 옛날 정보 를 답할 수 있어요. Context7 은 실시간 문서 인덱스 를 갖고 있어 이 갭을 메워요.

디자이너가 Figma 에 그려 둔 화면을 코드로 옮길 때.

claude mcp add figma -- npx -y @figma/mcp

> Figma 파일 abc123 의 LoginScreen frame 을 React 컴포넌트로 변환해 줘

Figma 에서 정확한 색상·여백·타이포그래피 토큰을 읽어 React 코드를 생성.

여러 MCP 를 조합 하는 게 진짜 강해요.

> 1. Figma 의 ProductCard frame 을 보고
  2. Context7 으로 Tailwind v4 의 최신 클래스 확인 후
  3. components/ProductCard.tsx 를 만들어 줘

세 도구가 한 흐름으로 동작.

Context7 을 등록하고 "React 19 Compiler 의 안전한 hook 패턴 알려줘 — context7" 라고 물어 보세요. 최신 문서 인용이 답에 포함되면 성공.

마지막 6단계에서는 모든 도구를 워크플로 로 묶는 법을 배워요.

Context7 — 라이브러리 문서

LLM 이 학습한 시점 이후의 최신 문서 가 필요할 때 (Next.js 16, React 19 처럼).

설치:

claude mcp add context7 -- npx -y @upstash/context7-mcp

사용:

> Next.js 16 의 App Router 에서 metadata 객체 spec 알려줘 — context7 사용

Claude Code 가 자동으로 Context7 MCP 를 호출해 최신 공식 문서 를 가져와 답해요.

다른 유용한 MCP 5

@modelcontextprotocol/server-fetch — 임의 URL 의 페이지 가져오기

@playwright/mcp — 브라우저 자동화 (DOM 검사·스크린샷)

@modelcontextprotocol/server-postgres — PostgreSQL 직접 쿼리

@modelcontextprotocol/server-memory — 영속 메모리

mcp-server-google-calendar — 일정 조회