Yapay Zeka ile Tasarım Sistemi: Claude Design Kurulumu

Claude Design, yapay zekanın tarayıcıda çalışan tasarım alanı. Bu rehberde dört hazır prompt var: birincisi markanın renk, tipografi ve bileşen sistemini kuruyor, ikincisi o sistemle uygulama ekranı üretiyor, üçüncüsü mevcut bir siteden öğeleri çekiyor, dördüncüsü çıkan paketi Claude Code'a devrediyor. Hepsi claude.ai/design adresinde çalışıyor. Kopyala, marka bilgilerini doldur, çalıştır.

Claude Design prompt seti (kopyala)

Önce marka kartını doldur, sonra sıradaki promptu yapıştır.

MARKA KARTI (önce bunu doldur)

İşletme adı: 
Sektör: 
Hedef kitle: 
Marka kişiliği: (modern ve sade / iddialı ve enerjik / sıcak ve samimi)
Renkler: (HEX kodları ya da tarif, boş bırakırsan Claude üretir)
Elimde hazır olanlar: (logo, font, renk, ekran görüntüsü, mevcut site adresi)

1. TASARIM SİSTEMİ PROMPTU (marka kartını doldurup yapıştır)

Aşağıdaki bilgilerle markam için eksiksiz bir tasarım sistemi kur.

MARKA BİLGİLERİ
- İşletme adı: [İŞLETME ADIN]
- Sektör: [SEKTÖRÜN]
- Hedef kitle: [HEDEF KİTLEN]
- Marka kişiliği: [modern ve sade / iddialı ve enerjik / sıcak ve samimi]
- Renkler: [HEX kodları ya da tarif, boş bırakırsan sen üret]

ŞUNLARI ÜRET
1. Renk paleti: ana renk, ikincil renk, vurgu rengi, nötrler ve durum renkleri
2. Tipografi: font eşleşmeleri, punto ölçeği, kalınlıklar, satır yükseklikleri
3. Boşluk ölçeği ve yerleşim ızgarası
4. Bileşen stilleri: buton, kart, form alanı, etiket
5. İkon ve illüstrasyon yönü
6. Marka tutarlılık kuralları: ne yapılır, ne yapılmaz

Çıktıyı örnekli ve düzenli ver, sonradan referans olarak kullanabileyim.

2. EKRAN SETİ PROMPTU (tasarım sistemi çıktıktan sonra)

Bu tasarım sistemini kullanarak [ÜRÜNÜN ADI] için çalışan bir ekran seti tasarla.

- Ekranlar: [giriş / ana ekran / detay / profil]
- Cihaz: [telefon / masaüstü]
- Her ekranda sistemdeki renkleri, fontları ve bileşenleri kullan, yenisini uydurma.
- Ekranlar arası geçişi de göster.
- Bitince hangi bileşeni nerede kullandığını kısa bir listeyle yaz.

3. MEVCUT SİTEDEN ÖĞE ÇEKME PROMPTU

Şu adresi incele: [SİTENİN ADRESİ]

- Sitedeki renkleri, fontları, buton ve kart stillerini çıkar.
- Bunlarla benim ürünüme benzeyen bir prototip kur.
- Siteden aldığın her öğeyi listele, hangisini neden aldığını yaz.
- Sitede olmayan bir şey uydurma, eksik kalanı bana sor.

4. CLAUDE CODE'A DEVİR PROMPTU

Claude Design'da sağ üstteki Export menüsünden "Handoff to Claude Code" seçilir.
Çıkan bağlantıyı aşağıdaki metne koy ve Claude'un Kod bölümüne yapıştır:

Bu tasarım dosyasını al, açıklama dosyasını oku ve tasarımın ilgili kısımlarını uygula.
[Claude Design'ın verdiği bağlantı]

Uygula: [dosya adı]

Renk ve font değerlerini tasarım dosyasından oku, kendin seçme.
Uygulamadan önce hangi ekranı kuracağını bana yaz ve onayımı bekle.

Kendin nasıl kurarsın (Claude'a bunu ver)

Aşağıdaki metni kopyalayıp Claude'a yapıştır. Marka kartını doldurmak ve promptları senin bilgilerinle yeniden yazmak onun işi.

Markam için bir tasarım sistemi kurmanı ve onu Claude Design'da kullanılabilir hale
getirmeni istiyorum. Ben kod yazmıyorum, adımları tek tek yap ve her adımda onayımı al.

LÜTFEN ŞUNLARI SEN YAP:
1. Marka kartını bana sorarak doldur: işletme adı, sektör, hedef kitle, marka
   kişiliği, renkler.
2. Elimde logo, font ya da ekran görüntüsü var mı diye sor. Varsa hangilerini
   yükleyeceğimi söyle.
3. Tasarım sistemi promptunu marka kartıma göre yeniden yaz ve bana kopyalanabilir
   halde ver.
4. Sistem çıktığında renk paletini, tipografiyi ve bileşen listesini tablo halinde
   özetle.
5. Üç kullanım yolundan hangisinin bana uyduğunu sor: sıfırdan ekran seti, mevcut
   siteden öğe çekme, Claude Code'a devir.
6. Seçtiğim yola göre ikinci promptu benim bilgilerimle doldur.

KURALLAR:
- Her adımdan sonra dur ve onayımı bekle.
- Renk kodu, font adı ya da ölçü uydurma. Bilmediğini bana sor.
- Bana verdiğin her promptu kopyalanabilir tek blok halinde yaz.
- Sonunda iki şey ver: doldurulmuş marka kartı ve kullanacağım promptun son hali.

Nasıl çalışıyor

Claude Design nedir?

Claude Design, claude.ai/design adresinde açılan bir tasarım alanı. Sohbet penceresinden farkı şu: burada çıkan iş tek bir görsel değil, üzerinde çalışmaya devam edebildiğin bir proje. Renkler, fontlar, butonlar ve kartlar tek bir sistemde duruyor, sonraki her ekran o sistemden besleniyor. Bir proje açıyorsun, elindeki logoyu, fontu ve renk kodlarını yüklüyorsun. Bunlar elinde yoksa yukarıdaki tasarım sistemi promptunu veriyorsun ve sistemi Claude kuruyor. Sistem kurulduktan sonra istediğin ekran o sisteme göre çiziliyor, aynı butonun ikinci ekranda başka renkte çıkması bu yüzden olmuyor. Bir tasarımcıyla çalışırken aldığın marka kılavuzunun karşılığı burada tek bir proje dosyası oluyor. O dosyayı sonradan Canva'ya, sunuma, PDF'e ya da Claude'un Kod bölümüne gönderiyorsun, yani tasarım orada kapanıp kalmıyor. Proje içinde her ekran kendi sekmesinde duruyor ve üzerinde yazıyı, rengi ya da bileşeni doğrudan değiştirebiliyorsun. Claude bir ekranı bitirdiğinde ne yaptığını maddeler halinde yazıyor, hangi rengi nereye koyduğunu ve hangi bileşeni kullandığını o listeden okuyorsun. Beğenmediğin maddeyi söylüyorsun, ekranın tamamı yeniden çizilmiyor, sadece o kısım değişiyor.

Claude Design nasıl kullanılır?

Üç kullanım yolu var ve ikisi kalabalıkta konuşulmuyor. Birincisi tanıdık olanı: marka kartını veriyorsun, ekran setini sıfırdan çizdiriyorsun. İkincisi mevcut bir siteyi kaynak almak. Sitenin adresini veriyorsun, Claude oradaki renkleri, fontları ve bileşen stillerini çıkarıp senin ürününe benzeyen bir prototip kuruyor. Bu yol sıfırdan tarif etmekten hızlı sonuç veriyor, çünkü markanın görünüşü zaten sitede duruyor ve sen onu kelimelerle anlatmak zorunda kalmıyorsun. Üçüncüsü de çıkan tasarımı paket haline getirip Claude Code'a devretmek. Devir sırasında Claude Design sana bir bağlantı ve kısa bir metin veriyor, o metni Claude'un Kod bölümüne yapıştırıyorsun ve kodu yazan taraf renkleri, fontları ve ölçüleri tahmin etmek yerine dosyadan okuyor. Üçüncü yolu neredeyse kimse konuşmuyor, oysa tasarımla ürün arasındaki en pahalı adım burası. Hangi yolu seçersen seç sıra aynı kalıyor: önce sistem, sonra ekran, en son dışa aktarma.

Hangi dosyayı dışa aktarmalısın?

Sağ üstteki Export menüsü altı yol veriyor ve seçim, tasarımı kime verdiğine bağlı. Bir tasarımcıyla ya da ekiple çalışıyorsan "Download project as .zip" bütün proje dosyasını indiriyor. Müşteriye göstereceksen "Export as PDF" ya da "Export as PPTX" seç, ikisi de yorum almak için yeterli. Sosyal medya görsellerini aynı sistemle üretmeye devam edeceksen "Send to Canva" tasarımı Canva'ya taşıyor. Siteye koyacaksan "Export as standalone HTML" tek dosyalık çalışır bir sayfa veriyor. Yazılım tarafına geçeceksen "Handoff to Claude Code" doğru seçim, çünkü diğer beşi görüntüyü taşırken bu bağlantı sistemin kendisini taşıyor. Bir tanesini seçip diğerlerini kapatman gerekmiyor, aynı projeden hepsini sırayla alabiliyorsun. Devir seçeneğinde sana iki yol soruluyor: tasarımı kendi bilgisayarındaki Claude'a mı yoksa tarayıcıdaki Claude Code'a mı göndereceksin. İkisi de aynı bağlantıyı veriyor, fark sadece işi nerede yapacağın. Bağlantının yanında bir de kopyalanabilir metin çıkıyor, onu olduğu gibi yapıştırman yeterli.

⚠️ Uyarı: Tasarım sistemini kurmadan ekran istemeye başlama. Sistem yokken her ekran kendi rengini ve fontunu üretiyor, sonra hepsini elle düzeltmen gerekiyor.

Özetle

• Önce tasarım sistemi çıkar, ekranlar ondan sonra gelir.
• Marka kartını doldurmadan prompt yapıştırma, boş bıraktığın her alanı Claude kendi dolduruyor.
• Mevcut bir siten varsa adresini vermek, markayı kelimelerle tarif etmekten hızlı sonuç veriyor.
• Export menüsü çıktıyı Canva'ya, sunuma, PDF'e ya da Claude'un Kod bölümüne taşıyor.
• Claude Code'a devrederken renk ve fontları dosyadan okumasını açıkça iste.

Tasarım sistemi elinde varsa sıradaki adım onu içeriğe taşımak. Aynı sistemle karosel üretmek için karosel tasarımı rehberine bak, Claude'un Kod bölümünde tasarım işini hızlandıran eklentileri de Claude Code tasarım eklentileri rehberinde anlattım. Tek tek rehber yerine sıralı bir eğitim istiyorsan markasistemleri.com'daki bekleme listesine katılabilirsin.