Claude Design Nedir? Fiyatlandırma, 7 Oluşturma Yöntemi ve İstem Örnekleri ile Kapsamlı Rehber [2026 Güncel]

18 Haziran 2026'da Claude Design büyük bir güncelleme aldı.

Özellikler arttı ve arayüz değişti.

Ben de kendim kullanırken kontrol ettim, bu yüzden ekranda sırayla nereye tıklanması gerektiğini yazacağım.

Bu makale, "birlikte kullanarak öğrenmek" isteyenler içindir.

Lütfen bunu [claude.ai/design](//claude.ai/design) sayfasını açarken okuyun.

Ücretsiz Kullanabilir miyim?

Hayır, kullanamazsınız.

Claude Design yalnızca ücretli planlara özeldir.

Pro planınız ($20/ay) varsa kullanabilirsiniz. Ek ücret gerekmez.

Claude Design Nedir?

Sadece kabaca talimatlar vererek slaytlar, açılış sayfaları, uygulama prototipleri, teklifler ve daha fazlasını oluşturmanıza olanak tanıyan bir AI aracıdır.

Anthropic tarafından 17 Nisan 2026'da yayınlandı. Bu güncelleme işlevselliğini önemli ölçüde artırdı.

Çıktı "Canlı HTML"dir. Statik bir görüntü değildir; tıklanabilir, hareketli bir tasarım oluşturur.

Ekran Nasıl Okunur

[claude.ai/design](//claude.ai/design) sayfasını açtığınızda bu ekran görüntülenir.

Üst Sekmeler

"Yeni Bir Şey Yap" Alanı

Burada oluşturmak istediğiniz şeyin türünü seçin. Yedi kart sıralanmıştır.

"Tasarımlar" altında geçmiş tasarımlarınız listelenir.

Claude Takip Soruları Sorduğunda (Tüm Kartlarda Ortak)

Bir kart seçip bir komut gönderdikten sonra, Claude bilgi eksikliği olduğunu belirlerse ekranın sağ tarafında ek sorular görüntüleyebilir.

Soruların içeriği komuta göre değişir.

Zorunlu ve isteğe bağlı öğeler vardır.

Öğeleri yanıtlayın ve oluşturmaya başlamak için "Devam Et"e basın.

Slaytlar (Sunum Materyalleri) Nasıl Oluşturulur

Seminer materyalleri, brifing slaytları ve sunum dosyaları buradan oluşturulur.

Adım 1. Ana Ekranda "Slaytlar"a Tıklayın

"Sunumlar ve sunum dosyaları" yazan karta tıklayın.

Adım 2. Oluşturmak İstediğiniz Slaytların İçeriğini Girin

Tıkladığınızda bu ekrana gelirsiniz.

Sol kenar çubuğunda "Sunum ne hakkında?" yazısı görüntülenir.

Üç giriş yöntemi arasından seçim yapabilirsiniz:

• Belge yükle: Word veya PDF gibi mevcut belgelerden slaytlar oluşturun.
• Notlarınızı yapıştırın: Notları veya metni yapıştırın ve yapılandırılmasını sağlayın.
• Mevcut sunum: Mevcut bir slayt gösterisini temel alarak yeniden oluşturun.

Hiçbir şey eklemezseniz, aşağıdaki metin alanına içeriği girin ve Gönder'e basın.

Komut Örnekleri

1Lütfen bir AI danışmanlık hizmeti için tanıtım slaydı oluşturun.
2Hedef kitle: Bilgisayarlarla arası iyi olmayan şahıs şirketleri ve serbest çalışanlar
3Süre: 20 dakikalık bir seminer için
4Yapı: Mevcut sorunlar → AI ile neler çözülebilir → Hizmet detayları → Ücretler → Nasıl başvurulur
5Atmosfer: Dost canlısı, teknik jargon yok
6Görünüm: Basit ve okunması kolay, beyaz arka plan

1Lütfen bir kendini tanıtma slaydı oluşturun.
2Eski SE, şu anda AI kullanımını öğretiyor
3Başarılar: Claude Code ile operasyonları otomatikleştirdi, aylık 300.000 yen'lik bir sistem kurdu
4Hedef kitle: AI'da yeni olan şahıs şirketleri
5Slayt sayısı: 5-7, bol beyaz alanla kolay görünür

1Lütfen Claude Code'un nasıl kullanılacağına dair bir tanıtım slaydı oluşturun.
2Hedef kitle: Hiç kod yazmamış yeni başlayanlar
3Süre: 10 dakika
4İçerik: Claude Code nedir → Kurulum adımları → İlk komut → Sık karşılaşılan hatalar ve çözümleri
5Ton: Kibar, nazik ve korkutucu değil

Sunum seçenekleri (İsteğe bağlı)

• Google Slaytlar için optimize et: Yalnızca Google Fonts'u kullanır (Google Slaytlar'da açarken kullanışlıdır).
• Konuşmacı notları ekle: Her slayda otomatik olarak konuşma notları ekler.

Adım 3. Oluşturulmasını Bekleyin

Birkaç dakika sürer. İlerlemeyi sol panelden kontrol edebilirsiniz.

Bittiğinde şöyle görünür.

Adım 4. Sağ Üst Köşedeki Düğmelerle Ayarlayın

Oluşturma tamamlandığında sağ üst köşede düğmeler belirir.

"İyileştirmeler" en çok kullanılanıdır. Sohbet eder gibi "İlk slayttaki başlığı büyüt" gibi bir şey yazmanız yeterlidir, sizin için düzeltecektir.

Dikkat Edilmesi Gereken Noktalar

Önce slaytların görsel stiline karar verin.

Yarı yolda "tüm renkleri değiştir" derseniz tutarlılık bozulma eğilimindedir.

Genel çerçeveye karar verip ardından ayrıntıları düzeltmek daha hızlıdır.

Ürün Prototipleri (Hareketli Prototipler) Nasıl Oluşturulur

Uygulama ekranları, hizmet rezervasyon akışları ve web hizmeti maketleri oluşturabilirsiniz.

Bittiğinde, gerçekten tıklayıp çalıştırabileceğiniz bir durumda olacaktır.

Adım 1. Ana Ekranda "Ürün prototipi"ne Tıklayın

"Etkileşimli uygulama maketleri" yazan karta tıklayın.

Adım 2. Oluşturmak İstediğiniz Uygulama Ekranının İçeriğini Girin

Tıkladığınızda bu ekrana gelirsiniz.

Slaytlarda olduğu gibi, metin alanına içeriği girin ve Gönder'e basın.

Prototiplerin doğruluğu ne kadar ayrıntılı yazarsanız o kadar artar. Aşağıdakileri dahil etmek kaliteyi artıracaktır:

• Ne tür bir uygulama: Rezervasyon sistemi, görev yönetimi, ödeme ekranı vb.
• Ekran sayısı: Kaç ekran.
• Her ekranın içeriği: Neler görüntüleniyor.
• İşlem akışı: Bir sonraki adıma geçmek için nereye basılmalı.
• Cihaz boyutu: Akıllı telefon (390×844px) veya PC için.
• Renk/Stil: Koyu tema, parlak renk şeması vb.

Komut Örnekleri

1Lütfen bir güzellik salonu rezervasyon uygulaması için prototip oluşturun.
2Akıllı telefon ekranında (390×844px).
34 ekran:
41. Ana Sayfa: Salon adı, menü listesi (Kesim/Renk/Bakım)
52. Menü seçimi: Devam etmek için seçin
63. Tarih/Saat seçimi: Takvim ve zaman aralıkları
74. Onay/Tamamlama: Rezervasyon detayları ve "Rezerve Et" butonu
8Stil: Beyaz arka plan, pembe vurgular, yuvarlak tasarım
9"Rezerve Et" butonuna dokunulduğunda, "Rezervasyon Tamamlandı!" ekranına geçiş yapın.

Adım 3. Oluşturulmasını Bekleyin

Birkaç dakika sürer. Bittiğinde şöyle görünür.

Tıklayarak gerçekten çalıştırabileceğiniz bir durumdadır. "Rezerve Et" butonuna basmak bir sonraki ekrana geçer.

Adım 4. Sağ Üst Köşedeki Düğmelerle Ayarlayın

Oluşturma tamamlandığında sağ üst köşede düğmeler belirir.

"İyileştirmeler" en çok kullanılanıdır. Sohbet eder gibi "Arka plan rengini beyaz yap" veya "Yazı tipini büyüt" gibi bir şey yazmanız yeterlidir, sizin için düzeltecektir.

Animasyon Eklemek İstiyorsanız

Claude Design varsayılan olarak animasyon eklemez.

Hareket eklemek istiyorsanız, açıkça belirtin.

1Fareyle üzerine gelindiğinde butonu 1.05x büyütün, 200ms geçişle.
2Sayfa yüklendiğinde kartları soldurarak açın ve yukarı kaydırın, 150ms aralıklarla sırayla görüntüleyin.

Ürün Tel Çerçeveleri (İskelet Tasarımı) Nasıl Oluşturulur

Önce "ekran yapısına" karar vermek istediğinizde bunu kullanın.

Ayrıntılı bir tasarım değil, yalnızca düzenin iskeletini oluşturur.

"Kullanıcı bu sırayla ilerler" akışını onaylamak için uygundur.

Adım 1. Ana Ekranda "Ürün tel çerçevesi"ne Tıklayın

"Düşük çözünürlüklü ekranlar ve akışlar" yazan karta tıklayın.

### Adım 2. Oluşturmak İstediğiniz Ekranın Yapısını Girin

Tıkladığınızda bu ekrana gelirsiniz.

Metin alanına içeriği girin ve Gönder'e basın. Referans olarak kullanmak istediğiniz bir ekran varsa, "Ekran görüntüsü ekle" ile eklemek doğruluğu artıracaktır.

Komut Örnekleri

1Lütfen bir danışmanlık hizmeti başvuru akışı için tel çerçeve oluşturun.
2Adımlar: Ana Sayfa → Hizmet açıklaması → Ücretler → Başvuru formu → Tamamlama
3Her ekrana ne yerleştireceğimi görebilmem yeterli. Ayrıntılı tasarım gerekmez.

1Lütfen bir seminer başvuru açılış sayfası için tel çerçeve oluşturun.
2Bölümler: Kahraman bölümü → Konuşmacı tanıtımı → İçerik → Katılım ücreti → Başvuru formu
3Akıllı telefon görünümünde.

Adım 3. Oluşturulmasını Bekleyin

Bittiğinde şöyle görünür.

Ekran iskeleti gri kutularla görüntülenir. "Buton burada" ve "görsel burada" gibi yerleşimleri onaylamak için kullanın. Ayrıntılı tasarımlar Ürün prototipi veya Belge ile yapılır.

Adım 4. Sağ Üst Köşedeki Düğmelerle Ayarlayın

Oluşturma tamamlandığında sağ üst köşede düğmeler belirir.

"İyileştirmeler"de "3. ekrana ücret gösterimi ekle" gibi bir talimat vermek ek düzeltmeler yapacaktır.

Belgeler (Açılış Sayfaları, Teklifler, Belgeler) Nasıl Oluşturulur

Açılış sayfaları, teklifler, raporlar ve özgeçmişler buradan oluşturulur.

7 kart türü arasında en çok yönlü olanıdır.

Adım 1. Ana Ekranda "Belge"ye Tıklayın

"Özgeçmişler, PDF'ler vb." yazan karta tıklayın.

### Adım 2. Oluşturmak İstediğiniz İçeriği Girin

Tıkladığınızda bu ekrana gelirsiniz.

Belge kartına özel bir özellik "Konuşarak anlat"tır.

Düşüncelerinizi konuşuyormuş gibi girerseniz, yapıyı olduğu gibi okuyacaktır.

Bir PDF'niz veya materyaliniz varsa, "PDF veya not yükle" ile yükleyebilirsiniz.

Komut Örnekleri

1Lütfen bireyler için bir AI danışmanlık hizmeti açılış sayfası oluşturun.
2Amaç: LINE kayıtlarını artırmak
3Yapı:
4- Kahraman bölümü: Slogan + Kayıt butonu
5- Bu sorunlara sahip misiniz? (3 madde)
6- Hizmetle neler çözülebilir (3 madde)
7- Ücretler
8- SSS (3 madde)
9- Son CTA: LINE kayıt butonu
10Hedef kitle: Bilgisayarlarla arası iyi olmayan şahıs şirketleri, 50'li yaşlardaki kadınlar
11Stil: Basit ve sıcak, beyaz + mercan vurguları

1Lütfen şirketler için bir danışmanlık hizmeti teklifi oluşturun.
2Yapı: Mevcut sorunlar → Teklif içeriği → Beklenen etkiler → Ücretler → Uygulama adımları → Bir sonraki toplantı hakkında
3Stil: Basit ve güvenilir, lacivert x beyaz

1Lütfen bir serbest çalışan olarak kendini tanıtma materyali (portföy) oluşturun.
2Dahil edilecek içerik: Profil, beceriler, başarılar, ücretler, iletişim bilgileri
3Stil: Tek renk + 1 vurgu rengi, modern ve temiz

Adım 3. Oluşturulmasını Bekleyin

Birkaç dakika sürer. Bittiğinde şöyle görünür.

Kaydırarak gerisini kontrol edebilirsiniz. Bir açılış sayfası için ücretler, SSS ve altbilgi dahil her şey oluşturulacaktır.

Adım 4. Sağ Üst Köşedeki Düğmelerle Ayarlayın

Oluşturma tamamlandığında sağ üst köşede düğmeler belirir.

"İyileştirmeler"de açılış sayfasının ifadelerini veya renklerini belirterek, anında düzeltecektir.

Animasyonlar Nasıl Oluşturulur

Animasyonlu banner'lar ve hareketli grafikler oluşturabilirsiniz.

Adım 1. Ana Ekranda "Animasyon"a Tıklayın

"Hareketli grafikler ve döngüler" yazan karta tıklayın.

Adım 2. Oluşturmak İstediğiniz Animasyonun İçeriğini Girin

Tıkladığınızda bu ekrana gelirsiniz.

Bir storyboard'unuz veya görselleriniz varsa, "Bir storyboard veya görsel bırakın" ile yükleyebilirsiniz.

Bir senaryonuz (metin) varsa, "Bir senaryo yapıştırın" ile de yapıştırabilirsiniz.

Komut Örnekleri

1Lütfen hizmet tanıtımı için animasyonlu bir banner oluşturun.
2İçerik: "AI x Sistemleştirme" metni soldurarak açılır → Hizmet adı aşağıdan belirir → CTA butonu yanıp söner
3Arka plan: Koyu, mercan vurgulu çizgiler
4Boyut: 1200×630px
5Döngülü oynatma

1Lütfen animasyonlu bir sayı sayacı oluşturun.
2"3.000 kişi kaydoldu" metniyle birlikte, 2 saniyede 0'dan 3.000'e kadar sayın.
3Sayfa görüntülendiğinde başlasın.

Bittiğinde şöyle görünür.

Adım 3. Sağ Üst Köşedeki Düğmelerle Ayarlayın

Oluşturma tamamlandığında sağ üst köşede düğmeler belirir.

Diğer kartlardan farklı olarak "Düzenle" düğmesi yoktur. Animasyonlar kod (CSS/JavaScript) üzerinde çalıştığından, öğeleri doğrudan tıklayarak düzenleyemezsiniz. Düzeltmeler yalnızca "İyileştirmeler"de AI'ya talimat vererek mümkündür.

Bir animasyonu PDF'ye aktarırsanız hareket kaybolur. Hareketi korumak istiyorsanız HTML formatını seçin.

Boş Tuval Nasıl Kullanılır (Sıfırdan Oluşturun)

Şablon yok, soru yok. Tamamen boş bir tuvalden başlamak istediğinizde bunu kullanın.

"Hiçbir karta uymayan şeyler" veya "her şeye kendiniz karar vermek istediğinizde" bunu seçin.

Metin giriş alanına oluşturmak istediğiniz şeyi yazın ve Gönder'e basın.

Dosyayla Başla Nasıl Kullanılır (Dosyadan Oluşturun)

Bu kart, mevcut dosyaları tasarımlara dönüştürür. Sadece Claude'a bir Word, PDF veya PPTX dosyası vererek sizin için bir tasarım oluşturacaktır.

Adım 1. "Dosyayla başla"ya Tıklayın

"Tasarıma dönüştür" yazan karta tıklayın. Bir dosya seçme iletişim kutusu açılacaktır.

Desteklenen dosya formatları DOCX, PPTX, XLSX, PDF, JPG ve PNG'dir.

Adım 2. Dosyayı Yükleyin ve Talimatları Girin

Bir dosya seçtiğinizde yüklenecek ve büyük bir metin giriş alanı görünecektir. Oluşturmak istediğiniz şeyi girin ve "Projeyi başlat" düğmesine basın.

Diğer kartlarda "Gönder" düğmesi bulunurken, bu kartta "Projeyi başlat" bulunur.

Komut Örnekleri

1Lütfen ekteki Word teklifini görsel teklif slaytlarına dönüştürün.
2Basit ve okunması kolay bir tasarımla 5-7 slaytlık bir yapı yapın.

1Lütfen bu el yazısı nottaki fikirleri bir açılış sayfası teklifine dönüştürün.
2Hedef kitle: AI'da yeni olan şahıs şirketleri
3Hedef: Danışmanlık başvurusu

Bittiğinde şöyle görünür.

Adım 3. Sağ Üst Köşedeki Düğmelerle Ayarlayın

Oluşturma sonrasında sağ üst köşedeki araç çubuğuyla ayarlama yapabilirsiniz. "+ İyileştirmeler" düğmesine basmak, ince değişiklikler için ek talimatlar verebileceğiniz bir sohbet giriş alanı açar.

Tasarım Sistemleri Nasıl Kullanılır [Bu Güncellemede Yeni]

Ana ekranda kart listesinin altında bir "Tasarım sistemi kur" düğmesi bulunur.

Marka renklerini, yazı tiplerini ve logoları bir kez kaydederek sonraki tasarımlara otomatik olarak yansıtılır.

Bu, "renklerin her seferinde tutarsız olması" sorununu çözer.

Düğmeye basmak "Tasarım sistemi ekle" modunu görüntüler.

İki kayıt yöntemi vardır.

① Burada oluştur (Yeni başlayanlar için)

Forma gerekli bilgileri girerek kurabilirsiniz.

Kaydedebilecekleriniz:

• Şirket adı/Marka açıklaması (metin girişi)
• GitHub deposu URL'si
• Figma dosyası (.fig dosyası yükleyin)
• Yazı tipi, logo ve varlık dosyaları

Kod olmadan kullanabilirsiniz. İlk kez deniyorsanız bu önerilir.

② Claude Code Kullanarak Oluşturun (EN İYİ DOĞRULUK)

Bu, Claude Code'un marka bilgilerini öğrenmesini sağlayan bir özelliktir.

Kaydedildikten sonra, her açılış sayfası, ana sayfa veya slayt oluşturduğunuzda "bu renk ve bu yazı tipiyle" belirtmeniz gerekmeyecektir. Marka olarak birleştirilmiş tasarımlar otomatik olarak ortaya çıkacaktır.

Esas olarak kurumsal geliştirme ekipleri için. Bu, React kurallarıyla oluşturulan hizmet kodundan marka bilgilerini otomatik olarak okumak için bir özelliktir. Bireysel kullanım için neredeyse hiç kullanım durumu yoktur.

Nasıl Kullanılır

Aşağıdaki adımlarla sıfırdan oluşturabilirsiniz.

Adım 1. Node.js'i Kontrol Edin

Adım 2. Klasörler ve Dosyalar Oluşturun

1Herhangi bir klasör/
2　　└── design-system/
3　　　　　　　├── package.json
4　　　　　　　└── tokens.js

package.json

1{ 
2  "name": "my-design-system", 
3  "version": "1.0.0", 
4  "type": "module" 
5}

tokens.js (Renkleri ve yazı tiplerini markanıza göre yeniden yazın)

1export const colors = {
2  primary: "#DA7756",      // Ana renk
3  background: "#F5F4F0",   // Arka plan rengi
4  text: "#1C1917",         // Gövde metni
5  white: "#FFFFFF"
6}
7export const fonts = {
8  heading: "YuGothic",
9  body: "Meiryo"
10}

Adım 3. /design-sync'i Çalıştırın

Claude Code'da aşağıdaki komutu çalıştırın:

1/design-sync

Bittiğinde, marka "Tasarım sistemleri" sekmesine kaydedilecektir. Bu renk ve yazı tipi, sonraki tasarım oluşturmalarında otomatik olarak kullanılacaktır.

Dışa Aktarma Yöntemleri

Bitmiş tasarımlar birkaç formatta dışa aktarılabilir.

Animasyon varsa, PDF'ye aktarılırsa hareket kaybolur.

Hareketi korumak istiyorsanız HTML formatını seçin.

Ayarlama İpuçları (İyileştirmeler Paneli)

Oluşturma sonrasında "İyileştirmeler" düğmesine basmak, AI'ya ince ayar talimatları vermenizi sağlar.

Etkili talimat örnekleri:

• "Başlık metnini büyüt"
• "Butonu daha belirgin hale getir"
• "Genel olarak daha basit yap"
• "Akıllı telefonda görüntülendiğinde düzeni kontrol et"

Her şeyi aynı anda değiştirmeye çalışmaktansa, talimatları tek tek vermek istenen sonucu almayı kolaylaştırır.

Bu Güncellemede Ne Değişti

Özet — Oluşturmak İstediğiniz Şeye Göre Bir Kart Seçin

Claude Design, Pro planları ($20/ay) ve üzeri için kullanılabilir. Ücretsiz olarak kullanılamaz.

Oluşturmak istediğiniz şeye göre bir kart seçin

Komut dört noktayı içerdiğinde doğruluk artar: "Amaç, Yapı, Hedef Kitle ve Stil."

Baştan mükemmelliği hedeflemeyin; genel bir çerçeve oluşturup ardından şeyleri tek tek düzeltmek daha hızlıdır.

Bu makaleyi beğendiyseniz "Beğen" butonuna basmanızdan memnun olurum.

▼ Bilgisayarlarla arası iyi olmasanız bile başlayabileceğiniz Claude kullanımını LINE üzerinden alabilirsiniz.

Kaydolmak size hediye olarak bir Claude Code kurulum kılavuzu verecektir.

https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso