OpenPencil – 오픈소스 디자인 편집기, AI 내장

개요 – 로컬에서 실행되는 디자인 도구로, 네이티브 Figma (.fig) 및 Pencil (.pen) 파일을 열고, 전체 UI로 편집하며, 강력한 CLI와 AI 기반 "MCP" 서버를 통해 모든 것을 자동화할 수 있습니다. 작은(약 15MB) 데스크톱 앱(Tauri v2)과 PWA로 제공되며, 다른 애플리케이션에 편집기를 임베드하기 위한 Vue 기반 SDK도 제공합니다.

핵심 기능

기능	작동 방식
파일 지원	`.fig`(Figma) 및 `.pen`(Pencil) 파일 읽기/쓰기; 앱 간에 노드 복사-붙여넣기 가능.
AI 지원 디자인	100개 이상의 "도구"(모양 만들기, 채우기 설정, 자동 레이아웃 실행, 구성 요소 관리, 자산 내보내기 등)를 갖춘 내장 채팅 패널. 모든 BYOK LLM 제공업체(OpenAI, Anthropic, Google AI, OpenRouter, DeepSeek 등)에 연결 가능 – 백엔드 없음, 계정 없음.
프로그래밍 가능한 CLI	`openpencil`을 사용하면 노드 트리 검사, XPath 쿼리 실행, 린트, 색상/타이포그래피 분석, 형식 변환, PNG/JPG/SVG/PDF/JSX/Tailwind/Storybook으로 내보내기, 심지어 Figma Plugin API 스크립트를 헤드리스로 실행할 수 있습니다.
MCP 서버	동일한 100개 이상의 디자인 도구를 stdio 또는 HTTP를 통해 노출하여 AI 코딩 에이전트(Claude Code, Codex, Gemini, Cursor 등)가 프로그래밍 방식으로 디자인을 읽고/수정하고/내보낼 수 있도록 합니다.
Vue SDK	헤드리스 컴포넌트와 컴포저블을 사용하여 편집기를 임베드하거나 사용자 정의 워크플로 전용 편집기를 구축할 수 있습니다.
실시간 협업	피어 투 피어 WebRTC + Yjs CRDT; 링크 공유, 서로의 커서 보기, 뷰포트 따라가기, 음성 통화 시작 – 모두 중앙 서버 없이 가능.
자동 레이아웃 및 CSS Grid	Yoga를 WASM으로 컴파일한 Flexbox 및 그리드, gap, padding, alignment 완전 지원.
이미지 벡터화	Recraft 또는 fal.ai를 통해 래스터 레이어를 편집 가능한 벡터로 변환.
디자인-투-코드 내보내기	선택 영역을 JSX/Tailwind로 내보내기, 디자인 토큰 파일 생성, Storybook 스토리 생성.
크로스 플랫폼	macOS, Windows, Linux용 데스크톱 빌드(Tauri 경유); 웹 앱은 최신 브라우저(Chrome 111+, Edge 111+, Firefox 128+, Safari 16.4+)에서 작동.

시작하기

# macOS에서 Homebrew 사용
brew install --cask openpencil

# 또는 CLI를 전역으로 설치
npm i -g @open-pencil/cli   # 또는 bun add -g @open-pencil/cli

최신 데스크톱 릴리스를 GitHub에서 다운로드하거나 https://app.openpencil.dev/demo 에서 웹 데모를 실행하세요.

일반적인 워크플로

Figma 파일 열기 → UI를 편집하거나 openpencil tree design.fig를 실행하여 노드 계층을 탐색합니다.
AI에게 컴포넌트 생성을 요청 → 채팅(⌘J/Ctrl+J)을 열고 UI를 설명하면 도구가 노드를 생성합니다.
자산 내보내기 → openpencil export design.fig -f tailwind-jsx 또는 -f storybook으로 코드 핸드오프를 수행합니다.
스크립트로 자동화 → openpencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity=0.5)" -w.
협업 → 생성된 WebRTC 링크를 공유합니다. 팀원은 실시간 편집을 보고 음성 채팅을 할 수 있습니다.
다른 곳에 통합 → Vue 앱에 @open-pencil/sdk를 가져와 사용자 정의 편집기 표면을 구축합니다.

누가 사용할까요?

디자인 운영 팀: Figma의 폐쇄형 API에 대한 스크립트 가능하고 로컬 우선 대안이 필요한 경우.
개발자: 디자인-투-코드 파이프라인(JSX/Tailwind 자동 내보내기, 토큰 파일 생성)을 구축하는 경우.
AI 도구 빌더: Claude Code, Cursor 또는 사용자 정의 MCP 클라이언트와 같은 에이전트를 위한 프로그래밍 가능한 디자인 백엔드를 원하는 경우.
교육자 및 취미 사용자: 실시간 협업이 가능한 무료 오픈소스 디자인 편집기를 찾는 경우.

커뮤니티 및 기여

Discord: https://discord.gg/4wXc9fuZfm – 빠른 도움말 및 쇼케이스.
GitHub Discussions: Q&A, 아이디어, 공지.
기여: 웹 편집기에는 bun install && bun run dev:portless, 데스크톱 앱에는 bun run tauri dev(Rust 필요). 지침은 CONTRIBUTING.md를 참조하세요.

라이선스

MIT – 개인, 교육, 상업적 용도로 무료.

요약 – OpenPencil은 최고 수준의 AI 통합을 갖춘 완전히 개방적이고 스크립트 가능한 디자인 환경을 제공하여 독점 플랫폼에 의존하지 않고 UI/UX 작업을 자동화, 확장 및 협업할 수 있게 합니다.

open-pencil/open-pencil