OpenPencil

Figma 파일을 열고 검사·변환·MCP 자동화까지 제공하는 오픈소스 디자인 툴킷

npm install -g @open-pencil/cli

OpenPencil은 .fig와 .pen 디자인 파일을 열고, CLI·MCP·Vue SDK·데스크톱 앱으로 디자인을 검사하고 수정하게 해 주는 오픈소스 디자인 에디터입니다. AI 채팅, 100개 이상 디자인 도구, Figma Plugin API 기반 eval, 토큰 추출, JSX/Tailwind export, 실시간 협업을 한 저장소에 묶습니다.

판단

이럴 때 씁니다

  • 에이전트가 .fig/.pen 파일을 검사하고 디자인 토큰, 색, 타이포그래피, spacing을 추출해야 할 때.
  • Figma UI를 열지 않고 CLI에서 디자인 파일을 lint, query, export, convert하고 싶을 때.
  • Claude Code나 Codex가 디자인 자산을 읽고 JSX/Tailwind export까지 이어 가는 workflow를 만들고 싶을 때.
  • 오픈소스·로컬 중심 디자인 파일 자동화가 필요하고, 서버 계정 없이 WebRTC 협업을 실험하고 싶을 때.

이럴 땐 쓰지 마세요

  • 운영 디자인 시스템의 단일 편집기로 바로 교체하기에는 README가 명시한 개발 상태 리스크가 큽니다.
  • 팀이 이미 Figma의 cloud collaboration, plugin, permission workflow에 강하게 묶여 있으면 전환 비용이 큽니다.
  • 디자인 파일이 아니라 영상 렌더링이 목표라면 HyperFrames가 더 직접적입니다.
  • 단순 이미지 export만 필요하면 전체 MCP/SDK 스택은 과합니다.

차별점

  • `.fig` 파일을 네이티브로 읽고 쓰는 것을 전면에 둡니다. Figma의 폐쇄 파일 포맷과 읽기 전용 MCP 한계를 피하려는 포지션입니다.
  • CLI에서 tree/find/node/info, XPath query, export, lint, token 분석, Figma Plugin API eval을 제공합니다.
  • MCP 서버와 에이전트 스킬을 제공해 Claude Code, Codex, Cursor, Windsurf 같은 에이전트가 디자인 파일을 직접 검사·수정할 수 있습니다.
  • Tauri v2 데스크톱 앱, 브라우저 PWA, Vue SDK, P2P WebRTC 협업까지 포함해 단순 변환기보다 표면적이 넓습니다.

워크플로

  1. 01웹 앱이나 데스크톱 앱으로 디자인 파일을 열어 호환성을 먼저 확인합니다.
  2. 02`npm install -g @open-pencil/cli`로 CLI를 설치하고 `openpencil tree design.fig`로 구조를 검사합니다.
  3. 03필요하면 `openpencil lint`, `openpencil analyze`, `openpencil export`로 검수와 추출을 자동화합니다.
  4. 04에이전트가 직접 파일을 다뤄야 하면 `@open-pencil/mcp` 또는 `npx skills add open-pencil/skills@open-pencil` 경로를 붙입니다.

주요 명령

명령설명
brew install openpencilmacOS에서 데스크톱 앱을 설치합니다
npm install -g @open-pencil/cliheadless CLI를 설치합니다
openpencil tree design.fig디자인 파일의 노드 트리를 터미널에서 확인합니다
claude mcp add --scope user open-pencil -- openpencil-mcpOpenPencil MCP 서버를 Claude Code에 등록합니다
npx skills add open-pencil/skills@open-pencil에이전트에 OpenPencil 사용 스킬을 설치합니다

설정

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

함정

설치 전에 확인하세요

  • README가 active development이며 production ready가 아니라고 명시합니다. 핵심 디자인 원본을 바로 맡기기보다 복사본으로 검증해야 합니다.
  • 데스크톱 에이전트 연동은 로컬 agent CLI와 데스크톱 앱 실행이 필요합니다.
  • MCP 파일 접근 범위는 `OPENPENCIL_MCP_ROOT`로 제한할 수 있습니다. 기본값은 현재 작업 디렉터리입니다.
  • Figma 호환을 목표로 하지만 Figma 전체 제품을 대체한다고 보기는 이릅니다. 팀 표준 워크플로에는 별도 검증이 필요합니다.

직접 써본 메모

OpenPencil의 핵심은 “디자인 파일을 에이전트가 다룰 수 있는 대상”으로 끌어내리는 데 있습니다. CLI와 MCP가 있어 단순히 화면을 보는 수준을 넘어 tree, query, lint, export, eval 같은 조작을 코드 작업 흐름에 넣을 수 있습니다.

특히 Figma MCP가 읽기 중심으로 느껴지는 팀에는 흥미로운 선택지입니다. README는 Figma가 programmatic access를 막는다는 문제의식에서 출발하고, .fig 파일 네이티브 읽기/쓰기를 차별점으로 둡니다. 디자인-투-코드나 토큰 추출 자동화에는 이 포지션이 분명합니다.

다만 바로 production workflow의 중심에 놓기는 이릅니다. 프로젝트 스스로 active development/not ready for production use라고 적고 있고, Figma 호환 도구는 작은 포맷 차이가 큰 손실로 이어질 수 있습니다. 복사본 기반 검증과 MCP 파일 권한 제한을 전제로 봐야 합니다.

비교

HyperFrames가 HTML/CSS를 MP4 영상으로 렌더링하는 제작 파이프라인이라면, OpenPencil은 디자인 원본(.fig/.pen)을 읽고 수정·추출하는 에디터와 자동화 툴킷입니다. Claude Code나 Codex CLI가 코드를 고치는 주체라면, OpenPencil은 그 에이전트에게 디자인 파일을 다루는 손과 눈을 붙여 주는 쪽에 가깝습니다.

최근 변경

v0.13.2에서 Homebrew 설치를 공개 openpencil cask로 갱신하고 전역 설치에 데스크톱 연동용 MCP 실행 파일이 포함되도록 수정했다.

공식 변경 내역