mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-06-01 03:14:29 +07:00

* fix(ai): add icon name aliases and fix multi-path SVG concatenation

Add 55+ common icon name aliases (burger→hamburger, sushi→fish, etc.)
to both client icon-resolver and server icon API for robust AI-generated
icon resolution. Register Lucide's own aliases for broader coverage.

Fix SVG path concatenation bug where joining multiple <path> d-values
caused incorrect rendering — a standalone <path> treats initial lowercase
"m" as absolute, but after concatenation it becomes relative to the
previous sub-path endpoint. Now ensures each sub-path starts with
absolute "M".

Add tryAsyncIconFontResolution for icon_font nodes that miss local
lookup — fetches from server API, caches result, and triggers canvas
re-render.

* fix(canvas): preserve badge/overlay absolute positioning in auto-layout

Add isBadgeOverlayNode() detector for badge, indicator, notification-dot,
and overlay nodes. These nodes now retain their x/y coordinates instead
of being stripped by layout sanitization.

Update computeLayoutPositions to exclude badge nodes from the layout flow
— they keep absolute positioning and render on top (prepended for correct
z-order in reverse iteration).

* fix(ai): prevent duplicate canvas objects and fix emoji-to-icon pipeline

Streaming path: add ensureUniqueNodeIds before inserting nodes to prevent
ID collisions across multiple AI generations. Track newly inserted IDs
so subsequent streaming nodes don't collide either.

Canvas sync: deduplicate Fabric objects sharing the same penNodeId —
keep only the one tracked in objMap, remove stale duplicates.

Badge nodes: use shared isBadgeOverlayNode() for z-order insertion
and skip x/y stripping in layout parents.

Fix emoji-to-icon pipeline: re-run applyIconPathResolution after
applyNoEmojiIconHeuristic converts emoji text nodes to path nodes,
so the icon resolver can match by name (e.g. "Pizza Emoji Path" → pizza).

* fix(canvas): add async icon resolution fallback for icon_font nodes

When lookupIconByName fails locally, queue tryAsyncIconFontResolution
to fetch from server API. Cache result in ICON_PATH_MAP and trigger
canvas re-render via store update. Store iconFontName and iconStyle
on Fabric object for sync tracking.

* fix(ai): strengthen emoji ban in prompts and improve orchestrator defaults

Update all AI prompts to explicitly ban emoji characters with concrete
examples and redirect to icon_font nodes instead of the previously
incorrect "path nodes" guidance.

Add z-order rule to orchestrator prompt: overlay elements must come
before content they overlap.

Add padding support to OrchestratorPlan rootFrame type. Default mobile
root frame gap to 16 for consistent spacing.

* feat(electron): add publisher name to Windows build configuration

Updated the `electron-builder.yml` to include a publisher name for Windows builds, enhancing the identification of the application during installation. Additionally, revised the README files across multiple languages to reflect the new project description and features, emphasizing OpenPencil as the world's first AI-native open-source vector design tool with concurrent agent teams and design-as-code capabilities.

---------

Co-authored-by: Fini <fini.yang@gmail.com>

2026-03-11 21:18:49 +08:00

18 KiB

Raw Blame History

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

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 में वन-क्लिक इंस्टॉल
टर्मिनल से डिज़ाइन ऑटोमेशन: किसी भी MCP-संगत एजेंट के ज़रिए .op फ़ाइलें पढ़ें, बनाएँ और संपादित करें
लेयर्ड डिज़ाइन वर्कफ़्लो — उच्च-फ़िडेलिटी मल्टी-सेक्शन डिज़ाइन के लिए design_skeleton → design_content → design_refine
सेगमेंटेड प्रॉम्प्ट रिट्रीवल — केवल आवश्यक डिज़ाइन ज्ञान लोड करें (schema, layout, roles, icons, planning, आदि)
मल्टी-पेज सपोर्ट — MCP टूल के ज़रिए पेज बनाएँ, नाम बदलें, क्रम बदलें और डुप्लिकेट करें

कोड जनरेशन

React + Tailwind CSS
HTML + CSS
डिज़ाइन टोकन से CSS Variables

विशेषताएँ

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

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

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

src/
  canvas/          Fabric.js इंजन — ड्रॉइंग, सिंक, लेआउट, गाइड, पेन टूल
  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 देखें।

फ़ोर्क और क्लोन करें
ब्रांच बनाएँ: 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 इम्पोर्ट
बूलियन ऑपरेशन (यूनियन, सबट्रैक्ट, इंटरसेक्ट)
मल्टी-मॉडल क्षमता प्रोफ़ाइल
सहयोगी संपादन
प्लगइन सिस्टम

योगदानकर्ता

समुदाय

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

18 KiB

Raw Blame History

OpenPencil

OpenPencil क्यों

🎨 प्रॉम्प्ट → कैनवास

🤖 समवर्ती एजेंट टीमें

🧠 मल्टी-मॉडल इंटेलिजेंस

🔌 MCP सर्वर

📦 डिज़ाइन-एज़-कोड

🖥️ हर जगह चलता है

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

AI-नेटिव डिज़ाइन

विशेषताएँ

टेक स्टैक

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

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

स्क्रिप्ट

योगदान

रोडमैप

योगदानकर्ता

समुदाय

Star History

लाइसेंस

18 KiB Raw Blame History

OpenPencil

OpenPencil क्यों

🎨 प्रॉम्प्ट → कैनवास

🤖 समवर्ती एजेंट टीमें

🧠 मल्टी-मॉडल इंटेलिजेंस

🔌 MCP सर्वर

📦 डिज़ाइन-एज़-कोड

🖥️ हर जगह चलता है

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

AI-नेटिव डिज़ाइन

विशेषताएँ

टेक स्टैक

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

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

स्क्रिप्ट

योगदान

रोडमैप

योगदानकर्ता

समुदाय

Star History

लाइसेंस

18 KiB

Raw Blame History