SINIRLI SÜRE%50 İNDİRİMPro Yıllık, $49.98$24.99/yıl
3d:21h:55m:21s
%50 İNDİRİMİ KAP →
← Tüm yazılar

Claude Artifacts: AI Tarafından Oluşturulan Kodları Oluşturma ve Dışa Aktarma İçin Kapsamlı Rehber

Anthropic’in Claude’u, çoğu yapay zeka sohbet robotundan ayıran bir özelliğe sahiptir: yapay zeka ürünleri (artifacts). Bunlar, sohbetinizin içinde canlı olarak görüntülenen, bağımsız ve düzenlenebilir birimler halindeki kod, HTML, React bileşenleri, Mermaid diyagramları ve SVG grafikleridir.

Yapay zeka ürünlerinde ustalaştığınızda Claude güçlü bir tek seferlik prototipleme motoruna dönüşür. Yanlış kullanıldıklarında ise sadece süslü kod bloklarından ibaret kalırlar. İşte bilmeniz gereken her şey.

Bir yapay zeka ürünü aslında nedir?

Anthropic, yapay zeka ürünlerini “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ımlar. Altı farklı türde gelirler:

  1. Kod: Python, TypeScript, Rust, Go ve daha fazlası, tam sözdizimi vurgulamasıyla görüntülenir.
  2. Markdown belgeleri: Uzun metinli içerik, raporlar ve cilalanmış taslaklar.
  3. HTML sayfaları: Tamamen tek dosyadan oluşan açılış sayfaları, panolar ve etkileşimli prototipler.
  4. React bileşenleri: Tamamen tepkisel, canlı olarak görüntülenen kullanıcı arayüzü bileşenleri.
  5. Mermaid diyagramları: Satır içi SVG olarak görüntülenen akış şemaları, varlık-bağıntı diyagramları ve sıra diyagramları.
  6. SVG görüntüleri: Doğrudan metin istemlerinden oluşturulan vektör grafikleri.

Claude, içeriğin uzunluğuna ve kendi kendine yeterliliğine göre ne zaman bir yapay zeka ürünü haline gelmesi gerektiğine otomatik olarak karar verir. Daha fazla kontrol mü istiyorsunuz? “Bunu bir yapay zeka ürünü haline getir” veya “bunu kendi kendine yeten bir bileşen olarak oluştur” şeklinde talimat vermeniz yeterlidir.

Yapay zeka ürünleri dışa aktarma için neden önemlidir?

Yapay zeka ürünlerinin kendilerine özgü bir yaşam döngüsü vardır:

  • Konuşma metninden bağımsız olarak görüntülenirler.
  • Claude’a “yapay zeka ürünü üzerinde yineleme yap” diyerek onları satır içi düzenleyebilirsiniz.
  • Her yapay zeka ürünü, tüm revizyonlar boyunca sabit bir tanımlayıcıyı korur.

Bu bir dışa aktarma sorunu yaratır. Dışa aktarma aracınız konuşmayı yalnızca Markdown olarak döküyorsa, yapay zeka ürünleri ya (a) etkileşimli biçimlerini kaybederek düz kod bloklarına dönüşür ya da (b) tamamen yok olur.

Gelişmiş dışa aktarma araçları, yapay zeka ürünlerini birinci sınıf vatandaşlar olarak ele alır.

ChatExport AI yapay zeka ürünlerini nasıl yönetir?

ChatExport AI, her dışa aktarma için seçilen üç farklı dışa aktarma modu sunar:

Mod 1: Satır içi (PDF ve Word için varsayılan)

Yapay zeka ürünü içeriği, orijinal konumunda doğrudan konuşma metnine gömülür. Kod sözdizimi vurgulamasını korur. Mermaid diyagramları gömülü SVG olarak görünür. HTML sayfaları, işlenmiş ekran görüntüleri olarak görüntülenir.

En uygun: Konuşmanın tam bağlamını isteyen okuyucularla dışa aktarımı paylaşmak için.

Mod 2: Ayrı dosyalar (ZIP ve Markdown için varsayılan)

Her yapay zeka ürünü kendi bağımsız dosyası olarak kaydedilir:

  • Kod → chat/<yapay-zeka-urunu-adi>.py (veya .ts, .rs vb.)
  • HTML → chat/<yapay-zeka-urunu-adi>.html
  • React → chat/<yapay-zeka-urunu-adi>.jsx
  • Mermaid → chat/<yapay-zeka-urunu-adi>.mmd artı chat/<yapay-zeka-urunu-adi>.svg
  • SVG → chat/<yapay-zeka-urunu-adi>.svg

Konuşma metni, her yapay zeka ürününe göreli dosya yollarını kullanarak bağlantı verir.

En uygun: Gerçek kodu çalıştırması veya değiştirmesi gereken geliştiriciler için.

Mod 3: Her ikisi de

ZIP dışa aktarımları her şeyi içerir: okumak için satır içi bir konuşma metni artı yürütme için ayrı yapay zeka ürünü dosyaları.

En uygun: Uzun süreli arşivleme için. Altı ay sonra her iki görünüme de sahip olduğunuzda kendinize teşekkür edeceksiniz.

Yapay zeka ürünleriyle ilgili püf noktaları

Birden çok revizyon

Bir yapay zeka ürünü üzerinde yineleme yaptığınızda (“düğmeyi büyüt”), Claude onu yerinde günceller. Önceki sürümler konuşma görünümünden kaybolur, ancak yapay zeka ürününün geçmiş paneli aracılığıyla erişilebilir durumda kalır.

ChatExport AI, dışa aktarma anında her yapay zeka ürününün geçerli sürümünü yakalar. Tüm revizyonlara mı ihtiyacınız var? Dışa aktarmadan önce Claude’a “bana yapay zeka ürününün v1, v2, v3’ünü göster” diye sorun, revizyon geçmişi daha sonra ayrı kod blokları olarak dışa aktarılır.

Tamamlanmamış yapay zeka ürünleri

Claude üretim yaparken dışa aktarma yaparsanız, kısmi bir yapay zeka ürünü elde edersiniz. Dışa aktarmadan önce her zaman akış göstergesinin tamamlanmasını bekleyin.

React yapay zeka ürünü bağımlılıkları

React yapay zeka ürünleri, sınırlı bir beyaz listeden (React, Tailwind (sınıf adları yoluyla), lucide-react simgeleri) import yapabilir. Dışa aktarma, JSX kaynağını korur; yerel olarak çalıştıran herkesin aynı bağımlılıkları yapılandırmış olması gerekir.

ChatExport AI, React yapay zeka ürünleri için ZIP dışa aktarımlarının içine gerekli bağımlılıkları belgeleyen ve yapay zeka ürününü hemen çalıştıran bir Vite + React projesinin nasıl iskeletlenebileceğini gösteren bir başlangıç ​​parçacığı içeren bir README.md dosyası ekler.

Mermaid diyagramlarının çevrimdışı görüntülenmesi

Dışa aktarılan Mermaid diyagramları SVG olarak tamamen kendi kendine yeterlidir; herhangi bir tarayıcıda internet bağlantısı olmadan açılırlar. .mmd kaynak dosyası, diyagramı daha sonra düzenlemenize ve yeniden oluşturmanıza olanak tanır.

İş akışı: Claude prototipinden dağıtılan koda

İşte en hızlı sonuçları veren iş akışı:

  1. Claude’a prototipinizi bir React yapay zeka ürünü olarak oluşturmasını isteyin. Doğru olana kadar satır içi 2-3 kez yineleme yapın.
  2. Konuşmayı bir ZIP olarak dışa aktarın. Konuşma metni, tasarım mantığınızı yakalar; yapay zeka ürünü dosyaları hemen çalıştırılabilir.
  3. Yapay zeka ürününü bir üretim Vite projesine aktarın. Listelenen bağımlılıkları yükleyin. Bileşen, değişiklik yapılmadan çalışır.
  4. İstek tarzı yorumları uygun JSDoc ile değiştirin. Testler ekleyin. Dağıtın.

İlk istemden yerel olarak çalıştırmaya kadar geçen toplam süre: yaklaşık 5 dakika. Dışa aktarma, “Claude bunu oluşturdu” ile “bu benim depomda yaşıyor” arasındaki boşluğu doldurur.

Deneyin

Claude’u açın. “Bana kullanıcı kaydolma akışını gösteren bir Mermaid diyagramı içeren, kendi kendine yeten bir HTML sayfası oluştur” deyin. Yapay zeka ürünü görüntülendiğinde, ChatExport AI ile konuşmayı bir ZIP olarak dışa aktarın. ZIP’iniz, tam konuşma metninin yanı sıra bağımsız bir .html dosyası, .mmd kaynağı ve işlenmiş .svg dosyasını içerir.

Eksiksiz Claude yapay zeka ürünü iş akışı budur.

İlgili

ChatExport AI'ı dene

Ücretsiz Chrome uzantısı. Hesap gerekmez.

Chrome'a ekle, ücretsiz