MCP는 Claude, Cursor 등 MCP 호환 AI 어시스턴트와 연결하여, 자연어 명령만으로 프레이머 프로젝트를 수정하고 컴포넌트를 만들며, React 코드로 내보낼 수 있습니다.

활용 예시

• Claude에게 SEO 리서치를 기반으로 랜딩 페이지 문구를 새로 작성하게 하기

• 커스텀 코드 컴포넌트를 생성하고 캔버스에 바로 삽입

• 한 번의 명령으로 전체 프로젝트의 색상 스타일 업데이트

• 프레이머 컴포넌트를 프로덕션용 React 코드로 내보내기

• AI가 생성한 콘텐츠로 디자인을 자동 업데이트

작동 방식

이 플러그인은 Framer 프로젝트와 MCP 호환 AI 어시스턴트 사이에 WebSocket 기반의 보안 터널을 생성합니다. 이때 Framer 사용자 ID가 고유 식별자로 사용되며, 모든 프로젝트에서 동일한 연결 URL을 사용할 수 있어 한 번만 설정하면 됩니다.

AI 어시스턴트(Claude 등)에서 요청을 보내면, Cloudflare Worker를 통해 프레이머 플러그인에 전달되고, 플러그인의 Framer Plugin API가 해당 명령을 실행합니다. 응답은 같은 보안 채널을 통해 다시 전송됩니다.
MCP URL은 사용자의 Framer ID와 선택적 세션 비밀 키를 포함하며, 모든 프로젝트에서 동일하게 사용됩니다.

제공 기능

• Project Structure: 페이지, 컴포넌트, 코드 파일의 XML 구조 반환

• Node Selection: 선택한 요소를 읽고 수정

• XML Updates: 노드 속성, 텍스트, 구조 수정

• Color Styles: 색상 스타일 생성, 수정, 적용

• Text Styles: 타이포그래피 스타일 관리 (속성 포함)

• Font Search: 프레이머 폰트 라이브러리에서 폰트 검색 및 적용

• Node Operations: 요소 복제, 삭제, 특정 노드로 줌

• React Export: Framer 컴포넌트를 React 코드로 변환 (unframer CLI 사용, React Export 플러그인과 동일한 구독 공유)

• Code Files: TypeScript/React 코드 컴포넌트 생성, 읽기, 수정

• Component Insertion: 컴포넌트를 정확한 위치에 삽입

AI 어시스턴트 연결 방법

Claude Desktop App

1. 메뉴 바에서 Settings 열기

2. Developer 탭 > Edit config 이동

3. 이 플러그인에서 제공하는 MCP URL을 설정에 추가

4. Claude Desktop 재시작

Cursor IDE

1. Command Palette 열기 (Cmd/Ctrl + Shift + P)

2. “Cursor Settings” → MCP 선택

3. ~/.cursor/mcp.json 파일에 서버 설정 추가

4. Settings에서 MCP 서버 새로고침

5. Agent 모드에서 MCP 툴 사용 가능

Claude Code CLI

1. Claude Code CLI 설치 (sudo 없이)

2. 명령어 실행

   bash
   claude mcp add "framer-mcp"
   
   

3. 해당 서버는 이후 모든 Claude Code 세션에서 사용 가능

기술적 구성 요소

시스템은 3개의 주요 컴포넌트로 구성되어 있습니다.

• Framer Plugin 프레이머 내부에서 작동하며, API 호출 처리 및 WebSocket 연결 유지

• MCP Server Cloudflare Worker 기반 MCP 프로토콜 구현 (주소: mcp.unframer.co)

• WebSocket Tunnel 사용자 ID를 기반으로 연결되는 양방향 실시간 통신 채널

Note: 사용자 당 하나의 플러그인 인스턴스만 연결 가능하지만, 여러 AI 클라이언트가 동시에 접속할 수 있습니다.

보안 관련 사항

• 세션 비밀이 포함된 MCP URL을 절대 공유하지 않기

• 모든 연결은 사용자의 Framer 계정에 귀속됨

• 모든 작업은 MCP 클라이언트에서 명시적 승인이 필요

• 이 플러그인은 현재 열려 있는 프로젝트에만 접근할 수 있음

예시 워크플로우

• 랜딩 페이지 최적화: Claude에게 키워드 리서치를 요청하고, 페이지 헤딩 및 메타 설명을 SEO 기준으로 자동 수정하게 할 수 있습니다.

• 디자인 시스템 업데이트: Claude에게 색상 팔레트를 구성하게 하고, 전체 프로젝트에 색상 스타일을 적용하도록 요청하세요.

• 컴포넌트 개발: Claude Code를 이용해 커스텀 React 컴포넌트를 만들고, 프레이머 프로젝트에 삽입하세요.

• 콘텐츠 마이그레이션: 기존 프레이머 컴포넌트를 React 코드로 내보내어 프로덕션 애플리케이션에 통합할 수 있습니다. (Framer React Export 플러그인과 연동)

• 접근성 자동 검사: AI를 통해 텍스트 스타일이 접근성 기준을 충족하는지 확인하고, 문제 있는 요소를 자동으로 수정하세요.

프레이머 캔버스 공간 절약 팁

이 플러그인은 MCP 사용 중 항상 열려 있어야 하지만, 우측 하단의 축소 버튼을 클릭하면 플러그인 창을 최소화할 수 있습니다. 디자인 공간을 절약할 수 있습니다.

프로그래밍 방식 사용 예

이 MCP는 자동화된 에이전트 기반 디자인 작업에도 사용할 수 있습니다.
예: "SEO 키워드 리서치 기반으로 블로그 포스트 추가" 같은 작업을 수행하는 AI 에이전트를 만들 수 있습니다.