b4d1d2a7bb
* fix(docker): support multi-platform builds and fix monorepo paths Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * perf(renderer): cache pre-rasterized paragraph images to avoid per-frame glyph rasterization (#76) * fix(canvas): stabilize frame label size during zoom Draw frame labels in screen-space after the viewport transform restore, converting scene coords manually. Previously fontSize=12/zoom fed into Math.ceil caused integer-boundary jumps that made labels flicker during zoom. Also skip shadow rendering while actively zooming for smoother performance. * perf(renderer): cache pre-rasterized paragraph images to avoid per-frame glyph rasterization - Add paraImageCache (SkImage, 128 MB LRU limit) keyed on the same key as paraCache - Use drawImageRect instead of drawParagraph on cache hit, skipping per-frame glyph shaping and rasterization - Fall back to direct drawParagraph only when off-screen surface creation (MakeSurface) fails - Extract _dpr getter to deduplicate device-pixel-ratio resolution logic across draw paths - Evict oldest entries when cache exceeds byte limit; delete SkImage on eviction and dispose() * feat(cli): introduce OpenPencil CLI for terminal control of the design tool - Added a new CLI application under `apps/cli` to manage OpenPencil from the terminal. - Implemented commands for app control (`start`, `stop`, `status`), document operations (`open`, `save`, `get`, `selection`), and design manipulation (`design`, `import`). - Enhanced documentation with usage instructions and platform support details. - Updated build scripts to include CLI compilation and publishing processes. - Introduced a new GitHub Actions workflow for publishing the CLI to npm. - Updated existing workflows to integrate CLI build steps and ensure proper versioning across packages. * docs: update README files to include CLI tool details and multi-platform code export - Added CLI section to README files in multiple languages, detailing commands for terminal control of the design tool. - Included instructions for global installation and usage examples for the CLI. - Expanded documentation on multi-platform code export capabilities from a single `.op` file to various frameworks. - Updated CLAUDE.md to reference the new CLI documentation and its integration with the design tool. * chore(bun.lock): update package dependencies to specific versions - Removed workspace references for several packages in the bun.lock file. - Updated dependencies for `@zseven-w/pen-core`, `@zseven-w/pen-types`, `@zseven-w/pen-codegen`, `@zseven-w/pen-figma`, and `@zseven-w/pen-renderer` to version `0.5.1-beta.1`. - Ensured consistency in dependency management across the project. --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: leinaldo <60176594+leinaldo@users.noreply.github.com>
25 KiB
OpenPencil
दुनिया का पहला ओपन-सोर्स AI-नेटिव वेक्टर डिज़ाइन टूल।
समवर्ती एजेंट टीमें • डिज़ाइन-एज़-कोड • बिल्ट-इन MCP सर्वर • मल्टी-मॉडल इंटेलिजेंस
English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia
डेमो वीडियो देखने के लिए छवि पर क्लिक करें
OpenPencil क्यों
🎨 प्रॉम्प्ट → कैनवासकिसी भी UI का प्राकृतिक भाषा में वर्णन करें। स्ट्रीमिंग एनिमेशन के साथ रियल-टाइम में अनंत कैनवास पर प्रकट होते देखें। एलिमेंट चुनकर और चैट करके मौजूदा डिज़ाइन संशोधित करें। |
🤖 समवर्ती एजेंट टीमेंऑर्केस्ट्रेटर जटिल पेजों को स्थानिक सब-टास्क में विभाजित करता है। कई AI एजेंट एक साथ अलग-अलग सेक्शन पर काम करते हैं — हीरो, फ़ीचर, फ़ुटर — सभी समानांतर स्ट्रीमिंग करते हुए। |
🧠 मल्टी-मॉडल इंटेलिजेंसप्रत्येक मॉडल की क्षमताओं के अनुसार स्वचालित रूप से अनुकूलित होता है। Claude को थिंकिंग के साथ पूर्ण प्रॉम्प्ट मिलते हैं; GPT-4o/Gemini में थिंकिंग अक्षम होती है; छोटे मॉडल (MiniMax, Qwen, Llama) को विश्वसनीय आउटपुट के लिए सरलीकृत प्रॉम्प्ट मिलते हैं। |
🔌 MCP सर्वरClaude Code, Codex, Gemini, OpenCode, Kiro, या Copilot CLIs में वन-क्लिक इंस्टॉल। अपने टर्मिनल से डिज़ाइन करें — किसी भी MCP-संगत एजेंट के ज़रिए |
📦 डिज़ाइन-एज़-कोड
|
🖥️ हर जगह चलता हैवेब ऐप + Electron के ज़रिए macOS, Windows और Linux पर नेटिव डेस्कटॉप। GitHub Releases से ऑटो-अपडेट। |
⌨️ CLI —
|
🎯 मल्टी-प्लेटफ़ॉर्म कोड एक्सपोर्टएक |
त्वरित शुरुआत
# निर्भरताएँ इंस्टॉल करें
bun install
# http://localhost:3000 पर डेव सर्वर शुरू करें
bun --bun run dev
या डेस्कटॉप ऐप के रूप में चलाएँ:
bun run electron:dev
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 — लॉगिन (एक बार)
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 तक
- टेक्स्ट-टू-डिज़ाइन — एक पेज का विवरण दें, और स्ट्रीमिंग एनिमेशन के साथ रियल-टाइम में कैनवास पर जनरेट करें
- ऑर्केस्ट्रेटर — जटिल पेजों को समानांतर जनरेशन के लिए स्थानिक सब-टास्क में विभाजित करता है
- डिज़ाइन संशोधन — एलिमेंट चुनें, फिर प्राकृतिक भाषा में बदलाव का विवरण दें
- विज़न इनपुट — संदर्भ-आधारित डिज़ाइन के लिए स्क्रीनशॉट या मॉकअप संलग्न करें
मल्टी-एजेंट सपोर्ट
| एजेंट | सेटअप |
|---|---|
| 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 प्रॉम्प्ट मिलते हैं।
MCP सर्वर
- बिल्ट-इन MCP सर्वर — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs में वन-क्लिक इंस्टॉल
- 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 export react --out . # React + Tailwind में एक्सपोर्ट
op import:figma design.fig # Figma फ़ाइल इम्पोर्ट करें
cat design.dsl | op design - # stdin से पाइप करें
तीन इनपुट विधियाँ समर्थित हैं: इनलाइन स्ट्रिंग, @filepath (फ़ाइल से पढ़ें), या - (stdin से पढ़ें)। डेस्कटॉप ऐप या वेब डेव सर्वर के साथ काम करता है। पूर्ण कमांड संदर्भ के लिए CLI README देखें।
विशेषताएँ
कैनवास और ड्रॉइंग
- पैन, ज़ूम, स्मार्ट अलाइनमेंट गाइड और स्नैपिंग के साथ अनंत कैनवास
- 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)
Figma इम्पोर्ट
- लेआउट, फ़िल, स्ट्रोक, इफ़ेक्ट, टेक्स्ट, इमेज और वेक्टर को सुरक्षित रखते हुए
.figफ़ाइलें इम्पोर्ट करें
डेस्कटॉप ऐप
- Electron के ज़रिए नेटिव macOS, Windows और Linux सपोर्ट
.opफ़ाइल एसोसिएशन — डबल-क्लिक से खोलें, सिंगल-इंस्टेंस लॉक- GitHub Releases से ऑटो-अपडेट
- नेटिव एप्लिकेशन मेनू और फ़ाइल डायलॉग
टेक स्टैक
| फ्रंटएंड | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui |
| कैनवास | CanvasKit/Skia (WASM, GPU-एक्सेलेरेटेड) |
| स्टेट | Zustand v5 |
| सर्वर | Nitro |
| डेस्कटॉप | Electron 35 |
| CLI | op — टर्मिनल नियंत्रण, बैच डिज़ाइन DSL, कोड एक्सपोर्ट |
| AI | 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 (सभी पैकेज री-एक्सपोर्ट)
└── .githooks/ ब्रांच नाम से प्री-कमिट वर्शन सिंक
कीबोर्ड शॉर्टकट
| कुंजी | क्रिया | कुंजी | क्रिया | |
|---|---|---|---|---|
V |
चुनें | Cmd+S |
सहेजें | |
R |
Rectangle | Cmd+Z |
पूर्ववत करें | |
O |
Ellipse | Cmd+Shift+Z |
फिर से करें | |
L |
Line | Cmd+C/X/V/D |
कॉपी/कट/पेस्ट/डुप्लिकेट | |
T |
Text | Cmd+G |
ग्रुप करें | |
F |
Frame | Cmd+Shift+G |
अनग्रुप करें | |
P |
Pen tool | Cmd+Shift+E |
एक्सपोर्ट | |
H |
Hand (pan) | Cmd+Shift+C |
कोड पैनल | |
Del |
हटाएँ | Cmd+Shift+V |
वेरिएबल पैनल | |
[ / ] |
क्रम बदलें | Cmd+J |
AI चैट | |
| Arrows | 1px नज | Cmd+, |
एजेंट सेटिंग्स | |
Cmd+Alt+U |
बूलियन संयोजन | Cmd+Alt+S |
बूलियन घटाना | |
Cmd+Alt+I |
बूलियन प्रतिच्छेदन |
स्क्रिप्ट
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) टर्मिनल नियंत्रण - सहयोगी संपादन
- प्लगइन सिस्टम
योगदानकर्ता
समुदाय
हमारे Discord में शामिल हों
— प्रश्न पूछें, डिज़ाइन साझा करें, सुविधाएँ सुझाएँ।
Star History
लाइसेंस
MIT — Copyright (c) 2026 ZSeven-W