Claude Artifacts Nasıl Kullanılır? Adım Adım Rehber (2026)

Claude’a “bana borsa verilerini çeken bir grafik yap” dediğinizde ne bekliyorsunuz? Muhtemelen biraz kod. Belki de kopyalayıp yapıştırmanız gerekecek. Ama Artifacts açıksa Claude sohbet balonunun yanında canlı bir uygulama üretiyor; siz de aynı anda test ediyorsunuz. Kod editörü yok, terminal yok. Bu rehber tam olarak bu özelliği anlatıyor: prompt mühendisliği geçmişi olmasa da kullanabileceğiniz, browser’da çalışan mini uygulamalar, formlar ve SVG görseller üretmenin hızlı yolu.

Claude Artifacts Nedir?

Claude, 2024 yılında Artifacts’ı duyurdu. Kısaca: Claude’un ürettiği kodu veya içeriği sohbet balonu yerine ayrı, canlı bir panel içinde gösteriyor. Panel içinde ne varsa çalışıyor. HTML formu tıklanabilir, grafik etkileşimli, kod kopyalanabilir.

Normal Claude yanıtından farkı şu: standart yanıtta kodu alıyorsunuz, başka bir yere yapıştırıyorsunuz, çalıştırıyorsunuz. Artifacts bu adımları kesiyor. Kod, üretildiği anda browser’da render oluyor.

Artifacts’ın ürettiği içerik türleri:

• HTML/CSS/JavaScript uygulamaları: formlar, hesap makineleri, oyunlar
• Saf JavaScript bileşenleri: grafikler, animasyonlar
• SVG görseller: ikonlar, diyagramlar, vektör çizimler
• Markdown dokümanlar: yapılandırılmış notlar, raporlar
• Kod parçacıkları: Python, TypeScript ve diğer diller

Özellik claude.ai web ve mobil uygulamasında çalışıyor. API üzerinden Artifacts üretmek şu an mümkün değil.

Bir not: Artifacts, Claude’un “uygulama geliştirme modu” değil. Aynı modelin yanıtını farklı bir arayüzde sunuyor. Kod kalitesi açısından zaten yazdığı Claude. Artifacts sadece o kodu çalışır hâlde render ediyor.

Artifacts ile ürettiğiniz her şey browser sandbox’ında çalışıyor. Harici bir server kurmanıza gerek yok; Claude’un ürettiği HTML/JS dosyasını claude.ai kendi ortamında barındırıyor. Bu sandbox güvenli ama internet erişimi sınırlı; bazı harici API çağrıları çalışmayabilir. Kendi veritabanınıza bağlanmak veya gerçek verilerle çalışmak için kodu indirip yerel ortamınıza taşımanız gerekiyor.

Hangi Plan Gerekiyor?

Anthropic’in resmi fiyatlandırma sayfasına göre plan karşılaştırması (Temmuz 2026):

Free planda Artifacts üretebilirsiniz. Günlük mesaj kotasıyla sınırlı bu kadar. Uzun veya karmaşık uygulamalar daha fazla token tüketiyor; Pro bu durumda mantıklı. Fiyatlar değişebilir, Anthropic’in sitesini kontrol edin.

İlk Artifact Nasıl Oluşturulur?

1. claude.ai’ye gidin ve oturum açın.
2. Yeni bir sohbet başlatın. Sol paneldeki “New Chat” düğmesine tıklayın.
3. Prompt yazın. Özel bir komut gerekmez; Claude uygun içerikleri otomatik olarak Artifacts panelinde açar. İlk deney için:

   Fahrenheit'tan Celsius'a çeviri yapan etkileşimli bir HTML hesap makinesi yaz.

4. Artifacts panelini görün. Sohbetin sağında (masaüstünde) veya altta (mobilde) ayrı bir panel açılır. Uygulamanız burada canlı olarak render olur.
5. Test edin. Fahrenheit alanına bir değer girin ve sonucu görün; panel içinde gerçekten çalışıyor.
6. Revizyon isteyin. Sohbete devam edin: “Şimdi Kelvin dönüşümünü de ekle.” Claude mevcut Artifact’ı güncelleyecek.
7. Kaydedin veya paylaşın. Panelin sağ üstündeki simgelerle uygulamayı kopyalayabilir veya paylaşım linki alabilirsiniz.

Kod bilgisi gerekmez. Prompt ne kadar net olursa çıktı o kadar tutarlı oluyor. “Uygulama yap” yerine “girdi alanı olan, hesaplama yapan ve sonucu kalın olarak gösteren tek sayfalık HTML yaz” daha kesin sonuç veriyor.

Claude kod üretiyorsa ama panel açılmadıysa “bunu bir Artifact olarak üret” diye ekleyebilirsiniz. Çoğunlukla işe yarıyor.

Artifact Türleri

HTML/JavaScript Uygulamaları

En çok kullanılan tür. Claude, tam işlevli bir HTML dosyası üretiyor: CSS, JavaScript, HTML; hepsi tek dosyada, browser’da direkt çalışır.

Örnek prompt:

Bütçe takibi için gelir ve gider ekleyebildiğim, toplam bakiyeyi gösteren basit bir HTML uygulaması yaz. Vanilla JS kullan, harici kütüphane yok.

SVG Grafikler

SVG formatındaki görseller ölçeklenebilir ve düzenlenebilir. Tasarım aracına gerek kalmadan basit ikonlar, diyagramlar veya akış şemaları mümkün.

Örnek prompt:

Python, JavaScript ve Rust programlama dillerini gösteren üç dilimli pasta grafik SVG üret. viewBox 0 0 400 400 olsun.

Kod Parçacıkları

Dil belirtilirse sözdizimi renklendirmesi yapılmış, kopyalanabilir bir kod bloğu üretiyor. Uzun algoritmalar veya fonksiyon kitaplıkları için işe yarıyor.

Örnek prompt:

Verilen bir metin listesini TF-IDF ile sıralayan ve skorları döndüren Python fonksiyonu yaz.

Markdown Dokümanlar

Başlıklar, tablolar ve listeler gerektiren uzun içerikler için Markdown Artifacts açılıyor. Rapor veya şablon olarak biçimlendirilmiş içerik doğru render oluyor.

Örnek prompt:

Bir SaaS ürünü için haftalık sprint inceleme toplantısı şablonu oluştur. Tamamlanan işler, engeller ve sonraki adımlar bölümleri olsun.

Canvas Modunda Düzenleme

Artifacts panelinin sağ üstündeki kalem simgesine tıklarsanız Canvas moduna geçersiniz. Artifact’ın kaynak kodunu direkt düzenleyebiliyorsunuz; Claude’a yeniden sormak zorunda kalmadan.

Ne yapabilirsiniz:

• HTML/JS içeriğini satır satır değiştirebilirsiniz.
• Kaydettiğinizde panel otomatik yenileniyor.
• Değişiklik beklediğiniz gibi çıkmadıysa geri alabilirsiniz.
• Değişikliklerinizi Claude’a açıklayarak sohbet devam edebilir.

Küçük düzeltmeler için zaman kazandırıyor. Bir renk kodunu değiştirmek veya bir CSS kuralını ayarlamak için Claude’u yeniden çalıştırmak yerine direkt müdahale edebilirsiniz. Büyük yapısal değişiklikler için sohbet üzerinden sormak daha mantıklı.

Canvas 2026 itibarıyla Pro ve Team planlarında stabil; Free planda kısıtlı kullanım olabilir.

Canvas ile düzenleme yaparken dikkat etmeniz gereken bir şey var: değişikliklerinizi kaydettikten sonra Artifacts paneli yenileniyor ama Claude ile sohbetiniz bu değişiklikleri otomatik almıyor. Yani Canvas’ta elle bir rengi değiştirip ardından “bunu geliştir” dediğinizde Claude Canvas değişikliklerinizi görmeyebilir. Bu durumda güncel kodu kopyalayıp Claude’a yapıştırmanız daha güvenli.

Artifact Paylaşımı ve Yerleştirme

Panelin sağ üstündeki “Share” simgesine tıklayın. Claude, o Artifact için özel bir URL oluşturuyor. Linke sahip olan herkes uygulamayı kendi browser’ında çalıştırabiliyor; claude.ai hesabı gerekmiyor.

Bilmeniz gerekenler:

• Link, Artifact’ın o anki hâlini paylaşıyor.
• Artifact’ı güncellediğinizde önceki link eski sürümü göstermeye devam ediyor.
• Paylaşılan Artifact salt okunur; alıcı düzenleyemiyor.
• Hassas veri içeren Artifacts’ı paylaşmadan önce verileri temizleyin.

<iframe> ile gömme teknik olarak mümkün ama resmi olarak desteklenmiyor ve görüntü sorunları çıkabiliyor. Resmi embed için Anthropic’in güncel belgelerine bakın.

Gerçek Kullanım Senaryoları

1. Etkileşimli Hesap Makineleri

Mortgage, KDV, birim dönüşümleri; bunların hepsi tek bir Artifact prompt’uyla birkaç dakikada üretilip bir sayfaya gömülebilir.

Aylık gelir, kira ve giderleri girince ne kadar biriktireceğimi hesaplayan Türk lirası bazlı bir araç yap. Sonucu aylık ve yıllık olarak göster.

2. Veri Görselleştirme

CSV veriniz var ama grafik aracı yok. Claude’a yapıştırın ve görselleştirme isteyin. Chart.js veya D3.js CDN üzerinden kullanılabilir.

Şu aylık satış verilerini çizgi grafik olarak göster. Chart.js CDN kullan: [veriler]

3. Prototip Form ve Arayüzler

“Şu formu yap” dediğinizde tıklanabilir bir prototip birkaç saniyede hazır oluyor. Tasarım toplantısına görsel yerine çalışan prototip götürmek geri bildirimleri somutlaştırıyor. Bir müşteri kayıt formu, onboarding akışı veya anket tasarımını Figma beklemeden prototiple gösterebilirsiniz. Üstelik paylaşım linki üretip toplantı öncesi herkesin test etmesini sağlayabilirsiniz.

4. Mini Oyunlar ve Eğitim Araçları

Bulmaca, kelime oyunu, flash kart; JavaScript ile yapılabilir her şey Artifacts kapsamına giriyor. Eğitim kurumları kısa egzersizler sunmak için bu formatı kullanıyor.

5. SVG Logo ve İkon Tasarımı

Basit vektörel logolar için ağır araçlara ihtiyaç kalmıyor. Marka renklerini ve konsepti verin, SVG’yi alın ve düzenleyin.

Koyu lacivert (#0f172a) arka planlı, cyan (#06b6d4) nöron ağı motifli kare bir logo SVG üret.

Daha İyi Sonuç İçin Prompt İpuçları

Prompt mühendisliği tekniklerini uyguladığınızda fark hemen görünüyor:

1. Teknolojiyi belirtin. “HTML yaz” yerine “vanilla HTML/CSS/JS, harici kütüphane yok” deyin. Claude gereksiz framework eklemiyor.
2. Boyutu tanımlayın. “Geniş ekranda ortalanmış, maksimum 600px genişliğinde” gibi kısıtlar tasarımı kullanışlı yapıyor.
3. Etkileşim noktalarını söyleyin. “Butona tıklanınca X olsun, giriş alanı boşken Y göster” davranışları prompt’a ekleyin.
4. Renk kısıtları verin. “Koyu arka plan, açık metin, mavi vurgu (#0ea5e9)” gibi tek satır beklentileri netleştiriyor.
5. Parça parça ilerleyin. Önce temel yapıyı isteyin, sonra özellik özellik ekleyin. Tek büyük prompt genelde parçalanmış sonuç veriyor.
6. Hataları spesifik tanımlayın. “Buton çalışmıyor” yerine “Hesapla butonuna basınca sonuç alanı boş kalıyor” çok daha verimli.
7. Mobil uyumluluğu isteyin. “Mobil uyumlu, responsive” default gelmiyor; prompt’a ekleyin.

Claude Code ve Artifacts arasındaki fark merak konusuysa o karşılaştırma rehberi araç seçiminde yol gösteriyor. Artifacts browser tabanlı anlık prototipleme için; Claude Code terminal üzerinden gerçek proje dosyalarıyla çalışıyor. Birbirinin rakibi değil, farklı adımlarda kullanılan araçlar.

Sık Yapılan Hatalar

“Artifact paneli açılmıyor”

Her prompt Artifacts üretmez. Claude kısa metin yanıtları için panel açmıyor. “Bunu bir Artifact olarak üret” veya “HTML olarak göster” diye ekleyin.

“Uzun sohbette Artifact bozuluyor”

Bağlam penceresi dolduğunda Claude önceki Artifact’ı tam hatırlamıyor; yeniden ürettiği sürüm tutarsız çıkabiliyor. Yeni bir konuşma açın ve “işte mevcut kodun son hâli, şimdi bunu değiştir” diyerek kodu yapıştırın. Uzun sohbetlerde Claude’un dikkatinin dağıldığını görürseniz bu çoğunlukla bağlam penceresi sorunudur.

“Paylaşım linki çalışmıyor”

Link üretimi bazen birkaç saniye sürebilir. Sayfayı yenileyin ve tekrar deneyin.

“SVG yanlış görünüyor”

Claude SVG koordinatlarını karmaşık konumlandırmalarda zaman zaman yanlış hesaplıyor. “SVG viewBox’ı 0 0 800 600 olarak ayarla” gibi açık kısıtlar bu sorunları azaltıyor.

“Aynı prompt farklı sonuçlar veriyor”

Bu bir hata değil. Claude, büyük dil modeli olarak stokastik çalışıyor: aynı prompt farklı oturumlarda farklı ama hepsi geçerli yanıtlar üretebilir. Tutarlılık istiyorsanız kısıtları artırın ve prompt mühendisliği tekniklerini uygulayın.

“Mobilde düzgün görünmüyor”

Masaüstünde test edilen Artifact bazen mobilde bozuk görünüyor. Prompt’a “mobil responsive, flexbox kullan” eklemek büyük ölçüde çözüyor. Canvas modunda <meta name="viewport"> tag’inin olup olmadığını da kontrol edin.

Claude Artifacts, kod editörü olmadan browser tabanlı araçlar üretmenin pratik yollarından biri. Free planda test edebilir, ihtiyaca göre Pro’ya geçebilirsiniz. Başlamak için karmaşık bir şey seçmeyin: aklınızdaki hesap makinesi ya da formu tek bir prompt’a dönüştürün ve ne çıktığını görün.