open-pencil/open-pencil

해결하는 문제

OpenPencil은 Figma와 같은 폐쇄형 디자인 플랫폼에 대한 오픈소스이자 프로그래머블한 대안을 제공합니다. 전용 파일 형식과 제한된 프로그래밍 접근성의 문제를 해결하기 위해 사용자가 .fig 파일을 네이티브로 읽고 쓸 수 있으며, CLI 또는 API를 통해 모든 작업을 스크립트로 처리하고 디자인 데이터를 로컬에 유지할 수 있도록 합니다.

작동 방식

Vue 3 프론트엔드와 Skia 기반 렌더링 엔진으로 구축된 디자인 에디터입니다. Flex 및 그리드 레이아웃에는 Yoga WASM을 사용하고, 서버리스 피어투피어 실시간 협업에는 Yjs와 WebRTC를 활용합니다. 헤드리스 CLI(파일 검사 및 수정용), AI 에이전트 통합을 위한 MCP 서버, 개발자가 자체 에디팅 표면을 구축할 수 있도록 도와주는 Vue SDK가 포함되어 있습니다.

대상 사용자

• 디자이너: Figma 파일을 지원하고 로컬 데이터 소유권을 유지할 수 있는 오픈소스 에디터를 원하는 사람.
• 개발자: 디자인 파일을 프로그래밍으로 조작하거나, 레이아웃을 검사하거나, 디자인을 코드(JSX/Tailwind)로 내보내고 싶은 사람.
• AI 엔지니어: Model Context Protocol (MCP)를 사용해 UI 디자인을 생성하거나 수정하는 에이전트를 개발하는 사람.

주요 기능

• Figma 호환성: .fig 파일 열기 및 내보내기의 네이티브 지원.
• AI 기반 디자인: 내장된 챗 어시스턴트와 100개 이상의 도구를 갖춘 MCP 서버로 AI 에이전트가 노드를 생성하거나 수정할 수 있음.
• 프로그래머블 툴킷: XPath 쿼리 지원 헤드리스 CLI, Figma 플러그인 API의 eval 모드, Vue SDK 포함.
• 디자인에서 코드로: 선택한 요소를 JSX/Tailwind로 내보내거나, HTML/CSS를 편집 가능한 디자인 레이어로 가져올 수 있음.
• 서버리스 협업: 계정이나 중앙 서버 없이 P2P WebRTC를 통해 실시간 공동 편집이 가능.