Anthropic’in Claude’u, çoğu diğer AI sohbet robotunda bulunmayan bir özelliğe sahip: artifact’lar. Sohbet içinde kendi birimleri olarak satır içinde görüntülenen, kendi kendine yeten kod, HTML, React bileşenleri, Mermaid diyagramları ve SVG.
İyi kullanıldığında artifact’lar, Claude’u tek seferlik bir prototip aracına dönüştürür. Kötü kullanıldığında ise süslü kod bloklarından ibaret kalırlar. İşte kapsamlı rehber.
Artifact aslında nedir?
Anthropic’in dokümantasyonu artifact’ları “kullanıcıların büyük olasılıkla değiştireceği, üzerinde yineleme yapacağı veya konuşmanın dışına çıkaracağı, önemli ve kendi kendine yeten içerik” olarak tanımlıyor. Pratikte altı türü kapsar:
- Kod — Python, TypeScript, Rust, Go, vb. Sözdizimi vurgulamasıyla görüntülenir.
- Markdown belgeleri — uzun metinler, raporlar, taslaklar.
- HTML sayfaları — tek dosyalı açılış sayfaları, panolar, prototipler.
- React bileşenleri — tam tepkimeyle canlı olarak işlenen bileşenler.
- Mermaid diyagramları — akış şemaları, ER diyagramları, sıra diyagramları. Satır içinde SVG’ye dönüştürülür.
- SVG görselleri — istemlerden oluşturulmuş vektör grafikleri.
Claude, bir şeyi ne zaman artifact yapacağına uzunluk ve kendi kendine yetebilirlik temelinde karar verir. “Bunu artifact yap” veya “kendi kendine yeten bir bileşen olarak” diyerek kararı yönlendirebilirsiniz.
Artifact’lar dışa aktarma için neden önemli?
Artifact’ın kendi yaşam döngüsü vardır:
- Konuşma metninden ayrı olarak görüntülenir.
- Satır içinde düzenleyebilirsiniz (Claude’a “artifact üzerinde yineleme yap” diyerek).
- Düzenlemeler boyunca sabit bir tanımlayıcısı vardır.
Bu, dışa aktarmayı zorlaştırır. Dışa aktarma aracınız konuşmayı sadece Markdown olarak döküyorsa, artifact ya (a) işlenebilir formunu kaybetmiş satır içi kod blokları olarak gelir ya da (b) tamamen eksik olur.
İyi dışa aktarma araçları, artifact’ları birinci sınıf vatandaş olarak ele alır.
ChatExport AI artifact’ları nasıl işler?
Dışa aktarma başına seçilen üç mod:
Mod 1: Satır içi (PDF, Word için varsayılan)
Artifact içeriği, konuşma metninde göründüğü konuma eklenir. Kod sözdizimi vurgulamasını korur. Mermaid diyagramları gömülü SVG olarak işlenir. HTML sayfaları, işlenmiş sayfanın ekran görüntüsü olarak görüntülenir.
En iyisi: dışa aktarmayı sadece konuşmayı okumak isteyen birine vermek için.
Mod 2: Ayrı dosyalar (ZIP, Markdown için varsayılan)
Artifact bağımsız bir dosya olarak kaydedilir:
- Kod →
chat/<artifact-adı>.py(veya .ts, .rs, vb.) - HTML →
chat/<artifact-adı>.html - React →
chat/<artifact-adı>.jsx - Mermaid →
chat/<artifact-adı>.mmdartıchat/<artifact-adı>.svg - SVG →
chat/<artifact-adı>.svg
Konuşma metni, her artifact’a göreceli bir bağlantıyla atıfta bulunur.
En iyisi: artifact’ı kodu çalıştırmak/değiştirmek isteyen bir geliştiriciye vermek için.
Mod 3: Her ikisi
ZIP modu her ikisini de içerir: okumak için satır içi metin ve çalıştırmak için ayrı dosyalar olarak artifact’lar.
En iyisi: arşivleme için. Altı ay sonra her iki görünüme de sahip olduğunuz için memnun kalacaksınız.
Artifact tuzakları
Birden çok revizyon
Bir artifact üzerinde yineleme yaparsanız (“düğmeyi büyüt”), Claude artifact’ı yerinde günceller. Eski revizyonlar konuşma görünümünden kaybolur ancak artifact’ın geçmiş paneli aracılığıyla alınabilir.
ChatExport AI, dışa aktarma sırasında her artifact’ın mevcut sürümünü yakalar. Tüm revizyonları istiyorsanız, dışa aktarmadan önce Claude’a “artifact’ın v1, v2, v3’ünü göster” deyin; revizyon geçmişi daha sonra ayrı kod blokları olarak dışa aktarılır.
Tamamlanmamış artifact’lar
Dışa Aktar’a bastığınızda Claude hala yayın yapıyorsa, kısmi artifact olduğu gibi dahil edilir. Dışa aktarmadan önce yayın göstergesinin bitmesini bekleyin.
React artifact bağımlılıkları
React artifact’leri, küçük bir beyaz listeden (React, sınıf adlarıyla Tailwind, lucide-react ikonları) import yapabilir. Dışa aktarma JSX kaynağını yakalar; tüketicinin yerel olarak çalıştırmak istiyorsa aynı bağımlılıkları kurması gerekir.
ChatExport AI’nın dışa aktarmaları, React artifact’leri için ZIP içinde gerekli bağımlılıkları belirten bir README.md ve artifact’ı çalıştıracak bir Vite + React projesinin nasıl oluşturulacağını gösteren bir kod parçacığı içerir.
Mermaid diyagramlarının çevrimdışı işlenmesi
Bir Mermaid diyagramının SVG dışa aktarması tamamen kendi kendine yeterlidir — herhangi bir tarayıcıda açılır, internet gerekmez. .mmd kaynak dışa aktarması, daha sonra düzenleme ve yeniden işleme olanağı sağlar.
İş akışı: Claude prototipinden yayına hazır koda
Benim için en iyi çalışan akış:
- Claude’a prototipi bir React artifact’i olarak oluşturmasını isteyin. Satır içinde 2-3 kez yineleme yapın.
- Konuşmayı ZIP olarak dışa aktarın. Metin, tasarım kararlarını açıklar; artifact dosyaları çalıştırılabilir.
- Artifact’ı gerçek bir Vite projesine atın. Listelenen bağımlılıkları ekleyin. Bileşen, projede olduğu gibi çalışır.
- İstem tarzı düzyazı yorumlarını gerçek JSDoc ile değiştirin. Testler ekleyin. Yayınlayın.
İstemden yerel olarak çalışmaya toplam süre: ~5 dakika. Bunu hızlı kılan şey dışa aktarmadır — “Claude bunu yaptı” ile “bu benim repomda” arasındaki köprüdür.
Deneyin
Claude’u açın. “Bana kullanıcı kayıt akışını gösteren bir Mermaid diyagramı olan, kendi kendine yeten bir HTML sayfası oluştur” deyin. Artifact işlendiğinde, konuşmayı ChatExport AI ile ZIP olarak dışa aktarın. ZIP, metni, bağımsız bir .html dosyasını, .mmd kaynağını ve işlenmiş .svg’yi içerir.
Claude artifact iş akışının tamamı budur.
İlgili
- Claude dışa aktarma rehberi.
- Claude’dan Markdown’a — yalnızca Markdown akışı, artifact’lar ayrı dosyalar olarak.
- Geliştiriciler için — koda sadık AI dışa aktarma iş akışları.