chore: Figma MCP 최적화 인프라 세팅

[hyejj19]

요약

Figma MCP rate limit 문제를 해결하고, Figma→Code 파이프라인을 최적화하기 위한 인프라 세팅

변경 사항

• CLAUDE.md: Figma MCP 호출 규칙 섹션 추가
  • 결정론적 5단계 호출 순서 (get_metadata → get_screenshot → get_code_connect → get_variable_defs → 코드 생성)
  • 한 화면당 최대 5회 호출 제한, 동일 tool 재시도 금지
  • hex 하드코딩 금지, 기존 컴포넌트 재사용 우선 규칙
• .claude/settings.json: MCP 서버 설정 추가
  • figma-mcp-cached: mcp-cache 프록시 경유 (rate limit 소비 절감)
  • figma-bridge: WebSocket Plugin Bridge (rate limit 없음)
• DESIGN.md: 디자인 시스템 명세서 신규 생성
  • Google Stitch 9섹션 구조 기반
  • tailwind.config.ts + globals.css 실제 토큰 값 반영
  • 컬러, 타이포그래피, 컴포넌트, 레이아웃, Do/Don't, Agent Quick Reference

배경

• Figma MCP rate limit (Starter 월 6회, Pro 일 200회) 문제로 실사용 시 빈번한 한도 초과
• AI 에이전트의 비효율적 MCP 호출 패턴 → 호출 순서 명시로 예방
• DESIGN.md로 디자인 토큰을 machine-readable하게 만들어 AI 코드 생성 품질 향상

테스트 계획

• Figma Desktop에서 figma-mcp-bridge 플러그인 설치 후 WebSocket 연결 확인
• Figma Raw Export 플러그인으로 JSON 내보내기 테스트
• 실제 화면 1개를 대상으로 MCP 5단계 호출 순서 기반 코드 생성 테스트
• DESIGN.md 참조 시 AI 에이전트가 올바른 토큰을 사용하는지 확인

🤖 Generated with Claude Code