openpencil/README.tr.md

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}

Not: Aynı ada sahip başka bir açık kaynak proje bulunmaktadır — OpenPencil, Figma uyumlu görsel tasarım ve gerçek zamanlı iş birliğine odaklanmaktadır. Bu proje, AI-native tasarımdan koda iş akışlarına odaklanmaktadır.

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ı + macOS, Windows ve Linux'ta yerel masaüstü — tek bir Rust çekirdeği, tek bir bağımsız ikili, tarayıcı motoru yok. .op dosya ilişkilendirmesi — açmak için çift tıklayın.
⌨️ CLI — op Tasarım aracını terminalinizden kontrol edin. op design, op insert — toplu tasarım DSL, düğüm manipülasyonu. Dosyalardan veya stdin'den pipe ile besleyin. Masaüstü uygulama veya web sunucusuyla çalışır.	🎯 Çok Platformlu Kod Dışa Aktarımı Tek bir .op dosyasından React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native'e dışa aktarın. Tasarım değişkenleri CSS özel özelliklerine dönüşür.

Hızlı Başlangıç

# Web dev server (builds the CanvasKit wasm bundle, then runs the headless web host)
bash scripts/start-web-rust.sh

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

cargo run -p op-host-desktop

Ön koşullar: Ürünü derlemek için Rust (stable). Bun >= 1.0 ve Node.js >= 18 yalnızca packages/ altındaki web SDK için gereklidir.

Docker

Birden fazla görüntü varyantı mevcuttur — ihtiyaçlarınıza uygun olanı seçin:

Görüntü	Boyut	İçerik
openpencil:latest	~226 MB	Yalnızca web uygulaması
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	Tüm CLI araçları

Çalıştır (yalnızca web):

docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest

AI CLI ile çalıştır (ör. Claude Code):

AI sohbeti Claude CLI OAuth girişine bağlıdır. Giriş oturumunu kalıcı hale getirmek için bir Docker hacmi kullanın:

# Adım 1 — Giriş (tek seferlik)
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

# Adım 2 — Başlat
docker run -d -p 3000:3000 \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest

Yerel olarak derle:

# Temel (yalnızca web)
docker build --target base -t openpencil .

# Belirli bir CLI ile
docker build --target with-claude -t openpencil-claude .

# Tam (tüm CLI'lar)
docker build --target full -t openpencil-full .

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
Yerleşik (9+ sağlayıcı)	Sağlayıcı ön ayarlarından seçin ve bölge değiştirin — Anthropic, OpenAI, Google, DeepSeek ve daha fazlası
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+,)
Gemini CLI	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.

i18n — 15 dilde tam arayüz yerelleştirmesi: English, 简体中文, 繁體中文, 日本語, 한국어, Français, Español, Deutsch, Português, Русский, हिन्दी, Türkçe, ไทย, Tiếng Việt, Bahasa Indonesia.

MCP Sunucusu

• Yerleşik MCP sunucusu (op-mcp crate) — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI'larına tek tıkla kurulum
• Node.js gerekmez — masaüstü ikili dosyası aracılığıyla stdio aktarımı (--mcp <path>), ayrıca çalışan uygulamadan canlı bir HTTP uç noktası (127.0.0.1:<port>/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:

brew install zseven-w/openpencil/op

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 dosyasına bakın.

LLM Becerisi — 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). 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ı

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

# 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 -- <args>        # 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 <version>             # Sync SDK package.json versions

Katkıda Bulunma

Katkılarınızı bekliyoruz! Mimari ayrıntılar ve kod stili için 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 formatıyla commit yapın: feat(canvas): add rotation snapping
6. 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
• Yeniden kullanılabilir paketlerle monorepo yapılandırması
• CLI aracı (op) terminal kontrolü
• Çoklu sağlayıcı destekli yerleşik AI ajan SDK'sı
• i18n — 15 dil
• Git entegrasyonu (klonlama, dal, push/pull, klasör modu üç yönlü birleştirme)
• 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'a teşekkürler — isminizi burada görmek ister misiniz? Sponsor ol →

Topluluk

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

Star History

Değerlendirmeler

Lisans

MIT — Copyright (c) 2026 ZSeven-W