Ajan için görev olarak ekran görüntüsü

Elinizde bir görsel var: beğendiğiniz bir site ve kendi sayfanızın da öyle görünmesini istiyorsunuz. Böyle bir siteyi kelimelerle anlatmak zor. "Açık renkli, ferah, üç sütunlu kartlar, tırnaksız yazı tipi, büyük başlıklar" - bu tarif görseli açmaktan bile daha uzun sürüyor, üstelik yine de tam isabet etmiyor. Buradan doğal bir soru çıkıyor: ajan metinle çalışıyor. Peki görseli görebiliyor mu?

Görebiliyor. Ekran görüntüsünü doğrudan isteğe yapıştırabilirsiniz, ajan da onu sizin anlatımınız yerine bütünüyle alır. Ama görsel görevin yalnızca yarısı: nasıl görünmesi gerektiğini söylüyor, gerisi hakkında susuyor. Gerisini siz eklersiniz; tam olarak neyi ekleyeceğiniz aşağıda.

1. Görseli ajana nasıl iletirsiniz

İki yol var.

Görseli kopyalayıp giriş satırına yapıştırın: Ctrl+V, Windows ve WSL'de ise Alt+V.
@ yazın ve öneriden yolu seçin.

Yapıştırdığınızda giriş satırında [Image #1] etiketi belirir. Bundan sonra hem siz hem ajan görsele bu numarayla atıfta bulunursunuz; ikincisi [Image #2] olur ve bu böyle devam eder. Şöyle görünür:

[Image #1] Sayfayı bu ekran görüntüsüne benzet.

Etiketi Claude Code kendisi ekler, siz yazmazsınız. Tek görsel ve tek cümleden oluşan istek böyle görünür ve bu yetmez, ama buna aşağıda döneceğiz. Görsel zaten projede duruyorsa, örneğin tasarımcıdan gelen bir taslak img/ klasöründeyse, ikinci yol daha kullanışlı:

@img/reference.png index.html dosyasını bu örneğin stiline uyarla.

@ yazın, dosya adını yazmaya başlayın, Claude Code yolu kendisi tamamlar. Böyle bir görsele geri dönmek kolay: sonraki herhangi bir istekte yeniden @img/reference.png yazmak yeterli, tekrar yapıştırmaya gerek yok. Proje dışındaki bir dosyayı da tam yoluyla belirtebilirsiniz.

Terminal Ctrl+V'yi kendi ihtiyacı için ele geçiriyorsa, Alt+V imdada yetişir. Formatlar bilindik: PNG, JPEG, WebP, GIF de olur, yalnızca animasyondan ajana ilk kare kalır. Telefondan alınan ekran görüntüsü uygun. Ekranın fotoğrafı ise daha kötü: yansımalar ve eğiklik yüzünden hatalı okunur.

Ve sıralama önemli: önce görsel, sonra kelimeler. Ajan böyle daha iyi çalışır, size de böylesi daha kolay - önce göstermek, sonra anlatmak.

Görsel de yer kaplar

Ekran görüntüsü metinle birlikte konuşmada yaşar ve ajan tarafından her adımda yeniden okunur. Bir iki örnek normaldir. Art arda on tanesi oturumu belirgin şekilde ağırlaştırır, işi biten görselleri de yeni bir göreve taşımaya gerek yok.

2. Ajan görselde neyi görür

Görselin kendisini, tarifini değil. Büyük bir ekran görüntüsü gönderilmeden önce küçültülür, bu yüzden sizin ekranınızdaki küçük ayrıntılar ajan için birbirine karışabilir. Büyük şeyleri güvenle alır: hangi bloklar yukarıdan aşağı hangi sırada duruyor, oranları neler, sayfa açık mı koyu mu ve vurgu rengi ne, okunaklı metin, genel karakter - sıkışık mı ferah mı, köşeler keskin mi yuvarlak mı.

Ajanın sizinle aynı yere baktığından emin olmanın basit bir yolu var: değişikliklerden önce, hiçbir şeyi değiştirmeden örneği anlatmasını isteyin. Bir dakikanızı alır. Cevap aşağı yukarı şöyle görünür:

Açık renkli sayfa. Üstte solda site adı, sağda üç bağlantı olan dar bir header.
Altında iki satırlık büyük bir başlık ve kısa bir paragraf.
Devamında eşit genişlikte üç kart yan yana, üstte görsel, altta metin.
Tek bir vurgu rengi var, koyu mavi: header'daki düğme ve alt çizgiler.
Bloklar arasında bolca boşluk, köşeler yuvarlak, gölgeler neredeyse yok.

Sizin örneğinizin anlatımı kendine özgü olacak ve içinde renk kodu, "yaklaşık 24 piksellik boşluk" ve yazı tipi adı pekala geçebilir. Bu göz kararı bir tahmin, ne pipet ne cetvel: bu tür sayılar örneğin yanında kontrol edilir, ölçülmüş gibi kabul edilmez. İlk geçiş doğru yönü verir, birebir aynısı çıkmaz. Bu, ajanın hatası değil, görselin doğası; nedenini aşağıda göreceksiniz.

3. Görselde olmayan şeyler

Güvenle alır	Görmez ya da yaklaşık görür
blokların yerleşimini ve sırasını	piksel cinsinden tam boyutları - yaklaşık
renk paletini ve vurgu rengini	renk kodlarını - yaklaşık
yazı tipinin karakterini	yazı tipinin adını - benzerini seçer
okunaklı metni	çok küçük metni ve ikonları - küçültmeden sonra kaybolur
genel karakteri: boşluk, yuvarlaklık, kontrast	davranışı: üzerine gelme, tıklama, animasyon - hayır
kadrajda olanı	diğer sayfaları, telefondaki görünümü, kenarın dışındakini - hayır
büyük öğelerin sayısını, genellikle doğru	küçük öğelerin tam sayısını - yaklaşık

24 piksellik bir boşluğu ajan "yaklaşık 24" diye adlandırır ve üçte bir kadar yanılabilir, renk kodu için benzerini verir, yazı tipi için karakteri yakın olanı seçer. Üzerine gelme, tıklama, animasyon, komşu sayfalar, telefondaki görünüm - bunlar görüntüde yok ve siz söylemeden ajan bunlardan haberdar olmaz.

Ajan çizim yapmaz

Örnekteki görseller, logo ve illüstrasyonlar sizin sayfanızda kendiliğinden belirmez. Ajan görselleri anlar, ama yenisini çizmez. Kendi görsellerinizi proje klasörüne kendiniz getirip nerede olduklarını söylemeniz gerekir.

Büyütmeyin, kırpın

Küçük bir ayrıntı önemliyse, ekran görüntüsünden o kısmı kırpıp ikinci bir dosya olarak verin - elle ya da ajandan ilgili alanı kesmesini isteyerek. Ama metnin daha büyük görünmesi için etrafındaki her şeyi kırpmayın: ajanın bu parçanın nerede durduğunu ve yanında ne olduğunu görmesi gerekir.

Telefon konusu ayrı. Ekran görüntüsü tek bir ekran genişliğinde alınmıştır, ajan da yalnızca onu görür. Telefondaki görünüm önemliyse ve örnek bir bağlantıdan açılıyorsa, onu telefondan da çekin: iki görsel, iki etiket. İkinci görsel olmadan dar ekran hakkında kelimelerle anlatmanız gerekir ve sonuç örneğe değil, sizin tarifinize göre olur.

4. Kelimelerle neyi eklemeniz gerekir

Görsel "nasıl görünmesi gerekir" sorusuna cevap veriyor, ama dört soruya daha cevap vermiyor. Sizin payınıza düşen iş, örneği vermek ve onunla ne yapılacağını söylemek. Dört satır; sonucu da bunlarla karşılaştıracaksınız.

Örnekte en önemli olan ne. Renkler mi? Kart ızgarası mı? Header mı? Yazı tiplerinin karakteri mi? Bu olmadan ajan her şeyi bir anda ve ortalama bir şekilde alır, ortalama ise genellikle istediğiniz şey olmaz. Bu satır için kelimeler zaten hazır: ajanın başta yaptığı örnek anlatımından alın.

Kendi sayfanızda neyi koruyacaksınız. Metni, sayfa yapısını, bağlantıları, kendi görsellerinizi. Yoksa ajan başlıkları örneğe göre yeniden yazabilir: orada başka başlıklar vardı çünkü.

Neyi kopyalamayacaksınız. Logoyu, başkasının metinlerini, ürünleri, fotoğrafları. Örnek bir stildir, içerik değil.

Sınırlar. Tek sayfa, değişiklikler yalnızca index.html ve style.css içinde, kütüphane ve derleme olmadan. Neye dokunulmayacağı.

Görselin yanında dört satır sıkıcı görünüyor. Onlar olmadan sonuç güzel ama istediğiniz gibi değil ve düzeltmesi bu satırlardan daha uzun sürüyor.

5. Tek bir istek, bütün olarak

Önce görsel, sonra dört satır:

[Image #1] Sayfamı bu örneğin stiline uyarla.
Önemli olan: açık renk paleti, üç sütunlu kartlar, tırnaksız yazı tipinde büyük başlıklar.
Metni, yapıyı ve kendi görsellerimi olduğu gibi bırak.
Logoyu, fotoğrafları ve örnekteki metinleri aktarma.
Yalnızca index.html ve style.css dosyalarını değiştir, kütüphane kullanma.

Görselden sonraki dört satır, tam olarak onda olmayan o dört şey.

Cevap olarak ajan genellikle örnekten neyi aldığını sıralar ve dosyalarda değişiklik yapar. İlk sonuç bir yöndür, kopya değil. Sonrasında kısa sözlü düzeltmeler gelir, çünkü örnek zaten konuşmada duruyor ve görseli tekrarlamaya gerek yok:

Kartları örneğe daha çok yaklaştır: gölgeler daha yumuşak, köşeler daha yuvarlak, kartlar arasında daha fazla boşluk.

Ajan "hazır" dediğinde, örneği ve kendi sayfanızı yan yana açıp kendi dört satırınıza göre karşılaştırın. Sonuç örnekten bütünüyle uzaksa, aynı görseli aynı istekle tekrarlamayın: en çok göze batan tek bir şeyi söyleyin ve teker teker düzeltin. "Görseldeki gibi yaptım" raporu, ne kadar kendinden emin olursa olsun, bir kontrol sayılmaz.

6. Akılda kalması gerekenler

Görsel görünümü belirler, kelimeler sınırları belirler. Biri diğeri olmadan ya "yanlış çıkar" ya da uzun sürer.
Ajan görselden büyük şeyleri alır: yapıyı, oranları, renk paletini, karakteri. Küçük ayrıntılar ve davranış size kalır.
İlk geçiş bir yöndür. Sonraki düzeltmeler kısadır, çünkü örnek zaten konuşmada duruyor.
Görsel yalnızca örnek olarak değil, başka yerlerde de işe yarar. Tarifi görselin kendisinden uzun çıkacaksa, onu verin.

Anlatmak yerine hata ekran görüntüsü

Konsoldaki kırmızı metin, garip kayan bir blok, anlaşılmaz bir mesaj penceresi - ekran görüntüsünü alın ve olduğu gibi verin. Ajan, sizin elle ve muhtemelen yazım hatalarıyla yazacağınız şeyi görselden okur.

"Buradaki gibi yap" iyi bir başlangıç olmaya devam ediyor. İyi bir görev haline gelmesi, dört satırdan ve sonucu örneğin yanında bir kez gözden geçirmenizden sonra oluyor.

Klavye kısayolları ve görsel etiketinin görünümü Claude Code'un yeni sürümlerinde değişebilir; iletme yöntemi ve ajanın görebildiklerinin sınırları sürümden bağımsızdır.