Claude Design'ı Claude Code içinde kullanma rehberi

Terminalden başla, gerçek tasarım sistemini içeri al, ilk taslağı gör, sohbet ve satır içi yorumlarla düzelt, onayladıktan sonra koda geç. Komutlar, prompt örnekleri ve beta sınırları dahil, adım adım.

Hızlı not: Çoğu tasarım aracı bir ekran görüntüsü üretir ve iş orada biter; kodu yazan kişi o görüntüyü baştan yorumlar. Buradaki fikir farklı: tasarım sistemi, bağlam ve iterasyon sırasında alınan kararlar projeyle birlikte Claude Code'a taşınıyor. Kod aşaması bir resimle değil, gözden geçirilmiş bir yönle başlıyor. Bu yazı o akışı komutlarıyla, prompt örnekleriyle ve sınırlarıyla anlatıyor.

Eski yol neden bu kadar uzun?

Tasarım işinin çoğu hâlâ aynı dolambaçlı yoldan geçiyor: aklındaki fikri bir tasarımcıya ya da kodlama ajanına anlatıyorsun, karşılığında bir ekran görüntüsü geliyor, neyin değişeceğini anlatmak için yeni bir sohbet açıyorsun ve en sonunda başka biri o görüntüyü gerçek bir şeye çevirmek zorunda kalıyor.

Claude Design bu boşluğu kısaltmak için tasarlanmış: bir tarafta sohbet, diğer tarafta çalışan bir tasarım tuvali. Ne istediğini tarif ediyorsun, Claude bir tasarım çıkarıyor, sen de konuşarak, yorum bırakarak ya da tuvale doğrudan dokunarak düzeltiyorsun. Daha büyük fırsat ise bunu Claude Code'a bağlamak. O zaman işe terminalden başlıyorsun, gerçek tasarım sistemini ve kod tabanını içeri alıyorsun ve ekran görüntüsünü teslimatın tamamı saymadan uygulamaya doğru devam ediyorsun.

Claude Design aslında ne?

Claude Design bir görsel üretici değil. Claude'un tek bir sohbetten etkileşimli tasarımlar, prototipler, sunumlar ve başka görsel işler çıkardığı bir çalışma alanı. Konuşma solda akıyor, tasarım sağdaki tuvalde beliriyor.

Statik bir resim isteyip sonra bir şekilde kullanırım diye ummuyorsun. İnceleyebildiğin, değiştirebildiğin ve üzerine inşa edebildiğin bir şey oluşturuyorsun. Anthropic tipik akışı şöyle tarif ediyor:

1. Bir proje oluştur.
2. Kullanmak istediğin tasarım sistemini ekle ya da içeri aktar.
3. Ekran görüntüsü, görsel dosyalar ya da kod tabanı gibi bağlam ekle.
4. Ne yapmak istediğini tarif et.
5. İlk sürümü incele.
6. Sohbet, yorum ya da doğrudan düzenlemeyle iyileştir.
7. Yön netleşince dışa aktar ya da paylaş.

Değer, ilk sürümle birine gerçekten gösterebileceğin sürüm arasındaki döngüde ortaya çıkıyor.

Claude Design'ı Claude Code'a bağla

Claude Design web'de claude.ai/design adresinde ve Claude Desktop'ın kenar çubuğunda duruyor. Pro, Max, Team ve Enterprise planlarında açık. Şu an beta aşamasında. Enterprise planlarında özellik varsayılan olarak kapalı geliyor.

Claude Code içinden çalışmak istiyorsan Claude Design MCP sunucusunu şu komutla ekliyorsun:

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp

Sonra şunu çalıştırıyorsun:

/design-consent

Bu komut Claude Code akışının içinden Claude Design'a giriş yapmanı sağlıyor. Bağlantı kurulduktan sonra Claude Code, işi başlattığın ve yönettiğin yer oluyor. Ayrı bir tasarım aracı açıp bağlamı elle yeniden kurmak zorunda kalmıyorsun.

Gerçek tasarım sistemiyle başla

Boş tuval Claude'a fazla özgürlük veriyor. Şirketinin zaten renkleri, yazı tipleri, bileşenleri ve düzen kalıpları varsa, bir sayfa istemeden önce bunları içeri al. Komut şu:

/design-sync

Bu komut bir GitHub reposundan, tasarım dosyalarından, ham yüklemelerden ya da yerel kod tabanından tasarım sistemi içeri aktarmanı ya da eşitlemeni sağlıyor. Claude bundan sonra zaten kullandığın bileşenler ve kalıplarla çalışıyor. Çıktısını tasarım sistemine göre kontrol edip sen sonucu görmeden önce düzeltme de yapabiliyor.

Bunu şu tarz bir istekle karşılaştır:

Bana modern bir dashboard yap.

Bu cümle en önemli kararları açıkta bırakıyor. Hangi renkler? Hangi yazı ölçeği? Hangi buton kalıbı? Hangi boşluk kuralları? Hangi bileşenler zaten var? Eksiksiz bir tasarım sistemi bu soruların cevabını Claude'a ilk üretimden önce veriyor.

Projenin herhangi bir noktasında başka bağlam da ekleyebiliyorsun:

• Mevcut ürünün bir ekran görüntüsü
• İncelemek istediğin bir rakip sayfası
• Bir wireframe
• Mevcut bir slayt sunumu
• Takip etmek istediğin görsel stili anlatan bir doküman
• Kod tabanın ve mevcut bileşen yapısı

Ne kadar ilgili bağlam verirsen, Claude'un baştan doğru yapabileceği kararları düzeltmekle o kadar az vakit kaybediyorsun.

Nereden başlayacağını bilmiyorsan gerçek örneklere bak

Ne yapacağını biliyorsun ama nasıl görüneceğine karar veremiyorsan, Claude'dan "modern" bir şey isteyip en iyisini ummak yerine gerçek örneklerden başla.

Refero Styles bunun için işe yarayan bir yer: styles.refero.design. İçinde gerçek ürün sitelerinden çıkarılmış, yapay zekanın okuyabildiği 2.000'den fazla tasarım sistemi var. Her stil renk paleti, tipografi, boşluk kuralları, bileşenler ve Claude Code gibi kodlama ajanlarında kullanabileceğin bir DESIGN.md dosyası içerebiliyor. Minimal, temiz SaaS, yoğun sistemler, brutalist tipografi, monokrom, oyuncu, yüksek kontrast gibi yönlere göre arayabiliyorsun.

Bu, "premium görünsün" gibi belirsiz bir talimattan çok daha iyi bir başlangıç. Bir referans seçip Claude'dan projen için önemli kısımları çıkarmasını istiyorsun:

Bu tasarım sistemini incele ve dashboard'um için referans olarak kullan.
Yazı, boşluk, renk ve hiyerarşiyle ilgili temel fikirleri koru ama
ürünüm için özgün bir arayüz oluştur. Hangi tercihleri aynen taşıdığını,
hangilerini değiştirdiğini açıkla.

Amaç bir siteyi kopyalamak değil. Amaç Claude'a üzerinde çalışabileceği bir görsel dil vermek. Örneğin Refero'daki Linear kaydı siyaha yakın bir zemin, kağıt beyazı yazı, tek bir asit yeşili aksiyon rengi, ince kenar çizgileri, sıkı bir boşluk sistemi ve ölçülü bir yazı ölçeği tarif ediyor. Bu detaylar işe yarıyor, çünkü "Linear gibi olsun" cümlesini inceleyebildiğin somut kararlara çeviriyor.

Referansları sistemi anlamak için kullan; ayırt edici bir ürünü izinsiz yeniden üretmek için değil.

Bir design skill ekle ya da kendininkini yaz

Claude Code, GitHub'da duran tasarım skill'lerini de kullanabiliyor. Ön yüz yönü, HTML prototipler, arayüz tutarlılığı, tasarım hafızası ve tasarım sistemi kurallarına odaklanan skill'ler şimdiden var:

• Anthropic'in frontend-design eklentisi: bilinçli görsel yön, tipografi, düzen ve şablon kokan varsayılanlardan kaçınma.
• claude-design-skill: açılış sayfası, prototip, sunum ve wireframe gibi yüksek çözünürlüklü HTML çıktılar.
• interface-design: kaydedilmiş tasarım kararları, tekrar kullanılabilir kalıplar ve oturumlar arası tutarlılık.

Bir skill'i kurmadan önce oku. Kodlama ajanının sahip olduğu bütün izinlerle çalışıyor.

Daha ilginç seçenek kendi skill'ini yazmak. İşe yarayan bir tasarım skill'inin dev olması gerekmiyor. Şunları içerebilir:

• Tekrar etmek istediğin görsel yön
• Renk ve yazı kuralları
• Boşluk, köşe yuvarlaklığı, kenarlık ve yüzey kararları
• Bileşen kalıpları ve kullanım kuralları
• Kaçınılacak görsel varsayılanlar
• Erişilebilirlik ve duyarlı davranış için bir kontrol listesi
• Claude'un tasarıma başlamadan önce sorması gereken sorular

Bu, kişisel zevki Claude Code'un her seferinde aynı şekilde uygulayabildiği bir şeye çeviriyor. Kararları proje dosyası olarak da saklayabilirsin: kod tabanının yanına bir DESIGN.md ya da projeye özel bir tasarım sistemi dosyası koy, sonra Claude'a bir arayüz oluşturmadan ya da değiştirmeden önce onu okumasını söyle.

Bir kararı ilk kez vermek birkaç dakika alıyor. Sonrasında her yeni oturumda ajanla aynı tartışmayı yapmayı bırakıyorsun.

Araya bir değerlendirme ve onay döngüsü koy

Claude'un belirsiz bir brief'ten doğrudan bitmiş arayüze atlamasına izin verme. Fikirle inşa arasına bir inceleme noktası koy. Önce Claude'dan şunları iste:

1. Hedef kitleyi ve ekranın tek görevini kendi cümleleriyle tekrar etsin.
2. Yazı, renk, boşluk ve düzen dahil görsel yönü önersin.
3. Tasarıma kişilik verecek tek ayırt edici tercihi açıklasın.
4. Kaba bir yön ya da wireframe göstersin.
5. Dursun ve onayını beklesin.

Yönü onayladıktan sonra Claude tam tasarımı kurmalı. Sonucu da kısa bir kontrol listesine göre değerlendir:

• Hiyerarşi ana aksiyonu belli ediyor mu?
• Görsel yön ürüne ve hedef kitleye uyuyor mu?
• Yazı boyutları, renkler ve boşluklar tutarlı mı?
• Tasarım hedef ekran boyutlarında çalışıyor mu?
• Biri bunu klavyeyle kullanabiliyor mu?
• Odak durumları, kontrast, boş durumlar ve hata durumları düşünülmüş mü?
• Arayüzde dolgu metin yerine gerçek içerik var mı?
• Herhangi bir parça jenerik bir yapay zeka varsayılanına benziyor mu?

Claude'dan tasarımı bu listeye göre eleştirmesini iste. Sonra değişiklikleri yap, yeniden üret ve yeni sürümü incele. Onay döngüsü şu kadar basit olabilir:

İnşa etmeden önce tasarım yönünü öner ve onayımı bekle. Onayladıktan sonra
ilk sürümü oluştur. Sonra aşağıdaki kontrol listesine göre incele, nelerin
geçmediğini göster ve son değişiklikleri yapmadan önce yine onayımı bekle.

Bu sana iki kontrol noktası veriyor. Ajan yanlış şeyi parlatmaya vakit harcamadan önce yönü onaylıyorsun. Kodun temeli olmadan önce sonucu onaylıyorsun. Birden fazla kişi işin içindeyse bu özellikle işe yarıyor: neyin önerildiği, neyin değiştiği ve neyin kabul edildiği sohbette kayıtlı kalıyor.

İlk prompt'u dört parça üzerine kur

İşe yarar bir Claude Design prompt'u yazmak için tasarımcı olman gerekmiyor. Ne yaptığını açık söylemen gerekiyor. Güçlü bir ilk prompt dört şeyi kapsıyor:

Örneğin şu prompt Claude'a bir amaç ve ana içeriği veriyor:

Bölge ve ürün grubuna göre filtrelenebilen, aylık geliri gösteren bir dashboard oluştur.

Düzeni ve hedef kitleyi ekleyince çok daha işe yarar oluyor:

Finans ekibi için aylık gelir, yeni müşteri ve churn gösteren bir masaüstü
dashboard'u oluştur. Üç ana metriği en üste yan yana koy, altına gelir grafiğini
yerleştir, bölge ve ürün grubu filtrelerini sağ üste al. Mevcut dashboard
bileşenlerimizi kullan ve hiyerarşiyi haftalık incelemede hızla taranabilecek
şekilde kur.

İkinci prompt Claude'a işe yarar kararlar almak için yeterli yön veriyor. Aynı yapıyı başka projelerde de kullanabilirsin:

Yeni kullanıcıları temel özelliklerimizden geçiren dört ekranlı bir mobil
onboarding akışı tasarla.

API ürünümüz için hero bölümü, kod örnekleri ve fiyatlandırma içeren bir
açılış sayfası kur.

Kategoriye göre koşullu sorular içeren bir müşteri geri bildirim formu oluştur.

Operasyon ekibimizin içerik gönderimlerini inceleyip onaylayacağı bir iç araç
tasarla.

Tasarımın mobil, tablet ve masaüstünde çalışması gerekiyorsa bunu da ilk prompt'ta belirt. Duyarlılığı düzen oturmadan önce düşünmek, her ekran tek bir görünüm alanına göre kurulduktan sonra düşünmekten çok daha ucuz.

İlk tasarım bir başlangıç noktası

Claude Design'ı yalnızca ilk sürüme bakarak değerlendirme. İlk sürüm sana tepki verebileceğin somut bir şey veriyor. Bu işe yarıyor, çünkü tasarım geri bildiriminin çoğu gerçek bir öğeye işaret edip "şu değişsin" diyebildiğinde kolaylaşıyor.

Geniş değişiklikleri sohbette isteyebilirsin:

• Renk şemasını daha koyu ve daha minimal yap.
• Ana metrikleri üst satıra taşı, grafiği altına koy.
• Sağ tarafa bir ayarlar paneli ekle.
• Bu sayfa için iki alternatif düzen göster.

Sohbet ayrıca Claude'dan bir tasarım kararını açıklamasını ya da tasarımı erişilebilirlik, kontrast, bilgi hiyerarşisi ve genel kullanılabilirlik açısından incelemesini istemek için de doğru yer.

İlk sürümü bir soru üreticisi gibi kullanınca değeri artıyor. Neyin eksik olduğunu, hangi bölümün fazla yük taşıdığını ve hangi etkileşimin ürünü ilk kez kullanan birini şaşırtabileceğini görüyorsun.

Sohbet, satır içi yorum, tuval: hangisi ne zaman?

Satır içi yorumlar bileşen düzeyindeki geri bildirim için. Tuvalde değiştirmek istediğin parçaya tıklıyorsun ve hedefli bir istek bırakıyorsun:

• Bu butonun iç boşluğunu büyüt.
• Bunu radyo butonları yerine açılır menüye çevir.
• Burada ana marka rengini kullan.
• Bu bölümü daraltılabilir yap.

Sorunun nerede olduğunu anlatmak zorunda kalmıyorsun. Parmağınla gösteriyorsun. Kural basit:

Karar vermeden önce varyasyon iste

İlk yönü sırf var diye seçmek zorunda değilsin. Emin değilsen Claude'dan iki ya da üç alternatif iste. Bu farklı sayfa yapıları, aynı bilgiyi sunmanın farklı yolları ya da ilk ekrana farklı yaklaşımlar olabilir. Gerçek alternatifleri karşılaştırmak, mükemmel yönü tek prompt'ta bulmaya çalışmaktan çoğu zaman daha hızlı.

Tamamen farklı bir şey denemeden önce mevcut sürümü kaydedebilirsin. Claude'a şunu söyle:

Elimizdekini kaydet ve tamamen farklı bir yaklaşım dene.

Claude mevcut projeyi kaydediyor ve önceki sürümün nerede durduğunu teyit ediyor. Bu sana her deneyi kalıcı bir karara çevirmeden keşfetme alanı açıyor. Mevcut yönün kaydedildiğini biliyorsan, zayıf bir ilk sürümü kaybetme korkusuyla korumak yerine daha büyük bir değişiklik yapabiliyorsun.

Tasarımdan sonraki adıma geç

Tasarım hazır olunca sağ üst köşedeki Export butonunu kullanıyorsun. Seçenekler şunlar:

• Zip dosyası olarak indir
• PDF olarak dışa aktar
• PPTX olarak dışa aktar
• Canva'ya gönder
• Bağımsız HTML olarak dışa aktar
• Adobe, Base44, Gamma, Lovable, Miro, Replit, Vercel ve Wix gibi araçlara gönder
• Claude Code'a devret
• Yerel bir kodlama ajanına gönder
• Claude Code Web'e gönder

Projeyi yalnızca görüntüleme, yorum ya da düzenleme yetkisiyle paylaşabiliyorsun. Doğru çıktı, sonraki adıma bağlı:

Claude Code'a devrettiğinde tasarım, mesajın içinde yalnız bir resme dönüşmüyor. Proje tasarım sistemini, ilgili bağlamı ve iterasyon sırasında alınan kararları da taşıyor; kod aşaması gözden geçirilmiş bir yönle başlıyor.

Pratikte ne değişiyor?

Eski iş akışı çoğunlukla şöyle görünüyor:

Claude Design bunu daha bağlantılı bir döngüye sıkıştırıyor. Amacı tarif ediyorsun. Çalışan bir yön görüyorsun. Yönü gözünün önündeyken ayarlıyorsun. Hazır olunca sonucu bir sonraki araca taşıyorsun.

Bu, tasarım muhakemesine olan ihtiyacı ortadan kaldırmıyor ve üretilen her ekranın iyi olacağını garanti etmiyor. Belirsiz bir fikirden inceleyebildiğin, tartışabildiğin ve iyileştirebildiğin bir şeye daha hızlı ulaşmanı sağlıyor. Ürünün ne olacağına hâlâ sen karar veriyorsun; Claude sana o kararın daha kolay görüldüğü bir tuval veriyor.

Beta sınırlarını bilmeden güvenme

Claude Design'ın ayrı bir kullanım hakkı yok; Claude, Claude Code ve Cowork ile aynı limit havuzunu paylaşıyor. Karmaşık projeler, büyük kod tabanları ve tekrarlanan iterasyonlar bu ortak havuzdan daha fazla harcıyor. Limite ulaşırsan, kullanım kredilerini açmadıysan limit sıfırlanana kadar Design kullanılamıyor.

Betanın pratik sınırları da var:

• Satır içi yorumlar sayfada her zaman güvenilir şekilde görünmüyor.
• Çok büyük kod tabanları gecikmeye ya da tarayıcı sorunlarına yol açabiliyor.
• Sohbette "upstream error" hatası çıkarsa aynı projede yeni bir sohbet sekmesi açmak gerekebiliyor.
• Birden fazla kişinin aynı projeyi aynı anda düzenlemesi güvenilir çalışmayabiliyor.
• Tasarım sistemi içeri aktarımı, verdiğin dosyalar kadar iyi.
• Claude Design web ve masaüstünde var; Claude'un çalıştığı her yerde değil.

Bunlar aracı görmezden gelmek için sebep değil. Aracı doğru iş için kullanmak için sebep. Beş kural: küçük bir projeyle başla, elinde varsa eksiksiz bir tasarım sistemi kullan, Claude'un gerçekten hangi bağlamı içeri aldığına göz kulak ol, büyük deneylerden önce sürümleri kaydet, ilk sonucu taslak say.

Tek ekranla başla

Claude Design'ı denemek için bütün ürünü planlaman gerekmiyor. Mevcut sürecin yavaş ya da belirsiz olduğu tek bir ekran seç. Sonra sırayla:

1. Claude Design MCP sunucusunu bağla.
2. /design-consent ile giriş yap.
3. Mevcut bir tasarım sistemin varsa /design-sync çalıştır.
4. Claude'a tek ve net bir iş ver.

Örneğin:

Haftalık operasyon incelemesi için bir masaüstü dashboard'u oluştur. İlk
görünümde gelir, açık görevler ve müşteri sorunlarını göster. Mevcut
bileşenlerimizi kullan ve sayfa bir dakikadan kısa sürede taranabilsin.

Çıkanı incele. Sohbette tek bir yapısal değişiklik iste. Tek bir hedefli satır içi yorum bırak. Tek bir alternatif yön dene. Sonra sonucun paylaşmaya mı yoksa devretmeye mi hazır olduğuna karar ver. İlk yönü koda dönüşmeden önce incelemek, bu akışın bütün noktası.

Tasarımı, inşaya karar vermeden önce görünür yapabiliyorsun. Asıl değişiklik bu.