20 Dakikada Open Design — Eksiksiz Kurulum + Demo

Bu rehber, Open Design ile geçireceğiniz ilk 20 dakikada size eşlik ediyor — temiz bir kurulumdan ilk ürettiğiniz prototipe kadar. CodingMenace'in (Dennis) uygulamalı ilk-izlenim videosunda izlediği yolu takip ediyor; adım adım birlikte ilerleyebilmeniz için mevcut sürüme uyacak şekilde yeniden yazıldı ve güncellendi. Canlı anlatım için yukarıdaki videoyu izleyin ya da yazılı sürüm için okumaya devam edin.

Open Design kendisini açık kaynaklı Claude Design alternatifi olarak konumlandırıyor — önce masaüstü, agent-native, Apache-2.0.

Open Design nedir?

Open Design, açık kaynaklı, önce-yerel bir tasarım platformudur — Claude Design ve Figma'ya agent-native bir alternatif. Sizi tek bir model sağlayıcısına kilitlemek yerine, zaten kullandığınız kodlama agent'ının üzerinde çalışır: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode ve daha bir düzine başkası. Bu yalnızca kendi anahtarını getir değil, kendi agent'ını getir mantığıdır.

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

• Açık kaynak, Apache-2.0 — klonlayın, kendi sunucunuzda barındırın, her satırı okuyun.
• Yerel çalışır — projeleriniz başkasının bulutunda değil, kendi makinenizdeki kendi klasörlerinizde yaşar.
• Agent takılabilir — 21+ kodlama agent'ı destekleniyor; üretimi hangi CLI'nin yöneteceğini siz seçersiniz.
• Prototiplerden fazlası — prototipler, canlı çıktılar, sunum desteleri, dergi düzenleri, görsel üretimi ve hatta video, hepsi tek bir çalışma alanından.
• Zengin bir tasarım sistemi ve beceri kütüphanesi yerleşik olarak gelir, böylece boş bir tuvalden başlamazsınız.

Claude Design kullandıysanız, görünüm ve his anında tanıdık gelecek — Open Design bilinçli olarak aynı sakin estetiği korur, sonra üzerine yetenekler ekler.

Başlamadan önce

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

Yöntem	Kimin için en iyi	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 ya da değiştirmek isteyen geliştiriciler	Node ~24, pnpm 10.33.x
Agent'ınıza kurma	Terminalde yaşayanlar	Mevcut bir kodlama-agent'ı CLI'si

Video kaynaktan-çalıştırma yöntemini kullanıyor, ancak bugün önerilen yol masaüstü uygulamasıdır — Node, pnpm ya da klonlama gerektirmez.

Adım 1 — Open Design'ı kurun

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

open-design.ai adresine gidin ve Download desktop'a tıklayın. Yapılar macOS (Apple Silicon ve Intel), Windows (x64) ve Linux (AppImage) için mevcut. Kurulumdan sonra uygulama, PATH'inizde zaten bulunan her kodlama-agent'ı CLI'sini otomatik algılar ve yerleşik becerileri ile tasarım sistemlerini sizin için yükler.

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

Bunun yerine — Dennis'in videoda yaptığı gibi — depodan çalıştırmayı tercih ederseniz, yalnızca üç 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 yazdırdığı yerel URL'yi açın. Node ~24 ve pnpm 10.33.x gerekir; Corepack sabitlenmiş pnpm sürümünü sizin için seçer.

Seçenek C — Kodlama agent'ınıza kurma

Open Design'ı GUI'yi hiç açmadan kullanmak için — agent'ınızın içinde bir beceri ya da MCP sunucusu olarak çağırarak — şunu çalıştırın:

curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

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

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

Open Design'ı ilk kez başlattığınızda, makinenizi tarar ve bulduğu her yerel CLI'yi gösterir — Claude Code, OpenCode, Copilot CLI ve diğerleri. Bu, "kendi agent'ını getir" adımıdır.

• Varsayılan bir agent ve model seçin. Üretimi kurulu CLI'nin yönetmesine izin verin ya da bu proje için belirli bir modeli (örneğin Claude Opus) zorunlu kılın.
• Medya sağlayıcıları ekleyin (isteğe bağlı). Görsel, video ya da ses üretmek mi istiyorsunuz? OpenAI (gpt-image), MiniMax, ElevenLabs, fal, Suno ve daha fazlası gibi sağlayıcılar için kendi API anahtarlarınızı ekleyin. Kendi anahtarını getir işte burada devreye giriyor.
• MCP servislerini bağlayın (isteğe bağlı). Agent'ın başka kaynaklardan veri çekmesini istiyorsanız Composio gibi konnektörleri bağlayın.
• Becerileri ve tasarım sistemlerini açıp kapatın. Yalnızca yaptığınız iş türü için ihtiyacınız olan yetenekleri etkinleştirin — prototipler, sunum desteleri, mobil uygulamalar, toplantı notları vb.

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

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

Open Design çalışmanızı proje kapsamlı tutar: bir klasör üzerinde çalıştırdığınızda, oluşturduğunuz tasarımlar o proje dizininin içinde yaşar. Klasör değiştirin, proje değişir.

Bir proje içinde prototipler, canlı çıktılar, sunum desteleri ve animasyonlar oluşturabilirsiniz. Prototipler için iki doğruluk düzeyi arasında seçim yaparsınız:

• Tel çerçeve (wireframe) — yalın yapı: düzeni hızlıca taslaklamak için kutular ve şekiller.
• Yüksek doğruluk — oluşturduğunuz sayfanın tam, stillendirilmiş bir prototipi.

Claude Design'dan önemli bir fark: önce bir tasarım sistemi tanımlamak zorunda değilsiniz. Open Design makul varsayılanlar ve bir başlangıç noktaları galerisiyle gelir, böylece mevcut bir tasarım sisteminden — ya da hiçbirinden — başlayabilirsiniz.

Tasarım-sistemleri kütüphanesi: herhangi bir projeye yerleştirebileceğiniz gerçek dünya marka başlangıç noktaları (Agentic, Airbnb, Airtable ve daha fazlası).

Pazar yeri marka sistemlerinin çok ötesine geçiyor. Şablonlar kütüphanesi prototipleri, sunumları ve hem görsel hem de video üretimini kapsar — türe göre filtreleyin ve herhangi birini başlangıç noktanız olarak çatallayın (fork).

Şablonlar: prototip, sunum, görsel ve video başlangıç noktaları — türe göre filtreleyin ve başlamak için çatallayın.

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

Adım 4 — İlk prototipinizi oluşturun

Şimdi eğlenceli kısım. Videoda Dennis mevcut bir Claude Design projesini içe aktarıyor ve Open Design'dan onun için yeni bir sayfa oluşturmasını istiyor. İşte aynı akış:

1. Yeni bir prototip oluşturun. Ona bir ad verin (Dennis kendisininkine "Expensely" diyor) ve Yüksek doğruluk'u seçin.
2. Tasarım sisteminizi içe aktarın. Open Design mevcut bir Claude Design ZIP'ini içe aktarabilir, böylece token'larınız ve bileşenleriniz aktarılır. İçe aktarılan tasarım dosyaları, canlı bir önizlemenin yanında çalışma alanında görünür.
3. Brief'i yazın. Dennis ona şunu istiyor: "create a new page projecting expenses for 12 months using the previous 3 months." Tanıdık bölünmüş düzeni elde edersiniz: solda konuşma, sağda önizleme ve tasarım dosyaları.
4. Netleştirici soruları yanıtlayın. Agent birkaç akıllı takip sorusu sorar — aynı renkler mi? hangi doğruluk düzeyi? basit 3 aylık ortalama mı? — ardından bir yapılacaklar listesi planlar, tasarım sistemini okur ve çıktıyı oluşturur (projections-v2.html).
5. Tasarım üzerinde yineleme yapın. İlk denemeden memnun değil misiniz? Farklı bir yön isteyin. Dennis "farklı bir görünüm ve his" istiyor, editöryel bir yön seçiyor ve taptaze bir projections-v3 elde ediyor — aynı veri ve tasarım sisteminden oluşturulmuş gerçekten farklı bir tasarım.

Sonuç gerçek, etkileşimli bir prototip: grafikler ve sayfalar arasında tıklayarak gezin, ardından dışa aktarın ya da devredin — hepsi içe aktardığınız tasarım sisteminden oluşturuldu.

Daha fazlasını elde etmek için ipuçları

• Gerçek halini görmek istediğinizde yüksek doğrulukla başlayın; yapıyı hızlıca taslaklamak için tel çerçeveyi kullanın.
• Tasarımlarınız proje klasörüyle birlikte kalır — Open Design'ı doğru dizin üzerinde çalıştırarak işinizi organize edin.
• Kendi medya anahtarlarınızı getirin, yalnızca gerçekten kullandığınız sağlayıcılar için; hepsine ihtiyacınız yok.
• Başlamak için bir tasarım sistemine ihtiyacınız yok. Yerleşik birinden başlayın, bir Claude Design ZIP'i içe aktarın ya da Open Design'ın varsayılanları çıkarsamasına izin verin.

SSS

Open Design ücretsiz mi?
Evet — Apache-2.0 lisansı altında açık kaynaklıdır. Yerel olarak ücretsiz çalıştırabilirsiniz; yalnızca bağladığınız agent ve medya sağlayıcılarının model/API kullanımı için ödeme yaparsınız.

Hangi kodlama agent'larını destekliyor?
Claude Code, Codex, Cursor, Gemini, GitHub Copilot ve OpenCode dahil 21+ agent. Open Design makinenizde zaten kurulu olan CLI'leri algılar.

Tasarım yapabilmek için önce bir tasarım sistemi oluşturmam gerekiyor mu?
Hayır. Claude Design'ın aksine, Open Design size çalışan varsayılanlar ve bir başlangıç noktaları galerisi verir. İstediğinizde kendi tasarım sisteminizi getirebilirsiniz.

Claude Design'dan farkı ne?
Aynı tanıdık his, ama açık kaynaklı, önce-yerel ve agent takılabilir — ayrıca sunum desteleri, dergi düzenleri, görsel üretimi ve video gibi ek yetenekler.

---

Bu yazılı rehber, CodingMenace'in ilk-izlenim anlatımına dayanmaktadır. Yukarıdaki tam videoyu izleyin ve daha fazla uygulamalı yapay zeka aracı videosu için CodingMenace'e abone olun.