OpenPencil

AI destekli açık kaynak tasarım aracı. Kod Olarak Tasarım.
Prompttan kanvas UI'ye. Çok ajanlı orkestrasyon. Yerleşik MCP sunucusu. Kod üretimi.

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

Hızlı Başlangıç · AI · Özellikler · Discord · Katkıda Bulunma

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

## Hızlı Başlangıç ```bash # 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: ```bash bun run electron:dev ``` > **Ön koşullar:** [Bun](https://bun.sh/) >= 1.0 ve [Node.js](https://nodejs.org/) >= 18 ## AI Destekli Tasarım OpenPencil, AI'yi bir eklenti olarak değil, temel iş akışı olarak sıfırdan inşa edilmiştir. **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+,`) | **MCP Sunucusu** - Yerleşik MCP sunucusu — Claude Code / Codex / Gemini / OpenCode / Kiro 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 **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 — birleştir, çıkar, kesiştir bağlamsal araç çubuğuyla - 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 - 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 | | **Çalışma Ortamı** | Bun · Vite 7 | | **Dosya Formatı** | `.op` — JSON tabanlı, insan tarafından okunabilir, Git dostu | ## Proje Yapısı ```text 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 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 ```bash 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](./CLAUDE.md) dosyasına bakın. 1. Fork'layın ve klonlayın 2. Dal oluşturun: `git checkout -b feat/my-feature` 3. Kontrolleri çalıştırın: `npx tsc --noEmit && bun --bun run test` 4. [Conventional Commits](https://www.conventionalcommits.org/) formatıyla commit yapın: `feat(canvas): add rotation snapping` 5. `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] MCP sunucu entegrasyonu - [x] Çok sayfa desteği - [x] Figma `.fig` içe aktarma - [x] Boolean işlemler (birleştirme, çıkarma, kesişim) - [ ] Ortak düzenleme - [ ] Eklenti sistemi ## Katkıda Bulunanlar

## Topluluk