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

12 KiB

Raw Blame History

OpenPencil

Dunyanin ilk acik kaynakli AI-yerel vektor tasarim araci.
_{Eszamanli Ajan Ekipleri • Kod Olarak Tasarim • Yerlesik MCP Sunucusu • Coklu Model Zekasi}

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

_{Demo videosunu izlemek için görsele tıklayın}

Neden OpenPencil

🎨 Prompt → Kanvas

Herhangi bir arayüzü doğal dilde tanımlayın. Gerçek zamanlı akış animasyonuyla sonsuz kanvasta belirmesini izleyin. Öğeleri seçip sohbet ederek mevcut tasarımları düzenleyin.

🤖 Eşzamanlı Ajan Ekipleri

Orkestratör, karmaşık sayfaları uzamsal alt görevlere ayırır. Birden fazla AI ajanı farklı bölümlerde eşzamanlı çalışır — hero, özellikler, footer — hepsi paralel olarak akış halinde.

🧠 Çoklu Model Zekası

Her modelin yeteneklerine otomatik olarak uyum sağlar. Claude tam promptlar ve düşünme modu alır; GPT-4o/Gemini'de düşünme modu devre dışı bırakılır; küçük modeller (MiniMax, Qwen, Llama) güvenilir çıktı için basitleştirilmiş promptlar alır.

🔌 MCP Sunucusu

Claude Code, Codex, Gemini, OpenCode, Kiro veya Copilot CLI'larına tek tıkla kurulum. Terminalinizden tasarım yapın — herhangi bir MCP uyumlu ajan aracılığıyla .op dosyalarını okuyun, oluşturun ve düzenleyin.

📦 Kod Olarak Tasarım

.op dosyaları JSON formatındadır — insan tarafından okunabilir, Git dostu, diff edilebilir. Tasarım değişkenleri CSS özel özellikleri üretir. React + Tailwind veya HTML + CSS olarak kod dışa aktarımı.

🖥️ Her Yerde Çalışır

Web uygulaması + Electron ile macOS, Windows ve Linux'ta yerel masaüstü. GitHub Releases'ten otomatik güncelleme. .op dosya ilişkilendirmesi — açmak için çift tıklayın.

Hızlı Başlangıç

# Bağımlılıkları yükle
bun install

# http://localhost:3000 adresinde geliştirme sunucusunu başlat
bun --bun run dev

Ya da masaüstü uygulaması olarak çalıştırın:

bun run electron:dev

Ön koşullar: Bun >= 1.0 ve Node.js >= 18

AI Destekli Tasarım

Prompttan UI'ye

Metinden tasarıma — bir sayfayı tanımlayın, gerçek zamanlı akış animasyonuyla kanvasta oluşturulsun
Orkestratör — karmaşık sayfaları paralel üretim için uzamsal alt görevlere ayırır
Tasarım değişikliği — öğeleri seçin, ardından değişiklikleri doğal dille tanımlayın
Görsel girdi — referans tabanlı tasarım için ekran görüntüleri veya maketler ekleyin

Çok Ajanlı Destek

Ajan	Kurulum
Claude Code	Yapılandırma gerekmez — yerel OAuth ile Claude Agent SDK kullanır
Codex CLI	Ajan Ayarlarından bağlanın (`Cmd+,`)
OpenCode	Ajan Ayarlarından bağlanın (`Cmd+,`)
GitHub Copilot	`copilot login` ardından Ajan Ayarlarından bağlanın (`Cmd+,`)

Model Yetenek Profilleri — promptları, düşünme modunu ve zaman aşımlarını model katmanına göre otomatik olarak uyarlar. Tam katman modeller (Claude) eksiksiz promptlar alır; standart katman (GPT-4o, Gemini, DeepSeek) düşünme modunu devre dışı bırakır; temel katman (MiniMax, Qwen, Llama, Mistral) maksimum güvenilirlik için basitleştirilmiş iç içe JSON promptları alır.

MCP Sunucusu

Yerleşik MCP sunucusu — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI'larına tek tıkla kurulum
Terminalden tasarım otomasyonu: herhangi bir MCP uyumlu ajan aracılığıyla .op dosyalarını okuyun, oluşturun ve düzenleyin
Katmanlı tasarım iş akışı — daha yüksek kaliteli çok bölümlü tasarımlar için design_skeleton → design_content → design_refine
Bölümlenmiş prompt alımı — yalnızca ihtiyacınız olan tasarım bilgisini yükleyin (şema, düzen, roller, simgeler, planlama vb.)
Çok sayfa desteği — MCP araçları ile sayfaları oluşturun, yeniden adlandırın, sıralayın ve çoğaltın

Kod Üretimi

React + Tailwind CSS
HTML + CSS
Tasarım tokenlarından CSS Variables

Özellikler

Kanvas ve Çizim

Kaydırma, yakınlaştırma, akıllı hizalama kılavuzları ve yakalamayı destekleyen sonsuz kanvas
Dikdörtgen, Elips, Çizgi, Çokgen, Kalem (Bezier), Frame, Metin
Boolean işlemler — bağlamsal araç çubuğuyla birleştir, çıkar, kesiştir
Simge seçici (Iconify) ve görsel içe aktarma (PNG/JPEG/SVG/WebP/GIF)
Otomatik düzen — boşluk, dolgu, justify, align ile dikey/yatay
Sekme navigasyonlu çok sayfalı belgeler

Tasarım Sistemi

Tasarım değişkenleri — $variable referanslı renk, sayı, metin tokenları
Çok tema desteği — birden fazla tema ekseni, her biri varyantlarıyla (Açık/Koyu, Kompakt/Rahat)
Bileşen sistemi — örnekler ve geçersiz kılmalarla yeniden kullanılabilir bileşenler
CSS senkronizasyonu — otomatik oluşturulan özel özellikler, kod çıktısında var(--name)

Figma İçe Aktarma

Düzen, dolgu, kontur, efektler, metin, görseller ve vektörler korunarak .fig dosyalarını içe aktarın

Masaüstü Uygulaması

Electron aracılığıyla yerel macOS, Windows ve Linux desteği
.op dosya ilişkilendirmesi — açmak için çift tıklayın, tekli örnek kilidi
GitHub Releases'ten otomatik güncelleme
Yerel uygulama menüsü ve dosya iletişim kutuları

Teknoloji Yığını


Ön Uç	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui
Kanvas	Fabric.js v7
Durum Yönetimi	Zustand v5
Sunucu	Nitro
Masaüstü	Electron 35
AI	Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
Çalışma Ortamı	Bun · Vite 7
Dosya Formatı	`.op` — JSON tabanlı, insan tarafından okunabilir, Git dostu

Proje Yapısı

src/
  canvas/          Fabric.js motoru — çizim, senkronizasyon, düzen, kılavuzlar, kalem aracı
  components/      React UI — editör, paneller, paylaşılan iletişim kutuları, simgeler
  services/ai/     AI sohbet, orkestratör, tasarım üretimi, akış
  services/figma/  Figma .fig ikili içe aktarma ardışık düzeni
  services/codegen React+Tailwind ve HTML+CSS kod üreticileri
  stores/          Zustand — kanvas, belge, sayfalar, geçmiş, AI, ayarlar
  variables/       Tasarım token çözümleme ve referans yönetimi
  mcp/             Harici CLI entegrasyonu için MCP sunucu araçları
  uikit/           Yeniden kullanılabilir bileşen kiti sistemi
server/
  api/ai/          Nitro API — akış sohbet, üretim, doğrulama
  utils/           Claude CLI, OpenCode, Codex, Copilot istemci sarmalayıcıları
electron/
  main.ts          Pencere, Nitro çatallanması, yerel menü, otomatik güncelleyici
  preload.ts       IPC köprüsü

Klavye Kısayolları

Tuş	İşlem	Tuş	İşlem
`V`	Seç	`Cmd+S`	Kaydet
`R`	Dikdörtgen	`Cmd+Z`	Geri Al
`O`	Elips	`Cmd+Shift+Z`	Yeniden Yap
`L`	Çizgi	`Cmd+C/X/V/D`	Kopyala/Kes/Yapıştır/Çoğalt
`T`	Metin	`Cmd+G`	Grupla
`F`	Frame	`Cmd+Shift+G`	Grubu Çöz
`P`	Kalem aracı	`Cmd+Shift+E`	Dışa Aktar
`H`	El (kaydır)	`Cmd+Shift+C`	Kod paneli
`Del`	Sil	`Cmd+Shift+V`	Değişkenler paneli
`[ / ]`	Yeniden sırala	`Cmd+J`	AI sohbet
Oklar	1px kaydır	`Cmd+,`	Ajan ayarları
`Cmd+Alt+U`	Boolean birleştir	`Cmd+Alt+S`	Boolean çıkar
`Cmd+Alt+I`	Boolean kesiştir

Betikler

bun --bun run dev          # Geliştirme sunucusu (port 3000)
bun --bun run build        # Üretim derlemesi
bun --bun run test         # Testleri çalıştır (Vitest)
npx tsc --noEmit           # Tür denetimi
bun run electron:dev       # Electron geliştirme modu
bun run electron:build     # Electron paketleme

Katkıda Bulunma

Katkılarınızı bekliyoruz! Mimari ayrıntılar ve kod stili için CLAUDE.md dosyasına bakın.

Fork'layın ve klonlayın
Dal oluşturun: git checkout -b feat/my-feature
Kontrolleri çalıştırın: npx tsc --noEmit && bun --bun run test
Conventional Commits formatıyla commit yapın: feat(canvas): add rotation snapping
main dalına PR açın

Yol Haritası

CSS senkronizasyonlu tasarım değişkenleri ve tokenları
Bileşen sistemi (örnekler ve geçersiz kılmalar)
Orkestratörlü AI tasarım üretimi
Katmanlı tasarım iş akışı ile MCP sunucu entegrasyonu
Çok sayfa desteği
Figma .fig içe aktarma
Boolean işlemler (birleştirme, çıkarma, kesişim)
Çoklu model yetenek profilleri
Ortak düzenleme
Eklenti sistemi

Katkıda Bulunanlar

Topluluk

Discord'umuza katılın — Soru sorun, tasarımlarınızı paylaşın, özellik önerin.

12 KiB

Raw Blame History

OpenPencil

Neden OpenPencil

🎨 Prompt → Kanvas

🤖 Eşzamanlı Ajan Ekipleri

🧠 Çoklu Model Zekası

🔌 MCP Sunucusu

📦 Kod Olarak Tasarım

🖥️ Her Yerde Çalışır

Hızlı Başlangıç

AI Destekli Tasarım

Özellikler

Teknoloji Yığını

Proje Yapısı

Klavye Kısayolları

Betikler

Katkıda Bulunma

Yol Haritası

Katkıda Bulunanlar

Topluluk

Star History

Lisans

12 KiB Raw Blame History Unescape Escape

OpenPencil

Neden OpenPencil

🎨 Prompt → Kanvas

🤖 Eşzamanlı Ajan Ekipleri

🧠 Çoklu Model Zekası

🔌 MCP Sunucusu

📦 Kod Olarak Tasarım

🖥️ Her Yerde Çalışır

Hızlı Başlangıç

AI Destekli Tasarım

Özellikler

Teknoloji Yığını

Proje Yapısı

Klavye Kısayolları

Betikler

Katkıda Bulunma

Yol Haritası

Katkıda Bulunanlar

Topluluk

Star History

Lisans

12 KiB

Raw Blame History