Claude Artifacts Nedir? Pratik Bir Giriş
7 dk okuma
Şu an Claude sana bir React bileşenini, bir grafiği ya da küçük bir aracı kod bloğu olarak verdiğinde, muhtemelen gerçekten işe yarayıp yaramadığını görmek için onu kendi editörüne kopyalıyorsun. Artifacts'in ortadan kaldırdığı şey bu fazladan gidiş geliş.
İpucu
Bir Artifact daha gösterişli bir kod bloğu değildir. Claude'un az önce tarif ettiği şeyin, kendi bölmesinde işlenen, konuşmadan ayrılmadan bakabileceğin, tıklayabileceğin ve üzerinde yineleyebileceğin çalışan bir sürümüdür.
Bir Artifact gerçekte nedir
Claude esaslı ve kendi içinde bütün bir şey ürettiğinde, bir web sayfası, bir diyagram, küçük bir React uygulaması, bir veri görselleştirmesi, bu içeriği metin olarak satır içine bırakmak yerine sohbetin yanında ayrı bir bölmede açabilir. Bu bölme kodu yalıtılmış bir ortamda çalıştırır: tarayıcın onu yürütür ama açık bir eylemin olmadan dosya sistemine, diğer sekmelerine ya da yalıtımın dışındaki hiçbir şeye ulaşamaz.
Bu, Artifacts hakkında nasıl düşünmen gerektiği açısından önemlidir. Bunlar yayına alacağın şeyin bir önizlemesi değildir. Bir fikri yayına almaya değip değmediğine karar vermeden önce denemenin hızlı bir yoludur ve bir tanesinden fayda sağlamak için geliştirici geçmişine ihtiyacın yok: istediğin sonucu tarif etmek birçok yaygın kullanım için yeterli.
Artifacts ile neler kurabilirsin
Kendi başına çalışacak ya da işlenecek kadar kendi içinde bütün her şey. Her birini tetikleyecek bir promptla yaygın kategoriler:
| Tür | Neye iyi gelir | Örnek prompt |
|---|---|---|
| Etkileşimli araç | Hesap makineleri, dönüştürücüler, form odaklı tahminler | “Faiz, vade ve peşinat için kaydırıcıları olan bir konut kredisi hesaplayıcısı kur.” |
| Web sayfası | İniş sayfaları, tek sayfalıklar, e-posta şablonları | “Yerel bir fırın için çalışma saatleri, menü ve harita bağlantısı olan tek sayfalık bir site yap.” |
| Veri görselleştirme | Yapıştırdığın verilerden grafikler | “Bu çeyreklik geliri trend çizgili gruplanmış sütun grafiği olarak çiz.” |
| Diyagram | Akış şemaları, organizasyon şemaları, basit mimari | “İade sürecimizin talepten geri ödemeye akış şemasını çiz.” |
| Belge | Biçimlendirilmiş raporlar, yapılandırılmış brifler | “Bu notları başlıklarla biçimlendirilmiş tek sayfalık bir proje brifine dönüştür.” |
| Basit oyun veya demo | Öğretim yardımcıları, etkileşimli açıklamalar | “Dakikadaki kelimeyi gösteren küçük bir yazma hızı testi yap.” |
Bir Artifact ne zaman sıradan bir sohbet yanıtını yener
Claude'un kurduğu her şeyin kendi bölmesine ihtiyacı yoktur. Bir Artifact şu durumlarda doğru seçimdir:
Sonuca yalnızca okumak değil, bakmayı ve tıklayıp gezmeyi planlıyorsan, bir gösterge paneli taslağı, çalışan bir oyun, kendi verilerinin bir grafiği
Aynı görsel ya da etkileşimli sonuç üzerinde birkaç tur boyunca yineliyorsan ve Claude'un her seferinde yeni bir kod bloğu yerine tek bir şeyi yerinde güncellemesini istiyorsan
Başka birinin, ne yapacağının söylenmesi yerine çalıştığını görmesi gerekiyorsa
Bunun yerine yalnızca kodu okuyup anlaman gerekiyorsa ya da çıktı bir daha ziyaret etmeyeceğin tek seferlik bir cevapsa, sıradan bir yanıt daha basittir. İki kez bakmayacağın bir şey için yönetilecek fazladan bir bölme yok.
| İstediğin | Kullan |
|---|---|
| Bir şeyin çalıştığını görmek ve tıklayıp gezmek | Artifact |
| Kodu bir kez okumak, anlamak ya da kopyalamak | Sıradan yanıt |
| Gerçek bir projedeki gerçek dosyaları değiştirmek | Claude Code |
| Tek bir görsel sonuç üzerinde çok turda yinelemek | Artifact |
Hızlı bir örnek
Küçük bir etkileşimli araç istemek, birini tetiklemeye yeter. İşte gerçekçi bir başlangıç promptu:
Bir Artifact olarak basit bir etkileşimli araç kur: üç sayı girişi olan (çalışılan saat, saatlik ücret, vergi yüzdesi), ben yazdıkça net maaşı canlı hesaplayıp gösteren bir form. Sade React kullan, harici kütüphane olmasın ve stili asgari tut.
”Claude bunu, bir tarif değil, içine gerçekten yazabileceğin çalışan bir bileşen olarak işler. İlk sürüm yakın ama doğru değilse, örneğin vergi hesabı yanlışsa ya da bir para birimi simgesi istiyorsan, düz dille söyle. Claude yeni bir tane başlatmak yerine aynı Artifact'i günceller; bu da yineleme geçmişini birkaç kod bloğuna dağıtmak yerine tek yerde tutar.
Bir Artifact'in içinden Claude'un API'sini çağırmak
Henüz kurmuyor olsan bile bilmeye değer daha yeni bir yetenek: Artifacts artık, senin bir API anahtarı sağlamana ya da çağrı başına ödemene gerek kalmadan, doğrudan Claude'un kendi API'sini çağırabilir. Bu, bir Artifact'i statik bir demodan, kendi konuşmasını yürütebilen, birden fazla isteği zincirleyebilen ya da küçük bir ajan iş akışını yürütebilen bir şeye dönüştürür; hepsi yalıtımın içinde.
Bu, “bana bir grafik göster”den anlamlı biçimde farklı bir kullanım durumudur ve kendi daha derin açıklamasını hak eder. Şimdilik pratik çıkarım şu: yalnızca sabit bir sonucu işlemekle kalmayıp birden fazla adımda akıl yürütmesi gereken bir şeyin prototipini yapıyorsan, bunu açıkça iste. Claude, görev gerçekten ihtiyaç duymadıkça API çağırma davranışına başvurmaz.
Claude Tutorial içinde
Artifacts, birçok Claude becerisinden yalnızca biri
Uygulama bunun gibi yeniden kullanılabilir teknikleri, bir aracın prototipini yapıyor da olsan, normal bir sohbetten daha iyi bir cevap almaya çalışıyor da olsan geçerli olan kalıpları adım adım işler.
Kimsenin söz etmediği gizlilik ödünleşimi
Artifacts bir bağlantıyla herkese açık paylaşılabilir ve paylaşılan Artifacts'in arama motorlarınca dizinlenmiş olarak bulunduğu görülmüştür. Gerçek verilerle, düşük riskli saydığın verilerle bile bir şey kurarsan, paylaşılan bir bağlantı özel bir dosya göndermekten çok bir web sayfası yayımlamaya yakındır.
Dikkat
Bir Artifact'i herkese açık paylaşmadan önce, hiçbir bağlamı olmayan bir yabancı onu bir Google aramasıyla bulacakmış gibi yeniden oku; çünkü bu varsayımsal değil, gerçek bir olasılıktır.
Güvenli varsayılan: içinde ne olduğunu özellikle kontrol etmedikçe Artifacts'i özel tut. Birini bir takım arkadaşına vermen gerekiyorsa, bu herkese açık bir bağlantıdan farklı, daha dar bir paylaşım türüdür ve “sadece bağlantı yap”a kaymak yerine bu ayrımı bilinçli olarak ele almaya değer.
Sık yapılan hatalar
- Küçük bir düzeltmeyi yepyeni bir yapım olarak ifade etmek. Her şeyi baştan yeniden istemek, zaten çalışan şeyi kaybettirir. Orijinal isteğin tamamını tekrarlamak yerine neyin değişmesi gerektiğini özellikle söyle: “her şeyi koru, sadece vergi hesabını düzelt”.
- Bir formun yalıtımın içinde gönderilmesini beklemek. Bu bir hata değil, tasarım gereğidir: yalıtım gerçek gezinmeyi ve harici form gönderimlerini engeller. Göndermeyi JavaScript'te ele al, durumu güncelle ya da bir sonucu doğrudan göster.
- İşlenmeyen bir Artifact'in bozuk olduğunu varsaymak. Genellikle eksik bir kütüphane ya da bir çalışma zamanı hatası demektir. Claude'a ne gördüğünü söyle (“boş bölme” ya da hata metni) ve kodu yerinde düzeltir.
- Gerçek verilerle kurulmuş birini yeniden okumadan paylaşmak. Yukarıda ele alındı ve tekrarlamaya değer: herkese açık bir bağlantı bir dosya göndermekten çok bir sayfa yayımlamaya yakındır.
Sık sorulan sorular
Claude Artifacts nedir?
Sohbetin yanında, Claude'un kurduğu bir şeyi, küçük bir uygulamayı, bir grafiği, bir diyagramı, bir belgeyi çalıştıran ya da işleyen özel bir bölme; böylece kodu kendi editörüne kopyalamadan ona bakabilir ve üzerinde yineleyebilirsin.
Claude Artifacts ile neler kurulabilir?
Etkileşimli araçlar, tek web sayfaları, veri görselleştirmeleri, diyagramlar, biçimlendirilmiş belgeler ve basit oyunlar ya da demolar. Yalıtılmış bir tarayıcı ortamında kendi başına çalışacak kadar kendi içinde bütün her şey.
Claude Artifacts varsayılan olarak özel midir?
Evet. Bir paylaşım bağlantısı oluşturana kadar bir Artifact yalnızca sana görünür. Paylaşılan Artifacts'in arama motorlarınca dizinlenmiş olarak bulunduğu görülmüştür; bu yüzden herkese açık bir bağlantıyı yayımlama gibi ele al.
Başkaları Claude Artifact'imi düzenleyebilir mi?
Paylaşım bağlantısı olan biri onu görüntüleyebilir ve paylaşılan bir bağlamda bir kopyadan çalışabilir. Orijinalin senin kalır. Gerçek iş birliği için yalnızca bağlantıyı değil, konuşmayı devret.
Artifacts hangi programlama dillerini destekler?
Esas olarak web teknolojileri: React dâhil HTML, CSS ve JavaScript. Bu, etkileşimli araçların ve görselleştirmelerin çoğunu kapsar. Arka uç dilleri için genel bir çalışma ortamı değildir.
Claude Artifacts'in süresi dolar mı?
Oluşturuldukları konuşmayla birlikte kalırlar. Birinin o sohbetten bağımsız olarak kalıcı olmasını istiyorsan kodu kaydet ya da kontrol ettiğin bir yerde tut.
Okumaya devam et
- Yalnızca Bir Sohbet Yanıtı Yerine Üzerinde Yineleyebileceğin İçerik Almak bir çıktının ne zaman kendi düzenlenebilir alanına ait olduğunu fark etmek için.
- Claude Code ile Çok Dosyalı Bir Değişiklik Yapmak yalıtılmış bir ortamı aştığında ve bir projedeki gerçek dosyaları değiştirmen gerektiğinde.
- Claude'un İlk Cevabını Doğru Cevaba Dönüştür bu kılavuzun bir Artifact'i iyileştirmek için kullandığı aynı yineleme zihniyeti için; herhangi bir Claude çıktısına uygulanmış.
- Yeni Bir Sohbet, Bir Proje Seçmek ya da Kaldığın Yerden Devam Etmek çünkü bir Artifact'i nerede kurduğun, onu sonradan bulmanın ve yeniden kullanmanın ne kadar kolay olduğunu etkiler.