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 क्यों

🎨 प्रॉम्प्ट → कैनवास किसी भी 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 फ़ाइल एसोसिएशन — डबल-क्लिक से खोलें।

त्वरित शुरुआत

# निर्भरताएँ इंस्टॉल करें
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-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+,)

मॉडल क्षमता प्रोफ़ाइल — प्रत्येक मॉडल टियर के अनुसार प्रॉम्प्ट, थिंकिंग मोड और टाइमआउट को स्वचालित रूप से अनुकूलित करता है। फुल-टियर मॉडल (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

विशेषताएँ

कैनवास और ड्रॉइंग

• पैन, ज़ूम, स्मार्ट अलाइनमेंट गाइड और स्नैपिंग के साथ अनंत कैनवास
• 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
AI	Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
रनटाइम	Bun · Vite 7
फ़ाइल फ़ॉर्मेट	.op — JSON-आधारित, मानव-पठनीय, Git-फ्रेंडली

प्रोजेक्ट संरचना

src/
  canvas/          CanvasKit/Skia इंजन — ड्रॉइंग, सिंक, लेआउट, गाइड, पेन टूल
  components/      React UI — एडिटर, पैनल, शेयर्ड डायलॉग, आइकन
  services/ai/     AI चैट, ऑर्केस्ट्रेटर, डिज़ाइन जनरेशन, स्ट्रीमिंग
  services/figma/  Figma .fig बाइनरी इम्पोर्ट पाइपलाइन
  services/codegen React+Tailwind और HTML+CSS कोड जनरेटर
  stores/          Zustand — कैनवास, दस्तावेज़, पेज, हिस्ट्री, AI, सेटिंग्स
  variables/       डिज़ाइन टोकन रिज़ॉल्यूशन और रेफ़रेंस मैनेजमेंट
  mcp/             बाहरी CLI इंटीग्रेशन के लिए MCP सर्वर टूल
  uikit/           पुन: उपयोगी कम्पोनेंट किट सिस्टम
server/
  api/ai/          Nitro API — स्ट्रीमिंग चैट, जनरेशन, वैलिडेशन
  utils/           Claude CLI, OpenCode, Codex, Copilot क्लाइंट रैपर
electron/
  main.ts          विंडो, Nitro फ़ोर्क, नेटिव मेनू, ऑटो-अपडेटर
  preload.ts       IPC ब्रिज

कीबोर्ड शॉर्टकट

कुंजी	क्रिया		कुंजी	क्रिया
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 electron:dev       # Electron डेव
bun run electron:build     # Electron पैकेज

योगदान

योगदान का स्वागत है! आर्किटेक्चर विवरण और कोड स्टाइल के लिए CLAUDE.md देखें।

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

रोडमैप

• CSS सिंक के साथ डिज़ाइन वेरिएबल और टोकन
• कम्पोनेंट सिस्टम (इंस्टेंस और ओवरराइड)
• ऑर्केस्ट्रेटर के साथ AI डिज़ाइन जनरेशन
• लेयर्ड डिज़ाइन वर्कफ़्लो के साथ MCP सर्वर इंटीग्रेशन
• मल्टी-पेज सपोर्ट
• Figma .fig इम्पोर्ट
• बूलियन ऑपरेशन (यूनियन, सबट्रैक्ट, इंटरसेक्ट)
• मल्टी-मॉडल क्षमता प्रोफ़ाइल
• सहयोगी संपादन
• प्लगइन सिस्टम

योगदानकर्ता

समुदाय

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

Star History

लाइसेंस

MIT — Copyright (c) 2026 ZSeven-W