mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-06-01 03:14:29 +07:00

Kayshen-X 29e0bdaeeb docs: move MseeP badge to bottom of all README versions

2026-04-29 22:00:00 +08:00

22 KiB

Raw Blame History

OpenPencil

세계 최초의 오픈소스 AI 네이티브 벡터 디자인 툴.
_{동시 에이전트 팀 • 디자인-애즈-코드 • 내장 MCP 서버 • 멀티 모델 인텔리전스}

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

_{이미지를 클릭하여 데모 영상 보기}

참고: 같은 이름의 다른 오픈소스 프로젝트가 있습니다 — OpenPencil. 해당 프로젝트는 Figma 호환 비주얼 디자인과 실시간 협업에 중점을 둡니다. 본 프로젝트는 AI 네이티브 디자인-투-코드 워크플로에 중점을 둡니다.

OpenPencil을 선택하는 이유

🎨 프롬프트 → 캔버스

자연어로 어떤 UI든 설명하세요. 무한 캔버스 위에 스트리밍 애니메이션과 함께 실시간으로 나타납니다. 요소를 선택하고 대화하여 기존 디자인을 수정할 수 있습니다.

🤖 동시 에이전트 팀

오케스트레이터가 복잡한 페이지를 공간적 서브태스크로 분해합니다. 여러 AI 에이전트가 히어로, 기능 소개, 푸터 등 각기 다른 섹션을 동시에 작업하며 모두 병렬로 스트리밍됩니다.

🧠 멀티 모델 인텔리전스

각 모델의 역량에 자동 적응합니다. Claude는 사고 모드가 포함된 전체 프롬프트를 받고, GPT-4o/Gemini는 사고 모드를 비활성화하며, 소형 모델(MiniMax, Qwen, Llama)은 안정적인 출력을 위해 단순화된 프롬프트를 받습니다.

🔌 MCP 서버

Claude Code, Codex, Gemini, OpenCode, Kiro 또는 Copilot CLI에 원클릭 설치. 터미널에서 디자인하세요 — MCP 호환 에이전트를 통해 .op 파일을 읽고, 생성하고, 편집할 수 있습니다.

📦 디자인-애즈-코드

.op 파일은 JSON입니다 — 사람이 읽을 수 있고, Git 친화적이며, diff가 가능합니다. 디자인 변수는 CSS 커스텀 프로퍼티를 생성합니다. React + Tailwind 또는 HTML + CSS로 코드 내보내기가 가능합니다.

🖥️ 어디서든 실행

웹 앱 + Electron을 통한 macOS, Windows, Linux 네이티브 데스크톱. GitHub Releases에서 자동 업데이트. .op 파일 연결 — 더블 클릭으로 열기.

⌨️ CLI — `op`

터미널에서 디자인 도구 제어. op design, op insert — 배치 디자인 DSL, 노드 조작. 파일이나 stdin에서 파이프 입력 지원. 데스크톱 앱 또는 웹 서버와 연동.

🎯 멀티 플랫폼 코드 내보내기

하나의 .op 파일에서 React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native로 내보내기. 디자인 변수는 CSS 커스텀 프로퍼티로 변환.

빠른 시작

# 의존성 설치
bun install

# http://localhost:3000 에서 개발 서버 시작
bun --bun run dev

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

bun run electron:dev

필수 조건: Bun >= 1.0 및 Node.js >= 18

Docker

여러 이미지 변형을 사용할 수 있습니다 — 필요에 맞는 것을 선택하세요:

이미지	크기	포함 내용
`openpencil:latest`	~226 MB	웹 앱만
`openpencil-claude:latest`	—	+ Claude Code CLI
`openpencil-codex:latest`	—	+ Codex CLI
`openpencil-opencode:latest`	—	+ OpenCode CLI
`openpencil-copilot:latest`	—	+ GitHub Copilot CLI
`openpencil-gemini:latest`	—	+ Gemini CLI
`openpencil-full:latest`	~1 GB	모든 CLI 도구

실행 (웹만):

docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest

AI CLI와 함께 실행 (예: Claude Code):

AI 채팅은 Claude CLI OAuth 로그인에 의존합니다. Docker 볼륨을 사용하여 로그인 세션을 유지하세요:

# 1단계 — 로그인 (최초 1회)
docker volume create openpencil-claude-auth
docker run -it --rm \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest claude login

# 2단계 — 시작
docker run -d -p 3000:3000 \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest

로컬 빌드:

# 기본 (웹만)
docker build --target base -t openpencil .

# 특정 CLI 포함
docker build --target with-claude -t openpencil-claude .

# 전체 (모든 CLI)
docker build --target full -t openpencil-full .

AI 네이티브 디자인

프롬프트에서 UI로

텍스트-투-디자인 — 페이지를 설명하면 스트리밍 애니메이션으로 실시간으로 캔버스에 생성
오케스트레이터 — 복잡한 페이지를 공간적 서브태스크로 분해하여 병렬 생성
디자인 수정 — 요소를 선택하고 자연어로 변경 사항을 설명
비전 입력 — 스크린샷이나 목업을 참조로 첨부하여 디자인

멀티 에이전트 지원

에이전트	설정 방법
내장 (9+ 제공자)	제공자 프리셋에서 선택하고 지역을 전환 — Anthropic, OpenAI, Google, DeepSeek 등
Claude Code	설정 불필요 — 로컬 OAuth로 Claude Agent SDK 사용
Codex CLI	에이전트 설정에서 연결 (`Cmd+,`)
OpenCode	에이전트 설정에서 연결 (`Cmd+,`)
GitHub Copilot	`copilot login` 후 에이전트 설정에서 연결 (`Cmd+,`)
Gemini CLI	에이전트 설정에서 연결 (`Cmd+,`)

모델 역량 프로파일 — 모델 티어에 따라 프롬프트, 사고 모드, 타임아웃을 자동 조정합니다. 풀 티어 모델(Claude)은 완전한 프롬프트를 받고, 스탠다드 티어(GPT-4o, Gemini, DeepSeek)는 사고 모드를 비활성화하며, 베이직 티어(MiniMax, Qwen, Llama, Mistral)는 최대 안정성을 위해 단순화된 중첩 JSON 프롬프트를 받습니다.

i18n — 15개 언어로 완전한 인터페이스 지역화: English, 简体中文, 繁體中文, 日本語, 한국어, Français, Español, Deutsch, Português, Русский, हिन्दी, Türkçe, ไทย, Tiếng Việt, Bahasa Indonesia.

MCP 서버

내장 MCP 서버 — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI에 원클릭 설치
Node.js 자동 감지 — 설치되지 않은 경우 HTTP 전송 모드로 자동 대체하고 MCP HTTP 서버를 자동 시작
터미널에서 디자인 자동화: MCP 호환 에이전트를 통해 .op 파일 읽기, 생성, 편집
계층적 디자인 워크플로 — design_skeleton → design_content → design_refine으로 더 높은 충실도의 멀티 섹션 디자인
세그먼트 프롬프트 검색 — 필요한 디자인 지식만 로드 (schema, layout, roles, icons, planning 등)
멀티 페이지 지원 — MCP 도구를 통해 페이지 생성, 이름 변경, 순서 변경, 복제

코드 생성

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

CLI — `op`

전역 설치 후 터미널에서 디자인 도구를 제어하세요:

npm install -g @zseven-w/openpencil

op start                     # 데스크톱 앱 실행
op design @landing.txt       # 파일에서 배치 디자인
op insert '{"type":"RECT"}'  # 노드 삽입
op import:figma design.fig   # Figma 파일 가져오기
cat design.dsl | op design - # stdin에서 파이프 입력

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

LLM 스킬 — OpenPencil Skill 플러그인을 설치하면 AI 에이전트(Claude Code, Cursor, Codex, Gemini CLI 등)에게 op를 사용한 디자인을 교육할 수 있습니다.

기능

캔버스 & 드로잉

팬, 줌, 스마트 정렬 가이드, 스냅 지원의 무한 캔버스
Rectangle, Ellipse, Line, Polygon, Pen(Bezier), Frame, Text
불리언 연산 — 합치기, 빼기, 교차 (컨텍스트 툴바)
아이콘 피커(Iconify)와 이미지 가져오기(PNG/JPEG/SVG/WebP/GIF)
오토 레이아웃 — 수직/수평 방향, gap, padding, justify, align 지원
탭 내비게이션이 있는 멀티 페이지 문서

디자인 시스템

디자인 변수 — 컬러, 숫자, 문자열 토큰, $variable 참조 지원
멀티 테마 지원 — 여러 테마 축, 각 축에 변형(Light/Dark, Compact/Comfortable)
컴포넌트 시스템 — 인스턴스와 오버라이드를 가진 재사용 가능한 컴포넌트
CSS 동기화 — 커스텀 프로퍼티 자동 생성, 코드 출력에 var(--name) 사용
재사용 가능한 UIKit — .pen 파일에서 컴포넌트 킷을 가져오기/내보내기

AI & 에이전트

스트리밍 생성과 오케스트레이터 기반 공간 분해를 통한 프롬프트-투-캔버스
동시 에이전트 팀 — 여러 디자이너가 다양한 섹션에서 병렬로 작업하며 멤버별 캔버스 인디케이터 제공
계층적 워크플로 — design_skeleton → design_content → design_refine, 각 단계에 집중된 프롬프트 사용
스타일 가이드 — 50개 이상의 내장 스타일(glassmorphism, brutalist, retro 등), 태그 기반 퍼지 매칭 지원, 플래닝과 생성에 통합
멀티 모델 역량 프로파일 — 모델 등급별로 싱킹 모드, 노력도, 프롬프트 형태를 자동 적응
내장 에이전트 런타임(agent-native, Zig NAPI) + Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini 제공자
중국 LLM 제공자를 위한 Anthropic 형식 패스스루 — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans

Git 통합

SSH / HTTPS 인증과 SSH 키 관리를 지원하는 클론 마법사
브랜치 피커 — 생성, 전환, 삭제, 병합을 모두 Git 패널에서
인증 재시도와 non-fast-forward 처리가 포함된 Pull / Push 캐스케이드
디스크 상의 MERGE_HEAD 상태 추적을 포함한 폴더 모드 3방향 병합
노드/필드 단위 3방향 카드, 인라인 JSON 편집기, 일괄 작업, 인라인 diff 블록을 갖춘 충돌 패널
원격 설정 및 SSH 키 UI; Git 전반에 걸친 15개 언어 i18n

내보내기

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

Figma 가져오기

레이아웃, 채우기, 선, 효과, 텍스트, 이미지, 벡터를 유지하며 .fig 파일 가져오기

데스크톱 앱

Electron을 통한 네이티브 macOS, Windows, Linux 지원
.op 파일 연결 — 더블 클릭으로 열기, 단일 인스턴스 잠금
GitHub Releases에서 자동 업데이트
다른 이름으로 저장, 최근 항목 열기, 닫을 때 저장되지 않은 변경 사항 대화상자를 지원하는 네이티브 애플리케이션 메뉴
최근 파일 영속성

기술 스택


프론트엔드	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next
캔버스	CanvasKit/Skia (WASM, GPU 가속)
상태 관리	Zustand v5
서버	Nitro
데스크톱	Electron 35
CLI	`op` — 터미널 제어, 배치 디자인 DSL
AI	Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
런타임	Bun · Vite 7
파일 형식	`.op` — JSON 기반, 사람이 읽을 수 있는, Git 친화적

프로젝트 구조

openpencil/
├── apps/
│   ├── web/                 TanStack Start 웹 앱
│   │   ├── src/
│   │   │   ├── canvas/      CanvasKit/Skia 엔진 — 드로잉, 동기화, 레이아웃
│   │   │   ├── components/  React UI — 에디터, 패널, 공유 다이얼로그, 아이콘
│   │   │   ├── services/ai/ AI 채팅, 오케스트레이터, 디자인 생성, 스트리밍
│   │   │   ├── stores/      Zustand — 캔버스, 문서, 페이지, 히스토리, AI
│   │   │   ├── mcp/         외부 CLI 통합용 MCP 서버 도구
│   │   │   ├── hooks/       키보드 단축키, 파일 드롭, Figma 붙여넣기
│   │   │   └── uikit/       재사용 가능한 컴포넌트 킷 시스템
│   │   └── server/
│   │       ├── api/ai/      Nitro API — 스트리밍 채팅, 생성, 유효성 검사
│   │       └── utils/       Claude CLI, OpenCode, Codex, Copilot 래퍼
│   ├── desktop/             Electron 데스크톱 앱
│   │   ├── main.ts          윈도우, Nitro 포크, 네이티브 메뉴, 자동 업데이터
│   │   ├── ipc-handlers.ts  네이티브 파일 대화상자, 테마 동기화, 환경설정 IPC
│   │   └── preload.ts       IPC 브리지
│   └── cli/                 CLI 도구 — `op` 명령어
│       ├── src/commands/    디자인, 문서, 내보내기, 가져오기, 노드, 페이지, 변수 명령어
│       ├── connection.ts    실행 중인 앱과의 WebSocket 연결
│       └── launcher.ts      데스크톱 앱 또는 웹 서버 자동 감지 및 실행
├── packages/
│   ├── pen-types/           PenDocument 모델 타입 정의
│   ├── pen-core/            문서 트리 연산, 레이아웃 엔진, 변수
│   ├── pen-codegen/         코드 생성기 (React, HTML, Vue, Flutter, ...)
│   ├── pen-figma/           Figma .fig 파일 파서 및 변환기
│   ├── pen-renderer/        독립형 CanvasKit/Skia 렌더러
│   ├── pen-sdk/             통합 SDK (모든 패키지 재export)
│   ├── pen-ai-skills/       AI 프롬프트 스킬 엔진 (단계별 프롬프트 로딩)
│   └── agent/               AI 에이전트 SDK (Vercel AI SDK, 멀티 제공자, 에이전트 팀)
└── .githooks/               브랜치 이름에서 버전 동기화를 위한 pre-commit

키보드 단축키

키	동작	키	동작
`V`	선택	`Cmd+S`	저장
`R`	사각형	`Cmd+Z`	실행 취소
`O`	타원	`Cmd+Shift+Z`	다시 실행
`L`	직선	`Cmd+C/X/V/D`	복사/잘라내기/붙여넣기/복제
`T`	텍스트	`Cmd+G`	그룹화
`F`	Frame	`Cmd+Shift+G`	그룹 해제
`P`	펜 툴	`Cmd+Shift+P`	내보내기 (PNG/JPG/WEBP/PDF)
`H`	핸드(팬)	`Cmd+Shift+C`	코드 패널
`Del`	삭제	`Cmd+Shift+V`	변수 패널
`[ / ]`	순서 변경	`Cmd+J`	AI 채팅
화살표 키	1px 이동	`Cmd+,`	에이전트 설정
`Cmd+Alt+U`	불리언 합치기	`Cmd+Alt+S`	불리언 빼기
`Cmd+Alt+I`	불리언 교차	`Cmd+Shift+S`	다른 이름으로 저장

스크립트

bun --bun run dev          # 개발 서버 (포트 3000)
bun --bun run build        # 프로덕션 빌드
bun --bun run test         # 테스트 실행 (Vitest)
npx tsc --noEmit           # 타입 검사
bun run bump <version>     # 모든 package.json에 버전 동기화
bun run electron:dev       # Electron 개발 모드
bun run electron:build     # Electron 패키징
bun run cli:dev            # 소스에서 CLI 실행
bun run cli:compile        # CLI를 dist로 컴파일

기여하기

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

포크 후 클론
버전 동기화 설정: 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 생성

로드맵

CSS 동기화가 있는 디자인 변수 & 토큰
컴포넌트 시스템 (인스턴스 & 오버라이드)
오케스트레이터를 통한 AI 디자인 생성
계층적 디자인 워크플로가 포함된 MCP 서버 통합
멀티 페이지 지원
Figma .fig 가져오기
불리언 연산 (합치기, 빼기, 교차)
멀티 모델 역량 프로파일
재사용 가능한 패키지를 포함한 모노레포 구조 변경
CLI 도구 (op) 터미널 제어
내장 AI 에이전트 SDK (멀티 제공자 지원)
i18n — 15개 언어
Git 통합 (클론, 브랜치, 푸시/풀, 폴더 모드 3방향 병합)
캔버스 래스터 내보내기 (PNG / JPEG / WEBP / PDF)
공동 편집
플러그인 시스템

기여자

스폰서

OpenPencil은 무료이며 오픈소스입니다. 개발은 이 도구를 유용하게 쓰는 분들의 후원으로 이어집니다 — 캔버스를 열어 두어 주셔서 감사합니다.

MrQyun 님, 감사합니다 — 여기에 이름을 올리고 싶으신가요? 스폰서 되기 →

커뮤니티

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

22 KiB

Raw Blame History

OpenPencil

OpenPencil을 선택하는 이유

🎨 프롬프트 → 캔버스

🤖 동시 에이전트 팀

🧠 멀티 모델 인텔리전스

🔌 MCP 서버

📦 디자인-애즈-코드

🖥️ 어디서든 실행

⌨️ CLI — `op`

🎯 멀티 플랫폼 코드 내보내기

빠른 시작

Docker

AI 네이티브 디자인

CLI — `op`

기능

기술 스택

프로젝트 구조

키보드 단축키

스크립트

기여하기

로드맵

기여자

스폰서

커뮤니티

Star History

라이선스

22 KiB Raw Blame History

OpenPencil

OpenPencil을 선택하는 이유

🎨 프롬프트 → 캔버스

🤖 동시 에이전트 팀

🧠 멀티 모델 인텔리전스

🔌 MCP 서버

📦 디자인-애즈-코드

🖥️ 어디서든 실행

⌨️ CLI — op

🎯 멀티 플랫폼 코드 내보내기

빠른 시작

Docker

AI 네이티브 디자인

CLI — op

기능

기술 스택

프로젝트 구조

키보드 단축키

스크립트

기여하기

로드맵

기여자

스폰서

커뮤니티

Star History

라이선스

22 KiB

Raw Blame History

⌨️ CLI — `op`

CLI — `op`