Bir açık kaynak deposu daha Claude Design'ı klonladı

Bu rehber, Open Design'a yapılandırılmış bir ilk bakıştır: kurun, hızlı bir demo çalıştırın, yerleşik tasarım sistemlerini ve şablonlarını gezin ve nerede parladığına ve nerede hâlâ ham olduğuna dair dürüst bir okumayla bitirin. Chase AI'ın uygulamalı anlatımında izlediği yolu takip eder; adım adım birlikte ilerleyebilmeniz için yeniden yazılmış ve mevcut sürüme göre 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, slayt sunumları, görseller ve videonun tek bir yerde toplandığı sakin ve tanıdık bir tuval.

Open Design nedir?

Open Design, zaten kullandığınız kodlama ajanının üzerinde çalışan, açık kaynaklı ve önce yerel (local-first) bir tasarım platformudur. Sizi tek bir model sağlayıcısına kilitlemek yerine, makinenizde halihazırda bulunan CLI'ları — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode ve birkaç düzine daha — algılar ve üretimi o ajanın yürütmesine izin verir. Chase buna "kendi ajanını getir" diyor ve asıl mesele tam da bu: üretim kendi CLI'nız üzerinden çalıştığı için, zaten sahip olduğunuz bir aboneliğin üzerine ayrıca API ücreti ödemezsiniz.

Göz atmaya değer kılan birkaç şey:

• Açık kaynak, Apache-2.0 — klonlayın, kendiniz barındırın, her satırı okuyun.
• Yerelde çalışır — projeleriniz başkasının bulutunda değil, kendi makinenizdeki klasörlerde yaşar.
• Ajan takılabilir — 21'den fazla kodlama ajanı destekleniyor; işi hangi CLI'nın yürüteceğini siz seçersiniz ya da farklı bir harness için kendi API anahtarınızı getirirsiniz.
• Prototipten fazlası — prototipler, slayt sunumları, dergi düzenleri, görsel üretimi ve hatta video, hepsi tek bir çalışma alanından.
• Boş bir tuvalden başlamamanız için yerleşik gelen derin bir tasarım sistemi ve skill kütüphanesi.

Claude Design'ı kullandıysanız, arayüz size anında tanıdık gelecek — Open Design aynı sakin estetiği korur, ardından üzerine ek yetenekler (slayt sunumları, görsel ve video) ekler. Dürüst çerçeve: bu, herhangi bir aracın yalnızca yeniden kabuk giydirilmiş hâli değil, kendine özgü açık, yerel ve agent-native bir çalışma alanıdır.

Başlamadan önce

Open Design'ı kurmanın üç yolu var. Size uyanı seçin:

Yol	Kimin için ideal	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
Ajanınıza kurma	Terminalde yaşayanlar	Mevcut bir kodlama ajanı CLI'sı

Chase videoda terminal yolunu gösteriyor, ancak bugün önerilen yol masaüstü uygulamasıdır — Node yok, pnpm yok, klonlama yok ve ajanlarınızı sizin için otomatik algılar.

Adım 1 — Open Design'ı kurun

Seçenek A — Masaüstü uygulaması (önerilen, sıfır yapılandırma)

open-design.ai/download adresine gidin ve işletim sisteminize uygun derlemeyi alın. Kurulumdan sonra uygulama, PATH'inizde halihazırda bulunan her kodlama ajanı CLI'sını otomatik algılar ve yerleşik skill'leri ile tasarım sistemlerini sizin için yükler. Çalışan bir çalışma alanına ulaşmanın en hızlı yolu budur.

Seçenek B — Kaynaktan çalıştırma

Onu — Chase'in videoda yaptığı gibi — depodan çalıştırmayı tercih ederseniz, yalnızca birkaç komuta ihtiyacınız var:

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

Ardından terminalinizde yazdırdığı yerel URL'yi açın. Dinamik bir port çözümler, bu yüzden sabit bir port girmeyin — yalnızca gösterdiği adrese tıklayın. Node ~24 ve pnpm 10.33.x gerekir; sabitlenen pnpm sürümünü Corepack sizin için seçer. (Bir geliştirme sunucusu ayağa kalkmazsa, ajanınıza "Open Design geliştirme sunucusunu ayağa kaldır" diyerek komutu ona bırakabilirsiniz.)

Seçenek C — Kodlama ajanınıza kurma

Open Design'ı GUI'yi hiç açmadan kullanmak için — ajanınızın içinde bir skill olarak çağırarak — şunu çalıştırın:

od mcp install <agent>
# od ships with Open Design; <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Ardından ajanın içinde sadece şunu isteyin: Use open-design to generate a landing page with the Airbnb design system.

Adım 2 — İlk çalıştırma: kodlama ajanınızı bağlayın

Open Design'ı ilk kez başlattığınızda makinenizi tarar ve bulduğu her yerel CLI'yı size gösterir. Bir istem, yapay zekâyı nasıl yürütmek istediğinizi sorar. Bu, "kendi ajanını getir" adımıdır.

• Yerel bir CLI seçin. Open Design'ı Claude Code, Codex veya OpenCode'a yönlendirmek, üretimin ayrı API ücreti almak yerine zaten ödediğiniz abonelikten beslenmesi demektir. (Farklı bir harness tercih ediyorsanız kendi API anahtarınızı da bağlayabilirsiniz.)
• Aksini yapmak için bir nedeniniz yoksa modeli varsayılanda bırakın — CLI'nızın kendi yapılandırmasını izler.
• Medya sağlayıcıları ekleyin (isteğe bağlı). Görsel, video veya ses üretmek mi istiyorsunuz? OpenAI, MiniMax, ElevenLabs gibi sağlayıcılar için kendi API anahtarlarınızı ekleyin. Çalışma alanının görsel ve video tarafını açan şey budur — saf bir Claude Design klonunun size vermediği bir şey.
• Skill'leri ve tasarım sistemlerini açıp kapatın. Yalnızca önünüzdeki iş için gereken yetenekleri etkinleştirin.

Bunların hepsini daha sonra değiştirebilirsiniz, bu yüzden ilk geçişte işi basit tutun.

Adım 3 — Çalışma alanını keşfedin

Üst kısımda Tasarımlar, Örnekler, Tasarım sistemleri ve görsel ile video şablon kütüphanelerini bulacaksınız. İlk bakışta en çok önem taşıyan ikisi tasarım sistemleri ve örneklerdir.

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

Tasarım sistemleri kütüphanesi öne çıkan unsur. Her giriş, gerçek dünyadan bir markayı — örneğin Airbnb'yi — alır ve onu palet, tipografi, bileşenler ve genel görsel atmosfere ayırır. O markanın havasını taşıyan bir sayfa istiyorsanız, sistemi yerine oturtursunuz ve üretim boş bir tuval yerine o kurallardan başlar.

Chase'in anlatımından açık sözlü bir not: örnekler tek satırlık istemlerle üretiliyor ve tam istem kartın üzerinde gösteriliyor. Etkileyici görünüyorlar, ama arkalarında gizli bir formül yok — gördüğünüz, yazdığınız şeyin ta kendisi. Onları tek tıkla sihir vaadi olarak değil, ilham kaynağı olarak görün. Görsel ve video şablonu galerileri de benzer: referans olarak kullanışlı, ama prototip ve slayt sunumu akışlarına kıyasla günlük değeri daha düşük. Dikkatinizi gerçekten teslim edeceğiniz çıktılara yoğunlaştırın.

Şablon kütüphanesi: türüne göre filtreleyip başlamak için çatallayabileceğiniz prototip, slayt, görsel ve video başlangıç noktaları.

Herhangi bir şey kurmadan önce eksiksiz eklenti kütüphanesine web üzerinden open-design.ai/plugins adresinden göz atabilirsiniz.

Adım 4 — Bir şey inşa edin

Asıl iş akışı — ve Open Design'ın ekmeğini kazandığı yer — prototipler ve slayt sunumları oluşturmaktır. Büyük ölçüde beklediğiniz gibi çalışır:

1. Projeyi adlandırın ve yerleşik listeden bir veya daha fazla tasarım sistemi seçin.
2. Sadakat düzeyini seçin — yapıyı hızla taslaklamak için wireframe ya da tam stillendirilmiş hâli için yüksek sadakat.
3. İsteğe bağlı olarak bir Claude Design ZIP'i içe aktarın. Kendi tasarım sisteminizi Claude Design'da mı oluşturdunuz? Projeyi orada açın, Share → Download project as .zip'i seçin, ardından o ZIP'i Open Design'a yükleyin. Tüm tasarım dosyaları çalışma alanında, yeniden kullanıma hazır şekilde belirir. (Şu an için bu ZIP içe aktarımı, kendi markanızı getirmenin en temiz yoludur — henüz "sıfırdan bir tasarım sistemi oluştur" düğmesi yok.)
4. Brief'i yazın ve oluştur'a basın. Open Design, Claude Design'da göreceğiniz türden netleştirici soru-cevabı çalıştırır — bu kimin için, kaç slayt, hangi sadakat, hangi görsel ton — sonra bir yapılacaklar listesi oluşturup üzerinde tek tek çalışır. Videoda Chase, Lighthouse adlı kurgusal bir SaaS için üç karşılaştırılabilir yönde (klasik istifli, editoryal ve gösterişli) bir landing page ister, ardından brutalist bir slayt sunumu üretip onu PowerPoint'e dışa aktarır.

Çıktı, seçtiğiniz tasarım sisteminden inşa edilmiş gerçek, etkileşimli bir yapıttır. Chase'in dürüst okuması: sonuçlar kabaca bir "%90 çözüm" düzeyine ulaşır — markaya uygun ve kullanılabilir bir sunum, size kalan birkaç boşluk ve biçimlendirme rötuşuyla. Hâlâ erken aşamada olan bir şey için bu güçlü bir başlangıç noktasıdır.

İpuçları

• API'yi değil yerel CLI'yı kullanın, böylece üretim çağrı başına faturalanmak yerine zaten sahip olduğunuz bir abonelikten beslenir.
• Boş tuvali atlamak için yerleşik bir tasarım sisteminden başlayın; kendi markanız gerektiğinde bir Claude Design ZIP'i içe aktarın.
• Yalnızca gerçekten kullanacağınız medya anahtarlarını ekleyin — başlamak için her sağlayıcıya ihtiyacınız yok.
• %90'lık bir taslak bekleyin, sonra cilalayın. Teslim etmeden önce küçük biçimlendirme kaymalarını yakalamak için erken (PowerPoint'e de) dışa aktarın.
• Önce prototiplere ve slayt sunumlarına yaslanın. Bunlar en cilalı yüzeylerdir; örnek ve şablon galerileri, bitmiş çıktılardan çok ilham kaynağı olarak daha iyidir.

SSS

Open Design ücretsiz mi? Evet — Apache-2.0 lisansı altında açık kaynaktır. Onu yerelde ücretsiz çalıştırırsınız; yalnızca bağladığınız ajan ve API sağlayıcılarının model ve medya kullanımı için ödeme yaparsınız. Onu yerel bir CLI'ya yönlendirmek, üretimin zaten sahip olduğunuz aboneliğe yaslanması demektir.

Hangi kodlama ajanlarını destekliyor? Claude Code, Codex, Cursor, Gemini, GitHub Copilot ve OpenCode dahil 21'den fazla ajan. Open Design, makinenizde halihazırda kurulu CLI'ları otomatik algılar, bu yüzden genellikle hiçbir şeyi yapılandırmanız gerekmez.

Kendi tasarım sistemimi kullanabilir miyim? Evet. Bugün en sorunsuz yol, sistemi Claude Design'da oluşturmak, projeyi bir ZIP olarak indirmek ve o ZIP'i Open Design'a içe aktarmaktır — token'larınız ve bileşenleriniz doğrudan taşınır. GUI'de henüz "bir tasarım sistemi oluştur" diye özel bir düğme yok, bu yüzden önerilen yol ZIP içe aktarımıdır.

Claude Design'dan farkı nedir? Aynı tanıdık his, ama açık kaynaklı, önce yerel ve 21'den fazla CLI genelinde ajan takılabilir — ayrıca slayt sunumları, dergi düzenleri, görsel üretimi ve video gibi tek sağlayıcılı bir aracın sunmadığı ek yetenekler. Erken bir sürüm, bu yüzden birkaç pürüz bekleyin, ama temel sağlam.

---

Bu yazılı rehber, Chase AI'ın uygulamalı anlatımına dayanır. Yukarıdaki tam videoyu izleyin ve daha fazla pratik yapay zekâ aracı incelemesi için Chase AI'a abone olun.