Open Design: ÜCRETSIZ açık kaynaklı Claude Design alternatifi

Open Design bir fikri alır ve onu prototiplere, web sitelerine, slaytlara ve hatta HTML videolara dönüştürür — hepsi kendi makinende yerel olarak çalışır. Bu demoda Code A Program masaüstü uygulamasını kurar, bir kodlama ajanı bağlar ve Draft adlı bir AI yazım aracı için üst düzey bir açılış sayfası inşa eder, ardından çalışma alanından hiç çıkmadan onu ince ayarlar ve dağıtır. Tüm akışı Code A Program’ın videosunda izle ya da aşağıdaki yazılı rehberi takip et.

Yerel çalışan Open Design: tamamen senin kontrolünde olan açık kaynaklı, ajan yerlisi (agent-native) bir tasarım çalışma alanı — tek bir modele kilitli değil.

Open Design nedir?

Open Design açık kaynaklı, yerel öncelikli (local-first) bir tasarım platformudur — Claude Design ve Figma’ya ücretsiz bir alternatif. Seni tek bir model sağlayıcısına bağlamak yerine, zaten kullandığın kodlama ajanının üzerinde çalışır; yani kendi ajanını ve kendi key’ini getirirsin.

• Açık kaynak, Apache-2.0 — her satırı oku, kendin barındır ya da sadece masaüstü uygulamasını indir.
• Yerelde çalışır — projeler bir başkasının bulutunda değil, kendi makinendeki kendi klasörlerinde durur.
• Kendi ajanını getir — Claude Code, Codex, Cursor, Gemini, OpenCode ve daha fazlası dahil 21+ kodlama ajanı desteklenir; üretimi hangi CLI’nın sürdüğünü sen seçersin.
• Prototiplerden fazlası — web siteleri, prototipler, slayt desteleri, görsel üretimi ve hatta HTML video, hepsi tek bir çalışma alanından.
• Her şey hazır gelir — 129 yerleşik tasarım sistemi ve 460+ eklenti, böylece asla boş bir tuvalden başlamazsın.

Claude Design kullandıysan, his anında tanıdık gelecek — Open Design aynı sakin deneyimi korur, sonra üzerine senin seçtiğin modeli ekler.

Adım 1 — Ajanını ve modelini seç

open-design.ai adresinden masaüstü uygulamasını indir, kur ve kısa tanışma sorularını yanıtla. Bu seni doğrudan ana sohbet arayüzüne bırakır.

Sağ üstte AI ajan sağlayıcını seç. Yerel CLI sağlayıcıları olarak Claude Code, Codex CLI, Gemini CLI (ücretsiz kullanım limitleri var), OpenCode ve diğerlerini seçebilirsin. Demoda Code A Program GLM 5.2 modeliyle OpenCode kullanıyor çünkü ön yüz işlerinde güçlü olmuştur — ama asıl önemli olan esneklik: tek bir modele ya da platforma kilitli değilsin.

Adım 2 — Komutunu yaz

Sohbette referans materyal için bir dosya ekle seçeneği ve bir eklenti bölümü var. Open Design; build ve test yardımcıları, 3D maketler, mobil ve masaüstü cihaz çerçeveleri ve daha fazlasını kapsayan 460+ eklentiyle gelir — yani 3D öğeler veya bir cihaz kabuğu gerekiyorsa, komutla boğuşmak yerine eklentiyi eklersin.

Eklenti kütüphanesi: inşa, test, 3D maket, cihaz çerçeveleri ve daha fazlası için 460+ eklenti — tasarımının ihtiyacı olanı ekle.

Şimdi bir brief yapıştır. Demo komutu, Draft adlı bir AI yazım asistanı için üst düzey bir açılış sayfası istiyor; ölçülü bir arduvaz siyahı, fildişi ve elektrik turuncusu paleti, canlı bir metin üretimi animasyonu olan cesur editöryel bir hero, etkileşimli bir yazım tuvali, üç adımlı bir iş akışı, bir sonuçlar bölümü, iki kademeli bir fiyat tablosu, bir SSS ve güçlü bir son harekete geçirici mesajla — aynı zamanda kartlardan, gradyanlardan, glassmorphism’den ve basmakalıp robot görsellerinden açıkça kaçınarak.

Bilmeye değer bir kaldıraç daha var: bir tasarımı Apple, Airbnb, BMW, IBM veya Spotify gibi markaların popüler bir tasarım sistemi üzerine kurabilirsin. Code A Program bu çalıştırmada onu atlıyor, ama belirli bir görünümü yakalamak istediğinde orada.

Adım 3 — İnşa etmesini ve kendini denetlemesini izle

Komutu gönder, Open Design projeyi hazırlamaya başlasın. Yaklaşık bir dakika sonra birkaç takip sorusu sorabilir — daha iyi sonuçlar için yanıtla ya da tümünü atla’ya basıp devam etmesine izin ver.

Demoda açılış sayfasının kendisi yaklaşık altı dakikada biter. Ardından Open Design kalan süreyi kendi denetimlerini yaparak geçirir — yapıyı doğrular, düzeni gözden geçirir, animasyonları kontrol eder ve build’i tamamlandı olarak işaretlemeden önce küçük sorunları düzeltir. Bittiğinde, siteyi yeni bir sekmede açmak için sunum simgesine tıkla.

Üretilen sonuç: canlı yazım animasyonlu editöryel bir hero, iş akışı, sonuçlar, fiyatlandırma, SSS ve altbilgi — tablet ve mobilde duyarlı.

Sonuç; AI yazım animasyonlu bir hero, akıcı kaydırma efektleri, etkileşimli bir editör bölümü, bir iş akışı şeridi, bir müşteri sonuçları bölümü, aylık/yıllık fiyatlandırma, bir SSS ve temiz bir altbilgi taşır. Duyarlı tasarımın ayakta kaldığını doğrulamak için tablet ve mobil görünümlerine geç.

Adım 4 — Tuval üzerindeki araç çubuğuyla ince ayar yap

Sağdaki araç çubuğu, önemsiz değişiklikler için token yakmadan cilaladığın yerdir:

• Screenshot — sitenin bir görüntüsünü al.
• Comment — herhangi bir öğeyi seç (örneğin hero başlığını) ve bir değişikliği tarif et, örneğin bir kelimeyi turuncu temaya boyamak gibi. Birkaç yorumu toplayıp bir kerede gönder ya da birini doğrudan sohbete yolla.
• Marker — sayfanın herhangi bir alanını vurgula ve ajanla paylaş.
• Element edit — seçili bir öğede yazı tiplerini, genişliği, renkleri ve daha fazlasını doğrudan değiştir; böylece basit ince ayarlar asla tam bir yeniden üretim gerektirmez.

Ayrıca yakınlaştırma kontrolleri ve açık tüm yorumların bir görünümü de sende. Demoda o “actually” metni, tam orada, araç çubuğunda turuncuya boyanıyor.

Adım 5 — Dışa aktar ve dağıt

Araç çubuğunun üstünde indirme seçeneği var — projeyi PDF, görüntü, ZIP veya HTML olarak dışa aktar. Bir de şablon olarak kaydet var; böylece bu tasarımı gelecekteki projeler için bir başlangıç noktası olarak yeniden kullanabilirsin.

İlginç kısım paylaş menüsü. Oradan şunları yapabilirsin:

• tek tıkla Vercel’e dağıt — Vercel hesabını bir erişim token’ıyla bağla ve dağıt’a bas.
• aynı şekilde Cloudflare’e dağıt.
• Cursor veya VS Code gibi bir editörde aç, ya da Gemini CLI, Codex ve Claude Code gibi CLI araçlarında aç. Open Design üretilen HTML’i, Skills klasörüyle birlikte sana devreder; böylece tasarımı bir Next.js projesine — ya da istediğin herhangi bir framework’e — dönüştürebilirsin.

Ayarlar altında global kurallar ekleyebilir (örneğin “her zaman TypeScript kullan”), Claude’un bellek özelliği gibi işe yarar bellekler saklayabilir ve medya sağlayıcılarını yapılandırabilirsin — ses için bir ElevenLabs key’i, ayrıca görsel üretimi için Nano Banana, OpenAI veya OpenRouter. Ayrıca beceriler ekleyebilir (tarayıcı görevlerini otomatikleştiren bir agent-browser becerisi ve birkaç ön yüz becerisi var), MCP sunucuları bağlayabilir ve varsayılan proje konumunu değiştirebilirsin.

Daha fazlasını almak için ipuçları

• Başlamak için ücretsiz modeller yeter. Tüm demo sitesi ücretsiz bir Gemini kademesiyle üretildi ve yine de harika görünüyor; gerçek işte daha yüksek kalite istediğinde ücretli bir modele uzan.
• Komuttan önce eklentileri ekle — 3D maketlere veya cihaz çerçevelerine ihtiyacın olacağını biliyorsan.
• Değişiklik için doğru aracı kullan — öğe editörü ve yorumlar, tam bir yeniden inşa olmadan küçük ince ayarları halleder.
• İşe yarayan düzenleri şablon olarak kaydet ki bir sonraki projen önden başlasın.

Sık sorulan sorular

Open Design ücretsiz mi? Evet — Apache-2.0 altında açık kaynaktır ve yerelde ücretsiz çalışır. Yalnızca bağladığın ajanın ve medya sağlayıcıların model/API kullanımı için ödeme yaparsın ve Gemini’ninki gibi ücretsiz kademeleri kullanabilirsin.

Hangi kodlama ajanlarını destekler? Claude Code, Codex CLI, Cursor, Gemini CLI ve OpenCode dahil 21+ ajan. Sağlayıcıyı sağ üstteki menüden seçersin.

Claude Design’dan farkı nedir? Aynı tanıdık his, ama açık kaynaklı, yerel öncelikli ve ajan takılabilir — tek bir modele ya da platforma kilitli değilsin ve projeni istediğin gibi dışa aktarabilir veya dağıtabilirsin.

Uygulamadan çıkmadan dağıtabilir miyim? Evet — paylaş menüsü tek tıkla Vercel veya Cloudflare’e dağıtır (sağlayıcı erişim token’ını sen verirsin) ya da kodu Cursor’a, VS Code’a veya bir CLI ajanına devreder.

İyi sonuçlar için ücretli bir model kullanmak zorunda mıyım? Hayır — çoğu açılış sayfası ve ön yüz tasarımı için ücretsiz modeller zaten yeterince yetenekli; yalnızca daha ileri sonuçlar istediğinde ücretli bir modele geç.

---

Bu yazılı rehber, Code A Program’ın demosuna dayanır. Yukarıdaki tam videoyu izle ve daha fazla uygulamalı AI aracı videosu için Code A Program’a abone ol.