코드 디자인의 Figma 프레이밍 전송

요청하신 개념 ‘코드 디자인의 Figma 프레이밍 전송’ (유형: workflow)에 대한 위키 노트를 성공적으로 작성 완료하였습니다.

파일명/경로: 코드 디자인의 Figma 프레이밍 전송.md
Frontmatter:
- type: workflow
- status: draft
- core: false
- tags: ['llm', 'agent', 'claude-code', 'figma', 'mcp', 'workflow', 'ui-ux']
- sources: ['raw/Claude Code + Figma = 💛.md']
- created: 2026-08-28
- updated: 2026-08-28

한 줄 정의: Claude Code 등 AI CLI 도구를 통해 작성된 프론트엔드 UI 코드를 Figma MCP 및 figma@claude-plugins-official 플러그인을 사용하여 시각적인 Figma 프레임(Frame) 에셋으로 내보내는 백워드 워크플로우를 명확히 정립했습니다.
핵심 요지 & 상세 절차: 4단계 연동/전송 구조(MCP 서버 추가, OAuth 인증, 플러그인 로드, 전송 프롬프트 실행)와 코드-디자인 직렬화 시 발생할 수 있는 레이아웃/여백 한계점을 기재하였습니다.
구체적 예시: 환경 설정 CLI 명령어(claude mcp add, /plugin install) 및 랜딩 페이지 코딩 및 전송 시나리오 프롬프트를 포함했습니다.
연관 위키 연동: Claude Code와 Figma의 양방향 통신, Figma-Claude Code 양방향 연동, Figma Model Context Protocol, Claude Code, AI 기반 프로토타이핑 워크플로우 등의 관련 개념 노트들과 상호 링크를 형성하였습니다.

LLM Wiki