Penpot MCP 서버 🎨🤖
🚀 Penpot MCP란 무엇인가요?
Penpot MCP 는 AI 언어 모델과 오픈소스 디자인 및 프로토타입 플랫폼 인 Penpot 간의 간극을 메우는 혁신적인 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이러한 통합을 통해 Claude(Claude Desktop 및 Cursor IDE 모두)와 같은 AI 비서가 디자인 파일을 프로그래밍 방식으로 이해하고 분석하며 상호 작용할 수 있습니다.
🎯 주요 이점
🤖 AI 기반 디자인 분석 : Claude AI가 UI/UX 디자인을 분석하고 피드백을 제공하며 개선 사항을 제안합니다.
⚡ 자동화된 디자인 워크플로 : AI 기반 자동화로 반복적인 디자인 작업을 간소화하세요
🔍 지능형 디자인 검색 : 자연어를 사용하여 프로젝트 전반의 디자인 구성 요소와 패턴을 찾으세요
📊 디자인 시스템 관리 : AI 지원을 통해 디자인 시스템을 자동으로 문서화하고 유지 관리합니다.
🎨 크로스 플랫폼 통합 : 모든 MCP 호환 AI 어시스턴트(Claude Desktop, Cursor IDE 등)와 호환됩니다.
Related MCP server: 21st.dev Magic AI Agent
🎥 데모 영상
Penpot MCP가 실제로 작동하는 모습을 보려면 데모 영상을 확인하세요.
✨ 특징
🔌 핵심 역량
MCP 프로토콜 구현 : 모델 컨텍스트 프로토콜 표준을 완벽하게 준수합니다.
실시간 디자인 액세스 : 라이브 디자인 데이터를 위한 Penpot API와 직접 통합
구성 요소 분석 : AI 기반 디자인 구성 요소 및 레이아웃 분석
내보내기 자동화 : 다양한 형식으로 디자인 자산을 프로그래밍 방식으로 내보내기
설계 검증 : 자동화된 설계 시스템 준수 검사
🛠️ 개발자 도구
명령줄 유틸리티 : 설계 파일 분석 및 검증을 위한 강력한 CLI 도구
Python SDK : 사용자 정의 통합을 위한 포괄적인 Python 라이브러리
REST API : 웹 애플리케이션 통합을 위한 HTTP 엔드포인트
확장 가능한 아키텍처 : 맞춤형 AI 워크플로를 위한 플러그인 시스템
🎨 AI 통합 기능
Claude Desktop 및 Cursor 통합 : Claude Desktop 및 Cursor IDE 모두에서 Claude AI 어시스턴트에 대한 기본 지원
디자인 컨텍스트 공유 : 더 나은 응답을 위해 AI 모델에 디자인 컨텍스트 제공
시각적 구성 요소 인식 : AI는 디자인 구성 요소를 "보고" 이해할 수 있습니다.
자연어 질의 : 쉬운 영어로 디자인에 대한 질문을 해보세요
IDE 통합 : 최신 개발 환경과의 원활한 통합
💡 사용 사례
디자이너를 위한
디자인 검토 자동화 : 접근성, 사용성 및 디자인 원칙에 대한 즉각적인 AI 피드백을 받으세요
구성 요소 문서화 : 디자인 시스템에 대한 문서를 자동으로 생성합니다.
디자인 일관성 검사 : 프로젝트 전반에 걸쳐 브랜드 가이드라인 준수 보장
자산 구성 : AI 기반 태그 지정 및 디자인 구성 요소 분류
개발자를 위한
디자인-코드 워크플로 : AI 지원을 통해 디자인과 개발 간의 격차 해소
API 통합 : 사용자 정의 도구 및 워크플로를 위한 디자인 데이터에 대한 프로그래밍 방식 액세스
자동화된 테스트 : 설계 사양에서 시각적 회귀 테스트 생성
디자인 시스템 동기화 : 디자인 토큰과 코드 구성 요소를 동기화 상태로 유지
제품 팀을 위해
디자인 분석 : 디자인 시스템 도입 및 구성 요소 사용 추적
협업 강화 : AI 기반 디자인 검토 및 피드백 수집
워크플로 최적화 : 반복적인 설계 작업 및 승인 자동화
도구 간 통합 : 디자인 워크플로에서 Penpot을 다른 도구와 연결하세요
🚀 빠른 시작
필수 조건
Python 3.12+ (최적의 성능을 위해 최신 Python 권장)
펜팟 계정 ( 무료 가입 )
Claude Desktop 또는 Cursor IDE (선택 사항, AI 통합용)
설치
필수 조건
파이썬 3.12+
Penpot 계정 자격 증명
설치
옵션 1: PyPI에서 설치
지엑스피1
옵션 2: uv 사용(최신 Python 개발에 권장)
옵션 3: 소스에서 설치
구성
Penpot 자격 증명을 사용하여 env.example 기반으로 .env 파일을 만듭니다.
용법
MCP 서버 실행
MCP 서버 디버깅
MCP 서버를 디버깅하려면 다음을 수행할 수 있습니다.
DEBUG=true설정하여.env파일에서 디버그 모드를 활성화합니다.API 작업을 테스트하려면 Penpot API CLI를 사용하세요.
명령줄 도구
패키지에는 유틸리티 명령줄 도구가 포함되어 있습니다.
MCP 모니터링 및 테스트
MCP CLI 모니터
MCP 검사관
클라이언트 사용
MCP 리소스 및 도구
자원
server://info- 서버 상태 및 정보penpot://schema- JSON 형태의 Penpot API 스키마penpot://tree-schema- JSON 형태의 Penpot 객체 트리 스키마rendered-component://{component_id}- 렌더링된 구성 요소 이미지penpot://cached-files- 캐시된 Penpot 파일 목록
도구
list_projects- 모든 Penpot 프로젝트 나열get_project_files- 특정 프로젝트에 대한 파일 가져오기get_file- ID로 Penpot 파일을 검색하고 캐시합니다.export_object- Penpot 객체를 이미지로 내보내기get_object_tree- Penpot 객체의 객체 트리 구조를 가져옵니다.search_object- Penpot 파일 내에서 이름으로 객체 검색
AI 통합
Penpot MCP 서버는 모델 컨텍스트 프로토콜(Model Context Protocol)을 사용하여 AI 어시스턴트와 통합될 수 있습니다. Claude Desktop과 Cursor IDE를 모두 지원하여 원활한 디자인 워크플로 자동화를 구현합니다.
Claude 데스크톱 통합
Claude Desktop 설정에 대한 자세한 지침은 CLAUDE_INTEGRATION.md를 참조하세요.
Claude Desktop 구성 파일에 다음 구성을 추가합니다(macOS에서는 ~/Library/Application Support/Claude/claude_desktop_config.json , Windows에서는 %APPDATA%\Claude\claude_desktop_config.json ):
커서 IDE 통합
Cursor IDE는 AI 통합 기능을 통해 MCP 서버를 지원합니다. Penpot MCP를 Cursor와 함께 구성하려면 다음 단계를 따르세요.
MCP 서버를 설치합니다 (아직 설치되지 않은 경우):
pip install penpot-mcp커서 구성에 MCP 서버를 추가하여 커서 설정을 구성하세요 . 커서 설정을 열고 다음을 추가하세요.
{ "mcpServers": { "penpot": { "command": "uvx", "args": ["penpot-mcp"], "env": { "PENPOT_API_URL": "https://design.penpot.app/api", "PENPOT_USERNAME": "your_penpot_username", "PENPOT_PASSWORD": "your_penpot_password" } } } }대안: 프로젝트 루트에
.env파일을 만들어 환경 변수를 사용하세요 .PENPOT_API_URL=https://design.penpot.app/api PENPOT_USERNAME=your_penpot_username PENPOT_PASSWORD=your_penpot_password프로젝트에서 MCP 서버를 시작합니다 .
# In your project directory penpot-mcp커서에서 사용 : 구성이 완료되면 다음과 같은 질문을 통해 커서에서 Penpot 디자인과 직접 상호 작용할 수 있습니다.
"내 Penpot 계정의 모든 프로젝트를 보여주세요"
"프로젝트 X의 디자인 구성 요소를 분석하세요"
"메인 버튼 구성 요소를 이미지로 내보내기"
"이 파일에서는 어떤 디자인 패턴이 사용되었나요?"
주요 통합 기능
Claude Desktop과 Cursor 통합은 다음을 제공합니다.
Penpot 프로젝트 및 파일에 직접 액세스
AI 기반 통찰력을 통한 시각적 구성 요소 분석
자산 및 구성 요소에 대한 설계 내보내기 기능
디자인 파일에 대한 자연어 쿼리
실시간 디자인 피드백 및 제안
디자인 시스템 문서 생성
패키지 구조
개발
테스트
이 프로젝트에서는 테스트를 위해 pytest를 사용합니다.
린팅
기여하다
기여를 환영합니다! 풀 리퀘스트를 제출해 주세요.
저장소를 포크하세요
기능 브랜치를 생성합니다(
git checkout -b feature/amazing-feature)변경 사항을 커밋하세요(
git commit -m 'Add some amazing feature')브랜치에 푸시(
git push origin feature/amazing-feature)풀 리퀘스트 열기
귀하의 코드가 프로젝트의 코딩 표준을 따르고 적절한 테스트를 포함하고 있는지 확인하세요.
특허
이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.
감사의 말
Penpot - 오픈소스 디자인 및 프로토타입 제작 플랫폼
모델 컨텍스트 프로토콜 - AI 모델 컨텍스트를 위한 표준화된 프로토콜