riviera.penvektör tuval dosyası, Git versiyonluUI kitiyerleşik bileşenlerDüzenleme: daha sakin başlıktuvalde veya komut bloğunda düzenleyin
Tamamen Açık Kaynaklı Pencil.dev Alternatifi: OpenDesign
OpenDesign ve Pencil alışılmadık derecede birbirine benzer: her ikisi de aracı odaklıdır ve tasarımı Git altında deponuzda dosya olarak tutar. OpenDesign ücretsiz, tamamen açık kaynaklı, sağlayıcıdan bağımsız bir alternatiftir — tüm uygulama için Apache-2.0, herhangi bir büyük kodlama aracısıyla BYOK ve UI, sunumlar, prototipler ve bir tasarım sistemini kapsayan çıktı. Bu sayfa, nerede örtüştüklerini, Pencil'ın tuvalinin nerede gerçekten kazandığını ve nasıl geçiş yapılacağını anlatıyor.
OpenDesign vs Pencil, üç farklı ihtiyaç
Doğru Yerden Başlayın
OpenDesign mı Pencil mı?
Duruma göre bir karar, her iki araçta da kısa bir deneme, tarihli bir özellik karşılaştırması ve cevabı değiştiren koşullar.
Kararı oku Zaten Pencil'daBir .pen Tasarımını OpenDesign'a Taşıyın
Her ikisi de dosyaları depoda tutar, bu nedenle bulut dışa aktarımında hiçbir şey kaybolmaz. Ne taşınır, ne tuvalde kalır ve dört adım.
Nelerin taşındığını görün Farklı bir soruPencil'dan Değil, Figma'dan mı Ayrılıyorsunuz?
Ayrıldığınız tuval Figma'nınki ise, bu karşılaştırma işbirliğini ve Dev Mode'u da kapsar.
OpenDesign vs Figma'yı okuBu sayfada Genel Bakış
Her birinin ne olduğu
Pencil vs OpenDesign: Her Bir Araç Nedir
Pencil ve OpenDesign büyük fikri paylaşır — deponuzda dosya olarak tutulan aracı odaklı tasarım — ve neyin açık olduğu, hangi aracıların birinci sınıf olduğu ve çıktının ne kadar geniş olduğu konusunda farklılık gösterir. OpenDesign bu karşılaştırmayı kendi ürünü hakkında yazar ve Pencil ile bağlantılı değildir.
Kısa cevap. OpenDesign ücretsiz, tamamen açık kaynaklı (Apache-2.0), yerel öncelikli bir Pencil alternatifidir: aynı aracı odaklı, dosyalar-depoda fikri, sadece dosya formatı yerine tüm uygulamanın açık olması, Claude, Codex, Cursor, Gemini, OpenCode ve Qwen genelinde sağlayıcıdan bağımsız BYOK ve UI, açılış sayfaları, sunumlar, prototipler ve bir DESIGN.md tasarım sistemini kapsayan çıktı. Vektör tuvali yoktur; IDE'nizin içinde yerel Figma yapıştırma özelliğine sahip Figma benzeri bir tuvali elle düzenlemek değer verdiğiniz şeyse, Pencil'ı tutun.
Pencil
Pencil (pencil.dev) "tuvalde tasarım, koda iniş"tir: IDE'nizin ve kod tabanınızın içinde yaşayan, a16z Speedrun tarafından desteklenen sonsuz bir vektör tasarım tuvali. Tasarım dosyaları, Git altında deponuzda bulunan açık, belgelenmiş bir .pen JSON formatı kullanır ve yerel bir MCP sunucusu yapay zeka aracılarının bunları okumasına ve yazmasına izin verir. Yerleşik UI kitleri ve yerel Figma kopyala-yapıştır özelliğiyle birlikte gelir ve erken erişimdeyken ücretsizdir.
- ÇalışırYerel masaüstü uygulaması, IDE uzantısı ve yerel MCP sunucusu
- ModelClaude Code için optimize edilmiş, çeşitli aracılara sahip MCP
- ÇıktıDeponuzda .pen JSON dosyaları; koda dönüşen UI ekranları ve bileşenleri
- MaliyetErken erişimde ücretsiz; ücretli planların sinyali verildiyayınlanmış sınır yok
OpenDesign
OpenDesign, kendi kodlama aracınızı yönlendirdiğiniz yerel öncelikli, açık kaynaklı bir tasarım aracıdır. Beceriler ve taşınabilir bir marka, deponuzda dosya olarak yaşar; masaüstü uygulaması sonucu oluşturur ve inceler.
- ÇalışırMakinenizde masaüstü uygulaması ve yerel arka plan programı
- AracıSizinki: Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen ve daha fazlası
- ÇıktıProje dizininizdeki dosyalar
- MaliyetApache-2.0; API kullanımı için kendi sağlayıcınıza ödeme yaparsınız
Örtüştükleri yer
Git altında depoda aracı odaklı tasarım dosyaları ve koda dönüşen UI. Bu, her iki aracın da yaptığı şeyin çoğudur ve sayfanın geri kalanının karşılaştırdığı şeyin tamamıdır.
Bu sayfanın iddia etmediği şey
OpenDesign'ın bir vektör tuvaline, bir katmanlar paneline, yerleşik UI kitlerine veya yerel Figma yapıştırma özelliğine sahip olduğu veya .pen dosyalarının otomatik olarak dönüştürüldüğü. İş tuval ise, aşağıdaki karar Pencil'ı tutun der.
Karar
Pencil mı OpenDesign mı? Duruma Göre Karar
Şu durumlarda Pencil'ı seçin…
- Cursor veya VS Code içinde olgun, Figma benzeri bir vektör tuvalini elle düzenlemek istiyorsanız.
- Figma'dan sık sık yapıştırıyorsanız ve katmanların ve otomatik düzenin bozulmamasını istiyorsanız.
- Yerleşik UI kitleri ve Claude öncelikli bir aracı deneyimi en çok değer verdiğiniz şeylerse.
Şu durumlarda OpenDesign'ı seçin…
- Sadece belgelenmiş bir format değil, tüm aracın açık kaynaklı olmasını (çatallamak, denetlemek, kendi sunucunuzda barındırmak) istiyorsanız.
- Erken erişimden sonra satıcı kısıtlaması olmadan "ücretsiz"in ücretsiz kalmasını istiyorsanız; yalnızca kendi model harcamanızı ödersiniz.
- Sağlayıcıdan bağımsız BYOK istiyorsanız: Claude, Codex, Cursor, Gemini, OpenCode ve Qwen'in hepsi birinci sınıftır.
- Kullanıcı arayüzü, sunumlar, prototipler ve tasarım sisteminin tek bir DESIGN.md dosyasından oluşturulmasını istiyorsanız.
Şu durumlarda ikisini de çalıştırın…
Neyin değiştiğini, neyin kaldığını görün
- Tasarımcılar Pencil'ın tuvalinde çizer; geri kalan yapılar OpenDesign'da aynı markadan oluşturulur.
- Erken erişim fiyatlandırması veya Claude öncelikli ayarlamalar size uymamaya başlarsa açık bir alternatif istiyorsanız.
- Her ikisi de dosyaları depoda tutar, bu nedenle onları yan yana çalıştırmanın maliyeti düşüktür.
Aynı özet, iki sonuç
Pencil ve OpenDesign'da Aynı Özet
Bir karşılaştırma ancak girdileri kadar dürüsttür. Aynı brief ve aynı marka Pencil ve OpenDesign'a girer; geri dönen şey, nasıl düzenlendiği ve ondan başka neler oluşturabileceğiniz karşılaştırdığınız şeydir. Aşağıdaki paneller ekran görüntüsü değil, illüstrasyondur; 20 dakikalık test, brief'i kendinizin çalıştırmasına olanak tanır.
Özet · her iki araçta da aynı
Yavaş seyahat konaklamaları rezervasyonu yapan küçük bir stüdyo için bir açılış sayfası tasarlayın. Güçlü bir başlığa sahip bir ana bölüm, öne çıkan üç yer, rezervasyonun nasıl çalıştığına dair kısa bir not ve son bir harekete geçirici mesaj. Masaüstü ve telefon.
- Marka
- Kağıt arka plan, Albert Sans, bir yeşil vurgu, 8px yarıçap
- Kesme noktaları
- 1440 masaüstü, 390 mobil; yatay kaydırma yok
- Düzenleme testi
- İlk sonuçtan sonra: "başlığı daha sakin yap, ikinci yeri değiştir"
- Kayıt
- Model, tarih, ilk sonuca kadar geçen süre, gereken düzenlemeler, dışa aktarma formatı
riviera-landing.htmlyeni · v2DESIGN.mdbağlıDüzenleme: daha sakin başlıköğeyi işaret edin, aracı revize etsin
AçıklayıcıHer iki panel de bu sayfa için çizilmiş illüstrasyonlardır, hiçbir aracın ekran görüntüsü değildir ve karar bunlara dayanmaz. Aşağıdaki 20 dakikalık testle brief'i kendiniz çalıştırın ve iki sonucun adil bir şekilde karşılaştırılabilmesi için burada listelenen noktaları not edin.
Dikkat edilmesi gerekenler · her iki araç
Model ve sürüm, çalıştırma tarihi, ilk kullanılabilir sonuca kadar geçen süre, "bitti"ye ulaşmak için yapılan düzenleme sayısı, dışa aktarmanın neleri içerdiği.
Dikkat edilmesi gerekenler · Pencil
Hangi aracının MCP üzerinden çalıştığı ve Claude dışında nasıl davrandığı, .pen dosyasının koda temiz bir şekilde dönüp dönmediği, Figma yapıştırmasının neleri koruduğu.
Dikkat edilmesi gerekenler · OpenDesign
Kullanılan aracı ve anahtar, yeniden komut verilmeden DESIGN.md'ye uyulup uyulmadığı, her iki kesme noktasının kontrol edilip edilmediği, sürümlerin dosya olarak tutulup tutulmadığı.
Özellik özellik
OpenDesign ve Pencil, Özellik Özellik
OpenDesign ve Pencil'ın pratikte farklılaştığı dokuz boyut: lisans, çalışma zamanı, tasarım dosyaları, hesap, maliyet, model, birincil yüzey, çıktı aralığı ve olgunluk. Pencil bilgileri 2026-09-06 tarihinde halka açık kaynaklardan kontrol edilmiştir; erken erişim koşulları değişebilir.
| Boyut | OpenDesign | Pencil |
|---|---|---|
| Lisans | Apache-2.0; tüm uygulama açık kaynaklıdır | Kapalı kaynaklı uygulama; yalnızca .pen formatı belgelenmiştir |
| Çalışma zamanı | Yerel arka plan programı ve masaüstü uygulaması | Yerel masaüstü uygulaması, IDE uzantısı ve yerel MCP sunucusu |
| Tasarım dosyaları | Deponuzdaki dosyalar: DESIGN.md ve yapılar | Deponuzdaki .pen JSON dosyaları |
| Hesap | Gerekli değil | Oturum açma, erken erişim |
| Maliyet | Ücretsiz ve açık kaynaklı; kendi model harcamanız | Erken erişimde ücretsiz; ücretli planlar sinyallendikoşullar değişebilir |
| Model | Sağlayıcıdan bağımsız BYOK: Claude, Codex, Cursor, Gemini, OpenCode, Qwen | Claude Code için optimize edilmiş, birkaç aracılı MCP |
| Birincil yüzey | Aracı odaklı: özetten yapılara, artı bir inceleme kullanıcı arayüzü | Doğrudan düzenlediğiniz Figma benzeri vektör tuvali; MCP aracılığıyla aracı |
| Çıktı aralığı | Kullanıcı arayüzü, açılış sayfaları, sunumlar, prototipler, tasarım sistemleri | Koda dönüştürülecek kullanıcı arayüzü ekranları ve bileşenleri |
| Kendi sunucunda barındırma / çatallama | Evet | Hayır; uygulama kapalı kaynaklıdır |
Pencil'ın kazandığı yerler
Uygulamalı tuval: doğrudan düzenlediğiniz, katmanları ve otomatik düzeni koruyan yerel Figma yapıştırmasına sahip, yerleşik kullanıcı arayüzü kitleri olan ve tümü IDE'nizin içinde bulunan olgun, Figma benzeri bir yüzey. Tasarım yapan bir geliştirici editörden asla ayrılmaz.
OpenDesign'ın kazandığı yerler
Sahiplik ve kapsam: tüm uygulama açık kaynaklıdır, BYOK Claude öncelikli olmak yerine sağlayıcıdan bağımsızdır, ücretsiz ücretsiz kalır çünkü sizden para kazanacak bir satıcı yoktur ve çıktı kullanıcı arayüzünden koda dönüşümden çok daha fazlasını kapsar.
Karar
OpenDesign Ne Zaman Doğru Pencil Alternatifidir
IDE'de tasarım yapan geliştirici
Ekranı Claude Code ile kodun yanında elle çizin
PencilCursor veya VS Code içindeki tuval, yerel Figma yapıştırma ve Claude öncelikli ayarlama tam olarak bu kişinin iş akışıdır. OpenDesign'ın onlara sunacak bir tuvali yoktur.
Şu durumlarda uygun değildir: ekip Claude yerine Codex, Gemini veya Qwen çalıştırdığında.
Açık kaynak politikası olan ekip
Tüm araç denetlenebilir ve çatallanabilir olmalıdır
OpenDesignAjan, yetenek kütüphanesi ve oluşturucu için Apache-2.0; belgelenmiş .pen formatı aynı şey değildir.
Şu durumlarda uygun değildir: politika yalnızca açık bir dosya formatı ile karşılandığında.
Birçok eser türünde marka
Tek bir markadan sunumlar, açılış sayfaları, prototipler ve kullanıcı arayüzü
OpenDesignTek bir DESIGN.md, yeniden komut vermeden hepsini oluşturur; Pencil'ın kapsamı kullanıcı arayüzünden koda kadardır. Tasarım sistemi çözümüne bakın.
Şu durumlarda uygun değildir: kullanıcı arayüzü ekranları tek teslim edilebilir olduğunda.
Erken erişimi riskten koruyan Pencil kullanıcısı
Bugün ücretsiz, ücretli planların sinyali verildi
İkisini de çalıştırınPencil'da çizmeye devam edin; markayı DESIGN.md'ye çıkarın ve geri kalanını OpenDesign'da oluşturun, böylece hiçbir şey tek bir satıcının fiyatlandırmasına bağlı kalmaz. Her ikisi de dosyaları depoda tutar.
Şu durumlarda uygun değildir: .pen dosyalarının ve DESIGN.md'nin otomatik olarak senkronize kalmasını beklediğinizde; kalmazlar.
Bir tasarımı taşıyın veya ikisini de çalıştırın
Bir Tasarım Pencil'dan OpenDesign'a Nasıl Taşınır
Her iki araç da tasarımı deponuzda dosyalar olarak tutar, bu nedenle savaşacak kayıplı bir bulut dışa aktarımı yoktur. Taşınan şey, bir Pencil dışa aktarımından tek seferlik bir çıkarma yoluyla marka ve özettir; .pen tuval dosyaları Pencil'da düzenlenebilir kalır.
| Taşınanlar | |
|---|---|
| Marka | Ajanınızı bir Pencil dışa aktarımına, bir Figma yapıştırmasına veya bir ekran görüntüsüne yönlendirin; renkleri, tipografiyi, boşlukları ve sesi DESIGN.md'ye çıkarır. |
| Komutlar | Düz metin. Tuvalden gelen komut blokları, olduğu gibi bir OpenDesign özetine yapıştırılır. |
| Oluşturulan kod | Pencil'ın bir .pen dosyasından ürettiği kod yapısal bir referans olarak hizmet edebilir; ajan onu yamalamak yerine DESIGN.md altında yeniden oluşturur. |
| Pencil'da kalanlar | |
| .pen tuval dosyaları | Vektör katmanları dönüştürülmez; özetten ve DESIGN.md'den yeniden oluşturun. |
| Yerleşik kullanıcı arayüzü kitleri | Shadcn tarzı kitler, DESIGN.md ve kendi bileşenleriniz aracılığıyla yeniden ifade edilir. |
| Yerel Figma yapıştırma | Bir ekip arkadaşınız Figma'dan yapıştırmaya devam ederse, bu adım Pencil'da kalır. |
-
OpenDesign'ı kurun ve aynı depoyu açın
Masaüstü uygulamasını indirin ve .pen dosyalarınızı zaten barındıran depoyu bir proje olarak açın. Hızlı başlangıç, kaynaktan derleme yolunu ayrı olarak kapsar.
-
Referans olarak bir Pencil ekranını dışa aktarın
Görünümünü korumak istediğiniz ekranın bir PNG'sini (veya oluşturulan kodunu) dışa aktarın ve projeye ekleyin.
-
Ajandan markayı DESIGN.md'ye çıkarmasını isteyin
Dosyayı elle inceleyin: bir vurgu, doğru yazı tipleri, doğru yarıçap. Bu, yargı gerektiren tek geçiş adımıdır.
-
Orijinal özeti yeni markaya göre oluşturun
Bir yetenek seçin ve oluşturun; buradan itibaren her yetenek — kullanıcı arayüzü, sunumlar, prototipler — yeniden komut vermeden markanızda oluşturulur ve her sürüm bir dosyadır.
İkisini de çalıştırma
Tuval üzerinde kullanıcı arayüzünü elle düzenlemek için Pencil'ı saklayın; markadan oluşturulan her şey için OpenDesign'ı kullanın. Her ikisi de aynı depoda yaşar; tuval değiştiğinde DESIGN.md'yi güncelleyin. Hiçbir şey otomatik olarak senkronize olmaz.
Geri dönüş ve kayıp
Denemekle çok az şey kaybedilir: .pen dosyaları her iki durumda da depoda kalır. Bir OpenDesign oluşturması başarısız olursa, son sürüm diskte kalır ve özet değişmez; aynı ajanla veya farklı bir ajanla yeniden deneyin.
20 dakikalık bir test
OpenDesign'ı Zaten Pencil'da Çizdiğiniz Bir Ekranda Deneyin
Pencil'da çizdiğiniz bir ekranı alın ve istediğiniz herhangi bir ajanla OpenDesign'da yeniden oluşturun. Sonuç yirmi dakika içinde kullanılamazsa, bu karşılaştırma size bilmeye değer bir şey söylemiştir.
1Görev
İşte Pencil'da tasarladığım bir ekranın PNG dışa aktarımı. Markasını DESIGN.md'ye çıkarın, ardından tasarım kurallarımı kullanarak aynı ekranı bu özetten yeniden oluşturun ve aynı markada tek slaytlık bir sunum kapağı ekleyin. Ekranı masaüstü ve mobil genişliklerde kontrol edin.
- 01Pencil ekranı girerGörünümünü korumak istediğiniz .pen ekranının bir PNG dışa aktarımı.
- 02DESIGN.md çıkarMarkanız .pen dosyalarının yanındaki bir dosyaya çıkarıldı — elle inceleyin.
- 03Ekran ve sunum kapağı, oluşturulduMasaüstü ve telefonda ekran artı aynı markada bir sunum kapağı, ardından bir öğeyi işaret ederek bir düzenleme.
2Şu durumlarda işe yaradı…
- DESIGN.md, .pen dosyalarının yanına işlenir ve belirteçlerini onaylarsınız.
- Ekran 1440 ve 390'da yatay kaydırma olmadan oluşturulur ve sunum kapağı markayı paylaşır.
- İsterseniz Claude dışında bir ajanla, öğeyi işaret ederek uygulanan bir düzenleme ("daha sakin başlık").
- İki sürüm dosyalar olarak yan yana durur; hiçbir şeyin üzerine sessizce yazılmadı.
İşe yaramadıysa: ajanınızın bağlı olduğunu ve seçtiğiniz mod için kimliğinin doğrulandığını kontrol edin, ardından aracı yargılamadan önce daha küçük bir özetle yeniden deneyin.
Diğer seçenekler
Diğer Pencil.dev Alternatifleri
SSS
Pencil.dev alternatifi: SSS
Pencil (pencil.dev) açık kaynaklı mı?
Pencil.dev ücretsiz mi?
OpenDesign ve Pencil arasındaki fark nedir?
Pencil, Claude dışındaki ajanlarla çalışır mı?
OpenDesign ile birlikte Pencil kullanmaya devam edebilir miyim?
OpenDesign gerçekten açık kaynaklı mı?
OpenDesign'ın Pencil ile bir bağlantısı var mı?
OpenDesign'ı gerçek bir ekranda deneyin
Pencil'da çizdiğiniz bir ekranı herhangi bir kodlama ajanıyla yeniden oluşturun, gidiş dönüşü değerlendirin ve ardından karar verin. Size uyan durumu seçin; sayfa kurulumunuzu algılamaz.