|
### 🎨 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.
|
|
### ⌨️ CLI — `op`
Tasarım aracını terminalinizden kontrol edin. `op design`, `op insert`, `op export` — toplu tasarım DSL, düğüm manipülasyonu, kod dışa aktarımı. 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ıç
```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
### 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):**
```bash
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:
```bash
# 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:**
```bash
# 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 — 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:
```bash
npm install -g @zseven-w/openpencil
```
```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 export react --out . # React + Tailwind'e dışa aktar
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](./apps/cli/README.md) 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)`
**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 · i18next |
| **Kanvas** | CanvasKit/Skia (WASM, GPU hızlandırmalı) |
| **Durum Yönetimi** | Zustand v5 |
| **Sunucu** | Nitro |
| **Masaüstü** | Electron 35 |
| **CLI** | `op` — terminal kontrolü, toplu tasarım DSL, kod dışa aktarımı |
| **AI** | Vercel AI SDK v6 · 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ı
```text
openpencil/
├── apps/
│ ├── web/ TanStack Start web uygulaması
│ │ ├── src/
│ │ │ ├── canvas/ CanvasKit/Skia motoru — çizim, senkronizasyon, düzen
│ │ │ ├── components/ React UI — editör, paneller, paylaşılan iletişim kutuları, simgeler
│ │ │ ├── services/ai/ AI sohbet, orkestratör, tasarım üretimi, akış
│ │ │ ├── stores/ Zustand — kanvas, belge, sayfalar, geçmiş, AI
│ │ │ ├── mcp/ Harici CLI entegrasyonu için MCP sunucu araçları
│ │ │ ├── hooks/ Klavye kısayolları, dosya bırakma, Figma yapıştırma
│ │ │ └── uikit/ Yeniden kullanılabilir bileşen kiti sistemi
│ │ └── server/
│ │ ├── api/ai/ Nitro API — akış sohbet, üretim, doğrulama
│ │ └── utils/ Claude CLI, OpenCode, Codex, Copilot sarmalayıcıları
│ ├── desktop/ Electron masaüstü uygulaması
│ │ ├── main.ts Pencere, Nitro çatallanması, yerel menü, otomatik güncelleyici
│ │ ├── ipc-handlers.ts Yerel dosya diyalogları, tema senkronizasyonu, tercihler IPC
│ │ └── preload.ts IPC köprüsü
│ └── cli/ CLI aracı — `op` komutu
│ ├── src/commands/ Tasarım, belge, dışa aktarma, içe aktarma, düğüm, sayfa, değişken komutları
│ ├── connection.ts Çalışan uygulamaya WebSocket bağlantısı
│ └── launcher.ts Masaüstü uygulamayı veya web sunucusunu otomatik algıla ve başlat
├── packages/
│ ├── pen-types/ PenDocument modeli için tür tanımları
│ ├── pen-core/ Belge ağacı işlemleri, düzen motoru, değişkenler
│ ├── pen-codegen/ Kod oluşturucular (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Figma .fig dosya ayrıştırıcı ve dönüştürücü
│ ├── pen-renderer/ Bağımsız CanvasKit/Skia işleyici
│ ├── pen-sdk/ Şemsiye SDK (tüm paketleri yeniden dışa aktarır)
│ ├── pen-ai-skills/ AI prompt beceri motoru (aşamalı prompt yükleme)
│ └── agent/ AI ajan SDK'sı (Vercel AI SDK, çoklu sağlayıcı, ajan ekipleri)
└── .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+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 bump 
Discord'umuza katılın
— Soru sorun, tasarımlarınızı paylaşın, özellik önerin.
## Star History