openpencil/README.hi.md

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 CLIs में वन-क्लिक इंस्टॉल। अपने टर्मिनल से डिज़ाइन करें — किसी भी MCP-संगत एजेंट के ज़रिए .op फ़ाइलें पढ़ें, बनाएँ और संशोधित करें।
📦 डिज़ाइन-एज़-कोड .op फ़ाइलें JSON हैं — मानव-पठनीय, Git-फ्रेंडली, डिफ़ करने योग्य। डिज़ाइन वेरिएबल 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 — लॉगिन (एक बार)
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 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 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)
• पुन: उपयोगी UIKits — .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 हैंडलिंग के साथ पुल / पुश कैस्केड
• डिस्क पर MERGE_HEAD स्टेट ट्रैकिंग के साथ फ़ोल्डर-मोड थ्री-वे मर्ज
• प्रति-नोड / प्रति-फ़ील्ड थ्री-वे कार्ड, इनलाइन 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 (सभी पैकेज री-एक्सपोर्ट)
│   ├── pen-ai-skills/       AI प्रॉम्प्ट स्किल इंजन (चरणबद्ध प्रॉम्प्ट लोडिंग)
│   └── agent/               AI एजेंट SDK (Vercel AI 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+P	एक्सपोर्ट (PNG/JPG/WEBP/PDF)
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	बूलियन प्रतिच्छेदन		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 देखें।

1. फ़ोर्क और क्लोन करें
2. वर्शन सिंक सेटअप करें: git config core.hooksPath .githooks
3. ब्रांच बनाएँ: git checkout -b feat/my-feature
4. चेक चलाएँ: npx tsc --noEmit && bun --bun run test
5. Conventional Commits के साथ कमिट करें: feat(canvas): add rotation snapping
6. main के विरुद्ध PR खोलें

रोडमैप

• CSS सिंक के साथ डिज़ाइन वेरिएबल और टोकन
• कम्पोनेंट सिस्टम (इंस्टेंस और ओवरराइड)
• ऑर्केस्ट्रेटर के साथ AI डिज़ाइन जनरेशन
• लेयर्ड डिज़ाइन वर्कफ़्लो के साथ MCP सर्वर इंटीग्रेशन
• मल्टी-पेज सपोर्ट
• Figma .fig इम्पोर्ट
• बूलियन ऑपरेशन (यूनियन, सबट्रैक्ट, इंटरसेक्ट)
• मल्टी-मॉडल क्षमता प्रोफ़ाइल
• पुन: उपयोगी पैकेज के साथ मोनोरेपो पुनर्गठन
• CLI टूल (op) टर्मिनल नियंत्रण
• बिल्ट-इन AI एजेंट SDK, मल्टी-प्रदाता समर्थन
• i18n — 15 भाषाएँ
• Git इंटीग्रेशन (क्लोन, ब्रांच, पुश/पुल, फ़ोल्डर-मोड थ्री-वे मर्ज)
• कैनवास रैस्टर एक्सपोर्ट (PNG / JPEG / WEBP / PDF)
• सहयोगी संपादन
• प्लगइन सिस्टम

योगदानकर्ता

प्रायोजक

OpenPencil मुफ़्त और ओपन-सोर्स है। इसका विकास उन लोगों के सहयोग से चलता है जिन्हें यह उपयोगी लगता है — कैनवस को खुला रखने के लिए धन्यवाद।

MrQyun को धन्यवाद — अपना नाम यहाँ देखना चाहते हैं? प्रायोजक बनें →

समुदाय

हमारे Discord में शामिल हों — प्रश्न पूछें, डिज़ाइन साझा करें, सुविधाएँ सुझाएँ।

Star History

मूल्यांकन

लाइसेंस

MIT — Copyright (c) 2026 ZSeven-W