Skip to main content
Glama
deenesjakoruzh

Penpot MCP Server

by montevive
GitHub
Python
41
  • Apple
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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 등)와 호환됩니다.

🎥 데모 영상

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 개발에 권장)
# Install directly with uvx (when published to PyPI) uvx penpot-mcp # For local development, use uvx with local path uvx --from . penpot-mcp # Or install in a project with uv uv add penpot-mcp
옵션 3: 소스에서 설치
# Clone the repository git clone https://github.com/montevive/penpot-mcp.git cd penpot-mcp # Using uv (recommended) uv sync uv run penpot-mcp # Or using traditional pip python -m venv .venv source .venv/bin/activate # On Windows: .venv\Scripts\activate pip install -e .

구성

Penpot 자격 증명을 사용하여 env.example 기반으로 .env 파일을 만듭니다.

PENPOT_API_URL=https://design.penpot.app/api PENPOT_USERNAME=your_penpot_username PENPOT_PASSWORD=your_penpot_password PORT=5000 DEBUG=true

용법

MCP 서버 실행

# Using uvx (when published to PyPI) uvx penpot-mcp # Using uvx for local development uvx --from . penpot-mcp # Using uv in a project (recommended for local development) uv run penpot-mcp # Using the entry point (if installed) penpot-mcp # Or using the module directly python -m penpot_mcp.server.mcp_server

MCP 서버 디버깅

MCP 서버를 디버깅하려면 다음을 수행할 수 있습니다.

  1. DEBUG=true 설정하여 .env 파일에서 디버그 모드를 활성화합니다.
  2. API 작업을 테스트하려면 Penpot API CLI를 사용하세요.
# Test API connection with debug output python -m penpot_mcp.api.penpot_api --debug list-projects # Get details for a specific project python -m penpot_mcp.api.penpot_api --debug get-project --id YOUR_PROJECT_ID # List files in a project python -m penpot_mcp.api.penpot_api --debug list-files --project-id YOUR_PROJECT_ID # Get file details python -m penpot_mcp.api.penpot_api --debug get-file --file-id YOUR_FILE_ID

명령줄 도구

패키지에는 유틸리티 명령줄 도구가 포함되어 있습니다.

# Generate a tree visualization of a Penpot file penpot-tree path/to/penpot_file.json # Validate a Penpot file against the schema penpot-validate path/to/penpot_file.json

MCP 모니터링 및 테스트

MCP CLI 모니터
# Start your MCP server in one terminal python -m penpot_mcp.server.mcp_server # In another terminal, use mcp-cli to monitor and interact with your server python -m mcp.cli monitor python -m penpot_mcp.server.mcp_server # Or connect to an already running server on a specific port python -m mcp.cli monitor --port 5000
MCP 검사관
# Start your MCP server in one terminal python -m penpot_mcp.server.mcp_server # In another terminal, run the MCP Inspector (requires Node.js) npx @modelcontextprotocol/inspector

클라이언트 사용

# Run the example client penpot-client

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 ):

{ "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" } } } }

커서 IDE 통합

Cursor IDE는 AI 통합 기능을 통해 MCP 서버를 지원합니다. Penpot MCP를 Cursor와 함께 구성하려면 다음 단계를 따르세요.

  1. MCP 서버를 설치합니다 (아직 설치되지 않은 경우):
    pip install penpot-mcp
  2. 커서 구성에 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" } } } }
  3. 대안: 프로젝트 루트에 .env 파일을 만들어 환경 변수를 사용하세요 .
    PENPOT_API_URL=https://design.penpot.app/api PENPOT_USERNAME=your_penpot_username PENPOT_PASSWORD=your_penpot_password
  4. 프로젝트에서 MCP 서버를 시작합니다 .
    # In your project directory penpot-mcp
  5. 커서에서 사용 : 구성이 완료되면 다음과 같은 질문을 통해 커서에서 Penpot 디자인과 직접 상호 작용할 수 있습니다.
    • "내 Penpot 계정의 모든 프로젝트를 보여주세요"
    • "프로젝트 X의 디자인 구성 요소를 분석하세요"
    • "메인 버튼 구성 요소를 이미지로 내보내기"
    • "이 파일에서는 어떤 디자인 패턴이 사용되었나요?"

주요 통합 기능

Claude Desktop과 Cursor 통합은 다음을 제공합니다.

  • Penpot 프로젝트 및 파일에 직접 액세스
  • AI 기반 통찰력을 통한 시각적 구성 요소 분석
  • 자산 및 구성 요소에 대한 설계 내보내기 기능
  • 디자인 파일에 대한 자연어 쿼리
  • 실시간 디자인 피드백 및 제안
  • 디자인 시스템 문서 생성

패키지 구조

penpot_mcp/ ├── api/ # Penpot API client ├── server/ # MCP server implementation │ ├── mcp_server.py # Main MCP server │ └── client.py # Client implementation ├── tools/ # Utility tools │ ├── cli/ # Command-line interfaces │ └── penpot_tree.py # Penpot object tree visualization ├── resources/ # Resource files and schemas └── utils/ # Helper utilities

개발

테스트

이 프로젝트에서는 테스트를 위해 pytest를 사용합니다.

# Using uv (recommended) uv sync --extra dev uv run pytest # Run with coverage uv run pytest --cov=penpot_mcp tests/ # Using traditional pip pip install -e ".[dev]" pytest pytest --cov=penpot_mcp tests/

린팅

# Using uv (recommended) uv sync --extra dev # Set up pre-commit hooks uv run pre-commit install # Run linting uv run python lint.py # Auto-fix linting issues uv run python lint.py --autofix # Using traditional pip pip install -r requirements-dev.txt pre-commit install ./lint.py ./lint.py --autofix

기여하다

기여를 환영합니다! 풀 리퀘스트를 제출해 주세요.

  1. 저장소를 포크하세요
  2. 기능 브랜치를 생성합니다( git checkout -b feature/amazing-feature )
  3. 변경 사항을 커밋하세요( git commit -m 'Add some amazing feature' )
  4. 브랜치에 푸시( git push origin feature/amazing-feature )
  5. 풀 리퀘스트 열기

귀하의 코드가 프로젝트의 코딩 표준을 따르고 적절한 테스트를 포함하고 있는지 확인하세요.

특허

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.

감사의 말

This server cannot be installed

-
security - not tested
F
license - not found
-
quality - not tested

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

AI 언어 모델과 Penpot 디자인 플랫폼을 연결하여 AI 어시스턴트가 자동화된 디자인 워크플로를 위해 프로그래밍 방식으로 디자인 파일을 분석, 검색하고 상호 작용할 수 있도록 합니다.

  1. 🚀 Penpot MCP란 무엇인가요?
    1. 🎯 주요 이점
  2. 🎥 데모 영상
    1. ✨ 특징
      1. 🔌 핵심 역량
      2. 🛠️ 개발자 도구
      3. 🎨 AI 통합 기능
    2. 💡 사용 사례
      1. 디자이너를 위한
      2. 개발자를 위한
      3. 제품 팀을 위해
    3. 🚀 빠른 시작
      1. 필수 조건
    4. 설치
      1. 필수 조건
      2. 설치
      3. 구성
    5. 용법
      1. MCP 서버 실행
      2. MCP 서버 디버깅
      3. 명령줄 도구
      4. MCP 모니터링 및 테스트
      5. 클라이언트 사용
    6. MCP 리소스 및 도구
      1. 자원
      2. 도구
    7. AI 통합
      1. Claude 데스크톱 통합
      2. 커서 IDE 통합
      3. 주요 통합 기능
    8. 패키지 구조
      1. 개발
        1. 테스트
        2. 린팅
      2. 기여하다
        1. 특허
          1. 감사의 말

            Related MCP Servers

            • Dify MCP Server

              AI-FE
              A
              security
              F
              license
              A
              quality
              Integrates Dify AI API to provide code generation for Ant Design components, supporting both text and image inputs with stream processing capabilities.
              Last updated -
              1
              22
              JavaScript

            • Magic Component Platform

              oyasimi1209
              A
              security
              F
              license
              A
              quality
              AI-driven tool that helps developers create beautiful UI components instantly through natural language descriptions, integrating with popular IDEs like Cursor, Windsurf, and VSCode.
              Last updated -
              3
              1

            • Metasploit MCP Server

              GH05TCREW
              -
              security
              A
              license
              -
              quality
              Provides a bridge between large language models and the Metasploit Framework, enabling AI assistants to access and control penetration testing functionality through natural language.
              Last updated -
              34
              Python
              Apache 2.0
              • Linux
              • Apple

            • 21st.dev Magic AI Agent

              zackbissell
              -
              security
              F
              license
              -
              quality
              A powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.
              Last updated -
              5,527
              TypeScript

            View all related MCP servers

            New MCP Servers

            MCP directory API

            We provide all the information about MCP servers via our MCP API.

            curl -X GET 'https://glama.ai/api/mcp/v1/servers/montevive/penpot-mcp'

            If you have feedback or need assistance with the MCP directory API, please join our Discord server