ZSeven-W/openpencil

세계 최초의 오픈 소스 (Open-source) AI 네이티브 벡터 디자인 도구.

동시 실행 에이전트 팀 (Concurrent Agent Teams) • 코드로서의 디자인 (Design-as-Code) • 내장형 MCP 서버 (Built-in MCP Server) • 멀티 모델 지능 (Multi-model Intelligence)

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

이미지를 클릭하여 데모 영상을 시청하세요.

참고: 동일한 이름을 가진 다른 오픈 소스 프로젝트인 OpenPencil가 있습니다. 해당 프로젝트는 실시간 협업이 가능한 Figma 호환 시각적 디자인에 집중합니다. 본 프로젝트는 AI 네이티브 디자인-투-코드 (design-to-code) 워크플로우에 집중합니다.

| 자연어로 어떤 UI든 설명하세요. 스트리밍 애니메이션과 함께 무한 캔버스(infinite canvas)에 실시간으로 나타나는 것을 확인하세요. 요소를 선택하고 채팅함으로써 기존 디자인을 수정할 수 있습니다. |
| 오케스트레이터 (Orchestrator)가 복잡한 페이지를 공간적 하위 작업(spatial sub-tasks)으로 분해합니다. 여러 AI 에이전트가 히어로(hero), 기능(features), 푸터(footer) 등 서로 다른 섹션에서 동시에 작업하며, 각 멤버별 캔버스 표시기와 함께 모두 병렬로 스트리밍됩니다. |
| 각 모델의 역량에 따라 자동으로 적응합니다. Claude는 사고 과정(thinking)이 포함된 전체 프롬프트를 받습니다; GPT-4o/Gemini는 사고 과정을 비활성화합니다; 소형 모델(MiniMax, Qwen, Llama)은 신뢰할 수 있는 출력을 위해 단순화된 프롬프트를 받습니다. |
| Claude Code, Codex, Gemini, OpenCode, Kiro 또는 Copilot CLI에 클릭 한 번으로 설치하세요. 터미널에서 읽기, 생성 및 수정을 통해 디자인할 수 있습니다. |
| 태그 기반 퍼지 매칭 (fuzzy matching) 기능이 포함된 내장 스타일 가이드 라이브러리. AI가 생성한 디자인에 시각적 스타일(글래스모피즘 (glassmorphism), 브루탈리즘 (brutalist), 레트로 (retro) 등)을 적용하세요. 외부 에이전트 접근을 위한 MCP 도구. |
| |
| Electron을 통해 macOS, Windows, Linux에서 웹 앱 + 네이티브 데스크톱을 지원합니다. GitHub Releases를 통해 자동 업데이트됩니다. |
| 터미널에서 디자인 도구를 제어하세요. |
| React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native로 한 번에 내보내기 하세요. |
| |
| 스타일 전환 및 컴포넌트 구성을 통해 재사용 가능한 UIKit을 관리하세요. 키트(kits)를 가져오거나 내보내기 하세요. |

macOS (Homebrew):

brew tap zseven-w/openpencil
brew install --cask openpencil

Windows (Scoop):

Windows (Scoop):

scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil
scoop install openpencil

Linux / Windows 직접 다운로드: GitHub Releases — .exe

(Windows), .AppImage

/ .deb

(Linux)

CLI (op):

npm install -g @zseven-w/openpencil

# 의존성 설치
bun install
# http://localhost:3000에서 개발 서버 시작
...

또는 데스크톱 앱으로 실행:

bun run electron:dev

사전 요구 사항: Bun >= 1.0 및 Node.js >= 18. 선택 사항: 소스에서 agent-native 빌드를 위한 Zig >= 0.14 (Zig가 설치되어 있지 않으면 사전 구축된 바이너리가 자동으로 다운로드됩니다).

여러 이미지 변형이 제공되므로 필요에 맞는 것을 선택하세요:

Image	Size	Includes
`openpencil:latest`	~226 MB	웹 앱 전용

Text-to-design (텍스트 투 디자인)— 페이지를 설명하면 SSE 스트리밍 애니메이션을 통해 캔버스에 실시간으로 생성됩니다.
Orchestrator (오케스트레이터)— 복잡한 페이지를 공간적 하위 작업(spatial sub-tasks)으로 분해하여 병렬 생성을 수행합니다.
Agent Teams (에이전트 팀)— 위임 도구(delegate tool), 멤버별 캔버스 표시기, 폴백 전략(fallback strategies)을 갖춘 동시 실행 팀원들입니다.
Design modification (디자인 수정)— 요소를 선택한 후 자연어로 변경 사항을 설명합니다.
Vision input (비전 입력)— 참조용 스크린샷이나 목업(mockup)을 첨부합니다.
Style Guides (스타일 가이드)— 태그 기반 퍼지 매칭(fuzzy matching)을 통해 시각적 스타일(글래스모피즘 (glassmorphism), 브루탈리즘 (brutalist), 레트로 (retro) 등)을 적용합니다.
Anti-slop (안티 슬롭)— 반복적인 AI 출력을 방지하기 위해 생성 간 다양성을 추적합니다.

Multi-Agent Support (멀티 에이전트 지원)

에이전트	설정
Built-in (9개 이상의 제공업체)	지역 전환기를 통해 제공업체 프리셋 선택 — Anthropic, OpenAI, Google, DeepSeek 등
Claude Code	설정 불필요 — 로컬 OAuth와 함께 Claude Agent SDK를 사용함
Codex CLI	에이전트 설정(`Cmd+,`)에서 연결
OpenCode	에이전트 설정(`Cmd+,`)에서 연결
GitHub Copilot	`copilot login` 후 에이전트 설정(`Cmd+,`)에서 연결
Gemini CLI	에이전트 설정(`Cmd+,`)에서 연결

Model Capability Profiles (모델 역량 프로필) — 모델 티어(tier)에 따라 프롬프트, 사고 모드(thinking mode), 타임아웃을 자동으로 조정합니다. 풀 티어(Full-tier) 모델(Claude)은 완전한 프롬프트를 받으며, 표준 티어(Standard-tier: GPT-4o, Gemini, DeepSeek)는 사고 모드를 비활성화합니다. 베이직 티어(Basic-tier: MiniMax, Qwen, Llama, Mistral)는 최대 신뢰성을 위해 단순화된 중첩 JSON (nested-JSON) 프롬프트를 받습니다.

i18n (국제화) — 15개 언어로 전체 인터페이스 현지화 지원: 영어, 简体中文 (간체 중국어), 繁體中文 (번체 중국어), 日本語 (일본어), 한국어, Français (프랑스어), Español (스페인어), Deutsch (독일어), Português (포르토갈어), Русский (러시아어), हिन्दी (힌디어), Türkçe (터키어), ไทย (태국어), Tiếng Việt (베트남어), Bahasa Indonesia (인도네시아어).

MCP Server (MCP 서버)

내장된 MCP 서버 (pen-mcp 패키지) — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI에 원클릭 설치 가능 - Node.js를 자동 감지하며, 설치되어 있지 않은 경우 HTTP 전송(HTTP transport)으로 폴백하여 MCP HTTP 서버를 자동 시작합니다.
터미널에서 디자인 자동화: .op 파일을 읽고, 생성하고, 수정합니다.

모든 MCP 호환 에이전트를 통해 파일을 처리합니다. 계층적 디자인 워크플로우 (Layered design workflow) — design_skeleton

→ design_content

→ design_refine

고충실도(higher-fidelity)의 다중 섹션 디자인을 위한 단계입니다. 세분화된 프롬프트 검색 (Segmented prompt retrieval) — 필요한 디자인 지식(스키마, 레이아웃, 역할, 아이콘, 계획 등)만 로드합니다. 스타일 가이드 도구 (Style guide tools) — get_style_guide_tags 및 get_style_guide를 사용하여 MCP를 통해 시각적 스타일을 적용합니다. 다중 페이지 지원 (Multi-page support) — MCP 도구를 통해 페이지를 생성, 이름 변경, 순서 변경 및 복제할 수 있습니다.

코드 생성 (Code Generation)

React + Tailwind CSS, HTML + CSS, CSS Variables
Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native

전역(globally)으로 설치하여 터미널에서 디자인 도구를 제어하세요:

npm install -g @zseven-w/openpencil

op start # 데스크톱 앱 실행
op design @landing.txt # 파일로부터 배치(Batch) 디자인 수행
op insert '{"type":"RECT"}' # 노드 삽입
...

세 가지 입력 방식을 지원합니다: 인라인 문자열, @filepath (파일에서 읽기), 또는 - (표준 입력(stdin)에서 읽기). 데스크톱 앱 또는 웹 개발 서버와 함께 작동합니다. 전체 명령어 참조는 CLI README를 확인하세요.

LLM 스킬 (LLM Skill) — OpenPencil Skill 플러그인을 설치하여 AI 에이전트(Claude Code, Cursor, Codex, Gemini CLI 등)에게 op를 사용하여 디자인하는 방법을 가르치세요.

캔버스 및 드로잉 (Canvas & Drawing)

팬(pan), 줌(zoom), 스마트 정렬 가이드 및 스냅(snapping) 기능이 포함된 무한 캔버스
사각형(Rectangle), 타원(Ellipse), 선(Line), 다각형(Polygon), 펜(Pen/Bezier), 프레임(Frame), 텍스트(Text)
불리언 연산 (Boolean operations) — 컨텍스트 툴바를 통한 합집합(union), 차집합(subtract), 교집합(intersect)
아이콘 피커 (Iconify) 및 이미지 가져오기 (PNG/JPEG/SVG/WebP/GIF)
오토 레이아웃 (Auto-layout) — 간격(gap), 패딩(padding), 정렬(justify), 맞춤(align)을 포함한 수직/수평 레이아웃
탭 탐색이 가능한 다중 페이지 문서

디자인 시스템 (Design System)

디자인 변수 (Design variables) — $variable 참조를 사용하는 색상(color), 숫자(number), 문자열(string) 토큰
다중 테마 지원 (Multi-theme support) — 여러 축(axes)을 지원하며, 각 축은 변형(Light/Dark, Compact/Comfortable)을 가집니다.
컴포넌트 시스템 (Component system) — 인스턴스(instances) 및 오버라이드(overrides)가 가능한 재사용 가능한 컴포넌트
CSS 동기화 (CSS sync) — 코드 출력 시 자동 생성된 사용자 정의 속성(custom properties) 및 var(--name) 사용
재사용 가능한 UIKits — .pen 파일에서 컴포넌트 키트를 가져오기/내보내기

AI & Agents

스트리밍 생성 (streaming generation) 및 오케스트레이터 주도 공간 분해 (orchestrator-driven spatial decomposition)를 통한 프롬프트-투-캔버스 (Prompt-to-canvas)
동시 에이전트 팀 (Concurrent Agent Teams) — 여러 디자이너가 멤버별 캔버스 인디케이터와 함께 서로 다른 섹션에서 병렬로 작업
계층적 워크플로우 (Layered workflow) —
design_skeleton

→ design_content

→ design_refine

각 단계별 집중 프롬프트 활용

스타일 가이드 (Style Guides) — 태그 기반 퍼지 매칭 (fuzzy matching)을 지원하며 기획 및 생성 단계에 통합된 50개 이상의 내장 스타일 (glassmorphism, brutalist, retro 등)
멀티 모델 기능 프로필 (Multi-model capability profiles) — 모델 티어별로 사고 모드 (thinking mode), 노력 (effort), 프롬프트 형태를 자동 적응
내장 에이전트 런타임 (agent-native, Zig NAPI) + Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini 제공자 지원
중국어 LLM 제공자를 위한 Anthropic 형식 패스스루 (passthrough) — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans

Git 통합 (Git Integration)

SSH / HTTPS 인증 및 SSH 키 관리를 지원하는 클론 위저드 (Clone wizard)
브랜치 선택기 (Branch picker) — git 패널에서 생성, 전환, 삭제, 병합 가능
인증 재시도 및 non-fast-forward 처리를 포함한 Pull / push 캐스케이드 (cascades)
디스크 상의 MERGE_HEAD 상태 추적을 지원하는 폴더 모드 3-way 머지 (three-way merge)
노드별 / 필드별 3-way 카드, 인라인 JSON 에디터, 일괄 작업 및 인라인 diff 블록을 제공하는 충돌 패널 (Conflict panel)
원격 설정 및 SSH 키 UI; 전체 Git 인터페이스에 걸쳐 15개 언어 국제화 (i18n) 지원

내보내기 (Export)

캔버스 내보내기 — PNG, JPEG, WEBP, PDF (Cmd+Shift+P)
코드 내보내기 — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
증분 MCP 코드 생성 (codegen) 파이프라인 — codegen_plan, codegen_submit_chunk, codegen_assemble, codegen_clean

Figma 가져오기 (Figma Import)

레이아웃, 채우기 (fills), 선 (strokes), 효과 (effects), 텍스트, 이미지 및 벡터가 보존된 .fig 파일 가져오기

데스크톱 앱 (Desktop App)

Electron을 통한 네이티브 macOS, Windows 및 Linux 지원
.op

파일 연결 (file association) — 더블 클릭으로 열기, 단일 인스턴스 잠금(single-instance lock) — GitHub Releases를 통한 자동 업데이트

다른 이름으로 저장(Save As), 최근 항목 열기(Open Recent), 종료 시 저장되지 않은 변경 사항 대화 상자를 포함한 네이티브 애플리케이션 메뉴
최근 파일 유지 (Recent files persistence)

openpencil/
├── apps/
│ ├── web/ TanStack Start 웹 앱
...

키 (Key)	동작 (Action)	키 (Key)	동작 (Action)
`V`	선택 (Select)	`Cmd+S`	저장 (Save)
`R`	사각형 (Rectangle)	`Cmd+Z`	실행 취소 (Undo)
`O`	타원 (Ellipse)	`Cmd+Shift+Z`	다시 실행 (Redo)
`L`	선 (Line)	`Cmd+C/X/V/D`	복사/잘라내기/붙여넣기/복제 (Copy/Cut/Paste/Duplicate)
`T`	텍스트 (Text)	`Cmd+G`	그룹화 (Group)
`F`	프레임 (Frame)	`Cmd+Shift+G`	그룹 해제 (Ungroup)
`P`	펜 도구 (Pen tool)	`Cmd+Shift+P`	내보내기 (Export) (PNG/JPG/WEBP/PDF)
`H`	핸드/팬 (Hand (pan))	`Cmd+Shift+C`	코드 패널 (Code panel)
`Del`	삭제 (Delete)	`Cmd+Shift+V`	변수 패널 (Variables panel)
`[ / ]`	순서 변경 (Reorder)	`Cmd+J`	AI 채팅 (AI chat)
화살표 (Arrows)	1px 미세 조정 (Nudge 1px)	`Cmd+,`	에이전트 설정 (Agent settings)
`Cmd+Alt+U`	불리언 합집합 (Boolean union)	`Cmd+Alt+S`	불리언 차집합 (Boolean subtract)
`Cmd+Alt+I`	불리언 교집합 (Boolean intersect)	`Cmd+Shift+S`	다른 이름으로 저장 (Save As)

bun --bun run dev # 개발 서버 (Dev server) (포트 3000)
bun --bun run build # 프로덕션 빌드 (Production build)
bun --bun run test # 테스트 실행 (Run tests) (Vitest)
...

기여(Contributions)를 환영합니다! 아키텍처 상세 정보와 코드 스타일은 CLAUDE.md를 참조하세요.

포크(Fork) 및 클론(clone)
버전 동기화 설정:
git config core.hooksPath .githooks
브랜치 생성:
git checkout -b feat/my-feature
체크 실행:
npx tsc --noEmit && bun --bun run test
Conventional Commits를 사용한 커밋:
feat(canvas): add rotation snapping
main 브랜치에 PR(Pull Request) 생성
CSS 동기화를 통한 디자인 변수(Design variables) 및 토큰(tokens) 설계
컴포넌트 시스템 (인스턴스(instances) 및 오버라이드(overrides))
오케스트레이터(orchestrator)를 활용한 AI 디자인 생성
계층형 디자인 워크플로우를 갖춘 MCP 서버 통합
멀티 페이지(Multi-page) 지원
Figma .fig 가져오기(import) - 불리언 연산(Boolean operations) (합집합(union), 차집합(subtract), 교집합(intersect))
멀티 모델 기능 프로필(Multi-model capability profiles)
재사용 가능한 패키지를 활용한 모노레포(Monorepo) 구조 재편
터미널 제어를 위한 CLI 도구 (op)
멀티 프로바이더(multi-provider)를 지원하는 내장 AI 에이전트 SDK
i18n — 15개 언어 지원
헤드리스 디자인 엔진 (pen-engine) + React UI SDK (pen-react)
태그 기반 매칭 및 MCP 도구를 갖춘 스타일 가이드(Style Guides)
위임 도구(delegate tool) 및 캔버스 인디케이터(canvas indicators)를 갖춘 동시 에이전트 팀(Concurrent Agent Teams)
네이티브 에이전트 런타임 (agent-native — Zig NAPI)
Git 통합 — 클론(clone), 브랜치(branch), 푸시/풀(push/pull), 폴더 모드 3-way 머지(three-way merge)
캔버스 래스터 내보내기 (PNG / JPEG / WEBP / PDF)
협업 편집
플러그인 시스템

OpenPencil은 무료이며 오픈 소스입니다. 개발은 이 도구가 유용하다고 느끼는 분들의 후원으로 이루어집니다 — 캔버스를 개방된 상태로 유지해 주셔서 감사합니다.

MrQyun 님께 감사드립니다 — 당신의 이름도 여기에 올리고 싶으신가요? 스폰서 되기 →

Discord 참여하기 — 질문하기, 디자인 공유하기, 기능 제안하기.

ZSeven-W/openpencil

요약

핵심 포인트

댓글