Open Design, Her Vibe Coder'ın Hayalidir

Bu rehber, Open Design için bir vibe-coder el kitabıdır: zaten kullandığınız agent'ı getirin, çıktınızın "AI üretimi" diye bağırmaması için bir tasarım sistemi seçin, gerçekten dönüşüm sağlayan bir yapı için prompt yazın, ardından sohbet ederek iterasyon yapın. Bu rehber, Sean Kochel'in uygulamalı demolarında art arda çalıştırdığı üç yapıyı izler — bir landing page, bir mobil uygulama ve bir masaüstü uygulaması — güncel sürümle yeniden yazılmış ve güncellenmiştir. Canlı çalıştırma için yukarıdaki videoyu izleyin ya da yazılı sürüm için okumaya devam edin.

Open Design çalışma alanı — prototipler, sunum desteleri, görseller ve video tek bir sakin, tanıdık tuval üzerinde.

Open Design nedir?

Open Design, zaten kullandığınız kodlama agent'ının üzerinde çalışan, açık kaynaklı ve yerel öncelikli bir tasarım platformudur. Makinenizde halihazırda bulunan CLI'ları algılar — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode ve birkaç düzine daha — ve üretimi o agent'ın yürütmesine olanak tanır. Sean'in deyimiyle: agent'ınızı yapılandırdığınız bir CLI katmanı, kaliteyi yönlendiren bir sistem prompt'u ve ardından onu değerli kılan unsurlar var — skill desteği ve derin bir tasarım sistemleri kütüphanesi. Çıktılar gerçek HTML dosyalarıdır, dolayısıyla yaptığınız her şey doğrudan asıl projenize aktarılır.

Vibe coder'ların bunu neden önemsediği:

• Kendi agent'ınızı ve anahtarınızı getirin — ikinci bir abonelik yok, sağlayıcıya bağımlılık yok.
• Yerel olarak çalışır — çıktı, doğrudan kod tabanınıza alabileceğiniz HTML'dir.
• Tasarım sistemleri AI çöplüğü görünümünü ortadan kaldırır — boş bir tuval yerine gerçek bir markadan başlayın.
• Skill'ler özelleştirilebilir — kendi metin yazarlığı kurallarınızı, UX paradigmalarınızı veya süreçlerinizi ekleyin.
• Açık kaynak, Apache-2.0 — okuyun, fork'layın, müşteri işlerini bununla teslim edin.

Her vibe yapısının karşılaştığı iki sorun

Sean tüm iş akışını iki başarısızlık modu etrafında çerçeveliyor ve el kitabının geri kalanı bunlardan nasıl kaçınacağınızı anlattığı için bunları adlandırmaya değer:

1. AI çöplüğü gibi görünüyor. Sıradan gradyanlar, hep aynı serif font, kutu çorbası — bunu siz bile beğenmiyorsunuz.
2. İşini yapacak şekilde yapılandırılmamış. Dönüşüm sağlamayan bir landing page, akışı mantıklı olmayan bir uygulama.

Bir tasarım sistemi birinci sorunu çözer. Gerçek bir yapıya sahip, bilinçli bir prompt ikinci sorunu çözer. Aşağıdaki her yapıda ikisini de aklınızda tutun.

Adım 1 — Kurun ve agent'ınızı seçin

İçeri girmenin üç yolu var:

Yol	En uygun olduğu durum	Gereksinimler
Masaüstü uygulaması	Çoğu kişi — sıfır yapılandırma	Yok. Sadece indirin ve açın.
Kaynaktan çalıştırma	Kodu okumak veya değiştirmek isteyen geliştiriciler	Node ~24, pnpm 10.33.x
Agent'ınıza kurma	Terminalde yaşayan kişiler	Mevcut bir kodlama-agent'ı CLI'ı

En hızlı yol masaüstü uygulamasıdır — onu open-design.ai/download adresinden alın; PATH'inizde zaten bulunan agent CLI'larını otomatik olarak algılar. Bunun yerine kaynaktan çalıştırmak için:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Yazdırdığı yerel URL'yi açın (dinamik bir port kullanır — bunu sabit kodlamayın). İlk başlatmada Open Design'ı işi yürütmesini istediğiniz agent'a yönlendirin ya da kendi API anahtarınızı getirin.

Adım 2 — Dönüşüm sağlayan bir landing page oluşturun

Bu, Sean'in ilk demosu ve diğer her şeyin şablonu:

1. Bir tasarım sistemi seçin. Demoda Anthropic'inkini seçiyor. Bu, AI çöplüğüne karşı korkuluğunuz — agent o markanın paletini, tipografisini ve bileşen dilini devralır.

Tasarım-sistemleri kütüphanesi: her giriş, gerçek bir markayı yeniden kullanabileceğiniz palet, tipografi, bileşenler ve görsel atmosfere ayırır.

2. Sadece havayı değil, yapıyı da prompt'layın. Sean tam olarak hangi bölümleri oluşturacağını söylüyor — on bir tane — ve PRD'sinden yönetici özetini (ürün vizyonu, problem tanımı, hedef kullanıcı, önerilen çözüm, ana özellikler) yapıştırıyor; böylece metnin üzerinde çalışacağı gerçek bir bağlam oluyor.
3. Keşif sorularını yanıtlayın. Tıpkı Claude Design gibi, Open Design da yazmaya başlamadan önce açıklayıcı sorular sorar. Burada işi yürütmek için SaaS landing-page skill'ine başvurur — ve skill'ler birer dosya olduğu için, bunun yerine kendi metin yazarlığı yönergelerinizi ya da bölüm yapınızı bir skill olarak yükleyebilirsiniz.
4. Çalışmasına izin verin. Yaklaşık beş dakika sonra profesyonel bir ilk taslağı oluyor — gerçek, dönüşüm odaklı bir yapı, temiz bir karşılaştırma tablosu, şık tasarlanmış bir vaka çalışması kartı, sağlam bir SSS.

Farklı bir his mi istiyorsunuz? Sean aynı brief'i editöryel yerine brutalist bir tonla yeniden çalıştırıyor ve belirgin biçimde farklı bir tasarım elde ediyor — aynı yapı, farklı bir görünüm, çünkü ağır işi tasarım sistemi yapıyor.

Adım 3 — Bir mobil uygulamayı ekran ekran oluşturun

Mobil demo için Sean her seferinde tek bir ekran üzerinde çalışıyor. Aynı Anthropic tasarım sistemini koruyor, ardından her ekran için PRD'sinden oluşturulmuş bir prompt yapıştırıyor — bir ana akış, bir "boşlukları doldur" öneri ekranı, ad-hoc bir yemek günlüğü. Agent açıklayıcı sorularını soruyor, bir iOS düzeni taslağı oluşturuyor ve üç ekranın hepsinde seçilen tasarım sistemine bağlı kalıyor.

Çıkarılacak ders: UX'i nasıl prompt'ladığınız sonucun büyük kısmıdır. Aynı uygulamayı sohbet öncelikli bir koçluk arayüzü olarak yeniden çerçevelediğinde, çılgınca farklı — ama yine de tutarlı — bir ekran seti elde ediyor. Tasarım sistemi onu markaya uygun tutuyor; paradigmaya prompt'unuz karar veriyor.

Şablonlar kütüphanesi: türüne göre filtreleyip başlamak için fork'layabileceğiniz prototip, sunum, görsel ve video başlangıç noktaları.

Adım 4 — Multimodal'a geçin: ekranlardan masaüstü uygulamasına

Son demo, multimodal numarasını gösteriyor. Sean üç mobil ekranının ekran görüntüsünü alıyor, bunları yeni bir sohbete bırakıyor ve uçtan uca bir istek veriyor: "bu temel işlevselliğin bir web uygulaması sürümünün taslağını oluştur." Beş dakika sonra temiz, üç panelli bir masaüstü çevirisine sahip oluyor — solda navigasyon, ortada çalışma tuvali, sağda bir ilerleme görünümü — slash-komut etkileşimleri de taslak olarak oluşturulmuş.

Belirsiz bir prompt artı referans görseller bile size kullanılabilir bir başlangıç noktası verir. Düzgün bir spesifikasyonla daha keskinleşir, ama mesele şu: yüzeyler arasında akıcı biçimde geçiş yapabilirsiniz.

İpuçları

• Her zaman bir tasarım sisteminden başlayın. AI çöplüğü görünümüne karşı en büyük kaldıraç budur.
• Yapıyı açıkça prompt'layın. Bölümleri veya ekranları listeleyin; metnin içi boş olmasın diye bir PRD'den gerçek bağlam yapıştırın.
• Skill'lere yaslanın — ve kendinizinkini yazın. Skill'ler sadece dosyalardır; metin yazarlığı kurallarınızı veya UX paradigmalarınızı doğrudan iş akışına yükleyin.
• Sohbet ederek iterasyon yapın. Farklı UX çerçeveleri çok farklı sonuçlar verir; bu bir özelliktir, bu yüzden birkaçını deneyin.
• Referans görseller kullanın. Mevcut ekranların ekran görüntüsünü alın ve yüzeyler arasında çeviri yapmak için bırakın.
• Çıktının HTML olduğunu unutmayın. Halihazırda başlattığınız bir projeye eklenecek şekilde inşa edilmiştir.

SSS

Belirli bir model kullanmak zorunda mıyım? Hayır. Open Design, yapılandırdığınız hangi agent'ı kullanıyorsa onu yürütür — Claude Code, Codex, Cursor, Gemini, OpenCode ve daha fazlası — ya da kendi API anahtarınızı. Sağlayıcıya bağımlılık yok.

Bunun Claude Design'dan farkı ne? Aynı tanıdık his, ama ücretsiz, açık kaynaklı, yerel öncelikli, modelden bağımsız ve çok daha özelleştirilebilir — kendi skill'lerinizi ve süreçlerinizi ekleyebilirsiniz. Ayrıca tek sağlayıcılı bir aracın size vermediği görsel ve video üretimi.

Oluşturduğum şeyi mevcut bir uygulamaya birleştirebilir miyim? Evet — çıktılar HTML dosyalarıdır, dolayısıyla halihazırda başlattığınız bir projeye eklenmek üzere tasarlanmışlardır. Sean, spesifikasyon odaklı birleştirme iş akışlarını eşlik eden bir videoda ele alıyor.

Ücretsiz mi? Uygulama Apache-2.0 altında açık kaynaktır ve yerel olarak çalıştırması ücretsizdir. Yalnızca bağladığınız agent ve sağlayıcıların model ve medya kullanımı için ödeme yaparsınız.

---

Bu yazılı rehber, Sean Kochel'in uygulamalı demolarına dayanmaktadır. Yukarıdaki tam videoyu izleyin ve daha fazla AI yapım iş akışı için Sean Kochel'e abone olun.