Claude Design Ücretsiz Nasıl Kullanılır?

Claude Design piyasaya çıktığında vaat netti: Tek cümle yazın, saniyeler içinde sunum destesi, açılış sayfası veya mobil maket alın. Piksel itmek, dikdörtgen sürüklemek, boş tuvalle uğraşmak yok. Sorun şu: Claude Design ücretli, bulut tabanlı ve Anthropic ekosistemine bağlı. Bu yüzden “Claude Design’ı ücretsiz kullanma” araması çoğu zaman çıkmaz sokakta biter.

Apidog'u bugün deneyin

Open Design adlı açık kaynaklı proje, aynı yapıt odaklı tasarım döngüsünü kendi makinenizde çalıştırabileceğiniz şekilde yeniden kurar. Bu yazıda Open Design’ın ne olduğunu, üç farklı kurulum yolunu ve elinizdeki yapay zeka aracısını tasarım motoru olarak nasıl bağlayacağınızı adım adım göreceksiniz.

💡 Tasarım aracı size arayüzü verir. Ancak bu arayüzün gerçek ürün gibi davranması için API gerekir. Open Design’ı Apidog gibi bir API platformuyla eşleştirerek prototipi gerçek verilerle çalışan bir ürüne yaklaştırabilirsiniz.

TL;DR: Claude Design’ı ücretsiz nasıl kullanırsınız?

Claude Design, Anthropic’in ücretli ve kapalı kaynaklı tasarım aracıdır. Aynı iş akışını ücretsiz kullanmak için Apache-2.0 lisanslı açık kaynak alternatifi Open Design’ı kurabilirsiniz.

Open Design:

• Yerel makinede veya kendi sunucunuzda çalışır.
• Claude Design benzeri yapıt odaklı tasarım akışı sunar.
• Kendi modelini getirmez; mevcut kodlama aracısı CLI’larını kullanır.
• Claude Code, Codex, Gemini CLI, Cursor Agent ve benzeri araçlarla çalışır.
• Yazılım olarak ücretsizdir.
• Yalnızca bağladığınız yapay zeka modeli veya API için ücret ödersiniz.
• Zaten abone olduğunuz bir CLI aracısını kullanırsanız ek maliyet oluşmayabilir.

“Claude Design’ı ücretsiz” ifadesi neden dikkat istiyor?

Önce netleştirelim: Claude Design, Anthropic tarafından sunulan ücretli bir üründür. Bulutta çalışır, kaynak kodu kapalıdır ve farklı model sağlayıcılarına geçmenize izin vermez.

Yani kelimenin tam anlamıyla Claude Design ürününü ücretsiz kullanmak istiyorsanız, bu mümkün değildir.

Pratikte “Claude Design’ı ücretsiz kullanmak” iki anlama gelir:

1. Aynı iş akışını ücretsiz istemek: Tasarımı doğal dille açıklayın, cilalı bir çıktı alın.
2. Model ve veriler üzerinde kontrol istemek: Aracı kendi makinenizde çalıştırın, istediğiniz modeli bağlayın.

Open Design bu iki ihtiyaca cevap verir.

Open Design nedir?

Open Design, yerel öncelikli ve açık kaynaklı bir tasarım ortamıdır. GitHub deposunda kendisini Claude Design’a açık ve aracıdan bağımsız bir alternatif olarak konumlandırır.

Mimari üç parçadan oluşur:

• Web ön ucu: Next.js ile geliştirilmiş sohbet ve tuval arayüzü.
• Yerel arka plan programı: Node.js tabanlı küçük bir sunucu ve SQLite veritabanı.
• Aracı çalışma zamanı: Claude Code, Codex, Gemini CLI gibi bir kodlama aracısını çalıştırır.

Open Design kendi modelini paketlemez. Bunun yerine sisteminizde zaten bulunan kodlama aracılarını kullanır. Arka plan programı PATH içinde desteklenen CLI’ları tarar ve uygun olanları tasarım motoru olarak kullanır.

Desteklenen araçlar arasında şunlar bulunur:

• Claude Code
• Codex
• Cursor Agent
• Gemini CLI
• OpenCode
• Qwen
• GitHub Copilot CLI
• Kimi

Bu mimarinin nasıl çalıştığını daha iyi anlamak isterseniz Claude Code aracı koşum mimarisi yazısı iyi bir tamamlayıcıdır.

Open Design ayrıca iki önemli yapı kullanır:

• Beceriler: Web prototipleri, panolar, mobil uygulamalar, SaaS açılış sayfaları, e-posta düzenleri, sosyal karuseller ve sunum desteleri için görev şablonları.
• Tasarım sistemleri: Linear, Stripe, Vercel, Notion ve Apple gibi markalardan esinlenen renk, tipografi, boşluk, hareket ve ton kuralları.

Bu yaklaşım, kodlama aracılarına yapılandırılmış tasarım rehberi vermeye benzer. Aynı fikri kodlama aracıları için DESIGN.md dosyaları yazısında da görebilirsiniz.

Open Design şu çıktıları üretebilir:

• Web prototipleri
• Masaüstü ve mobil ekranlar
• Slayt desteleri
• Görseller
• Kısa videolar
• HTML, PDF, PPTX, ZIP, Markdown ve MP4 dışa aktarımları

Apache 2.0 lisansı sayesinde ticari projelerde de kullanılabilir.

Open Design’ı kurmanın üç yolu

Open Design’ı üç farklı şekilde çalıştırabilirsiniz:

1. Masaüstü uygulaması
2. Docker
3. Kaynaktan kurulum

Seçiminiz, ne kadar kontrol istediğinize bağlıdır.

Seçenek 1: Masaüstü uygulaması

En hızlı yol masaüstü uygulamasını kurmaktır. Open Design, macOS ve Windows için hazır ikili dosyalar yayınlar.

Adımlar:

1. open-design.ai adresine veya GitHub releases sayfasına gidin.
2. İşletim sisteminize uygun paketi indirin.
3. Uygulamayı kurun ve başlatın.

İlk çalıştırmada uygulama:

• Makinenizdeki kodlama aracılarını tarar.
• Becerileri ve tasarım sistemlerini yükler.
• Projeler için çalışma klasörü oluşturur.

Terminal kullanmak istemeyen tasarımcılar, ürün yöneticileri veya hızlı prototip yapmak isteyen geliştiriciler için en pratik seçenektir.

Seçenek 2: Docker

Open Design’ı izole bir servis olarak çalıştırmak istiyorsanız Docker kullanın.

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d

Konteynerler başladıktan sonra tarayıcıda şu adresi açın:

http://localhost:7456

Docker kurulumu sisteminizden izole eder ve yükseltmeleri kolaylaştırır. Docker Compose’a yeniyseniz resmi Docker belgeleri başlangıç için yeterlidir.

Seçenek 3: Kaynaktan kurulum

En güncel kodu kullanmak veya becerileri/tasarım sistemlerini özelleştirmek istiyorsanız kaynaktan kurulum yapın.

Gereksinimler:

• Node.js 24 civarı bir sürüm
• pnpm 10.33.x

Kurulum:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version    # 10.33.x olduğunu doğrulayın
pnpm install
pnpm tools-dev run web

pnpm tools-dev run web, arka plan programını ve web ön ucunu birlikte başlatır.

Yararlı komutlar:

Komut	Ne yapar
pnpm tools-dev run web	Arka plan programı ve web’i ön planda başlatır
pnpm tools-dev start web	Arka plan programı ve web’i arka planda başlatır
pnpm tools-dev status	Çalışan servisleri gösterir
pnpm tools-dev logs	Web ve arka plan günlüklerini izler
pnpm tools-dev stop	Tüm servisleri durdurur

pnpm kullanmadıysanız corepack enable sürüm sabitlemeyi sizin için halleder.

İlk çalıştırma: Claude Code’u tasarım motoru olarak bağlama

Open Design’ın çıktı üretmesi için bir yapay zeka motoruna ihtiyacı vardır. Bunu iki şekilde bağlayabilirsiniz.

Yol A: CLI aracısı kullanmak

Önerilen yol budur. Desteklenen bir kodlama aracısının kurulu ve PATH içinde görünür olduğundan emin olun.

Örneğin Claude Code kullanıyorsanız:

which claude

Gemini CLI kullanıyorsanız:

which gemini

Araç görünüyorsa Open Design arka plan programı onu otomatik algılar. Ek yapılandırma gerekmez.

Claude Design’a en yakın deneyim için Claude Code kullanabilirsiniz; ikisi de Anthropic modelleriyle çalışır. Claude Code kurulumu için Claude Agent SDK ve Claude planı kurulum kılavuzu yardımcı olabilir.

Yol B: BYOK proxy kullanmak

Makinenizde CLI yoksa Open Design’ın OpenAI uyumlu BYOK proxy’sini kullanabilirsiniz.

Desteklenen sağlayıcı örnekleri:

• Anthropic
• OpenAI
• Azure OpenAI
• Google Gemini
• Ollama
• Yerel model sunucuları

Bu yöntemde API anahtarınızı eklersiniz ve Open Design istekleri o sağlayıcı üzerinden yönlendirir. Ölçülü API kullanıyorsanız token başına ücret oluşur.

API anahtarlarını güvenli yönetmek için düzenleyici uzantılarında API anahtarı güvenliği yazısındaki prensipler burada da geçerlidir.

Tamamen ücretsiz senaryo: Ollama

Open Design’ı yerel bir Ollama modeline yönlendirirseniz tüm döngü çevrimdışı çalışabilir. Bu durumda API faturası oluşmaz.

Bu, “Claude Design benzeri iş akışını ücretsiz kullanma” hedefinin en gerçekçi versiyonudur.

İlk tasarım yapıtınızı oluşturun

Motor bağlandıktan sonra akış basittir.

1. Beceri seçin
   
   Örneğin SaaS açılış sayfası, pano, mobil uygulama ekranı, pazarlama e-postası veya slayt destesi.

2. Tasarım sistemi seçin
   
   Linear, Stripe veya benzeri bir görsel yön seçebilirsiniz. Atlarsanız Open Design size şu stillerden birini sunar:

   • Editoryal
   • Modern Minimal
   • Teknik Yardımcı
   • Brutalist
   • Yumuşak Sıcak

3. Brief yazın
   
   Örnekler:
   

   Tohum yatırım turumuz için dergi tarzı bir sunum destesi yap

   Bir geliştirici API aracı için fiyatlandırma sayfası tasarla

1. Keşif formunu doldurun
   
   Open Design çıktı üretmeden önce hedef kitle, ton, yüzey ve marka bağlamı gibi bilgileri sorar.

2. Plan akışını izleyin
   
   Aracı yapılacaklar listesini UI içinde gösterir ve görevleri tamamladıkça işaretler.

3. Sandbox içinde önizleyin
   
   Üretilen çıktı sandbox edilmiş iframe içinde render edilir. Sandboxing yaklaşımını daha iyi anlamak için CubeSandbox’ın yapay zeka aracıları için ne anlama geldiği yazısına bakabilirsiniz.

4. Dışa aktarın
   
   HTML, PDF, PPTX, ZIP, Markdown veya MP4 olarak çıktı alabilirsiniz.

Keşif formunu atlamayın. İlk taslağın kalitesini en çok artıran adım genellikle budur.

İleri kullanım: beceriler, tasarım sistemleri, BYOK ve MCP

Open Design’ı sadece demo aracı olarak değil, tekrar kullanılabilir bir tasarım ortamı olarak kullanabilirsiniz.

Becerileri düzenleyin

Her beceri bir klasördür ve içinde genellikle SKILL.md bulunur.

Kendi iş akışınızı ekleyebilirsiniz:

skills/
  saas-landing/
    SKILL.md
    assets/

Örneğin şirketinizin açılış sayfası standardını bir kez tanımlayıp her projede kullanabilirsiniz.

Kendi tasarım sisteminizi ekleyin

Tasarım sistemleri düz Markdown dosyalarıdır. İçinde şunları tanımlayabilirsiniz:

• Renk token’ları
• Tipografi ölçeği
• Boşluk sistemi
• Bileşen kuralları
• Marka tonu

Kendi dosyanızı design-systems klasörüne ekleyip sonraki üretimlerde kullanabilirsiniz.

Model sağlayıcılarını değiştirin

BYOK proxy ile farklı modeller arasında geçiş yapabilirsiniz.

Örneğin:

• Müşteri sunumu için güçlü ve pahalı bir model
• Erken taslaklar için ucuz veya yerel model
• Çevrimdışı çalışma için Ollama

Model karşılaştırması yapmak isterseniz Gemini 3.5 vs GPT-5.5 vs Opus 4.7 karşılaştırması iyi bir başlangıçtır.

MCP sunucusunu kullanın

Open Design bir Model Bağlam Protokolü sunucusu içerir. Diğer kodlama aracıları bu sunucuya bağlanıp tasarım dosyalarını doğrudan sorgulayabilir.

Bu sayede Open Design, tek başına çalışan bir araç değil, daha büyük bir geliştirme zincirinin parçası olur.

Medya çıktıları üretin

Open Design sadece düzen üretmez. Ayrıca:

• Poster
• Avatar
• Kısa sinematik video
• HTML’den MP4’e hareketli grafik

gibi medya çıktıları da oluşturabilir.

Prototipten ürüne: Open Design’ı Apidog ile eşleştirin

Open Design size güzel bir ön uç verir: açılış sayfası, pano, mobil ekran veya slayt destesi. Ancak sabit yer tutucu verilerle dolu bir prototip hâlâ ürün değildir.

Bir kullanıcı düğmeye bastığında arkasında API gerekir.

İşte burada Apidog devreye girer.

Örneğin Open Design size şu ekranlardan oluşan bir geliştirici aracı panosu üretti:

• Kullanım grafiği
• Faturalandırma paneli
• Ayarlar sayfası

Bunu gerçekçi yapmak için şu API’lere ihtiyacınız olur:

GET /usage
GET /billing
GET /settings
PATCH /settings

Apidog ile bu uç noktaları şema öncelikli biçimde tasarlayabilir ve OpenAPI çıktısı üretebilirsiniz.

Örnek yanıt şeması:

{
  "period": "2026-05",
  "requests": 125000,
  "limit": 500000,
  "status": "active"
}

Ardından Apidog’un mock server özelliğiyle bu API’leri gerçek backend yazmadan canlı hale getirebilirsiniz. Open Design’dan çıkan ön uç, sabit veriler yerine mock endpoint’leri çağırır.

Bu yaklaşımın avantajı:

• Ön uç ve arka uç paralel ilerler.
• Tasarım daha erken test edilir.
• Backend hazır olmadan ürün davranışı doğrulanır.
• API sözleşmesi baştan netleşir.

Gerçek backend yazıldığında Apidog testleri de yönetebilir. Görsel doğrulamalarla test senaryoları oluşturabilir ve bunları CI/CD sürecine bağlayabilirsiniz. Apidog’daki spec-first modu, API tasarımı ile uygulamayı senkron tutmaya yardımcı olur.

Open Design arayüz tarafını üretirken, Apidog API tarafını tasarlamanızı, mock etmenizi ve test etmenizi sağlar. Ayrıca Apidog’un yapay zeka aracısı hata ayıklayıcısı, aracıların uç noktalarınızı nasıl çağırdığını incelemenize yardımcı olur.

Kısaca:

1. Ön yüzü Open Design ile üretin.
2. API sözleşmesini Apidog ile tasarlayın.
3. Mock server oluşturun.
4. Prototipi gerçek API davranışıyla test edin.
5. Backend hazır olduğunda aynı sözleşme üzerinden ilerleyin.

Apidog’u indirin ve Open Design çıktınızın arkasındaki ilk endpoint’i hızlıca mock edin.

Open Design vs Claude Design vs Figma

Faktör	Open Design	Claude Design	Figma
Fiyat	Ücretsiz, Apache 2.0	Ücretli abonelik	Ücretsiz katman + ücretli planlar
Kaynak kodu	Açık	Kapalı	Kapalı
Barındırma	Yerel, self-host veya Vercel	Yalnızca bulut	Bulut
Yapay zeka motoru	CLI aracısı, BYOK veya yerel model	Anthropic modelleri	Manuel tasarım + AI özellikleri
Çıktı	Kod yapıtları, desteler, görseller, video	Tasarım yapıtları	Düzenlenebilir tasarım dosyaları
Çevrimdışı çalışma	Yerel modelle evet	Hayır	Sınırlı
En iyi kullanım	Kontrol isteyen geliştiriciler ve ekipler	Hızlı barındırılan deneyim	Piksel düzeyinde görsel tasarım

Claude Design kolaylıkta güçlüdür. Kurulum gerektirmez ve barındırılmıştır.

Figma, manuel tasarım kontrolü ve ekip iş birliği için hâlâ güçlü bir araçtır.

Open Design ise özgürlük ve kontrol sağlar:

• Yazılım maliyeti yoktur.
• Model seçimi size aittir.
• Self-host edilebilir.
• Yerel modellerle çevrimdışı çalışabilir.
• Kodlama aracılarıyla geliştirici iş akışına daha yakındır.

Kaçınılması gereken yaygın hatalar

1. PATH içinde aracı olmaması

Open Design, sistemde göremediği CLI aracısını kullanamaz.

Kontrol edin:

which claude
which gemini
which codex

Hiçbiri görünmüyorsa desteklenen bir CLI kurun veya BYOK proxy yapılandırın.

2. Yanlış Node veya pnpm sürümü

Kaynaktan kurulumda Node 24 civarı ve pnpm 10.33.x gerekir.

Kontrol:

node --version
pnpm --version

Gerekirse:

corepack enable

3. API anahtarıyla sıfır maliyet beklemek

Open Design ücretsizdir. Ancak Anthropic, OpenAI veya başka bir sağlayıcının ölçülü API anahtarını kullanıyorsanız token ücreti oluşur.

Sıfır maliyete en yakın seçenekler:

• Zaten abone olduğunuz CLI aracı
• Ücretsiz CLI katmanı
• Yerel Ollama modeli

4. Keşif formunu hızlı geçmek

Keşif formu, modelin doğru varsayımlar yapmasını sağlar. Kısa ama net cevaplar verin.

Kötü brief:

Bir dashboard yap

Daha iyi brief:

B2B SaaS ürünü için kullanım metrikleri, faturalandırma durumu ve API limitlerini gösteren teknik görünümlü bir dashboard tasarla

5. Önizlemeyi doğrudan üretim kodu sanmak

Open Design çıktısı güçlü bir başlangıçtır, tamamlanmış ve denetlenmiş üretim kodu değildir.

Yapmanız gerekenler:

• Kodu inceleyin.
• Gereksiz parçaları temizleyin.
• Gerçek API’lere bağlayın.
• API sözleşmesini test edin.
• API testi sürecini ekleyin.

6. Eski sürümde kalmak

Open Design hızlı gelişir. Belgede gördüğünüz özellik sizde yoksa eski sürüm kullanıyor olabilirsiniz.

Kaynaktan kurduysanız:

git pull
pnpm install
pnpm tools-dev run web

Masaüstü uygulaması kullanıyorsanız güncellemeleri kontrol edin.

Sonuç

Anthropic’in Claude Design ürününü ücretsiz kullanamazsınız. Ancak Claude Design’ı ilginç yapan iş akışını ücretsiz ve daha kontrollü şekilde kurabilirsiniz:

• Tasarımı doğal dille açıklayın.
• Aracı bir plan oluştursun.
• Yapıtı sandbox içinde önizleyin.
• HTML, PDF, PPTX, ZIP, Markdown veya MP4 olarak dışa aktarın.
• Gerekirse yerel modelle tamamen çevrimdışı çalışın.

Özet:

• Open Design, Claude Design iş akışını yazılım maliyeti olmadan sunan açık kaynaklı bir alternatiftir.
• Masaüstü uygulaması, Docker veya kaynaktan kurulumla çalışır.
• Claude Code, Codex, Gemini CLI ve benzeri araçları motor olarak kullanabilir.
• Ollama ile tamamen yerel ve ücretsiz bir akış kurulabilir.
• Beceriler ve Markdown tabanlı tasarım sistemleri özelleştirilebilir.
• Üretilen ön yüzü gerçek ürüne yaklaştırmak için API tarafını Apidog ile tasarlayıp mock edebilirsiniz.

Sonraki adım: Open Design’ı size uygun yöntemle kurun, bir aracı bağlayın ve ilk yapıtınızı oluşturun. Ardından Apidog’u indirin, bu yapıtın arkasındaki API’yi tasarlayın ve mock server ile prototipi gerçek ürün gibi çalıştırın.