[베타] ProtoPie MCP를 만나보세요! 자세히 보기

[베타] ProtoPie MCP 공개! 자세히 보기

Introducing ProtoPie

시작하기

첫 번째 프로토타입 제작하기

ProtoPie 생태계

ProtoPie Studio 인터페이스

Import

시작하기

Adobe XD에서 가져오기

Figma에서 가져오기

Sketch에서 가져오기

프로토파이 지니 (ProtoPie Genie)

Basic Elements

컨테이너

기기

레이어

미리보기 창

장면

스크롤/페이징

단축키

시스템 상태 표시줄

Triggers & Responses

이징 (Easing)

주석

응답

타임라인

트리거

Formulas

시작하기

함수

레이어 속성

구문

수식 활용 사례

Variables

시작하기

Variables

정의된 변수

변수 활용 사례

AI

시작하기

AI 상호작용 생성

AI 문서 Q&A

AI 패널 인터페이스

최상의 결과를 위한 팁

ProtoPie MCP

Getting Started

Studio MCP 소개

Studio MCP 설치 및 설정

Code MCP 소개

Code MCP 설치 및 설정

Dev View

Auto Layout

시작하기

오토 레이아웃 속성

Components

시작하기

컴포넌트 가이드

구성 요소 편집

중첩된 컴포넌트

메시지 보내기 및 받기

Interaction Libraries

시작하기

상호작용 라이브러리 관리

도서관 회원 관리

Voice Prototyping

시작하기

수신 응답

음성 응답

사용 사례

음성 명령 트리거

Connecting Devices

blokdots 연결 중

모바일 기기 연결

ProtoPie Cloud

시작하기

프로토타입 관리

스토리지 관리

프로토타입 공유

ProtoPie Player

プロトタイプのテスト

글꼴 관리

오프라인 테스트

Wear OS용 ProtoPie Player

Teams

시작하기

편집기 및 뷰어

팀 온보딩하기

프로젝트

팀 소유자 및 팀 관리자

Handoff

시작하기

상호작용 기록 생성

통화 녹음 관리

녹화 페이지

User Testing

시작하기

제품 소개

테스트 룸 생성하기

외부 연동

테스트 세션 관리

테스트 결과 및 분석

ProtoPie Cloud에서의 사용자 테스트

ProtoPie Connect

시작하기

API 플러그인

아두이노 플러그인

blokdots 플러그인

커넥트 임베디드

사용자 정의 레이어 통합

사용자 지정 플러그인

기기 연결

게임패드 플러그인

IFTTT 플러그인

로지텍 G29 스티어링 휠 플러그인

プロトタイプのテスト

기능 비교

Unity 플러그인

ProtoPie Enterprise

시작하기

조직 설정

서비스 관리자

단일 로그인 (SSO)

Security

제품 소개

접근 제어

데이터 전송, 저장 및 백업

침해 사고 대응

네트워크 및 ProtoPie Player 앱 보안

물리적 보안

리스크 관리

메뉴

Introducing ProtoPie

시작하기

첫 번째 프로토타입 제작하기

ProtoPie 생태계

ProtoPie Studio 인터페이스

Import

시작하기

Adobe XD에서 가져오기

Figma에서 가져오기

Sketch에서 가져오기

프로토파이 지니 (ProtoPie Genie)

Basic Elements

컨테이너

기기

레이어

미리보기 창

장면

스크롤/페이징

단축키

시스템 상태 표시줄

Triggers & Responses

이징 (Easing)

주석

응답

타임라인

트리거

Formulas

시작하기

함수

레이어 속성

구문

수식 활용 사례

Variables

시작하기

Variables

정의된 변수

변수 활용 사례

AI

시작하기

AI 상호작용 생성

AI 문서 Q&A

AI 패널 인터페이스

최상의 결과를 위한 팁

ProtoPie MCP

Getting Started

Studio MCP 소개

Studio MCP 설치 및 설정

Code MCP 소개

Code MCP 설치 및 설정

Dev View

Auto Layout

시작하기

오토 레이아웃 속성

Components

시작하기

컴포넌트 가이드

구성 요소 편집

중첩된 컴포넌트

메시지 보내기 및 받기

Interaction Libraries

시작하기

상호작용 라이브러리 관리

도서관 회원 관리

Voice Prototyping

시작하기

수신 응답

음성 응답

사용 사례

음성 명령 트리거

Connecting Devices

blokdots 연결 중

모바일 기기 연결

ProtoPie Cloud

시작하기

프로토타입 관리

스토리지 관리

프로토타입 공유

ProtoPie Player

プロトタイプのテスト

글꼴 관리

오프라인 테스트

Wear OS용 ProtoPie Player

Teams

시작하기

편집기 및 뷰어

팀 온보딩하기

프로젝트

팀 소유자 및 팀 관리자

Handoff

시작하기

상호작용 기록 생성

통화 녹음 관리

녹화 페이지

User Testing

시작하기

제품 소개

테스트 룸 생성하기

외부 연동

테스트 세션 관리

테스트 결과 및 분석

ProtoPie Cloud에서의 사용자 테스트

ProtoPie Connect

시작하기

API 플러그인

아두이노 플러그인

blokdots 플러그인

커넥트 임베디드

사용자 정의 레이어 통합

사용자 지정 플러그인

기기 연결

게임패드 플러그인

IFTTT 플러그인

로지텍 G29 스티어링 휠 플러그인

プロトタイプのテスト

기능 비교

Unity 플러그인

ProtoPie Enterprise

시작하기

조직 설정

서비스 관리자

단일 로그인 (SSO)

Security

제품 소개

접근 제어

데이터 전송, 저장 및 백업

침해 사고 대응

네트워크 및 ProtoPie Player 앱 보안

물리적 보안

리스크 관리

Code MCP 소개

Code MCP는 사용자 기기에서 로컬 읽기 전용(read-only) MCP 서버를 실행하여 Claude Code, Codex, Cursor, VS Code, Antigravity 등의 AI 코딩(coding) 에이전트가 완성된 ProtoPie 프로토타입을 실제 코드로 구현할 수 있도록 돕습니다.

Studio MCP와 달리 Code MCP는 링크 기반으로 동작합니다. ProtoPie Cloud 링크(Pie의 URL 또는 Dev View에서 복사한 링크)를 에이전트에 지정하면, 해당 링크가 가리키는 정확한 Pie와 리비전을 읽어와 필요한 씬, 레이어, 컴포넌트, 변수, 그리고 트리거-리스폰스 인터랙션을 가져옵니다. npx를 통해 로컬에서 실행되며, OAuth를 통해 사용자 계정의 권한으로 ProtoPie Cloud와 통신합니다.

주요 기능

  • 단일 링크로 구현: 단 하나의 링크만으로 원하는 프레임워크(React, SwiftUI, Compose, Flutter, QML, ArkTS)에 맞게 전체 프로토타입도, 하나의 씬, 컴포넌트, 레이어 단위로도 구현할 수 있습니다.

  • 구조 및 동작 분석: 씬/레이어 트리, 컴포넌트, 변수, 그리고 그 기반이 되는 인터랙션, 조건, 수식까지 구조와 동작을 분석합니다.

  • 원본 에셋 불러오기: 원본 에셋(이미지, 폰트, 썸네일)을 불러와 생성된 코드가 완벽한 시각적 완성도를 유지하도록 합니다.

요구 사항

  • Node.js 20 이상.

  • 해당 Pie에 대한 다운로드 권한이 있는 ProtoPie Cloud 계정 (Access and permissions 참고).

  • 지원되는 MCP 클라이언트: Claude Code, Codex, Cursor, VS Code, Antigravity 또는 MCP를 지원하는 기타 에이전트.

지원하지 않는 기능

  • .pie → 코드 변환만 지원하며, 코드를 다시 .pie 파일로 되돌리지는 않습니다.

  • 에이전트에 정확한 스펙을 전달하지만, 최종 코드 품질은 사용 중인 에이전트와 프롬프트에 따라 달라집니다.

  • 현재는 로컬(studio) 서버만 지원하며, 리모트 서버는 제공되지 않습니다.

Code MCP 설치 및 설정 방법 알아보기