Penpot은 AI 기반 디자인 워크플로우를 위해 MCP 서버를 실험하고 있습니다 — Smashing Magazine

Penpot 파일에 디자인 자체 외에 전체 아이콘 세트가 포함되어 있다고 상상해 보세요. 이 아이콘은 전부는 아니지만 일부만 사용합니다. 클로드나 제미니 같은 AI에게 사용 중인 아이콘만 내보내달라고 하면 그렇게 할 수 없습니다. Penpot 파일과 상호 작용할 수 없습니다.

그러나 펜팟 MCP 서버 할 수 있다. 설정된 규칙 및 권한에 따라 엄선된 수의 작업을 수행할 수 있습니다. 특히 Penpot에는 광범위한 API가 있기 때문에 더욱 그렇습니다. 오픈 소스.

AI의 임무는 단순히 사용자의 의도를 이해하고, MCP 서버가 수행할 올바른 작업(이 경우 내보내기)을 선택하고, 매개변수(예: 사용 중인 아이콘)를 전달하는 것입니다. 그런 다음 MCP 서버는 이를 구조화된 API 요청으로 변환하고 실행합니다.

AI를 주문을 받는 레스토랑의 서버로, MCP 서버를 메뉴와 요리사로, API 요청을 따뜻한 접시에 담긴 뜨거운 피자 파이로 생각하면 도움이 될 수 있습니다.

정확히 MCP 서버가 필요한 이유는 무엇입니까? 글쎄, Penpot은 LLM이 아니기 때문에 귀하의 의도를 이해할 수 없으며 타사 LLM이 Penpot 데이터의 보안 및 개인 정보 보호를 위해 Penpot 파일과 상호 작용하는 것을 허용하지 않습니다. Penpot MCP 서버는 안전한 다리Penpot 파일과 데이터를 컨텍스트로 사용하여 AI 의도를 API 요청으로 변환합니다.

더 좋은 점은 Penpot이 코드로 표현된 디자인 접근 방식디자인은 세부적인 수준에서 프로그래밍 방식으로 생성, 편집 및 분석될 수 있습니다. 다른 MCP 서버가 제공하는 것과 비교할 때 더 상황에 맞고 더 구체적이므로 더 강력합니다. 멀리 누구도 정말로 원하지 않을 것 같은 수준 이하의 ‘설명 → 생성’ AI 워크플로보다 더 사려 깊습니다. Penpot의 AI 백서에서는 이를 나쁜 접근 방식으로, ‘코드로 변환’ 접근 방식을 추악한 접근 방식으로 설명하는 반면, MCP 서버는 더 세련되고 적응성이 뛰어납니다.

기능 및 기술 세부정보

사용 사례로 넘어가기 전에 Penpot MCP 서버 작동 방식을 자세히 설명하는 몇 가지 기능과 기술 세부 정보는 다음과 같습니다.

• MCP 표준을 준수합니다.
• 실시간 설계 데이터를 위해 Penpot API와 통합됩니다.
• Python SDK, REST API, 플러그인 시스템 및 CLI 도구가 포함되어 있습니다.
• MCP 지원 AI 도우미(VS Code의 Claude, Cursor의 Claude, Claude Desktop 등)와 함께 작동합니다.
• AI 모델과 설계 컨텍스트를 공유하고 구성 요소를 보고 이해할 수 있도록 지원합니다.
• 자연어를 사용하여 Penpot과의 커뮤니케이션을 촉진합니다.

그렇다면 MCP 서버를 통해 Penpot에서 무엇을 할 수 있으며 기존 실험에서 이미 무엇을 달성했습니까? 살펴 보겠습니다.

Penpot MCP 서버 사용 사례

Penpot MCP 서버가 수행할 수 있는 작업을 건너뛰고 싶다면 Penpot의 Google 드라이브에 볼만한 가치가 있는 몇 가지 MCP 데모가 숨겨져 있습니다. Penpot CEO Pablo Ruiz-Múzquiz는 동영상 03, 04, 06, 08 및 12가 가장 좋아하는 동영상이라고 언급했습니다.

MCP 서버를 요약하는 더욱 빠른 방법은 Penpot Fest 2025의 공개를 보는 것입니다.

그렇지 않으면 Penpot이 공개 쇼케이스에서 시연한 좀 더 세련된 예를 살펴보겠습니다.

디자인-코드 및 다시 복귀(및 기타)

Penpot 디자인이 코드로 표현되는 방법에 대해 앞서 말한 내용을 실행하면 MCP 서버를 사용하여 AI를 사용하여 디자인을 코드로 변환할 수 있을 뿐만 아니라 코드를 디자인으로, 디자인을 문서로, 문서를 디자인 시스템 요소로, 디자인을 다시 코드로 변환할 수도 있습니다. 기반을 둔 그리고 그 디자인 시스템을 기반으로 하는 완전히 새로운 구성 요소를 제공합니다.

초현실적으로 들리지만 아래 데모는 이를 보여줍니다. 변형성그리고 표현 방식(디자인, 코드 또는 문서)에 관계없이 모호한 지침이 아니라 오히려 이전 디자인 선택에서 나온 것입니다. 놀랄 일은 없습니다. 이는 이전 결정을 바탕으로 내린 결정일 뿐이며 신속하게 실행됩니다.

데모에서 Penpot의 디자이너인 Juan de la Cruz García는 일부 간단한 구성 요소를 문서, 디자인 시스템 요소, 코드, 새 구성 요소는 물론 Play-Doh와 같은 완전한 스토리북 프로젝트까지 원활하게 변환합니다.

설계-코드, 설계/코드 검증 및 간단한 운영

아래 유사한 데모에서 Oraios AI의 공동 창립자인 Dominik Jain은 프런트엔드 스타일을 업데이트하기 전에 디자인을 기반으로 Node.js 웹 앱을 만들고, 이름과 식별자를 메모리에 저장하여 일관성을 확인하기 전에 디자인에서 코드로의 원활한 변환을 보장하고, Penpot에서 선택한 모양 옆에 주석을 추가한 다음 Penpot의 낙서를 조정된 구성 요소로 바꿉니다. 여기서는 많은 일이 일어나고 있지만 Dominik이 Claude Desktop에 입력하는 내용과 Claude의 응답을 정확히 볼 수 있습니다. 매우 건장한:

그런데 이전 데모에서는 VS Code에서 Claude를 사용했기 때문에 다음 사항에 유의해야 합니다. Penpot MCP 서버는 LLM에 구애받지 않습니다.. 귀하의 기술 스택은 전적으로 귀하에게 달려 있습니다. IvanTheGeek는 JetBrains Rider IDE 및 Junie AI를 사용하여 MCP 서버를 설정했습니다.

더 많은 사용 사례

Penpot 디자인 토큰을 활용하면서 Penpot 보드를 프로덕션에 즉시 사용 가능한 시맨틱 HTML 및 모듈식 CSS로 변환합니다. (Penpot 디자인은 이미 코드로 표현되었으므로 이것은 암묵적인 장면이 아니라는 점을 기억하십시오.)

기존 HTML을 변경하지 않고 대화형 웹 프로토타입을 생성합니다.

앞에서 설명한 것처럼 기존 디자인 및/또는 디자인 시스템 요소를 활용하여 낙서를 구성 요소로 변환합니다.

Penpot 파일에서 디자인 시스템 문서를 생성합니다.

Penpot과 커뮤니티의 추가 사용 사례는 다음과 같습니다.

• 고급 수출,
• 자연어를 활용하여 디자인 요소를 검색하고,
• 자연어를 사용하여 외부 API에서 데이터를 가져옵니다.
• Penpot을 다른 외부 도구와 쉽게 연결하고,
• 반복적인 작업을 메모리에 저장하고 실행하는 것,
• 시각적 회귀 테스트,
• 설계 일관성 및 중복성 검사,
• 접근성 및 사용성 분석 및 피드백,
• 설계 시스템 적합성 검사,
• 가이드라인 준수 여부 확인(브랜드, 콘텐츠 등),
• 설계 분석을 통해 채택 및 사용을 모니터링하고,
• 문서를 설계와 자동으로 동기화합니다.
• 파일 구성(예: 태깅/분류)을 설계합니다.

본질적으로 Penpot MCP 서버는 무한한 수의 워크플로우 선택한 LLM/LLM 클라이언트의 효율성과 용이성 덕분에 데이터가 노출되지 않습니다.

MCP 서버를 무엇에 사용하시겠습니까?

Penpot MCP 서버는 아직 베타 단계도 아니지만 활성 실험 당신도 그 일부가 될 수 있다는 것입니다. Penpot 사용자는 이미 MCP 서버의 사용 사례를 탐색하기 시작했지만 Penpot은 더 많은 것을 보고 싶어합니다. 차세대 디자인 도구가 디자이너, 개발자 및 제품 팀 전반의 요구 사항을 충족시키려면 이러한 도구를 구축해야 합니다. 집합적으로 그리고 협력하여특히 AI와 관련된 경우.

메모: Penpot은 Penpot의 MCP 서버를 탐색하고, 실험하고, 개선하는 데 도움을 주고자 하는 베타 테스터를 찾고 있습니다. 참여하려면 “MCP 베타 테스트 자원봉사자”라는 제목으로 [email protected]에 이메일을 보내주세요.

Penpot MCP 서버가 할 수 있다고 생각하지만 현재 도구로는 충분히 잘 수행할 수 없거나 충분히 빠르거나 전혀 수행할 수 없는 것이 있습니까?

여기에서 Penpot MCP 서버를 설정하는 방법을 배우고 오늘부터 수정 작업을 시작할 수 있습니다. 또는 이미 아이디어가 넘쳐난다면 Penpot에서 토론에 참여하고 피드백을 공유하고 사용 사례에 대해 이야기하기를 원합니다. 또는 바로 아래의 댓글 섹션도 시작하기에 나쁘지 않은 곳입니다!

(gg, yk)