Kâğıda çizdiğin site taslağını Claude ile çalışan web sayfasına çevirme

Aklındaki siteyi anlatmaya çalışıp "yok, öyle değil" dediğin oldu mu? Kelimelerle sayfa düzeni tarif etmek zordur. Kâğıda üç kutu çizmek ise on saniye sürer. Claude, tariflerini ve görsellerini çalışan web arayüzlerine çevirebiliyor ve sayfayı sohbetin yanında açılan ayrı bir pencerede, yani bir Artifact olarak kuruyor. Bu rehberde kâğıttaki kaba çizimden tıklanabilir bir taslak sayfaya nasıl gideceğini adım adım anlatıyorum.

Başlamadan bir not: Çıkan sayfa bir taslaktır. Fikrini görmek, müşterine ya da ekibine göstermek ve "şöyle bir şey istiyorum" demek için harikadır. Gerçek alan adında yayına almak ayrı bir iştir; buna sonda değineceğim.

1. Özelliğin açık olduğundan emin ol

Claude'da ayarları aç ve Settings > Capabilities bölümüne gir. Burada Cloud code execution and file creation seçeneği açık olmalı. Anthropic'in yardım sayfasına göre Artifact'ler bu ayara bağlıdır ve Free, Pro, Max, Team, Enterprise planlarında bulunur. Team ve Enterprise hesaplarında bu ayar Organization settings altındadır ve yöneticin açar.

2. Kâğıda kaba taslağı çiz

Beyaz bir A4 kâğıt ve koyu renkli bir kalem yeter. Güzel çizmek zorunda değilsin; Claude'un anlaması gereken şey düzen ve içerik:

1. En üste ince uzun bir kutu çiz, içine "MENÜ" yaz. Sağına menü öğelerini sırala: "Hakkımızda · Fiyatlar · İletişim".
2. Altına büyük bir kutu çiz, içine "BÜYÜK BAŞLIK" ve altına küçük harfle "kısa açıklama + Randevu Al düğmesi" yaz.
3. Altına yan yana üç küçük kutu çiz, her birine "KART" yaz.
4. En alta ince bir şerit çiz, içine "adres, telefon" yaz.

Her kutuya ne olduğunu yazı ile yazmak, kutunun ne olduğunu tahmin etmeye bırakmaktan çok daha iyi sonuç verir. Ok çizip "buraya fotoğraf" gibi notlar düşebilirsin.

3. Fotoğrafı net çek

• Kâğıdı düz bir masaya koy, gölge düşmesin; gün ışığı ya da tavan ışığı yeterli.
• Telefonu kâğıda dik tut, kâğıt kadrajı doldursun.
• Anthropic, yüklenen görsellerin en az 1000x1000 piksel olmasını öneriyor; telefon kameraları bunu rahatça geçer. Desteklenen biçimler JPEG, PNG, GIF ve WebP.

4. Fotoğrafı Claude'a yükle

Sohbet kutusunun sol altındaki + düğmesine bas ve Add files or photos seç. Dosyayı sohbet penceresine sürükleyip bırakabilir ya da panodan yapıştırabilirsin.

5. Ne istediğini açık yaz

Fotoğrafla birlikte şu mesajı gönderebilirsin; köşeli parantezleri kendi işine göre doldur:

Ekteki fotoğraf, kâğıda çizdiğim bir web sitesi taslağı.
Bunu çalışan, tek sayfalık bir HTML sayfası olarak artifact içinde yap.
- İşletme: [Denizli'de bir kuaför salonu]
- Kutulardaki yazılar bölüm adlarıdır; düzeni çizimdeki gibi koru.
- Kartlara örnek hizmet adı ve kısa açıklama koy, fiyat uydurma.
- Telefonda da düzgün görünsün.
- Renkler: [lacivert ve krem]

Claude sayfayı kurar ve sohbetin yanındaki pencerede açar. Bu tür kod tabanlı (klasik) artifact'lerde pencerenin üstündeki denetimlerle kodu görebilir, kopyalayabilir ya da indirebilirsin. Belge, sunum gibi şablon tabanlı artifact'lerde bunun yerine Export kullanılır.

6. Sohbetle düzelt

İlk sürüm nadiren son sürümdür. Değişikliği tek tek ve net iste:

• "Başlığı daha büyük yap, düğmeyi turuncu yap."
• "Kartların altına fiyat satırı ekle: [fiyatlarını yaz]."
• "Menüye WhatsApp bağlantısı ekle."
• "İletişim bölümüne harita için boş bir alan bırak."

Her istekte Claude sayfayı günceller. Bir şey bozulursa ve pencerede hata görürsen hata mesajının yanındaki Try fixing with Claude düğmesiyle düzeltmesini isteyebilirsin; Anthropic bunun her zaman başarılı olmayabileceğini belirtiyor.

7. Paylaş ya da sakla

Artifact'ler başta yalnız sana özeldir. Birine göstermek istediğinde artifact'i paylaşabilir ya da dışa aktarabilirsin. Paylaşım ayarları claude.ai web sitesinde ya da Claude Desktop'ta yönetilir; iOS ve Android uygulamalarında bu ayar yoktur. Kodu indirip bilgisayarında saklamak da iyi bir alışkanlıktır.

Sık hatalar

Ayar kapalı: Sayfa pencerede açılmıyor ve yalnız kod yazıyorsa 1. adımdaki ayarı kontrol et.

Bulanık ya da karanlık fotoğraf: Kalem izleri okunmazsa Claude kutuları yanlış yorumlar. Kurşun kalem yerine keçeli kalem kullan.

Kutulara etiket yazmamak: Boş bir kare görsel mi, metin mi, düğme mi belli değildir. Her kutuya ne olduğunu yaz.

Her şeyi tek mesajda istemek: On değişikliği bir arada istersen bazıları kaçar. İki üç değişiklikte bir kontrol et.

Taslağı bitmiş site sanmak: Taslaktaki metinler ve görseller örnektir. Gerçek fiyatlarını, adresini ve telefonunu kendin kontrol et.

Taslaktan gerçek siteye

Gerçek bir sitede alan adı, barındırma, güvenlik sertifikası, arama motoru ayarları, gerçek fotoğraflar ve hukuki metinler gibi işler vardır. Claude Academy'deki örnek akış, Claude'un Netlify'a bağlanıp artifact kodunu canlı bir siteye çevirmesini de anlatıyor; yine de bu, taslağı çizmekten ayrı ve daha uzun bir iştir. Çizdiğin taslak bu aşamada da çok işe yarar: Kime yaptırırsan yaptır, "şöyle bir şey istiyorum" demenin en net yolu odur.

Takılırsan @jarvisasistan'a DM at ya da WhatsApp'tan yaz; çizimini birlikte sayfaya çevirelim.

Kaynaklar

• Anthropic yardım merkezi, Artifact'ler: https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them
• Anthropic yardım merkezi, Artifact'ler (pencere, paylaşım): https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them
• Anthropic yardım merkezi, dosya yükleme: https://support.claude.com/en/articles/8241126-upload-files-to-claude
• Claude Academy, özel web sayfası oluşturma: https://academy.claude.com/use-cases/create-a-custom-webpage