Claude Design, Anthropic’in yapay zeka asistanı Claude içinde yer alan; hazır bir şablon veya kendi promptunuzla web sitesi tasarımı oluşturmanızı, bu tasarımı canlı önizlemede doğrudan düzenlemenizi ve ardından kodlanabilir bir projeye (Claude Code’a) aktarmanızı sağlayan bir tasarım aracıdır. 2.0 sürümüyle gelen en büyük yenilik, tasarım üzerinde doğrudan düzenleme yapmanızı sağlayan “Edit” modu sayesinde token tüketimini azaltmasıdır. Bu rehberde aracı nasıl kullanacağınızı ve tasarımı koda nasıl aktaracağınızı adım adım anlatıyoruz.
Önemli not: Bu videonun çekildiği tarih itibarıyla Claude Design özelliği yalnızca ABD’de kullanılabiliyordu; Türkiye dahil diğer birçok ülkede erişim henüz kısıtlıydı. Bu durum zamanla değişebilir; güncel erişim durumunu Anthropic’in resmi duyurularından kontrol etmenizi öneririz.
Claude Design Nedir, Ne İşe Yarar?
Claude Design, “vibe coding” akımının bir parçası olarak, kod yazmadan görsel bir web sitesi taslağı oluşturmanızı ve bu taslağı gerçek, çalışan bir koda dönüştürmenizi sağlayan bir araçtır. Klasik akış şöyle işler: önce görsel bir tasarım oluşturursunuz, tasarımı beğendiğinizde bunu Claude Code’a aktarırsınız, Claude Code da bu tasarımı HTML/CSS/JavaScript veya tercih ettiğiniz teknolojiyle gerçek bir web sitesine dönüştürür.
“Vibe Coding” Nedir?
Vibe coding, yazılım geliştirmenin geleneksel “satır satır kod yazma” yaklaşımı yerine, ne istediğinizi doğal dille (Türkçe veya İngilizce) tarif ederek yapay zekaya kodlatma yaklaşımını tanımlayan bir terimdir. Kullanıcı, hedeflediği sonucu (“mor tonlarında, tek sayfalık, randevu butonlu bir psikolog sitesi” gibi) anlatır; yapay zeka aracı bu tarifi koda dönüştürür ve kullanıcı ortaya çıkan sonucu görüp geri bildirimle (“bu rozeti kaldır”, “bu rengi koyulaştır” gibi) süreci adım adım yönlendirir. Claude Design ve Claude Code birlikte, tam olarak bu vibe coding akışının bir örneğidir: tasarım tarafını Claude Design, kodlama tarafını Claude Code üstlenir.
Claude Design’a Nasıl Başlanır?
- Karşılama ekranında hazır şablonlardan (wireframe tarzı taslaklar) birini seçebilir veya boş bir sayfadan başlayabilirsiniz.
- Tasarım sistemi seçin: Kendi markanıza ait bir tasarım sisteminiz varsa GitHub bağlantısı veya Figma dosyanızla oluşturabilir, yoksa varsayılan tasarım sistemiyle devam edebilirsiniz.
- Model seçimi yapın: Farklı Claude modelleri arasından (örneğin daha güçlü bir model veya daha hızlı bir model) ihtiyacınıza uygun olanı seçersiniz.
- Tasarlamak istediğiniz sitenin detaylarını içeren bir prompt yazın veya hazırlattırın (marka rengi, sayfa yapısı, ton, bölümler gibi detayları ne kadar netleştirirseniz sonuç o kadar isabetli olur).
- Promptu gönderin; Claude Design birkaç soru sorabilir veya doğrudan tasarımı oluşturmaya başlayabilir.
2.0 Sürümüyle Gelen Yenilikler
Markup (Alan Seçme) Özelliği
Bu özellik, tasarımdaki belirli bir alanı (bir metin bloğu, bir bölüm, bir rozet) fare ile seçip yalnızca o alan için bir değişiklik istemenizi sağlar. Örneğin bir “10 yıl deneyim” rozetini seçip “bunu kaldır” dediğinizde, Claude Design yalnızca o öğeyi kaldırır, tasarımın geri kalanına dokunmaz. Bu, “şu sayfanın tamamını yeniden düzenle” gibi geniş kapsamlı ve belirsiz isteklere kıyasla hem çok daha isabetli sonuç verir hem de gereksiz yeniden üretim nedeniyle harcanacak fazladan token miktarını azaltır.
Canlı Edit Modu ve Token Tasarrufu
2.0’daki en önemli yenilik budur: “Edit” moduna geçtiğinizde, bir metni, rengi, fontu veya butonu Claude’a tekrar yazarak anlatmak yerine doğrudan tıklayıp kendiniz değiştirebilirsiniz — tıpkı Figma, Elementor veya WordPress düzenleyicisinde olduğu gibi. Önceki sürümde küçük bir metin değişikliği için bile bir istek (prompt) yazmanız ve bunun işlenmesini beklemeniz gerekiyordu; bu da token tüketiyordu. Artık basit metin/renk/font değişikliklerini elle yaparak bu token maliyetinden tasarruf edebilirsiniz.
Dışa Aktarma Seçenekleri
Tamamlanan bir tasarımı; PDF, video, PowerPoint, ZIP arşivi veya standart bir HTML dosyası olarak dışa aktarabilir, farklı ekiplerle veya araçlarla (Figma, Canva, farklı kod editörleri) paylaşabilirsiniz.
Tasarımı Claude Code’a Nasıl Aktarırsınız?
Tasarımınızı onayladıktan sonra kodlama aşamasına geçmek için iki yöntem sunulur:
| Yöntem | Nasıl Çalışır | Notlar |
|---|---|---|
| Doğrudan gönderim (MCP entegrasyonu) | “Send to” seçeneğinden Claude Code’u seçip verilen promptu doğrudan kod editörünüze (örneğin VS Code) yapıştırırsınız | Kullanıcı geri bildirimlerine göre bazen tam kararlı çalışmayabiliyor |
| ZIP indirme | Tasarımı ZIP olarak indirip bir klasöre çıkarır, bu klasörü Claude Code ile açıp verilen promptu iletirsiniz | Daha tutarlı ve güvenilir sonuç verdiği bildiriliyor; ZIP içinde bir README dosyası ve tüm tasarım varlıkları (görseller, asset’ler) yer alır |
Claude Code, ZIP içindeki README dosyasını ve tasarım varlıklarını okuyarak, gördüğünüz tasarımın birebir aynısını gerçek, çalışan bir koda dönüştürmeye başlar. Bu süreç sırasında hangi teknolojiyi kullanacağını (basit bir site için genellikle HTML/CSS/JavaScript yeterlidir), görselleri nereden alacağını ve dosyaları hangi klasöre kaydedeceğini size sorabilir; bu sorulara verdiğiniz net cevaplar, sürecin sorunsuz ilerlemesini sağlar.
İyi Bir Prompt Nasıl Yazılır? 5 İpucu
- Renk paletinizi net belirtin. “Mor tonları” gibi genel bir ifade yerine, marka renklerinizin tam adlarını veya hex kodlarını vermek daha tutarlı sonuç verir.
- Referans site veya görsel ekleyin. Beğendiğiniz bir sitenin linkini veya kendi mevcut görsellerinizi (logo, fotoğraflar) yükleyerek aracın sizin markanıza yakın bir sonuç üretmesini sağlayabilirsiniz.
- Sayfa yapısını önceden planlayın. Hangi bölümlerin (hero, hakkımızda, hizmetler, iletişim) olacağını, tek sayfa mı çok sayfa mı olacağını baştan belirtmek, birden fazla düzeltme turu yapmanızı önler.
- Tonu ve amacı belirtin. “İletişim ve buton odaklı”, “minimalist”, “profesyonel ve sakin” gibi ton tanımları, aracın stil kararlarını yönlendirir.
- İlk sonucu nihai ürün olarak görmeyin. İlk taslak genellikle kaba bir başlangıç noktasıdır; Markup ve Edit özellikleriyle küçük düzeltmeler yaparak sonucu cilalamanız beklenir.
Kimler İçin Uygun?
Claude Design; hızlı bir taslak veya prototip görmek isteyen, tasarım araçlarıyla (Figma vb.) uğraşmadan bir fikri hızlıca görselleştirmek isteyen kullanıcılar için değerlidir. Ancak unutulmaması gereken nokta şu: üretilen ilk tasarım genellikle “iyi bir başlangıç noktası”dır, nihai ürün değildir. Detaylı, markanıza tam oturan bir tasarım için promptu ne kadar netleştirirseniz (renk paleti, ton, bölüm yapısı, referans siteler) sonuç o kadar isabetli olur; aksi halde birkaç tur düzeltme yapmanız, hatta bazı bölümleri sıfırdan yeniden istemeniz gerekebilir.
Sık Sorulan Sorular
Claude Design ücretsiz mi?
Claude Design, Claude.ai hesabınızın bir parçası olarak sunulur ve kullanımı, sahip olduğunuz plana bağlı token/kullanım limitlerine tabidir. Güncel fiyatlandırma ve limitler için Anthropic’in resmi web sitesini kontrol etmenizi öneririz.
Claude Design Türkiye’den kullanılabiliyor mu?
Videonun çekildiği tarih itibarıyla özellik yalnızca ABD’de kullanılabiliyordu; Türkiye’den erişim kısıtlıydı. Bu tür yapay zeka özellikleri hızlı güncellendiği için erişim bölgesini Anthropic’in güncel duyurularından kontrol etmenizi öneririz.
Kendi Figma tasarımımı Claude Design’a aktarabilir miyim?
Evet, tasarım sistemi oluştururken bir Figma dosyası bağlantısı vererek kendi tasarım sisteminizi temel alan bir çalışma alanı oluşturabilirsiniz.
ZIP yöntemi mi, doğrudan gönderim mi daha güvenilir?
Kullanıcı deneyimlerine göre ZIP indirip Claude Code’a manuel olarak yükleme yöntemi, doğrudan gönderim (MCP) yöntemine kıyasla şu an için daha tutarlı sonuçlar veriyor.
Kod bilmeden bu süreci tamamlayabilir miyim?
Evet, tasarım aşaması tamamen görsel ve promptlarla yönetilir; kod yazma kısmını Claude Code üstlenir. Ancak ortaya çıkan sonucu değerlendirebilmek ve doğru yönlendirmeler yapabilmek için temel bir teknik anlayışa sahip olmak süreci kolaylaştırır.
Claude Design ile oluşturulan bir tasarım doğrudan WordPress’e mi dönüşür?
Hayır, doğrudan değil. Claude Design ve Claude Code, HTML/CSS/JavaScript gibi statik veya özel kodlu bir site üretir. Bunu bir WordPress temasına veya Elementor sayfasına dönüştürmek ayrı bir teknik adımdır; bu noktada profesyonel destek almak zaman kazandırır.
Vibe Coding ile Web Sitenizi Profesyonelce Hayata Geçirmek İster misiniz?
Claude Design ve Claude Code gibi araçlar hızlı prototipleme için güçlü imkanlar sunar, ancak markanıza tam oturan, SEO uyumlu ve teknik olarak sağlam bir sonuç için deneyim gerekir. Vibe Coding yaklaşımını da kapsayan web tasarımı ve yazılım hizmetlerimiz hakkında bilgi almak isterseniz hizmetlerimize göz atabilir ya da doğrudan WhatsApp’tan ulaşabilirsiniz. Siz sadece anlatın, gerisini biz hallederiz.
