OpenPencil: 오픈 소스 AI 기반 벡터 디자인 도구

The world's first open-source AI-native vector design tool. Concurrent Agent Teams • Design-as-Code • Built-in MCP Server • Multi-model Intelligence English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia Click the image to watch the demo video Note: There is another open-source project with the same name — OpenPencil, focused on Figma-compatible visual design with real-time collaboration. This project focuses on AI-native design-to-code workflows. | Describe any UI in natural language. Watch it appear on the infinite canvas in real-time with streaming animation. Modify existing designs by selecting elements and chatting. | The orchestrator decomposes complex pages into spatial sub-tasks. Multiple AI agents work on different sections simultaneously — hero, features, footer — all streaming in parallel. | | Automatically adapts to each model's capabilities. Claude gets full prompts with thinking; GPT-4o/Gemini disable thinking; smaller models (MiniMax, Qwen, Llama) get simplified prompts for reliable output. | One-click install into Claude Code, Codex, Gemini, OpenCode, Kiro, or Copilot CLIs. Design from your terminal — read, create, and modify | | | Web app + native desktop on macOS, Windows, and Linux via Electron. Auto-updates from GitHub Releases. | | Control the design tool from your terminal. | Export to React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native — all from one | macOS (Homebrew): brew tap zseven-w/openpencil brew install --cask openpencil Windows (Scoop): scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil scoop install openpencil Linux / Windows direct download: GitHub Releases — .exe (Windows), .AppImage / .deb (Linux) CLI (op ): npm install -g @zseven-w/openpencil # Install dependencies bun install # Start dev server at http://localhost:3000 bun --bun run dev Or run as a desktop app: bun run electron:dev Multiple image variants are available — pick the one that fits your needs: | Image | Size | Includes | |---|---|---| openpencil:latest | ~226 MB | Web app only | 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 | All CLI tools | Run (web only): docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest Run with AI CLI (e.g. Claude Code): The AI chat relies on Claude CLI OAuth login. Use a Docker volume to persist the login session: # Step 1 — Login (one-time) 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 # Step 2 — Start docker run -d -p 3000:3000 \ -v openpencil-claude-auth:/root/.claude \ ghcr.io/zseven-w/openpencil-claude:latest Build locally: # Base (web only) docker build --target base -t openpencil . # With a specific CLI docker build --target with-claude -t openpencil-claude . # Full (all CLIs) docker build --target full -t openpencil-full . Prompt to UI - Text-to-design — describe a page, get it generated on canvas in real-time with streaming animation - Orchestrator — decomposes complex pages into spatial sub-tasks for parallel generation - Design modification — select elements, then describe changes in natural language - Vision input — attach screenshots or mockups for reference-based design Multi-Agent Support | Agent | Setup | |---|---| | Built-in (9+ providers) | Select from provider presets with region switcher — Anthropic, OpenAI, Google, DeepSeek, and more | | Claude Code | No config — uses Claude Agent SDK with local OAuth | | Codex CLI | Connect in Agent Settings (Cmd+, ) | | OpenCode | Connect in Agent Settings (Cmd+, ) | | GitHub Copilot | copilot login then connect in Agent Settings (Cmd+, ) | | Gemini CLI | Connect in Agent Settings (Cmd+, ) | Model Capability Profiles — automatically adapts prompts, thinking mode, and timeouts per model tier. Full-tier models (Claude) get complete prompts; standard-tier (GPT-4o, Gemini, DeepSeek) disable thinking; basic-tier (MiniMax, Qwen, Llama, Mistral) get simplified nested-JSON prompts for maximum reliability. i18n — Full interface localization in 15 languages: English, 简体中文, 繁體中文, 日本語, 한국어, Français, Español, Deutsch, Português, Русский, हिन्दी, Türkçe, ไทย, Tiếng Việt, Bahasa Indonesia. MCP Server - Built-in MCP server — one-click install into Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs - Auto-detects Node.js — if not installed, falls back to HTTP transport and auto-starts the MCP HTTP server - Design automation from terminal: read, create, and modify .op files via any MCP-compatible agent - Layered design workflow — design_skeleton →design_content →design_refine for higher-fidelity multi-section designs - Segmented prompt r