Claude ile Web Sitesi: Sıradan Web Siteni Etkileyici Yapan Hazır Paket

Paket

Pakette ne var

Claude Ustalık Serisi #08 · Hazırlandığı tarih: 25 Ekim 2026 · Claude Desktop'un Code sekmesi için.

Claude'a yalnız “bana bir web sitesi yap” dediğinde temiz, çalışan ama sıradan bir web sitesi gelir. Fark Claude'da değil, ona verdiğin şeyde: beğendiğin bir web sitesini referans olarak göstermek, malzemeyi önceden hazırlatmak, önce plan istemek ve gördüğünü sade Türkçeyle söylemek.

Videoda bu yolla düz kartlardan oluşan bir Şampiyonlar Ligi web sitesi; kaydırınca açılan fotoğraflara, arkada dönen 3D kupaya ve fareyle dalgalanan kale filesine sahip bir web sitesine dönüştü. Bu paket, aynı yolu kendi konuna uygulaman için hazırlandı.

Promptlar kurulum istemez. İki skill'in kurulumu ise bir kez terminal ister; onu da 02 ve 03'te adım adım anlattım.

Code sekmesi ücretli planlarda var (Pro, Max, Team, Enterprise). Code sekmesini kullanmak için Node.js ya da terminal kurman gerekmez.

01 · Promptlar

Videodaki promptlar, kendi web sitene uyarlanmış hâliyle

Köşeli parantezli yerleri kendi bilginle değiştir; parantezin içindeki “ör.” videodaki örnektir. Sıra videodaki akışla aynı, yalnız teslim promptu en sona alındı. Videodaki örnek: son on Şampiyonlar Ligi finali, 3D kupa ve kale filesi.

Hepsini Code sekmesinde, web siten için açtığın klasörde ve aynı konuşmada yaz. Böylece Claude önceki adımlarda ne kararlaştırdığınızı bilir.

Promptlar üç grupta: A · Kurulum (hazırlık ve 1–4) web sitesini kurar, B · Düzeltme turları (5–14) gördüğün sorunu söyleme kalıplarıdır, C · Bitiş (15–16) doğruluğu kontrol edip teslim alır. Acelen varsa A ve C yeter; B'den ihtiyacın olanı seç.

Hazırlık · Malzemeyi Claude'a kurdur

Videoda bu iş ayrı bir konuşmada yapıldı. Aşağıdaki prompt o işin örnek hâlidir, birebir metin değildir.

Bu klasör [konun] web sitesi için. Önce malzemeyi hazırla: [hangi bilgiler, ör. son on yılın finalleri: kazanan, skor, goller, kadrolar] için bilgileri araştır. Her bilgiyi en az iki kaynakla karşılaştır, kaynağını yanına yaz ve hepsini tek bir veri dosyasında topla. Klasörün düzenini de sen kur: fotoğraflar için ayrı bir klasör aç ve dosyaları nasıl adlandıracağımı söyle. Emin olmadığın bilgiyi dosyaya yazma, bana ayrıca listele.

Neden: Claude'un web sitesine koyacağı her bilgi bu dosyadan gelir. Kaynağıyla toplanan bilgi, sonraki adımlarda “bilgi uydurma” demeni anlamlı kılar. Fotoğrafları sen seç ve Claude'un açtığı klasöre koy. Bulanık fotoğrafı Claude parlatamaz.

Claude internetten araştıramazsa bilgileri sen topla, kaynaklarıyla birlikte tek bir dosyada ver; düzenini Claude kursun.

1. Düz başlangıç

Bu klasörde [veri dosyan] var; içinde [ne olduğu, ör. son on finalin bilgileri] duruyor. Yalnız bu dosyayı kullanarak bir web sitesi yap: ana sayfada her [öğe, ör. final] bir kart olsun, karta tıklayınca o [öğenin] sayfası açılsın ([sayfada görmek istediğin bilgiler, ör. skor, golcüler, iki takımın ilk 11'i]). Bilgisayarımda açıp bakabileyim.

Neden: Bu prompt bilerek sade. Referans ve plan olmadan Claude'un ne çıkardığını görürsün: doğru, temiz, ama sıradan. İstersen bu adımı atlayıp 2. prompttan başlayabilirsin.

2. Referansı ver, önce planı iste

Şimdi seviyeyi değiştiriyoruz. Beğendiğim bir web sitesi var: [referans web sitesinin adresi]. [Ne anlattığı, tek cümle]. Ekran görüntülerini ekledim[; nasıl kurulduğunun haritası harita.md dosyasında]. Önce bunları oku ve bana sade bir dille anlat: bu web sitesinde insanı etkileyen 5 an ne, biz [konun] web sitemizde her birini nasıl kuracağız? Kodunu, metnini, görsellerini ve logosunu kullanmayacağız, yalnız fikirlerini alacağız. Henüz bir şey yapma, sadece planını söyle.

Neden: “Henüz bir şey yapma, sadece planını söyle” cümlesi, Claude'un seni doğru anlayıp anlamadığını daha hiçbir şey kurulmadan gösterir. Ekran görüntülerini prompt kutusunun yanındaki artıdan ekle. Harita dosyan yoksa köşeli parantezli kısmı sil; harita skill'i 02'de.

3. Ana sayfayı kur

Planın iyi. Bu sistemi [konun] için kur, bizim içeriğimizle; ilk web sitesinin yerine bu geçsin. Açılışta [açılış anı, ör. bir yıl sayacı ve kısa bir giriş yazısı]. Ana sayfada [ana hareket, ör. fare tekerleğiyle yana kayan, kâğıt gibi hafif kıvrık 3D fotoğraf panelleri; her panel bir final]. [Öne çıkan nesne, ör. kupa] [nerede ve nasıl hareket etsin, ör. panellerin arkasında yavaşça dönsün]. [Nesne] hazır: [dosyanın yeri], aynısını kullan, yeniden çizme. [Değişen bilgiler, ör. panel değişince yıl sayarak değişsin, altta kısa bir slogan dursun]. Metinler yalnız [veri dosyan]'daki bilgiye dayansın. Fotoğraflar [fotoğraf klasörü] klasöründe. Yazı tipi [yazı tipin], zemin [zemin rengi], yazı [yazı rengi]. Bitince önizlemede aç ve kendin kontrol et.

Neden: Planın her anını tek tek yazmak, Claude'a ortalamayı değil senin istediğini yaptırır. Tek promptta çok şey istendiği için en riskli adım budur; videoda ilk denemede oldu. Son cümle Claude'a kendi işine bakmasını söyler. Hazır bir nesnen yoksa o cümleyi sil; Claude'dan nesneyi ayrı bir konuşmada çizmesini isteyebilirsin.

4. Detay sayfası için tek şablon

Şimdi [detay sayfası, ör. final sayfası]. Tek bir şablon yap, her [öğe] kendi bilgisiyle dolsun; [ana sayfadaki öğeye, ör. panele] tıklayınca açılsın. Sırası şöyle: [1. bölüm, ör. büyük fotoğraf ve kısa slogan]; [hareketli bir an, ör. fareyle oynayınca dalgalanan bir kale filesi, kupa filenin arkasından aşağı insin]; [dev bir başlık]; [bilgi bölümleri, ör. iki takımın bayrakları ve ilk 11'leri, gol zaman çizgisi, skor tabelası]; [hikâye, ör. üç kısa paragraf]; [öne çıkan kart, ör. Maçın Oyuncusu]; sayfanın sonuna gelince kendiliğinden bir sonraki [öğeye] geçsin. Metinler için yalnız [veri dosyan]'daki bilgileri kullan, bilgi uydurma.

Neden: Tek şablon, onlarca sayfayı aynı düzende tek seferde kurar. Son cümle önemli: yapay zekâ bir boşluk görünce bazen tahminle doldurur. “Bilgi uydurma” bu kapıyı kapatır.

Her web sitesinde başka bir şey ters gider; bu promptları sırayla değil, ihtiyacın olduğunda kullan. Hepsi aynı kalıbı izler: nerede, ne oluyor, nasıl olsun.

5. Bir şey ters gidince

Açtım ama [ne gördüğün, ör. sayfanın büyük kısmı boş geliyor: fotoğraftan sonrası hiç görünmüyor, aşağıda koca bir boşluk var]. [Varsa ekrandaki hata yazısı, olduğu gibi: “…”]. [Çalışmayan başka bir şey, ör. sona gelince sonraki sayfaya geçmedi]. Bunu düzeltir misin?

Neden: Çoğu kişinin pes ettiği an burası. Yapacağın şey basit: gördüğünü olduğu gibi yaz. Videoda Claude sebebi buldu ve bir dakika sürmeden düzeltti. Önizleme açıkken Claude bu tür hataları çoğu zaman kendisi de yakalar.

6. Özel bir sayfa

Bir de özel sayfa istiyorum: [konu, ör. İstanbul 2005, Liverpool–Milan]. Adı “[sayfa adı]”. Aynı şablonu kullan ama [tema farkı, ör. gece temasında olsun: koyu zemin, açık yazı]. [Bu sayfaya özel anlar, sırasıyla, ör. önce devre arası tabelası gelsin, sonra goller hızlı aksın, en sonda penaltılar tek tek gösterilsin]. Fotoğraflar [dosya adları]. Ana sayfada [nereye] ve menüye bu sayfa için ayrı bir giriş koy. Bilgiler yalnız [veri dosyan]'dan.

Neden: Aynı şablonu başka bir temayla kullanmak, sıfırdan sayfa yaptırmaktan hızlıdır ve web sitesinin bütünlüğünü korur. Videoda bu, “Efsane Gece” sayfası oldu.

7. Küçük bir görüntü sorunu

[Sayfa adı] çok iyi olmuş. Yalnız [rahatsız eden şey, ör. kupanın arkasındaki beyaz yuvarlak koyu sayfada çok göze batıyor]. [Ne istediğin, ör. kupanın zemini sayfayla aynı koyu renk olsun]. [Değişmesini istemediğin kısım, ör. kupanın kendisi] olduğu gibi kalsın.

Neden: Önce iyi olanı söyle, sonra tek sorunu. Neyin değişmeyeceğini yazmak, düzeltme sırasında iyi olanın bozulmasını önler.

8. Web sitesini gez, gördüğünü yaz

Web sitesini gezdim, şu üç şeyi düzelt: 1) [Nerede ne oluyor, ör. ana sayfada kupa panellerin arkasında kaybolmuş; ortadaki fotoğraf kupanın neredeyse tamamını kapatıyor]. Referansta [nasıl]; bizde de öyle olsun. 2) [Nerede ne oluyor, ör. ana sayfada yazılar fotoğraflarla çakışıyor]. [Nasıl olsun, ör. yazılar fotoğraflara binmesin]. 3) Telefonda bakınca [ne oluyor, ör. fotoğrafa dokununca detay sayfası açılmıyor]. Her birinden sonra ekran görüntüsü al, önce/sonra olarak göster.

Neden: Kod yok, teknik kelime yok. İyi bir sorun cümlesi üç şey söyler: nerede, ne oluyor, nasıl olsun. Telefonu ayrıca söyle; bilgisayarda düzgün görünen web sitesi telefonda bozulabilir. Videoda Claude üçünü de tek seferde düzeltti.

9. Referansla ölçüyü karşılaştır

Referans aldığımız web sitesine göre [hangi bölümdeki ne, ör. ana ekrandaki fotoğraflar] küçük kalmış; referansla aynı yapalım. Referansta [ölçü, ör. ortadaki fotoğraf ekran genişliğinin yaklaşık üçte birini kaplıyor ve ekranın tam ortasında duruyor]. Bizde şu an [şimdiki hâli, ör. genişliğin dörtte biri kadar ve ortanın altında kalıyor]. [Ne yapsın, ör. fotoğrafları referanstaki gibi büyüt ve ortala; yan fotoğraflar da aynı oranda büyüsün]. [Korunacaklar, ör. yazılar yine fotoğraflara binmesin].

Neden: “Daha büyük olsun” yerine kaba bir ölçü vermek (üçte bir, yarısı) Claude'un tahmin yürütmesini engeller. Korunacak şeyi yeniden söylemek, eski düzeltmelerin bozulmasını önler.

10. Kalan küçük farkı söyle

[Önceki düzeltme, ör. ortadaki fotoğraf] şimdi referanstaki gibi oldu, güzel. Bir tek [kalan fark, ör. yan fotoğraflar ortadakine yapışık duruyor]. Referansta [nasıl, ör. aralarında ortadaki fotoğrafın yaklaşık dörtte biri kadar boşluk var]. [Ne istediğin].

Neden: Olanı onaylamak Claude'a neyin doğru olduğunu söyler. Tek farkı söylemek düzeltmeyi dar tutar.

11. Referansla hareket farkı

Ana sayfayı referansla yan yana açtım, [kaç] fark var. Referansta [hareket, ör. tekerleği çevirdikçe fotoğraflar iki yana açılıyor ve arada kupa görünüyor, bırakınca en yakın fotoğraf yerine oturuyor]; bizde [şimdiki hâli, ör. bir sonraki fotoğrafa direkt atlıyor]. Referansta [fare davranışı, ör. farenin ucunu fotoğrafın üstüne getirince resim çerçevesinin içinde hafifçe yakınlaşıyor, fare çekilince yavaşça geri dönüyor]; bizde de aynısı olsun. Bir de referansta [boyut farkı]; bizimkileri de o kadar büyüt ama [korunacak şey].

Neden: Referansı bir kere verip bırakma. Her turda yan yana koy, farkı söyle. “Referansta şöyle, bizde böyle” kalıbı hareketi bile tarif ettirir.

12. Fotoğrafları değiştir

Malzeme klasörüne yeni fotoğraflar koydum: [klasörün yeri]. Web sitesindeki fotoğrafları bunlarla değiştir ([hangi dosya hangisinin yerine]); hepsi aynı tonda dursun ve [önemli ayrıntı, ör. kupa] net görünsün. Fotoğraf künyesini de [kaynak listesi dosyası]'ndaki kredi satırlarıyla güncelle, eski satırlar kalksın.

Neden: Fotoğrafı değiştirirken künyeyi de aynı promptta güncellemek, hangi fotoğrafın kime ait olduğunu kayıt altında tutar.

Yalnız kullanma hakkın olan fotoğrafları koy: kendi çektiğin, satın aldığın ya da lisansı izin veren fotoğraflar.

13. Öne çıkan nesneyi referansa yaklaştır

[Sayfa]'da [nesne, ör. kupa] [başka bir öğenin, ör. filenin] arkasında kalıyor. Referanstaki gibi [nasıl, ör. filenin önünde] olsun. [Nesne] referansa göre biraz sönük de duruyor: [ne istediğin, ör. ışığını ve yansımalarını güçlendir, parlak noktalar daha belirgin olsun]. Bir de [hareket, ör. biraz daha hızlı dönsün]; şu an [şimdiki hâli], yaklaşık [hedef, ör. iki katı hızlı] olsun. [Öbür sayfadaki aynı nesne] de aynı parlaklıkta olsun.

Neden: Görüntüyü kelimeyle tarif et: önde mi arkada mı, sönük mü parlak mı, yavaş mı hızlı mı. “Yaklaşık iki katı” gibi kaba bir ölçü yeter.

14. Hareketli bir ayrıntıyı referansa benzet

[Nesne] oldu, şimdi [öğe, ör. file]. Bizim [öğe] [şimdiki hâli, ör. düz bir ızgara gibi duruyor, ipler ince]. Referansta [nasıl görünüyor, ör. ipler kalın, hafif dalgalı, düğümler belirgin, gerçek bir kale filesi gibi]. [Öğeyi] buna benzet. Fareyle üzerinde gezince de referans kadar his vermiyor: referansta [fareye tepkisi, ör. fareye yakın ipler belirgin şekilde itilip eğiliyor, sonra yaylanarak yerine dönüyor]. Bizimkini de böyle yap.

Neden: Görünüşü ve fareye verdiği tepkiyi ayrı ayrı söylemek, ikisinin de düzelmesini sağlar.

15. Doğruluk kontrolü

[Sayfa]'da “[emin olmadığın cümle]” diye bir cümle var. Bunu iki ayrı kaynaktan doğrulayamadık; emin olmadığımız bilgi web sitesinde olmasın. O cümleyi kaldır. Web sitesinde başka “rekor”, “en”, “ilk” gibi iddialar varsa bana liste hâlinde göster, her birinin [veri dosyan]'da kaç kaynağa dayandığını da yaz; şimdilik onlara dokunma.

Neden: Web sitesindeki her iddia senin adınla yayınlanır. Claude'a iddiaları kaynak sayısıyla listelettirmek, neyi kaldıracağına senin karar vermeni sağlar.

16. Teslim al

Son kontrol: her sayfayı tek tek aç; bozuk görsel, taşan yazı ya da [veri dosyan]'la uyuşmayan bilgi var mı bak, varsa düzelt. Sonra web sitesini bu klasörde çift tıklayınca açılacak şekilde hazırla; [öne çıkan nesne] de görünsün. Çift tıklamayla olmuyorsa tek komutla açılsın. Nasıl açacağımı iki cümleyle yaz. Web sitesini internete yükleme.

Neden: Teslimi açıkça istemezsen Claude'un bıraktığı yerde kalırsın. 3D nesne ya da hareketli fotoğraf varsa düz çift tıklama yetmeyebilir; videoda Claude bunun için klasöre bir başlatma dosyası koydu, web sitesini açmak için ona çift tıklamak yetti. İnternete yüklemek istersen bunu ayrıca iste.

İpuçları

• Aynı konuşmada kal. Claude her adımda önceki kararları bilir, planı yeniden anlatman gerekmez.
• Kısa sürmez. Videodaki web sitesinde Claude ilk 15 prompt için toplam yaklaşık 50 dakika çalıştı. Ücretli planda bu süre planının kullanım hakkından düşer.
• Parça parça ilerle. Her prompttan sonra önizlemede bak; sorunu büyümeden söyle.

02 · Harita skill'i

Harita skill'i: REA (reverse-engineer-anything)

Ne işe yarar

REA, bir web sitesinin ya da uygulamanın kaynak kodu elinde olmadan nasıl kurulduğunu inceleyen açık kaynak bir skill. Web sitesinin tarayıcına gönderdiği dosyaları çalıştırmadan okur ve bulduklarını kanıtlarıyla Claude'a verir. Claude da bunu senin anlayacağın bir haritaya çevirir: insanı etkileyen anlar hangileri, her an nasıl hareket ediyor, sayfalar hangi sırayla geliyor.

Bu videonun hazırlığında referans web sitesinin ana dosyası REA ile 12 saniyede okundu. Claude bundan beş “imza anı” çıkardı; 2. prompttaki planın temeli bu harita oldu.

Neden işe yarar: Ekran görüntüsü yalnız görüneni gösterir. Harita, hareketin ve sıranın nasıl kurulduğunu da söyler. Böylece Claude'a “şuna benzesin” demek yerine “bu an şöyle çalışıyor, bizde de böyle olsun” diyebilirsin.

Haritayı ilham için kullan: referansın kodunu, metnini, görsellerini ve logosunu kendi web sitene koyma. REA'nın kendi uyarısına göre araç yalnız incelemeye yetkin olduğun yazılımlarda kullanılır. Bir web sitesinin kullanım şartları bu tür incelemeyi yasaklıyorsa o web sitesinde kullanma.

Ne gerekir

• Claude Desktop, Code sekmesi (ücretli plan).
• Node.js (nodejs.org): 22 sürümlerinden 22.23.4 ya da üstü, 24 sürümlerinden 24.22.1 ya da üstü, ya da 26.12.1 ve üstü. Node.js 23 ve 25 desteklenmiyor.
• Web sitesi incelemesi için bilgisayarında Chrome ya da Chrome tabanlı bir tarayıcı.
• API anahtarı gerekmez: inceleme bilgisayarında yapılır, sonucu Claude okur.

Kurulum (bir kez, terminalle)

Dürüst olayım: kurulum terminal ister, Desktop içinden tıklanan bir yolu yok. Terminal gözünü korkutmasın; üç satır yazacaksın ve her satır ne yapacağını önce gösterir.

1. Node.js'i kur. nodejs.org'dan yukarıdaki sürümlerden birini indir, kurulumu varsayılan ayarlarla bitir.
2. Terminali aç. Başlat menüsüne “PowerShell” yaz, Windows PowerShell'e tıkla.
3. Önce önizle. Aşağıdaki satırı yapıştırıp Enter'a bas. Bu satır hiçbir şey değiştirmez; neyi nereye ekleyeceğini gösterir.

npx -y rea-agents@latest setup --client claude_code --dry-run

1. Kur. Önce Claude Desktop'u tamamen kapat; açık uygulama yapılan kaydı ezebilir. Önizleme sana uygunsa bu satırı çalıştır. Değişiklikleri gösterir, onayını ister ve eski ayarının yedeğini alır.

npx rea-agents setup --client claude_code

1. Kontrol et. Bu satır kurulumun tamam olup olmadığını söyler.

rea doctor --client claude_code --skill --json

1. Desktop'u aç. Claude Desktop'u yeniden aç, Code sekmesinde yeni bir oturum başlat.

Kurulum skill'i Claude'un kişisel skill klasörüne (~/.claude/skills/reverse-engineer-anything) ekler. Desktop'un Code sekmesi kişisel skill'leri bu klasörden listeler; prompt kutusuna / yazınca listede görürsün.

Adı benzeyen sahte kopyalar var; bunu REA'nın kendisi de uyarıyor. Yalnız resmî depodan ya da npm'deki rea-agents paketinden kur.

Kaldırmak istersen: rea uninstall (inceleme verilerini de silmek için rea uninstall --purge-data).

Desktop'ta kullanmak

1. Code sekmesinde web siten için açtığın klasörü seç.
2. Aşağıdaki gibi bir prompt yaz ve Claude'dan haritayı klasöre kaydetmesini iste.
3. Harita dosyası oluşunca 2. promptta Claude'a bu dosyayı göster.

Harita skill'ini (reverse-engineer-anything) kullanarak [referans web sitesinin adresi] adresindeki web sitesinin nasıl kurulduğunu incele. Kodunu, metnini ve görsellerini projeye koyma. Bana sade Türkçeyle bir harita yaz: bu web sitesinde insanı etkileyen anlar neler, her an nasıl hareket ediyor, sayfalar hangi sırayla geliyor. Haritayı harita.md dosyasına kaydet.

Videonun hazırlığında REA terminalden çalıştırıldı. Code sekmesinde bu promptla nasıl çalıştığını ilk kullanımda kendin gör; istediğin sonucu vermezse aşağıdaki kurulumsuz yolu kullan.

Kurulumsuz yol

Terminale hiç girmek istemiyorsan: Code sekmesinin önizleme panelinde referans web sitesini açtır ve Claude'dan “sayfayı gez, bu web sitesinde insanı etkileyen anları ve nasıl hareket ettiklerini anlat” iste. Her web sitesi için bir izin kartı çıkar: Allow once, Always allow ya da Deny. Harita kadar derin olmaz ama ekran görüntüsünden fazlasını verir.

Resmî depo ve lisans (MIT): github.com/morluto/rea · npm paketi: npmjs.com/package/rea-agents (25 Ekim 2026'daki sürüm: 6.8.0)

03 · Jüri skill'i

Jüri skill'i: jury (juliobsz/skills)

Ne yapar

Web siteni, kodunu görmeyen yeni bir eleştirmene puanlatır. Önce web sitesinin ekran görüntülerini alır, bilgisayar ve telefon genişliğinde. Her başlığa kanıtıyla not verir: hangi ekran görüntüsünde neyi gördüğünü yazar. Sonunda düzeltmeleri, notu en çok yükseltenden başlayarak sıralar. Neyi önce düzelteceğini tahminle değil, listeyle bilirsin.

Sonuç, ekran görüntüleriyle birlikte .jury/[adres]/scorecard.md dosyasına yazılır. Dört ana başlığın yanında hız, erişilebilirlik, telefona uyum ve hareket ile geçişler gibi ayrıntılara da ayrı not verir.

Dört başlık ve ağırlıkları

Ağırlıklar, Awwwards'ın herkese açık değerlendirme sayfasındaki jüri ağırlıklarıdır (awwwards.com/about-evaluation). Jüri skill'inin puan kartı da genel notu aynı ağırlıklarla hesaplar: tasarım 0,4 · kullanım kolaylığı 0,3 · yaratıcılık 0,2 · içerik 0,1.

Ne gerekir

• Claude Desktop, Code sekmesi (ücretli plan).
• Node.js 22.20 ya da üstü (aracın kendi sayfasına göre; yardımcı betikler için 20 yeterli). Skill ekran görüntülerini bilgisayarında küçük betiklerle alır, bu yüzden Node.js olmadan çalışmaz. Harita skill'i için kurduğun Node.js sürümü bu şartı da karşılar.
• Görselleri okuyabilen bir model: skill kendi aldığı ekran görüntülerine bakarak puan verir.
• Ekran görüntüsü ve erişilebilirlik kontrolü için gereken araçları (Playwright, axe-core) skill gerektiğinde projeye kendisi kurar.

Kurulum

Bu da bir kez terminal ister. Node.js kuruluysa PowerShell'i aç ve şu satırı çalıştır. Paketteki iki skill'i birlikte ekler: jury (jüri) ve awwwards (web sitesini sıfırdan kuran ayrı bir skill; bu pakette kullanılmıyor).

npx skills add juliobsz/skills -g

Yalnız Claude Code için eklemek istersen satırın sonuna -a claude-code, yalnız jüri skill'i için --skill jury ekle. Kaldırmak için: npx skills remove awwwards jury -g.

Elle yol: depodaki jury klasörünü Claude'un kişisel skill klasörüne (~/.claude/skills/) kopyala. Code sekmesi kişisel skill'leri bu klasörden listeler. Yeni bir oturum aç ve prompt kutusuna /jury yaz. Skill'in kendi sayfası, Claude Code ile sınandığını yazıyor.

Eklemeden önce skill'in SKILL.md dosyasını oku: bilgisayarında betik çalıştıran talimatlar içeriyor.

Videoda anlatılan ve 21 Ekim'de sınanan sürüm: commit ea8f1455 (19 Ekim 2026). Sonraki sürümlerde değişiklik olabilir.

Kullanım

1. Claude'a web siteni önizlemede açtır ve adresini al (bilgisayarındaki önizleme adresi ya da yayındaki adres).
2. Puanlat:

/jury [web sitenin adresi] bu web sitesine jüri puanı ver.

1. Düzelttir:

Jüri puan kartındaki düzeltme listesine göre web sitesini düzelt: [puan kartının yolu]. En çok puan kazandıran maddeden başla, her düzeltmeden sonra önizlemede kontrol et.

1. Yeniden puanlat: 2. adımdaki promptu tekrar çalıştır. Skill her seferinde eski puanları görmeyen yeni bir eleştirmen kullanır.

İpuçları

• Kısa sürmez. 21 Ekim'deki sınamada bir puanlama turu 20-30 dakika sürdü ve epey token harcadı.
• Liste işe yarar. Aynı sınamada (Kapadokya balon turu web sitesi) tek bir düzeltme turuyla eleştirmen notu 6,7'den 7,3'e çıktı.

Skill'in sayfası ve lisansı (MIT): github.com/juliobsz/skills

04 · Kendi web siten

Kendi web sitende 5 adım

Kod bilmene gerek yok. Hepsi Claude Desktop'un Code sekmesinde, konuşarak.

1. Code sekmesini aç, boş bir klasör seç

Claude Desktop'ta uygulamanın sol üstünden Code sekmesine geç. Prompt kutusunun altındaki ortam seçiciden Local'ı seç, Open folder… ile boş bir klasör aç. Claude bütün dosyaları bu klasöre yazar.

2. Malzemeyi Claude'a kurdur

Konunu yaz; bilgileri araştırıp kaynağıyla klasöre koymasını iste (hazırlık promptu). Claude internetten araştıramazsa bilgileri sen topla, düzenini Claude kursun. Fotoğrafları sen seç ve Claude'un açtığı klasöre koy. Bulanık fotoğrafı Claude parlatamaz; net ve kullanma hakkın olan fotoğraflar seç.

3. Referansını ver, önce planı sor

Beğendiğin web sitesinin adresini prompta yapıştır, ekran görüntülerini prompt kutusunun yanındaki artıdan ekle (Windows'ta ekran görüntüsü için Win+Shift+S). Ondan ne almak istediğini söyle, kopyalamasını isteme. Daha derin bakmak istersen önce harita skill'iyle harita çıkar. Sonra “henüz bir şey yapma, sadece planını söyle” de (2. prompt).

4. Parça parça kurdur, gez, gördüğünü söyle

Planı beğenince önce ana sayfayı, sonra detay sayfasını iste (3. ve 4. prompt). Claude'a “web sitesini önizlemede aç” demen yeter; sağdaki önizlemede bakıp hataların çoğunu kendisi yakalar. Sonra kendin gez ve gördüğünü sade Türkçeyle söyle. İyi bir sorun cümlesi üç şey söyler: nerede, ne oluyor, nasıl olsun. Mesela: “Ana sayfada yazılar fotoğrafa biniyor, binmesin.” Kodu Claude bilir, ne gördüğünü ise sen bilirsin. Her turda referansla yan yana koy, farkı söyle (8-14. promptlar).

5. Jüriye not verdir, düzelttir, teslim al

Jüri skill'iyle puanlat, listenin başındaki maddeleri düzelttir, yeniden puanlat. En sonda teslimi açıkça iste: Claude her sayfayı son kez kontrol etsin, bilgileri dosyanla karşılaştırsın ve web sitesini çift tıklayınca açılacak hâle getirsin (15. ve 16. prompt).

Aynı yol her konuda işler. Fotoğraflarını sergilemek istiyorsan referansın beğendiğin bir fotoğrafçının web sitesi olur, malzemen kendi fotoğrafların. Bir dükkân, bir kafe menüsü, bir etkinlik sayfası… Senin web siten ne anlatacak?

05 · Kaynak

Kaynak, lisans ve notlar

• Harita skill'i: REA (reverse-engineer-anything), github.com/morluto/rea, MIT lisansı.
• Jüri skill'i: jury, github.com/juliobsz/skills, MIT lisansı © juliobsz, commit ea8f1455.
• Awwwards başlıkları: awwwards.com/about-evaluation. Jüri skill'i bu herkese açık başlıkları ve ağırlıkları kullanır; verdiği not Awwwards jürisinin resmî notu değildir. Bu sayfanın Awwwards ile resmî bir bağı yoktur.
• Code sekmesi: code.claude.com/docs/en/desktop-quickstart · code.claude.com/docs/en/desktop
• Videodaki konuşma Claude Code'da (Desktop'taki Code sekmesiyle aynı motor), Claude'un Opus 5.5 modeliyle geçti. Promptlar bu sayfada kendi konuna uyarlanabilir hâle getirildi; referans web sitesinin adı ve iç bilgiler çıkarıldı.
• Videodaki Şampiyonlar Ligi web sitesi bir eğitim örneğidir. Kulüp adları, armalar ve fotoğraflar sahiplerinindir.

Okuma tarihi 24-25 Ekim 2026. Claude, Anthropic'in markasıdır; bu sayfanın Anthropic ile resmî bir bağı yoktur.