JW's AI_Stash

2.3.2 AI 협업 가이드

10 min read

AI 협업 가이드

Figma MCP를 활용해 AI와 단계별로 협업하는 워크플로우와 Rules 파일 설정법을 설명한다. 업데이트: 2026-03-10

핵심 요약

구분내용
📖 협업 핵심컴포넌트 단위로 분할 → 멀티턴 대화로 완성
💡 Rules 파일CLAUDE.md / .cursor/rules에 규칙 정의 → 매 프롬프트 반복 제거
🎯 대규모 파일get_metadata로 구조 파악 후 섹션별 get_design_context 호출
⚠️ 첫 작업새 프로젝트 시작 시 create_design_system_rules를 먼저 실행한다

목차

  1. 기본 협업 사이클
  2. 멀티턴 대화 흐름
  3. 대규모 디자인 처리 순서
  4. Rules 파일 설정
  5. Figma 파일 구조화 전략
  6. 흔한 실수와 해결책

1. 기본 협업 사이클

Figma MCP 기반 AI 협업의 기본 단위는 4단계 사이클이다.

flowchart TD
    A[Figma에서\n프레임/컴포넌트 선택] --> B[우클릭 → Copy link to selection]
    B --> C[에디터에 URL + 프롬프트 입력]
    C --> D[결과 검증]
    D --> E{수정 필요?}
    E -->|예| F[피드백 프롬프트]
    F --> C
    E -->|아니오| G[다음 컴포넌트로 이동]

핵심 원칙: 큰 페이지를 한 번에 넣지 않는다. 논리 단위(컴포넌트 1개)로 분할하면 처리 속도와 정확도가 함께 올라간다.

2. 멀티턴 대화 흐름

AI와의 대화를 여러 라운드에 걸쳐 이어가며 결과물을 완성하는 패턴이다.

라운드별 흐름 예시

1라운드 — 구조 파악

User: 이 Figma 프레임의 전체 구조를 먼저 파악해줘.
      https://www.figma.com/design/XXXXX?node-id=1%3A2

AI:   get_metadata 호출 → 레이어 구조 분석 결과 보고

2라운드 — 초기 구현

User: Header 섹션부터 구현해줘.
      src/components/ui/Button은 재사용해.

AI:   get_design_context(Header 노드) → 코드 생성

3라운드 — 시각적 검증

User: 패딩이 Figma와 달라. 스크린샷과 비교해서 수정해줘.

AI:   get_screenshot → 비교 → 스타일 수정

4라운드 — 토큰 일치

User: 색상이 하드코딩돼 있어. 디자인 토큰으로 바꿔줘.

AI:   get_variable_defs → 토큰 매핑 → 코드 수정

5라운드 — 다음 섹션

User: Features 섹션도 같은 방식으로 구현해줘.

AI:   (이전 맥락 유지) get_design_context(Features 노드) → 생성

멀티턴 핵심 원칙

  • 이전 라운드 결과를 참조할 때는 “앞에서 만든 Header 컴포넌트와 일관된 스타일로”처럼 명시하면 컨텍스트 연속성이 유지된다
  • 시각적 오류 수정 시 get_screenshot을 함께 요청하면 Figma 원본과 비교 기준이 생겨 정확도가 높아진다
  • UI 역변환 반복 시 별도로 지정하지 않는 한 에이전트는 같은 Figma 파일에 계속 누적한다

3. 대규모 디자인 처리 순서

페이지 전체처럼 큰 단위는 아래 순서로 단계별로 처리한다.

단계도구목적
1단계get_metadata전체 레이어 구조 파악 (XML)
2단계get_design_context특정 노드 상세 컨텍스트 추출
3단계get_screenshot시각적 참조 확인
4단계get_variable_defs디자인 토큰 확인
5단계코드 생성컴포넌트 단위로 분할 구현
6단계검증Figma와 1:1 비교 후 수정

프롬프트 예시 (대규모 페이지)

이 Figma 페이지 전체를 구현해야 해:
https://www.figma.com/design/XXXXX?node-id=1%3A2

먼저 get_metadata로 전체 구조를 파악하고,
섹션별로 나눠서 get_design_context를 호출해줘.
각 섹션을 별도 컴포넌트로 분리해서 구현해.

섹션 순서: Hero → Features → Pricing → Footer

4. Rules 파일 설정

규칙 파일을 설정하면 매 프롬프트마다 프레임워크·경로·금지사항을 반복 기술할 필요가 없어진다.

자동 생성 방법

내 코드베이스를 분석해서 Figma to Code 규칙 파일을 만들어줘.
- clientLanguages: typescript
- clientFrameworks: react
결과를 CLAUDE.md에 저장해줘.

create_design_system_rules 도구가 코드베이스를 분석해 컴포넌트 위치, 토큰 사용 방식, 스타일링 방법론, 브레이크포인트, 접근성 기준을 자동으로 포함한 규칙 파일을 생성한다.

Claude Code — CLAUDE.md

# MCP Servers
 
## Figma MCP server rules
 
### 필수 규칙
- Figma MCP가 localhost 이미지/SVG를 반환하면 직접 사용한다
- 새 아이콘 패키지 추가 금지 (Figma 자산을 활용한다)
- 플레이스홀더 이미지 생성 금지
- 색상·간격·타이포그래피 하드코딩 금지 — 디자인 토큰 사용
 
### 구현 순서
1. get_design_context 실행
2. 필요시 get_metadata로 구조 파악
3. get_screenshot으로 시각적 확인
4. 에셋 다운로드 후 구현
5. 프로젝트 컨벤션 적용
6. Figma와 1:1 검증
 
### 컴포넌트 규칙
- src/components/ui 기존 컴포넌트 우선 사용
- WCAG 2.1 AA 접근성 준수
- Tailwind CSS 사용 (인라인 스타일 금지)

Cursor — .cursor/rules/figma-mcp.mdc

---
description: Figma MCP 코드 생성 규칙
alwaysApply: true
---
 
- Figma MCP가 localhost 이미지/SVG를 반환하면 직접 사용한다
- 새 아이콘 패키지 추가 금지
- 플레이스홀더 생성 금지
- 디자인 시스템 컴포넌트를 최우선으로 사용한다
- 하드코딩 금지, 반드시 토큰 사용
- Figma 정확도를 최우선으로 한다

Codex CLI — AGENTS.md

# Figma MCP 에이전트 규칙
 
## 필수 흐름
1. 설계 컨텍스트 수집 (get_design_context)
2. 스크린샷 확인 (get_screenshot)
3. 변수 확인 (get_variable_defs)
4. 구현 후 Figma와 대조
 
## 금지 사항
- 아이콘 패키지 신규 설치 금지
- 플레이스홀더 사용 금지
- 하드코딩 금지

5. Figma 파일 구조화 전략

AI가 정확한 코드를 생성하려면 Figma 파일 자체가 기계가독성 있는 구조여야 한다.

항목설명
Auto Layout 적용수동 절대 위치 대신 Auto Layout → Flexbox로 정확 변환
컴포넌트 분리재사용 요소는 컴포넌트로 분리 → Code Connect 매핑 가능
시맨틱 레이어 명명CardContainer, HeaderNav 등 의미 있는 이름 사용
Variables 정의색상·간격·타이포그래피에 변수 정의 → 토큰 자동 추출
Code Connect 설정Figma 컴포넌트 ↔ 코드베이스 컴포넌트 연결 (최우선)
어노테이션 작성호버 상태, 전환, 반응형 동작을 주석으로 설명

Code Connect 우선 적용 이유

Code Connect를 설정하면 에이전트가 새 컴포넌트를 만들지 않고 실제 코드베이스의 컴포넌트를 자동으로 재사용한다.

내 Figma 컴포넌트와 코드베이스 컴포넌트 간 매핑을 설정해줘.
→ get_code_connect_suggestions 실행 후 확인하고
→ send_code_connect_mappings로 확정해줘.

6. 흔한 실수와 해결책

문제원인해결책
색상이 하드코딩됨토큰 컨텍스트 미제공get_variable_defs + Variables JSON 첨부
기존 컴포넌트를 무시함Code Connect 미설정add_code_connect_map 실행
레이아웃이 Figma와 다름Auto Layout 미적용Figma 파일에 Auto Layout 적용 후 재시도
응답이 불완전함선택 범위가 너무 큼컴포넌트 단위로 분할해서 요청
아이콘이 플레이스홀더로 대체됨규칙 미설정Rules 파일에 “아이콘 패키지 추가 금지” 명시

문서 탐색

이전다음
2.3.1 프롬프트 개요2.3.3 프롬프트 실전 예시

참고 자료

출처URL신뢰도
Figma MCP 도구 및 프롬프트 공식 문서https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/★★★★★
커스텀 Rules 추가 공식 문서https://developers.figma.com/docs/figma-mcp-server/add-custom-rules/★★★★★
Design System Rules 스킬 공식 문서https://developers.figma.com/docs/figma-mcp-server/skill-create-design-system-rules/★★★★★
monday.com 엔지니어링 블로그https://engineering.monday.com/how-we-use-ai-to-turn-figma-designs-into-production-code/★★★★☆
Builder.io — Claude Code + Figma MCPhttps://www.builder.io/blog/claude-code-figma-mcp-server★★★★☆

Graph View

Backlinks