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

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

Docker

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

Ç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

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 — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI'larına tek tıkla kurulum
• Otomatik Node.js algılama — kurulu değilse otomatik olarak HTTP aktarımına geçer ve MCP HTTP sunucusunu otomatik başlatır
• 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:

npm install -g @zseven-w/openpencil

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ı (agent-native, Zig NAPI) + 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ı

• 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
• 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ı