Open Design — dürüst bir ilk bakış (hatalar, çözümler ve herhangi bir modelle kurulum)

Bu rehber, Open Design'a bilinçli olarak dürüst bir ilk bakış sunuyor — sorunsuz çalışan kısımlar ve karşılaşacağın pürüzler, kurguda gizlenmek yerine canlı olarak gösteriliyor. Ayrıca gerçekten işe yarar bir püf noktasını da ele alıyor: herhangi bir modeli OpenAI uyumlu bir sağlayıcı üzerinden ucuza bağlamak. Sasha (ИИШНЫЙ)'nin tanıtım videosunda kaydettiği uygulamalı incelemeyi temel alıyor; bu yazılı rehber için uyarlandı ve güncel sürüme göre güncellendi. Canlı çalışmayı görmek için yukarıdaki videoyu izle ya da yazılı sürüm için okumaya devam et.

Open Design çalışma alanı: ne oluşturmak istediğinizi tarif edin, bir mod seçin, gerisini agent'ınız halletsin.

Open Design nedir?

Open Design, açık kaynaklı ve local-first bir tasarım platformudur — Claude Design'a agent-native bir alternatif. "Yapay zeka mor lapası" sorunu (üretilen her arayüzün aynı görünmesi) tam da bu tür araçların çözmeye çalıştığı şeydir ve Open Design'ın yanıtı, kendi modelini sunmak yerine zaten kullandığınız kodlama agent'ının üzerinde çalışmaktır. Makinenizdeki Claude Code, Codex, Cursor, Gemini, OpenCode ve daha fazlasını algılar ve bunu motor olarak kullanır. Sasha'nın çerçevelemesi: ücretsiz, açık ve tek bir sağlayıcıya kilitli olmadığı için ilk haftasında on binlerce GitHub yıldızı topladı.

• Açık kaynak, Apache-2.0 — klonlayın, okuyun, kendiniz barındırın.
• Yerelde çalışır — projeleriniz kendi makinenizdeki klasörlerdir.
• Herhangi bir agent, herhangi bir model — herhangi bir OpenAI uyumlu sağlayıcı aracılığıyla kendi API key'iniz dahil.
• Yerleşik zengin bir tasarım becerileri ve tasarım sistemleri kütüphanesi.
• Prototiplerden fazlası — sunum desteleri, görseller, hatta video.

Adım 1 — Kurun ve yapılandırın

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 — sabit kodlamayın). Sıfır kurulum mu tercih edersiniz? open-design.ai/download adresinden masaüstü uygulamasını indirin. İlk açılışta ayarlar sayfası makinenizdeki agent CLI'larını algılar — Sasha Codex kullanıyor — ve varsayılan bir model belirlemenize, medya sağlayıcıları (MiniMax, OpenAI GPT Image ve daha fazlası) eklemenize, veri kaynaklarına bağlanmanıza, dil değiştirmenize ve bir tema seçmenize olanak tanır.

Adım 2 — OpenAI uyumlu bir sağlayıcı üzerinden herhangi bir modeli kullanın

Bu, Sasha'nın incelemesindeki en faydalı parça. Algılanan CLI'ların ötesinde, Open Design herhangi bir OpenAI uyumlu API için kendi key'inizi getirmenize izin verir — yani OpenRouter gibi bir toplayıcı üzerinden yönlendirip neredeyse her modeli, çoğu zaman daha ucuza kullanabilirsiniz:

1. Sağlayıcınızda bir API key oluşturun ve kopyalayın.
2. Open Design ayarlarında OpenAI sağlayıcı türünü seçin (OpenRouter ve benzeri toplayıcılar OpenAI API'sini konuşur).
3. Key'i yapıştırın ve en önemlisi base URL'yi değiştirip sağlayıcınızın uç noktasına ayarlayın (örn. OpenRouter base URL'si), ardından istediğiniz modeli seçin.
4. Kaydedin — üretim artık o sağlayıcı üzerinden yönlendirilir.

Sasha'nın takıldığı bir tuzak: model seçimi proje bazında değil, global olarak değişir; dolayısıyla geçişten sonra medya üretimi bozulursa, bunun nedeni görsel sağlayıcının model değişimini izlemesidir. Medya sağlayıcı key'lerinizi açıkça ayarlayın.

Adım 3 — Bir prototip oluşturun (pürüzleriyle birlikte)

Bir proje oluşturun, brief'inizi yazın, yüksek doğrulukta seçeneğini seçin ve gönderin. Open Design önce bir keşif formu çalıştırır — soruları prompt'unuza göre uyarlar (hedef platform, kimin için, ton, animasyon, kısıtlamalar), ardından bir görsel yön seçici (tipografi + palet) ve sonra inşa eder. Çıktı, yerleşik kontrollere sahip canlı, etkileşimli bir prototiptir — Sasha'nın ürettiği uygulama, animasyonları açıp kapatmanıza ve vurgu rengini doğrudan sayfada değiştirmenize izin verir.

Önizlemede oluşturulan gerçek bir üretilmiş prototip — karanlık, sinematik bir ajans açılış sayfası.

Sasha'nın kamera karşısında gösterdiği dürüst uyarılar (ve bunlarla nasıl başa çıkılacağı):

• Varsayılan olarak yanlış beceriyi seçebilir. Siz bir mobil uygulama isterken "checkpoint/blog" oluşturmaya başlarsa, ona açıkça söyleyin: "mobile-app / front-end becerisini kullan." Üretmeden önce beceriyi ayarlayın.
• Inspect, data-oid etiketlerine ihtiyaç duyar. Tuvaldeki Inspect aracı, yapıtın etiketlenmiş olmasını gerektirir; öğeleri seçemediğini söylüyorsa, agent'tan "prototipi data-oid etiketleriyle yeniden oluşturmasını" isteyin, ardından yeniden yükleyin.
• Genç ve hızlı sürüm çıkarıyor. Zaman zaman aksaklıklar bekleyin (bir düzenlemeden sonra gezinmenin kaybolması vb.) — proje neredeyse her gün güncelleniyor, bu yüzden sık sık yeniden pull yapın.

Adım 4 — Tuval üzerindeki araçlar (asıl cazibe)

Etiketlendikten sonra, düzenleme döngüsü öne çıkan unsurdur. Inspect, herhangi bir öğenin üzerine gelip rengi, boyutu ve stili doğrudan ayarlamanıza olanak tanır. Edit, metni satır içinde yeniden yazmanıza olanak tanır (tek bir kelimeyi değiştirmek için sohbete gidip gelmek yok). Comment/picker, bir alan seçmenize, çizim yapmanıza ve agent'a bir not göndermenize olanak tanır ("bu menüyü ilerleme çubuğu olan kaydırmalı bir karusele dönüştür"). Bu, bir terminaldeki sade bir agent ile yeniden üretilmesi zahmetli olan hızlı, görsel geri bildirim döngüsüdür.

Eklenti merkezi: kayıt defterine göz atın, eklentileri içe aktarın ve ekibiniz için hazırlayın.

İşiniz bittiğinde Share, PDF, PPTX, bağımsız HTML veya markdown olarak dışa aktarır — ya da tek tıkla Vercel'e dağıtır. Sasha'nın dürüst hükmü: sunumlar ve lead-magnet sayfaları için zaten kullanışlı bir mini oluşturucu; karmaşık uygulama/site prototiplemesi için gerçek bir yineleme bekleyin. Yalnızca bir haftalık olduğu ve sürekli güncellendiği düşünülürse, temeli sağlam.

İpuçları

• Daha ucuz veya farklı modelleri kullanmak için OpenRouter'ı (ya da herhangi bir OpenAI uyumlu sağlayıcıyı) bağlayın — base URL'yi değiştirmeyi unutmayın.
• Yanlış şablonu varsayılan olarak seçmemesi için üretmeden önce beceriyi açıkça ayarlayın.
• Inspect öğeleri seçemiyorsa data-oid etiketleri isteyin, ardından yeniden yükleyin.
• Sohbette yeniden prompt yazmak yerine hızlı görsel ince ayarlar için Inspect/Edit/Comment'e yaslanın.
• Sık sık yeniden pull yapın — proje neredeyse her gün düzeltmeler yayınlıyor.

SSS

Claude dışında bir model kullanıp daha az ödeyebilir miyim? Evet. Open Design'ı algılanan herhangi bir CLI'ya yönlendirin ya da key ve base URL'yi ayarlayarak herhangi bir OpenAI uyumlu sağlayıcı (örn. OpenRouter) için kendi key'inizi getirin — bu, neredeyse her modeli açar.

Inspect/edit öğeleri seçmiyor — neden? Yapıtın data-oid etiketlerine ihtiyacı var. Agent'tan prototipi bunlarla yeniden oluşturmasını isteyin, ardından önizlemeyi yeniden yükleyin.

Üretime hazır mı? Henüz erken ve hızla yineleniyor. Desteler ve lead-magnet sayfaları için zaten harika; karmaşık uygulamalar için çıktıyı, üzerinde çalışıp inceltdiğiniz sağlam bir taslak olarak değerlendirin.

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

---

Bu yazılı kılavuz, Sasha (ИИШНЫЙ)'nin uygulamalı incelemesine dayanır. Yukarıdaki tam videoyu izleyin ve daha fazla dürüst, montajsız yapay zeka aracı testi için ИИШНЫЙ'a abone olun.