OpenPencil

Dünyanın ilk açık kaynaklı AI-yerel vektör tasarım aracı.
_{Eşzamanlı Ajan Ekipleri • Kod Olarak Tasarım • Yerleşik MCP Sunucusu • Çoklu Model Zekası}

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}

`), ayrıca çalışan uygulamadan canlı bir HTTP uç noktası (`127.0.0.1:/mcp`) - 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, CSS Variables - Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native ## CLI — `op` Global olarak yükleyin ve tasarım aracını terminalinizden kontrol edin: ```bash brew install zseven-w/openpencil/op ``` ```bash op start # Masaüstü uygulamayı başlat op design @landing.txt # Dosyadan toplu tasarım op insert '{"type":"RECT"}' # Bir düğüm ekle op import:figma design.fig # Figma dosyasını içe aktar cat design.dsl | op design - # stdin'den pipe ile besle ``` Üç giriş yöntemini destekler: satır içi metin, `@filepath` (dosyadan oku) veya `-` (stdin'den oku). Masaüstü uygulama veya web geliştirme sunucusuyla çalışır. Tam komut referansı için [CLI README](./crates/op-cli) dosyasına bakın. **LLM Becerisi** — [OpenPencil Skill](https://github.com/ZSeven-W/openpencil-skill) eklentisini kurarak AI ajanlarına (Claude Code, Cursor, Codex, Gemini CLI vb.) `op` ile tasarım yapmayı öğretin. ## Ö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)` - Yeniden kullanılabilir UIKit'ler — `.pen` dosyalarından bileşen kitlerini içe/dışa aktarın **AI ve Ajanlar** - Akışlı üretim ve orkestratör güdümlü uzamsal ayrıştırma ile prompt-to-canvas - Eşzamanlı Ajan Ekipleri — birden çok tasarımcı farklı bölümler üzerinde paralel çalışır, üye başına kanvas göstergeleri ile - Katmanlı iş akışı — `design_skeleton` → `design_content` → `design_refine`, her aşamada odaklı prompt'lar - Stil Rehberleri — 50+ yerleşik stil (glassmorphism, brutalist, retro vb.), etiket tabanlı bulanık eşleştirme ile planlama ve üretime entegre - Çoklu model yetenek profilleri — model katmanına göre düşünme modunu, çabayı ve prompt biçimini otomatik olarak uyarlar - Yerleşik ajan çalışma ortamı (Rust) + Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini sağlayıcıları - Çinli LLM sağlayıcıları için Anthropic formatlı geçiş — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans **Git Entegrasyonu** - SSH / HTTPS kimlik doğrulama ve SSH anahtarı yönetimi ile klonlama sihirbazı - Dal seçici — oluştur, değiştir, sil, birleştir, hepsi Git panelinden - Kimlik doğrulama yeniden denemeleri ve non-fast-forward yönetimi ile pull / push kademeleri - Diskte `MERGE_HEAD` durum takibi ile klasör modu üç yönlü birleştirme - Düğüm/alan başına üç yönlü kartlar, satır içi JSON editörü, toplu eylemler ve satır içi diff bloğu ile çakışma paneli - Uzak ayarlar ve SSH anahtarları arayüzü; tüm Git yüzeyinde 15 dilde i18n **Dışa Aktarma** - Kanvas dışa aktarma — PNG, JPEG, WEBP, PDF (`Cmd+Shift+P`) - Kod dışa aktarma — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native - Artımlı MCP kod üretimi hattı — `codegen_plan`, `codegen_submit_chunk`, `codegen_assemble`, `codegen_clean` **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ı** - Yerel macOS, Windows ve Linux desteği — tek bir bağımsız ikili (winit + GPU Skia, Electron yok) - `.op` dosya ilişkilendirmesi — açmak için çift tıklayın, tekli örnek kilidi - GitHub Releases'e karşı arka planda güncelleme kontrolü - Farklı Kaydet, Son Kullanılanları Aç ve kapatırken kaydedilmemiş değişiklikler iletişim kutusu içeren yerel uygulama menüsü - Son kullanılan dosyaların kalıcılığı ## Teknoloji Yığını | | | | ----------------------- | -------------------------------------------------------------------------------- | | **Çekirdek** | Rust çalışma alanı (`crates/`) — editör durumu, widget'lar, host'lar, MCP, AI, codegen | | **Görüntü İşleme** | Her yerde GPU Skia — yerelde `skia-safe` (GL), tarayıcıda CanvasKit (WASM/WebGL2) | | **Arayüz Araç Seti** | jian — vendored Rust widget/render/event araç seti (`vendor/jian`) | | **Pencere Yönetimi** | winit (vendored `casement` çatalı) | | **Masaüstü** | Yerel ikili `openpencil-desktop` — tarayıcı motoru yok | | **Web SDK** | `op-web-sdk` + React 19 / Vue 3 adaptörleri — salt okunur `.op` görüntüleyici (TypeScript) | | **CLI** | `op` — terminal kontrolü, toplu tasarım DSL | | **AI** | Yerleşik Rust ajan çalışma ortamı · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK | | **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (web SDK) | | **Dosya Formatı** | `.op` — JSON tabanlı, insan tarafından okunabilir, Git dostu | ## Neden Rust OpenPencil, sıfırdan **Rust** ile yeniden yazıldı ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). Yeniden yazım tamamlandı — TypeScript + Electron editörü `v0.7.5` sürümünde kullanımdan kaldırıldı ve bu depodaki Rust çalışma alanı artık ürünün kendisidir: tek bir doğal çekirdek, çok daha küçük, çok daha hızlı ve tek bir kod tabanından daha fazla platformda çalışır. | | TypeScript + Electron (kullanımdan kaldırıldı, `v0.7.5`) | Rust (bugün) | | ------------------------ | ------------------------------------------------- | ------------------------------------------------------------------------ | | **Masaüstü çalışma ortamı** | Electron — Chromium + Node.js içerir | Yerel pencere (`winit` + GPU Skia), tarayıcı motoru yok | | **Masaüstü boyutu** | Kurulum başına tam Chromium çalışma ortamı | Tek, bağımsız ikili — **55.5 MB** | | **Web yükü** | JS + WASM paketi | **8.2 MB** wasm / **2.18 MB** gzip ile transfer | | **Görüntü işleme** | Web'de CanvasKit/Skia | **Her** hedefte tek GPU hızlandırmalı Skia arka ucu | | **Bellek** | JavaScript GC duraklamaları | GC yok — Rust sahiplik modeli, öngörülebilir gecikme | | **Kod tabanı** | Web yığını + Electron | Tek Rust çalışma alanı: editör · CLI · MCP · AI · codegen · Figma · Git | | **Hedefler** | Web + masaüstü, iki ayrı yığın | Masaüstü (macOS/Win/Linux) · mobil (iOS/Android) · tarayıcı — tek çekirdek | **Ölçülen iyileştirmeler** - **Küçük boyut** — tüm masaüstü uygulaması, paketlenmiş bir tarayıcı motoru ve Node çalışma ortamı yerine tek bir **55.5 MB** yerel ikili dosyasıdır. Web derlemesi, simge kataloğu bölümlendirmesinin ardından ham **8.2 MB** / **2.18 MB** gzip boyutuna ulaşır (transfer üzerinde −48%). - **Büyük belgelere ölçeklenir** — dört seviye derinliğinde iç içe otomatik düzen içeren **10,000 düğümlü** canlı bir kanvas; **panik olmadan ve ~0% boşta CPU** kullanımıyla yazar, okur ve düzeni anlık görüntüler; tüm 10k düğümün tam düzen anlık görüntüsü **~0.68 saniyede** döner. - **Hızlı etkileşim** — kaydırma/yakınlaştırma artık her karede belgeyi yeniden serileştirmiyor (tek bir sıcak yol düzeltmesiyle tekerlek yakınlaştırma CPU kullanımı **~69%'dan ~0%'a** düştü); sürükleme işlemleri sahneyi artımlı olarak günceller, metin ölçümü önbelleğe alınır ve yeniden boyamalar kare başına birleştirilir. - **Tek çekirdek, her ekran** — aynı editör durumu ve aynı görüntü işleme arka ucu; yerel masaüstüne, mobil cihazlara ve WASM aracılığıyla tarayıcıya derlenir — senkronda tutulacak paralel yeniden uygulama yoktur. - **Her yerde GPU Skia** — yerel, bir GL bağlamında `skia-safe` üzerinden; tarayıcı ise WebGL2 üzerinde CanvasKit aracılığıyla görüntü işler — aynı çizim kodu, aynı çıktı. - **Yerel erişilebilirlik** — tarayıcının a11y ağacına güvenmek yerine macOS, Windows ve Linux'ta AccessKit; web'de ise bir DOM aynası. - **Tek tip denetimli çalışma alanı** — MCP sunucusu, CLI, AI sağlayıcıları, kod üretimi, Figma içe aktarma ve Git entegrasyonu; CI'da `cargo-deny` tedarik zinciri denetimi ile tek bir Rust çalışma alanında bulunur. > **Durum:** TypeScript editörü `v0.7.5` sürümünde kullanımdan kaldırıldı ve yalnızca git geçmişinde bulunuyor; bu depo artık Rust çalışma alanıdır. `v0.8.0` Rust sürümü etkin geliştirme aşamasındadır (aşağıdaki Yol Haritası'na bakın). ## Proje Yapısı ```text openpencil/ ├── crates/ Rust çalışma alanı — ürünün kendisi │ ├── op-editor-core/ Standart `.op` (PenDocument) editör durumu + EditorCommand + tasarım değişkenleri │ ├── op-editor-ui/ Platformdan bağımsız widget'lar + RenderBackend arayüzü (wasm32 uyumlu) │ ├── op-editor-host-core/ Tüm host'lar tarafından paylaşılan, taşımadan bağımsız host durum makineleri │ ├── op-host-native/ Yerel host kütüphanesi — winit + skia-safe GL (masaüstü + mobil) │ ├── op-host-web/ Tarayıcı paketi — wasm32 cdylib, CanvasKit işleyici │ ├── op-host-desktop/ Masaüstü ikili dosyası `openpencil-desktop`; ayrıca `--serve-web` daemon'ı │ ├── op-host-services/ Headless serve-web / MCP daemon kütüphanesi │ ├── op-host-web-server/ GL içermeyen ince web sunucusu ikili dosyası │ ├── op-cli/ CLI aracı — `op` komutu │ ├── op-mcp/ MCP sunucusu — araçlar, toplu tasarım, katmanlı iş akışı │ ├── op-ai/ AI sağlayıcıları, sohbet çalışma ortamı, akış │ ├── op-ai-skills/ AI prompt beceri motoru (aşamalı prompt yükleme) │ ├── op-orchestrator/ Eşzamanlı ajan ekibi orkestrasyonu │ ├── op-codegen/ Kod oluşturucular (React, HTML, Vue, Flutter, ...) │ ├── op-figma/ Figma .fig dosya ayrıştırıcı ve dönüştürücü │ ├── op-git/ Git entegrasyonu — klonlama, dal, push/pull, birleştirme │ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n / │ op-config-store / op-process-io / op-acp / op-smoke / ... ├── packages/ Web SDK çalışma alanı (Bun) │ ├── op-web-sdk/ Salt okunur `.op` web görüntüleyici SDK'sı (wasm paketini sarmalar) │ ├── op-web-sdk-react/ React 19 adaptörü │ └── op-web-sdk-vue/ Vue 3 adaptörü ├── vendor/ Vendored alt sistemler (git submodule'ları) │ ├── jian/ Skia widget/render/event araç seti │ ├── casement/ winit çatalı │ └── agent/ Ürünler arası Rust ajan çalışma ortamı (agent-rs) └── .githooks/ Dal adından ön-commit sürüm eşitleme ``` ## 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+P` | Dışa Aktar (PNG/JPG/WEBP/PDF) | | `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 | | `Cmd+Shift+S` | Farklı Kaydet | ## Betikler ```bash # Product (Rust — run from the repo root) cargo build --workspace # Build all crates (add --release for prod) cargo test --workspace # Run all tests cargo check --workspace # Type check cargo clippy --workspace --all-targets -- -D warnings # Lint cargo fmt --all # Format bash scripts/start-web-rust.sh # Web dev server (wasm bundle + headless host) cargo run -p op-host-desktop # Desktop app (binary: openpencil-desktop) cargo run -p op-cli -- # CLI (binary: op) # Web SDK / JS tooling (run from packages/) cd packages && bun run lint # Lint the web SDK (oxlint); also: bun run format cd packages && bun run generate-iconify-catalog # Regenerate the Rust icon catalog assets cd packages && bun run bump # Sync SDK package.json versions ``` ## Katkıda Bulunma Katkılarınızı bekliyoruz! Mimari ayrıntılar ve kod stili için [CLAUDE.md](./CLAUDE.md) dosyasına bakın. 1. Fork'layın ve klonlayın 2. Sürüm eşitlemeyi ayarlayın: `git config core.hooksPath .githooks` 3. Dal oluşturun: `git checkout -b feat/my-feature` 4. Kontrolleri çalıştırın: `cargo test --workspace && cargo clippy --workspace --all-targets -- -D warnings` 5. [Conventional Commits](https://www.conventionalcommits.org/) formatıyla commit yapın: `feat(canvas): add rotation snapping` 6. `main` dalına PR açın ## Yol Haritası - [x] CSS senkronizasyonlu tasarım değişkenleri ve tokenları - [x] Bileşen sistemi (örnekler ve geçersiz kılmalar) - [x] Orkestratörlü AI tasarım üretimi - [x] Katmanlı tasarım iş akışı ile MCP sunucu entegrasyonu - [x] Çok sayfa desteği - [x] Figma `.fig` içe aktarma - [x] Boolean işlemler (birleştirme, çıkarma, kesişim) - [x] Çoklu model yetenek profilleri - [x] Yeniden kullanılabilir paketlerle monorepo yapılandırması - [x] CLI aracı (`op`) terminal kontrolü - [x] Çoklu sağlayıcı destekli yerleşik AI ajan SDK'sı - [x] i18n — 15 dil - [x] Git entegrasyonu (klonlama, dal, push/pull, klasör modu üç yönlü birleştirme) - [x] Kanvas raster dışa aktarma (PNG / JPEG / WEBP / PDF) - [ ] Ortak düzenleme - [ ] Eklenti sistemi ## Katkıda Bulunanlar ## Sponsorlar OpenPencil ücretsiz ve açık kaynaklıdır. Geliştirme, onu faydalı bulanlar tarafından finanse ediliyor — tuvali açık tuttuğunuz için teşekkürler. **[MrQyun](https://github.com/mrqyun)**'a teşekkürler — isminizi burada görmek ister misiniz? **[Sponsor ol →](https://github.com/sponsors/ZSeven-W)** ## Topluluk Discord'umuza katılın — Soru sorun, tasarımlarınızı paylaşın, özellik önerin. ## Star History ## Değerlendirmeler [](https://mseep.ai/app/zseven-w-openpencil) ## Lisans [MIT](./LICENSE) — Copyright (c) 2026 ZSeven-W