디자인 구조 파악
구조화된 레이어 데이터를 읽고 노드와 프레임을 찾아, 작업에 필요한 디자인 정보를 확인할 수 있습니다.
디자인 데이터 살펴보기Remote MCP · 클라우드로 연결
Pixso MCP디자인을 AI와 연결하세요
AI 어시스턴트에 Pixso 레이어 링크를 전달하세요. 데스크톱 앱을 계속 열어 두지 않아도 디자인을 읽고, 필요한 부분을 수정하고, 코드로 변환할 수 있습니다.
영문 문서
OAuth 2.1 권한 승인디자인 읽기 및 편집디자인 ↔ 코드
평소 사용하는 AI 작업 환경
CodexClaude CodeCursorVS Code
익숙한 도구에서 원하는 작업 전달
Pixso Remote MCP
https://pixso.net/mcp클라우드 연결 · 승인된 접근Pixso 디자인 파일
레이어와 레이아웃컴포넌트와 변수스타일과 에셋
실제 디자인 정보를 바탕으로 작업
Streamable HTTP를 지원하는 MCP 클라이언트를 연결할 수 있습니다. 사용할 수 있는 도구는 시트 유형과 파일 권한에 따라 달라집니다.
디자인 이해에서 실제 작업까지
스크린샷만으로는 알 수 없는 정보도 AI에 전달하세요
디자인 구조, 컴포넌트, 스타일, 피드백을 AI와의 대화에 활용하세요. 어시스턴트가 디자인의 특정 부분을 작업하고 결과를 보여 줄 수 있습니다.
디자인 생성과 수정
지정한 범위 안에서 노드를 만들거나 편집하세요. 간격을 조정하거나 여러 속성을 변경해 디자인 파일에 직접 반영할 수 있습니다.
디자인 편집 살펴보기디자인과 코드 간 변환
디자인에서 프런트엔드 코드를 생성하거나, HTML과 웹 프로젝트 ZIP 파일을 편집 가능한 Pixso 디자인으로 변환할 수 있습니다.
양방향 작업 흐름 보기디자인 시스템 활용
재사용 가능한 컴포넌트, 스타일, 변수를 읽어 오세요. 팀의 기존 규칙을 확인하면서 스타일과 변수를 업데이트할 수 있습니다.
컴포넌트와 스타일 살펴보기변경 결과를 눈으로 확인
대상 영역을 캡처하고 속성을 살펴보세요. 변경 후 정렬 상태, 중첩 관계, 레이아웃 구조를 확인할 수 있습니다.
레이아웃 점검 살펴보기에셋과 피드백을 작업에 활용
PNG, JPEG, SVG, PDF, WebP 등의 형식으로 에셋을 내보낼 수 있습니다. 댓글 스레드를 읽어 검토 내용을 작업에 반영하세요.
에셋 내보내기 살펴보기REMOTE MCP
주소 하나로, 세 단계면 연결됩니다.
AI 도구를 연결하고 레이어 링크를 복사한 다음, 원하는 작업을 설명하세요. Remote MCP는 데스크톱 앱이나 디자인 탭을 계속 열어 둘 필요가 없습니다.
Remote MCP 서버 URL
https://pixso.net/mcp- 01
서버 추가 및 권한 승인
클라이언트의 MCP 설정에 서버 URL을 추가하고 OAuth 2.1 권한 승인을 완료하세요. 문서에 안내된 방법에 따라 개인 액세스 토큰을 사용할 수도 있습니다.
- 02
대상 레이어 링크 복사
Pixso에서 대상 프레임이나 레이어를 선택한 뒤 Copy link를 사용하세요. 링크의 item-id는 어시스턴트가 작업할 디자인 영역을 지정합니다.
링크 복사 위치 보기파일 공유 링크나 페이지 링크가 아닌 레이어 링크를 사용하세요.
- 03
작업 목표와 수정 범위 전달
AI 어시스턴트에 링크, 작업 목표, 수정해도 되는 범위를 전달하세요. 먼저 구조를 읽은 뒤 코드를 생성하거나 선택한 디자인을 편집하면 됩니다.
설정 가이드 읽기읽기에는 보기 권한이 필요하며, 변경하려면 편집 권한도 있어야 합니다.
구체적인 작업부터 시작하세요
화면 하나, 컴포넌트 그룹 하나, 필요한 수정 하나씩
레이어 링크로 대상 디자인을 지정하고, 프롬프트로 어시스턴트가 수행할 작업을 설명하세요.
먼저 구조 파악하기이 레이어 링크를 읽고 페이지의 섹션, 컴포넌트, 주요 변수를 정리해 주세요. 아직 디자인은 변경하지 마세요.
이어서 수정하기이 레이어 링크에 있는 카드 그룹의 간격을 24px로 설정해 주세요. 텍스트와 컴포넌트 간 관계는 유지하고, 수정 후 결과를 검토할 수 있도록 스크린샷을 찍어 주세요.
디자인 ↔ 코드
디자인과 구현을 하나의 흐름으로
디자인을 바탕으로 구현을 시작하거나, 웹페이지를 편집 가능한 캔버스로 가져와 다음 수정 방향을 팀과 논의할 수 있습니다.
Pixso 디자인→<React />
디자인에서 코드로
디자인 구조를 바탕으로 구현하세요
design_to_code로 HTML, React, Vue, ArkUI, Flutter 코드를 생성하세요. 이후 반응형 레이아웃, CSS 변수, Tailwind 변환, 코드 정리, 프로젝트 디자인 시스템에 맞춘 조정 등 원하는 개선 작업을 선택할 수 있습니다.
디자인의 코드 변환 살펴보기디자인의 코드 변환에는 엔터프라이즈 Full-function 또는 Developer 시트와 엔터프라이즈 공간 내 파일이 필요합니다.
<HTML />→편집 가능한 디자인
코드에서 디자인으로
웹 코드를 캔버스로 가져오세요
code_to_design으로 HTML이나 웹 프로젝트 ZIP 파일을 편집 가능한 Pixso 디자인으로 변환하세요. 레이아웃을 확인하고 스타일을 조정하면서 팀과 다음 버전을 논의할 수 있습니다.
코드의 디자인 변환 살펴보기변환은 하나의 작업으로 실행됩니다. 이후 디자인과 프로젝트 코드의 변경 사항이 실시간으로 자동 동기화되지는 않습니다.
작업에 맞는 연결 방식
Remote MCP로 시작하세요
레이어 링크를 사용하는 작업에는 클라우드 연결을 이용하세요. 데스크톱 앱에 열려 있는 파일과 선택 영역을 대상으로 작업하려면 Local MCP를 선택할 수 있습니다.
Remote MCP
권한 승인과 레이어 링크를 이용해 Pixso 클라우드 서비스에 연결합니다.
- Pixso Web이나 데스크톱 앱을 계속 열어 둘 필요 없음
- OAuth 2.1 권장, 개인 액세스 토큰도 지원
- 여러 기기에서 레이어 링크 사용 가능
Local MCP
실행 중인 Pixso 데스크톱 앱에 연결해 활성 파일에서 작업합니다.
- 데스크톱 앱과 MCP 서비스가 실행 중이어야 함
- 대상 디자인 파일을 활성 탭으로 열어 두어야 함
- 일부 도구는 Local MCP에서만 사용 가능
작업할 레이어를 정확하게 지정하세요
원하는 디자인을 어시스턴트에 정확히 전달하세요
작업하려는 프레임이나 레이어의 링크를 복사하세요. 읽기, 편집, 코드 생성의 대상을 어시스턴트에 정확하게 지정할 수 있습니다.
레이어 링크 복사 방법 보기Pixso Skills로 작업 방향을 안내하세요
Skills는 에이전트가 디자인 작업을 정리하고 도구를 선택하도록 돕습니다. MCP는 파일 연결을 담당합니다. 사용하는 에이전트와 Pixso 버전에 맞는 공식 설치 가이드를 확인하세요.
Pixso Skills 살펴보기
Remote MCP를 사용하려면 Pixso 데스크톱 앱이 필요한가요?
아니요. 원격 서비스는 클라우드에서 실행됩니다. 권한 승인을 마치면 유효한 레이어 링크로 작업할 수 있으며, Pixso Web이나 데스크톱 앱을 계속 열어 둘 필요는 없습니다. 다만 네트워크 연결과 유효한 권한 승인은 필요합니다.
어떤 시트와 파일 권한이 필요한가요?
MCP 기능을 사용하려면 Full-function 또는 Developer 시트가 필요합니다. 디자인을 코드로 변환하려면 이 두 유형 중 하나의 엔터프라이즈 시트와 엔터프라이즈 공간 내 파일이 있어야 합니다. 읽기 작업에는 보기 권한이, 디자인 변경에는 편집 권한도 필요합니다.
전체 도구 보기Cursor, Claude Code, VS Code, Codex는 어떻게 연결하나요?
Remote MCP 서버 URL은 같지만 설정 절차는 클라이언트마다 다릅니다. 설정 항목도 다르므로 다른 편집기의 설정을 그대로 복사하지 말고, 연결된 개발자 가이드에서 해당 클라이언트의 절차를 확인하세요.
연결 설정하기연결은 됐는데 디자인에 접근할 수 없는 이유는 무엇인가요?
계정에 해당 파일의 보기 권한이 있는지, 레이어 링크에 올바른 item-id가 포함되어 있는지 확인하세요. page-id나 일반 공유 링크로는 대상 레이어를 지정할 수 없습니다. 세션이 만료됐다면 권한 승인을 다시 진행하세요. Local MCP를 사용한다면 데스크톱 앱과 활성 파일도 확인해야 합니다.
AI가 디자인을 읽는 것뿐 아니라 편집할 수도 있나요?
네. 현재 Remote MCP는 디자인 편집, 스타일과 변수 업데이트, 속성 변경을 지원합니다. 대상 레이어와 수정 범위를 지정하고 편집 권한이 있는 파일을 사용하세요. 작업 후에는 스크린샷과 레이아웃 점검으로 결과를 확인할 수 있습니다.
프라이빗 구축 환경에서도 Remote MCP를 사용할 수 있나요?
프라이빗 구축 환경에서 Remote MCP를 활성화하기 전에 담당 매니저에게 문의하세요. 퍼블릭 클라우드 URL이 아닌, 해당 환경의 서버 주소와 연결 설정을 사용해야 합니다.