스킬 자체의 표현으로
penpot/penpot-mcp 서버를 통해 Penpot에서 실제 인터페이스를 디자인하는 가이드로, 에이전트가 Penpot plugin API를 구동하는 디자이너와 개발자를 위해 작성되었습니다. 일반적인 조언 대신 실제 작업 순서를 명시합니다: MCP 서버가 이미 실행 중인지 확인하고, 파일에 이미 존재하는 색상, 텍스트 스타일, 컴포넌트를 파악하고, penpotUtils.shapeStructure로 계층 구조를 검사한 다음, board, rectangle, text를 생성하고 addFlexLayout 컨테이너를 적용합니다.
이 Skill은 대체용 8px 간격 및 타이포그래피 스케일, 모바일 375x812 및 대시보드 1440x900 레이아웃, 버튼·폼·내비게이션 체크리스트, WCAG 대비 및 터치 타깃 한도, board 배치 간격, width와 height가 읽기 전용인 것과 같은 Penpot API 함정, analyzeDescendants·fontSize 필터링·export_shape을 통한 검증을 제공합니다.
산출물
- plugin 컨텍스트에서 실행된 JavaScript로 생성된 새로운 또는 수정된 Penpot 디자인입니다.
- 추측하지 않고 디자인을 직접 확인하기 위해 사용하는, 선택한 shape의 PNG 또는 SVG 렌더입니다.
- 핸드오프를 위해 자식 요소를 포함하여 선택 항목에서 추출한 CSS입니다.
작동 방식
- 01서버 실행 여부 확인
첫 단계는 penpot_api_info에 시험 호출을 해보는 것으로, 연결이 이미 작동 중인데 설치 과정을 다시 안내받는 일이 없도록 합니다.
- 02기존 디자인 시스템 찾기
그림을 그리기 전에 브랜드 가이드라인에 대해 질문하고, 이미 사용 중인 컴포넌트, 색상, 패턴을 파악하기 위해 현재 파일을 읽습니다.
- 03페이지 구조 검사
shapeStructure는 기존 계층 구조를 반환하므로, 새 요소를 캔버스에 이미 있는 것과 상대적으로 배치할 수 있습니다.
- 04요소 생성
Board, rectangle, text는 서술로 설명되는 것이 아니라 Penpot plugin 컨텍스트에서의 plugin 호출을 통해 만들어집니다.
- 05내보내기로 검증
모든 변경은 내보내기로 마무리되어, 결과를 코드만 믿는 것이 아니라 이미지로 직접 확인합니다.