a7d73ebb62
Built-in design generation now runs as an agentic MCP tool-loop (reusing the agent-rs BuiltInProvider), gated behind OPENPENCIL_DESIGN_AGENT_LOOP / the Settings experimental toggle; the orchestrator stays the default. - design-agent system prompt + in-process design toolset (parity-locked with the MCP surface) + flag-gated Intent::Design routing - spawn_agents execution as sequential sub-loops + live creation-mode badges (per-agent glow + 'N/M designing...' header) - new MCP tools: get_guidelines, ToolSearch, get_screenshot, get_editor_state, export_nodes, spawn_agents; style-guide local audit - #27 AI panel restyle: rounded tool cards + green check-rings, gray user bubbles, model-pill bottom toolbar, header, empty-state pills, the PARALLEL AGENTS (agent_team_size) 1x-6x chip dropdown - multi-chat tabs: ChatSessions model (Deref-to-active) + tab row UI (switch / close / + / Cmd+T) with each run bound to its tab Large checkpoint commit spanning the working tree (Rust shell crates).
467 lines
39 KiB
Markdown
467 lines
39 KiB
Markdown
<p align="center">
|
||
<img src="./apps/desktop/build/icon.png" alt="OpenPencil" width="120" />
|
||
</p>
|
||
|
||
<h1 align="center">OpenPencil</h1>
|
||
|
||
<p align="center">
|
||
<strong>दुनिया का पहला ओपन-सोर्स AI-नेटिव वेक्टर डिज़ाइन टूल।</strong><br />
|
||
<sub>समवर्ती एजेंट टीमें • डिज़ाइन-एज़-कोड • बिल्ट-इन MCP सर्वर • मल्टी-मॉडल इंटेलिजेंस</sub>
|
||
</p>
|
||
|
||
<p align="center">
|
||
<a href="./README.md">English</a> · <a href="./README.zh.md">简体中文</a> · <a href="./README.zh-TW.md">繁體中文</a> · <a href="./README.ja.md">日本語</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.fr.md">Français</a> · <a href="./README.es.md">Español</a> · <a href="./README.de.md">Deutsch</a> · <a href="./README.pt.md">Português</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.hi.md"><b>हिन्दी</b></a> · <a href="./README.tr.md">Türkçe</a> · <a href="./README.th.md">ไทย</a> · <a href="./README.vi.md">Tiếng Việt</a> · <a href="./README.id.md">Bahasa Indonesia</a>
|
||
</p>
|
||
|
||
<p align="center">
|
||
<a href="https://github.com/ZSeven-W/openpencil/stargazers"><img src="https://img.shields.io/github/stars/ZSeven-W/openpencil?style=flat&color=cfb537" alt="Stars" /></a>
|
||
<a href="https://github.com/ZSeven-W/openpencil/blob/main/LICENSE"><img src="https://img.shields.io/github/license/ZSeven-W/openpencil?color=64748b" alt="License" /></a>
|
||
<a href="https://github.com/ZSeven-W/openpencil/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/ZSeven-W/openpencil/ci.yml?branch=main&label=CI" alt="CI" /></a>
|
||
<a href="https://discord.gg/h9Fmyy6pVh"><img src="https://img.shields.io/discord/1476517942949580952?label=Discord&logo=discord&logoColor=white&color=5865F2" alt="Discord" /></a>
|
||
</p>
|
||
|
||
<br />
|
||
|
||
<p align="center">
|
||
<a href="https://oss.ioa.tech/zseven/openpencil/a46e24733239ce24de36702342201033.mp4">
|
||
<img src="./screenshot/op-cover.png" alt="OpenPencil — डेमो देखने के लिए क्लिक करें" width="100%" />
|
||
</a>
|
||
</p>
|
||
<p align="center"><sub>डेमो वीडियो देखने के लिए छवि पर क्लिक करें</sub></p>
|
||
|
||
<br />
|
||
|
||
> **नोट:** इसी नाम का एक और ओपन-सोर्स प्रोजेक्ट है — [OpenPencil](https://github.com/open-pencil/open-pencil), जो रियल-टाइम सहयोग के साथ Figma-संगत विज़ुअल डिज़ाइन पर केंद्रित है। यह प्रोजेक्ट AI-नेटिव डिज़ाइन-टू-कोड वर्कफ़्लो पर केंद्रित है।
|
||
|
||
## OpenPencil क्यों
|
||
|
||
<table>
|
||
<tr>
|
||
<td width="50%">
|
||
|
||
### 🎨 प्रॉम्प्ट → कैनवास
|
||
|
||
किसी भी UI का प्राकृतिक भाषा में वर्णन करें। स्ट्रीमिंग एनिमेशन के साथ रियल-टाइम में अनंत कैनवास पर प्रकट होते देखें। एलिमेंट चुनकर और चैट करके मौजूदा डिज़ाइन संशोधित करें।
|
||
|
||
</td>
|
||
<td width="50%">
|
||
|
||
### 🤖 समवर्ती एजेंट टीमें
|
||
|
||
ऑर्केस्ट्रेटर जटिल पेजों को स्थानिक सब-टास्क में विभाजित करता है। कई AI एजेंट एक साथ अलग-अलग सेक्शन पर काम करते हैं — हीरो, फ़ीचर, फ़ुटर — सभी समानांतर स्ट्रीमिंग करते हुए।
|
||
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%">
|
||
|
||
### 🧠 मल्टी-मॉडल इंटेलिजेंस
|
||
|
||
प्रत्येक मॉडल की क्षमताओं के अनुसार स्वचालित रूप से अनुकूलित होता है। Claude को थिंकिंग के साथ पूर्ण प्रॉम्प्ट मिलते हैं; GPT-4o/Gemini में थिंकिंग अक्षम होती है; छोटे मॉडल (MiniMax, Qwen, Llama) को विश्वसनीय आउटपुट के लिए सरलीकृत प्रॉम्प्ट मिलते हैं।
|
||
|
||
</td>
|
||
<td width="50%">
|
||
|
||
### 🔌 MCP सर्वर
|
||
|
||
Claude Code, Codex, Gemini, OpenCode, Kiro, या Copilot CLIs में वन-क्लिक इंस्टॉल। अपने टर्मिनल से डिज़ाइन करें — किसी भी MCP-संगत एजेंट के ज़रिए `.op` फ़ाइलें पढ़ें, बनाएँ और संशोधित करें।
|
||
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%">
|
||
|
||
### 📦 डिज़ाइन-एज़-कोड
|
||
|
||
`.op` फ़ाइलें JSON हैं — मानव-पठनीय, Git-फ्रेंडली, डिफ़ करने योग्य। डिज़ाइन वेरिएबल CSS कस्टम प्रॉपर्टीज़ जनरेट करते हैं। React + Tailwind या HTML + CSS में कोड एक्सपोर्ट।
|
||
|
||
</td>
|
||
<td width="50%">
|
||
|
||
### 🖥️ हर जगह चलता है
|
||
|
||
वेब ऐप + Electron के ज़रिए macOS, Windows और Linux पर नेटिव डेस्कटॉप। GitHub Releases से ऑटो-अपडेट। `.op` फ़ाइल एसोसिएशन — डबल-क्लिक से खोलें।
|
||
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%">
|
||
|
||
### ⌨️ CLI — `op`
|
||
|
||
अपने टर्मिनल से डिज़ाइन टूल को नियंत्रित करें। `op design`, `op insert` — बैच डिज़ाइन DSL, नोड मैनिपुलेशन। फ़ाइलों या stdin से पाइप करें। डेस्कटॉप ऐप या वेब सर्वर के साथ काम करता है।
|
||
|
||
</td>
|
||
<td width="50%">
|
||
|
||
### 🎯 मल्टी-प्लेटफ़ॉर्म कोड एक्सपोर्ट
|
||
|
||
एक `.op` फ़ाइल से React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native में एक्सपोर्ट करें। डिज़ाइन वेरिएबल CSS कस्टम प्रॉपर्टीज़ बन जाते हैं।
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
## त्वरित शुरुआत
|
||
|
||
```bash
|
||
# निर्भरताएँ इंस्टॉल करें
|
||
bun install
|
||
|
||
# http://localhost:3000 पर डेव सर्वर शुरू करें
|
||
bun --bun run dev
|
||
```
|
||
|
||
या डेस्कटॉप ऐप के रूप में चलाएँ:
|
||
|
||
```bash
|
||
bun run electron:dev
|
||
```
|
||
|
||
> **पूर्वापेक्षाएँ:** [Bun](https://bun.sh/) >= 1.0 और [Node.js](https://nodejs.org/) >= 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 टूल |
|
||
|
||
**चलाएँ (केवल वेब):**
|
||
|
||
```bash
|
||
docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest
|
||
```
|
||
|
||
**AI CLI के साथ चलाएँ (उदा. Claude Code):**
|
||
|
||
AI चैट Claude CLI OAuth लॉगिन पर निर्भर करता है। लॉगिन सत्र को बनाए रखने के लिए Docker वॉल्यूम का उपयोग करें:
|
||
|
||
```bash
|
||
# चरण 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
|
||
```
|
||
|
||
**स्थानीय रूप से बिल्ड करें:**
|
||
|
||
```bash
|
||
# बेस (केवल वेब)
|
||
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`
|
||
|
||
वैश्विक रूप से इंस्टॉल करें और अपने टर्मिनल से डिज़ाइन टूल को नियंत्रित करें:
|
||
|
||
```bash
|
||
brew install zseven-w/openpencil/op
|
||
```
|
||
|
||
```bash
|
||
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](./apps/cli/README.md) देखें।
|
||
|
||
**LLM स्किल** — [OpenPencil Skill](https://github.com/ZSeven-W/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-फ्रेंडली |
|
||
|
||
## Rust क्यों
|
||
|
||
OpenPencil को पूरी तरह **Rust** में नए सिरे से लिखा जा रहा है ([#129](https://github.com/ZSeven-W/openpencil/issues/129))। TypeScript + Electron बिल्ड वह है जो आज उपलब्ध है; Rust रीराइट अगला कदम है — एक नेटिव कोर जो काफ़ी छोटा और तेज़ है, और एक ही कोडबेस से अधिक प्लेटफ़ॉर्म पर चलता है।
|
||
|
||
| | TypeScript + Electron (आज) | Rust (रीराइट) |
|
||
| ----------------------- | ----------------------------------------------- | -------------------------------------------------------------------- |
|
||
| **डेस्कटॉप रनटाइम** | Electron — Chromium + Node.js बंडल करता है | नेटिव विंडो (`winit` + GPU Skia), कोई ब्राउज़र इंजन नहीं |
|
||
| **डेस्कटॉप फ़ुटप्रिंट** | प्रति इंस्टॉल पूरा Chromium रनटाइम | एकल स्व-निहित बाइनरी — **55.5 MB** |
|
||
| **वेब पेलोड** | JS + WASM बंडल | **8.2 MB** wasm / **2.18 MB** gzip वायर पर |
|
||
| **रेंडरिंग** | CanvasKit/Skia वेब पर | **हर** टार्गेट पर एक GPU-एक्सेलेरेटेड Skia बैकएंड |
|
||
| **मेमोरी** | JavaScript GC पॉज़ | कोई GC नहीं — Rust ओनरशिप, अनुमानित लेटेंसी |
|
||
| **कोडबेस** | वेब स्टैक + Electron + Zig NAPI एजेंट | एक Rust वर्कस्पेस: editor · CLI · MCP · AI · codegen · Figma · Git |
|
||
| **टार्गेट** | Web + desktop, दो अलग स्टैक | Desktop (macOS/Win/Linux) · mobile (iOS/Android) · browser — एक कोर |
|
||
|
||
**मापे गए सुधार**
|
||
|
||
- **छोटा फ़ुटप्रिंट** — पूरा डेस्कटॉप ऐप एक **55.5 MB** नेटिव बाइनरी है, न कि बंडल किया हुआ ब्राउज़र इंजन और Node रनटाइम। आइकन कैटलॉग विभाजन के बाद वेब बिल्ड **8.2 MB** रॉ / **2.18 MB** gzip है (वायर पर −48%)।
|
||
- **बड़े दस्तावेज़ों में स्केल** — **10,000-node** लाइव कैनवास (नेस्टेड ऑटो-लेआउट, चार स्तर गहरा) बिना किसी पैनिक और **~0% आइडल CPU** के लिखता, पढ़ता और लेआउट स्नैपशॉट करता है; सभी 10k नोड्स का पूर्ण लेआउट स्नैपशॉट **~0.68 s** में वापस आता है।
|
||
- **तेज़ इंटरैक्शन** — pan/zoom अब हर फ़्रेम में दस्तावेज़ को री-सीरियलाइज़ नहीं करता (एकल हॉट-पाथ फ़िक्स ने व्हील-ज़ूम CPU को **~69% से ~0%** तक घटा दिया); ड्रैग दृश्य को इन्क्रीमेंटली पैच करते हैं, टेक्स्ट मेज़रमेंट कैश्ड है, और रिपेंट प्रति फ़्रेम एक में संयोजित होते हैं।
|
||
- **एक कोर, हर स्क्रीन** — वही एडिटर स्टेट और वही रेंडर बैकएंड नेटिव डेस्कटॉप, मोबाइल और WASM के ज़रिए ब्राउज़र में कंपाइल होते हैं — सिंक में रखने के लिए कोई समानांतर पुनर्कार्यान्वयन नहीं।
|
||
- **हर जगह GPU Skia** — नेटिव GL कॉन्टेक्स्ट पर `skia-safe` के ज़रिए रेंडर करता है; ब्राउज़र WebGL2 पर CanvasKit के ज़रिए रेंडर करता है — वही ड्रॉइंग कोड, वही आउटपुट।
|
||
- **नेटिव एक्सेसिबिलिटी** — macOS, Windows और Linux पर AccessKit, साथ ही वेब पर DOM मिरर — ब्राउज़र के a11y ट्री पर निर्भर रहने के बजाय।
|
||
- **एक टाइप-चेक्ड वर्कस्पेस** — MCP होस्ट, CLI, AI प्रदाता, कोड जनरेशन, Figma इम्पोर्ट और Git इंटीग्रेशन सभी एक ही Rust वर्कस्पेस में रहते हैं, CI में `cargo-deny` सप्लाई-चेन गेटिंग के साथ।
|
||
|
||
> **स्थिति:** Rust शेल सक्रिय विकास में है (नीचे रोडमैप देखें)। जब तक यह `v0.8.0` के लिए फ़ीचर पैरिटी तक नहीं पहुँचता, ऊपर दिए गए इंस्टॉलेबल डाउनलोड TypeScript + Electron बिल्ड हैं।
|
||
|
||
## प्रोजेक्ट संरचना
|
||
|
||
```text
|
||
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` | इस रूप में सहेजें |
|
||
|
||
## स्क्रिप्ट
|
||
|
||
```bash
|
||
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](./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](https://www.conventionalcommits.org/) के साथ कमिट करें: `feat(canvas): add rotation snapping`
|
||
6. `main` के विरुद्ध PR खोलें
|
||
|
||
## रोडमैप
|
||
|
||
- [x] CSS सिंक के साथ डिज़ाइन वेरिएबल और टोकन
|
||
- [x] कम्पोनेंट सिस्टम (इंस्टेंस और ओवरराइड)
|
||
- [x] ऑर्केस्ट्रेटर के साथ AI डिज़ाइन जनरेशन
|
||
- [x] लेयर्ड डिज़ाइन वर्कफ़्लो के साथ MCP सर्वर इंटीग्रेशन
|
||
- [x] मल्टी-पेज सपोर्ट
|
||
- [x] Figma `.fig` इम्पोर्ट
|
||
- [x] बूलियन ऑपरेशन (यूनियन, सबट्रैक्ट, इंटरसेक्ट)
|
||
- [x] मल्टी-मॉडल क्षमता प्रोफ़ाइल
|
||
- [x] पुन: उपयोगी पैकेज के साथ मोनोरेपो पुनर्गठन
|
||
- [x] CLI टूल (`op`) टर्मिनल नियंत्रण
|
||
- [x] बिल्ट-इन AI एजेंट SDK, मल्टी-प्रदाता समर्थन
|
||
- [x] i18n — 15 भाषाएँ
|
||
- [x] Git इंटीग्रेशन (क्लोन, ब्रांच, पुश/पुल, फ़ोल्डर-मोड थ्री-वे मर्ज)
|
||
- [x] कैनवास रैस्टर एक्सपोर्ट (PNG / JPEG / WEBP / PDF)
|
||
- [ ] सहयोगी संपादन
|
||
- [ ] प्लगइन सिस्टम
|
||
|
||
## योगदानकर्ता
|
||
|
||
<a href="https://github.com/ZSeven-W/openpencil/graphs/contributors">
|
||
<img src="https://contrib.rocks/image?repo=ZSeven-W/openpencil" alt="Contributors" />
|
||
</a>
|
||
|
||
## प्रायोजक
|
||
|
||
OpenPencil मुफ़्त और ओपन-सोर्स है। इसका विकास उन लोगों के सहयोग से चलता है जिन्हें यह उपयोगी लगता है — कैनवस को खुला रखने के लिए धन्यवाद।
|
||
|
||
<a href="https://github.com/mrqyun" title="MrQyun">
|
||
<img src="https://wsrv.nl/?url=github.com/mrqyun.png&w=128&h=128&mask=circle&maxage=7d" width="64" height="64" alt="MrQyun" />
|
||
</a>
|
||
|
||
**[MrQyun](https://github.com/mrqyun)** को धन्यवाद — अपना नाम यहाँ देखना चाहते हैं? **[प्रायोजक बनें →](https://github.com/sponsors/ZSeven-W)**
|
||
|
||
## समुदाय
|
||
|
||
<a href="https://discord.gg/h9Fmyy6pVh">
|
||
<img src="./apps/web/public/logo-discord.svg" alt="Discord" width="16" />
|
||
<strong> हमारे Discord में शामिल हों</strong>
|
||
</a>
|
||
— प्रश्न पूछें, डिज़ाइन साझा करें, सुविधाएँ सुझाएँ।
|
||
|
||
## Star History
|
||
|
||
<a href="https://star-history.com/#ZSeven-W/openpencil&Date">
|
||
<picture>
|
||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=ZSeven-W/openpencil&type=Date&theme=dark" />
|
||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=ZSeven-W/openpencil&type=Date" />
|
||
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=ZSeven-W/openpencil&type=Date" width="100%" />
|
||
</picture>
|
||
</a>
|
||
|
||
## मूल्यांकन
|
||
|
||
[](https://mseep.ai/app/zseven-w-openpencil)
|
||
|
||
## लाइसेंस
|
||
|
||
[MIT](./LICENSE) — Copyright (c) 2026 ZSeven-W
|