[issue]: Figma MCP 최적화 인프라 세팅

[Whale0928]

이슈 유형

docs

우선순위

medium

영향 범위

• frontend
• backend
• app
• planner
• devops

what

Figma MCP rate limit 문제를 줄이고, 프론트엔드 디자인 구현 파이프라인을 안정화하기 위한 작업 환경과 문서를 정비한다.

작업 범위는 다음과 같다.

• CLAUDE.md에 Figma MCP 호출 규칙 추가
  • get_metadata
  • get_screenshot
  • get_code_connect
  • get_variable_defs
  • 코드 생성 순서의 결정론적 호출 흐름 정리
• 한 화면당 MCP 호출 횟수 제한, 동일 tool 재시도 금지 등 호출 비용 절감 규칙 정리
• .claude/settings.json에 MCP 서버 설정 추가
  • figma-mcp-cached
  • figma-bridge
• DESIGN.md 신규 작성
  • 디자인 토큰
  • 컬러
  • 타이포그래피
  • 컴포넌트 규칙
  • 레이아웃 규칙
  • AI Agent Quick Reference
• AI 에이전트가 프론트엔드 화면 구현 시 기존 디자인 토큰과 컴포넌트 규칙을 따르도록 기준 문서화

관련 PR:

• chore: Figma MCP 최적화 인프라 세팅 bottle-note-frontend#723

why

현재 Figma MCP 사용 시 rate limit로 인해 실제 화면 구현 과정에서 MCP 호출이 제한될 수 있다.

또한 AI 에이전트가 Figma 정보를 비효율적으로 반복 호출하거나, 디자인 토큰을 무시하고 임의의 색상/스타일을 생성할 가능성이 있다.

이 작업을 통해 다음 효과를 기대한다.

• Figma MCP 호출 횟수와 rate limit 소모 감소
• 프론트엔드 화면 구현 시 디자인 토큰 준수율 향상
• AI 에이전트의 Figma 기반 코드 생성 흐름 표준화
• 프론트엔드 작업자가 동일한 디자인 시스템 기준을 참조 가능
• 향후 Figma → Code 작업의 재현성과 품질 개선

현재 해당 작업은 bottle-note-frontend PR로 열려 있으나, 중앙 이슈 관리 레포인 bottle-note/workspace에 대응 이슈가 없어 추적 누락 가능성이 있다.

따라서 본 이슈를 workspace에 발행하고, PR 본문에도 이 workspace 이슈 링크를 연결해야 한다.