open-pencil

개요

open-pencil은 AI 중심 설계 철학의 차세대 오픈소스 디자인 편집기. Figma 대체를 목표로 하며, .fig 파일을 직접 읽고 쓸 수 있어 기존 Figma 프로젝트를 그대로 열어 수정 가능. 채팅 인터페이스에서 명령어로 AI가 디자인을 조작하고, MCP 서버와 CLI로 자동화·CI 통합까지 지원.

GitHub: https://github.com/open-pencil
라이선스: MIT
플랫폼: macOS, Windows, Linux (Tauri v2), PWA 웹앱
크기: 약 7MB 경량 실행 파일

핵심 차별점

vs Figma

항목	Figma	open-pencil
라이선스	독점 (SaaS)	MIT 오픈소스
AI 통합	Figma AI (제한적)	AI 네이티브 설계
로컬 실행	웹 중심	데스크탑 앱 + 웹
협업	서버 기반	WebRTC P2P + CRDT
자동화	Plugin API	Plugin API + MCP + CLI
파일 포맷	독점	.fig 직접 읽기/쓰기

AI 기능

채팅 기반 조작

"로고 중앙에 배치하고 아래 버튼 3개 생성해줘"
  ↓
AI가 90+개 도구 중 필요한 것 선택:
  - 도형 생성 도구
  - 속성 변경 도구
  - 자동 레이아웃 도구
  ↓
실제 디자인에 즉시 반영

다중 AI 프로바이더 지원

프로바이더	모델 예시
Anthropic	Claude Opus 4.6, Sonnet 4.6
OpenAI	GPT-5.4, GPT-5.3
Google AI	Gemini 3.x
OpenRouter	다양한 모델 게이트웨이

→ API 키만 넣으면 원하는 모델 선택 가능

실시간 협업: 서버리스

[사용자 A] ←── WebRTC P2P ──→ [사용자 B]
     ↕                               ↕
  Yjs (CRDT)                    Yjs (CRDT)
  로컬 상태                      로컬 상태

서버/계정 불필요: 링크 공유만으로 공동 편집
Yjs CRDT: 충돌 없는 분산 상태 동기화
P2P: 데이터가 중앙 서버를 거치지 않음 → 프라이버시

자동 레이아웃

Yoga WASM 기반:

Flexbox: React Native와 동일한 엔진
CSS Grid: 웹 표준 레이아웃
→ 디자인 시점부터 실제 웹/앱과 동일한 레이아웃 로직

코드 변환 (디자인 → 코드)

선택 영역 → Tailwind v4 유틸리티 클래스 → HTML/JSX

// 출력 예시
<div className="flex flex-col gap-4 p-6 bg-white rounded-lg shadow">
  <h2 className="text-2xl font-bold">제목</h2>
  <p className="text-gray-600">설명</p>
  <button className="px-4 py-2 bg-blue-500 text-white rounded">
    버튼
  </button>
</div>

CLI & 자동화

CLI 기능

# .fig 파일 구조 탐색
pencil inspect design.fig
 
# XPath 질의
pencil query design.fig "//frame[@name='Button']"
 
# 포맷 변환
pencil export design.fig --format png,jpg,webp,jsx
 
# Plugin API 스크립트 실행
pencil eval design.fig script.js

CI 파이프라인 통합

# GitHub Actions 예시
- name: 디자인 린팅
  run: pencil lint design.fig
 
- name: 아이콘 export
  run: pencil export design.fig --format svg --out ./icons
 
- name: 디자인 토큰 추출
  run: pencil tokens design.fig > tokens.json

MCP 서버

AI 에이전트(Claude Code, Cursor 등)에서 직접 디자인 조작:

{
  "mcpServers": {
    "open-pencil": {
      "command": "pencil",
      "args": ["mcp-server"]
    }
  }
}

→ Claude Code에서 “히어로 섹션 디자인 만들어” 같은 명령으로 실제 .fig 파일 생성/수정

디자인 토큰 분석

자동 추출:

색상: 사용된 모든 컬러 팔레트
타이포그래피: 폰트·크기·가중치 시스템
간격(Spacing): 반복 사용되는 패딩·마진 값
컴포넌트 패턴: 재사용 가능 요소 식별

→ 디자인 시스템 구축·감사에 활용

설치 & 사용

# macOS
brew install open-pencil
 
# 데스크탑 앱 (GitHub Releases)
# 또는 PWA 웹앱
# https://open-pencil.app (예시)
 
# CLI
npm install -g @open-pencil/cli
pencil --version

로드맵

향후 계획:
  ✓ 프로토타이핑 (인터랙션 시뮬레이션)
  ✓ GPU 셰이더 효과
  ✓ 컴포넌트 라이브러리
  ✓ CI용 디자인 린팅
  ✓ WebGPU 렌더링 (성능 개선)

활용 시나리오

시나리오	방식
Figma 이탈	기존 .fig 그대로 열기
AI 보조 디자인	채팅으로 디자인 반복
디자인 → 코드	Tailwind JSX 바로 export
CI 디자인 검증	색상·토큰 일관성 자동 체크
Claude Code 연동	MCP로 자연어 디자인 조작
프라이버시 중시 팀	P2P 협업, 서버 없음

평가

장점

오픈소스 (MIT) → 벤더 락인 없음
Figma 파일 호환 → 이전 비용 낮음
AI 네이티브 설계
경량 (7MB)
MCP 지원 → AI 에이전트 통합
서버리스 협업

한계 (예상)

Figma 생태계(플러그인·커뮤니티) 대비 초기
엔터프라이즈 기능 미비 가능
대규모 조직 협업은 서버 모델 필요할 수도

Bigstones

Explorer