awwwards ve jüri aracı: tek cümleden sinematik web sitesi

Videodaki balon turu web sitesi awwwards adlı açık kaynak bir Claude aracıyla kuruldu. Tek cümleyle ne istediğinizi yazarsınız; araç önce bir konsept bulur, renk, yazı ve hareket dilini belirler, web sitesini kurar, sonra kendi ekran görüntülerine bakıp düzeltir.

Aynı paketteki jury (jüri aracı) herhangi bir web sitesini tasarım jürisi ölçütleriyle puanlar ve eksikleri, puana etkisi en büyükten başlayarak sıralar. İkisi art arda kullanılınca bir döngü çıkar: kur → puanlat → listeye göre düzelt → yeniden puanlat.

Sayfada üç şey var: aracın kendisi (1. bölüm), videodaki üç prompt birebir (2. bölüm) ve balon turu web sitesinin başlangıç proje dosyaları (4. bölüm).

01 · Araç

awwwards ve jüri aracı

Neden işe yarar

Yapay zekâya düz "bana web sitesi yap" dendiğinde çoğu zaman herkesin aldığı aynı sonuç gelir: mor geçiş, üç kart, sıradan başlık. Bu araç o varsayılanın yerine bir süreç koyar: konsepti sizin işinizden, yerinizden, adınızdan çıkarır ve hareketi bir fikre bağlar.

Jüri aracı işin "iyi mi gerçekten?" kısmını cevaplar: web sitesini, kodunu görmeyen taze bir eleştirmene puanlatır, her puanı bir ekran görüntüsüne ya da ölçüme dayandırır. Neyi düzelteceğinizi tahminle değil, listeyle bilirsiniz.

Ne gerekir (aracın kendi sayfasına göre)

• Bilgisayarınızda Claude Code (araç başka ajanlarla da çalışır; videoda Claude Code kullanıldı).
• Node.js 22.20 ya da üstü (yardımcı betikler için 20 yeterli).
• Görselleri okuyabilen bir model: araç kendi ekran görüntülerine bakarak kontrol eder.
• Ekran görüntüsü için Playwright ve erişilebilirlik kontrolü için axe-core: araç gerektiğinde projeye kendisi kurar.
• Yayına almak isterseniz Vercel, Netlify ya da Cloudflare hesabı (araç yayına almadan önce sorar).

Aracı ekleyin

Aracın sayfasındaki yol (tek komut, iki aracı birlikte ekler):

npx skills add juliobsz/skills -g

Elle ekleme (videodaki çekimde kullanılan yol): depodaki awwwards ve jury klasörlerini Claude'un skill klasörüne kopyalayın (ör. ~/.claude/skills/ ya da proje içinde .claude/skills/). Sonra yeni bir Claude Code oturumu açın; araçlar /awwwards ve /jury olarak görünür.

Eklemeden önce iki aracın SKILL.md dosyasını okuyun: bunlar bilgisayarınızda derleme ve betik çalıştıran talimatlar.

Aracın sayfası ve lisansı (MIT): github.com/juliobsz/skills

02 · Promptlar

Videodaki üç prompt (birebir)

1. Web sitesini kurun

/awwwards Kapadokya'da balon turu yapan Peri Balon adlı bir şirket için site yap; görseller assets klasöründe.

Kendi web siteniz için firma ya da kişi adını, ne yaptığınızı ve nerede olduğunuzu yazın. Aracın sayfasına göre gerçek ad, iş, yer ve iki üç gerçek proje verirseniz konsept sizin hikâyenizden çıkar. Kendi görselleriniz varsa bir klasöre koyup promptta belirtin.

2. Jüriye puanlatın

/jury http://127.0.0.1:4400/ bu siteye jüri puanı ver.

Adresi kendi web sitenizin adresiyle değiştirin (yayındaki adres ya da bilgisayarınızda açık olan son derleme). Sonuç .jury/<adres>/scorecard.md dosyasına, ekran görüntüleriyle birlikte yazılır.

3. Listeye göre düzeltin

/awwwards ./site sitesini jüri puan kartındaki düzeltme listesine göre düzelt: .jury/127.0.0.1-4400/scorecard.md

./site yerine kendi proje klasörünüzü, kart yolu yerine kendi scorecard.md yolunuzu yazın. Düzeltmeden sonra 2. promptu yeniden çalıştırın: araç her seferinde eski puanları görmeyen yeni bir eleştirmen kullanır.

İpuçları

• Kısa sürmez. Videodaki dört çalıştırma (kurma, jüri, düzeltme, jüri) toplam yaklaşık üç saat sürdü ve çok token harcadı; planınızın kullanım payını göz önünde tutun.
• Bilmediğini uydurmaz. Araç bilmediği bilgiyi yer tutucu olarak bırakır (videodaki örnekte telefon numarası yer tutucu). Yayına almadan önce bunları kendi bilgilerinizle değiştirin.
• Puan bir tahmindir. Aracın kendi uyarısı: jüri tahmini yalnız iki ödüllü web sitesi üzerinde ölçülen +1,1'lik farka dayanır, temkinli okuyun.

03 · Sonuç

Videodaki örneğin sonucu

Konsept (aracın seçimi): "Kaydırma uçuşun kendisi". Sağdaki irtifa ve saat şeridi 04:45'teki alıştan 07:45'teki inişe ilerler, renkler gece lacivertinden şafağa, oradan sabaha döner. Ana sayfa, 3 tur sayfası, WhatsApp'a hazır mesaj açan rezervasyon formu, sık sorulanlar ve özel 404 sayfası.

Aracın tahmine göre bandı iki turda da "Günün Sitesi aralığı (7,2 ve üstü)". Bu bir tahmindir; web sitesi hiçbir yarışmaya gönderilmedi ve ödül almadı.

Kalan eksikler (2. tur kartından): rezervasyon formunda klavyeyle gezinme takılıyor, geri dönüşte geçiş perdesinde yanlış sayfa adı yazıyor, tur sayfasında telefonda ilk içerik 3,1 saniyede geliyor, telefon numarası yer tutucu, bazı sabah duraklarında gece görseli kullanılmış. İkinci düzeltme turu yapılmadı.

04 · Proje dosyaları

Balon turu web sitesinin başlangıç proje dosyaları

balon-turu-sitesi-baslangic.zip videodaki web sitesinin düzenlenebilir hâli.

İçinde: ana sayfa, 3 tur sayfası, WhatsApp'a hazır mesaj açan rezervasyon formu, sık sorulanlar, özel 404 sayfası, telefon uyumu, yumuşak kaydırma, sayfa geçişi, Google için başlık/açıklama/site haritası, Türkçe karakter destekli yazı tipi ve 10 sinematik görsel. Ayrıca adım adım README.md, tasarım kararlarının tamamını anlatan DESIGN.md ve lisans listesi KAYNAKLAR.md.

Başlangıç proje dosyalarını indirin (ZIP, 7,3 MB)

README'deki adımların özeti

1. Gerekenler: Node.js 22.12 ya da üstü (nodejs.org, LTS sürümü) ve bir metin düzenleyici (ör. VS Code).
2. Çalıştırın: zip'i çıkarın, klasörde bir terminal açın, aşağıdaki iki satırı yazın; tarayıcıda http://localhost:4321 adresini açın.
3. Kendinize göre düzenleyin: bütün yazılar tek dosyada, src/data/site.ts. name satırı değişince firma adı logoda, alt bilgide, yükleme ekranında ve WhatsApp mesajında birlikte değişir. Telefon, WhatsApp, e-posta, adres, turlar ve sık sorulanlar da aynı dosyada. Kendi fotoğrafınızı src/assets/photos/ içine aynı dosya adıyla koymanız yeterli.
4. Yayına alın: npm run build ile oluşan dist klasörünü Netlify, Vercel, Cloudflare Pages ya da GitHub Pages gibi statik web sitesi barındıran bir yere yükleyin.

npm install
npm run dev

Telefon, WhatsApp, e-posta ve adres yer tutucudur; tur süreleri, program ve iptal kuralları örnektir. Gerçek bilginizi yazmadan yayına almayın.

Firma tipi balon turuyla sınırlı değil: aynı iskeleti tur, otel, restoran ya da başka bir deneyim işi için yazıları ve görselleri değiştirerek kullanabilirsiniz.

05 · Kaynak

Kaynak, lisans ve notlar

• awwwards ve jury araçları: github.com/juliobsz/skills, MIT lisansı © juliobsz. Projedeki hareket motoru bu aracın MIT lisanslı başvuru kodundan uyarlanmıştır; MIT metni zip'teki KAYNAKLAR.md dosyasında.
• Awwwards ile bağlantısı yoktur. Araçlar Awwwards'ın herkese açık ölçütlerini ve ağırlıklarını kullanır; puanlar aracın kendi tahminidir, resmî jüri puanı değildir.
• Görseller yapay zekâ üretimidir: fal.ai üzerinden ByteDance Seedream 4.5 ile ayrıca üretilip proje klasörüne kondu (araç görsel üretmedi, verilen görselleri kullandı). Gerçek bir yerin, firmanın ya da kişinin fotoğrafı değildir; gerçek işletme web sitesinde kendi fotoğraflarınızla değiştirmeniz önerilir.
• Peri Balon adı, iletişim bilgileri, tur ayrıntıları ve iptal kuralları hayali örnektir.
• Kütüphaneler kendi lisanslarıyla gelir: Astro (MIT), GSAP (kendi lisansı), Lenis (MIT).