Opus Growth hosting sunucumdaki
[sunucu adı] sitesine,
[ürün adı] için koyu temalı, kaydırdıkça kendini anlatan çok sayfalı bir ürün sitesi kur. Ürün:
[ürün ne yapar, kimin için]. Kullanıcının üründe izlediği üç adım:
[üç adım]. Öne çıkan özellikler:
[4 ile 6 özellik]. İletişim:
[e-posta],
[telefon],
[WhatsApp numarası],
[adres varsa]. Alan adı:
[alan adı]. Renk tercihi:
[renk ya da "sen seç"]. Gerçek ürün ekran görüntüleri ya da fotoğraflar:
[bağlantılar ya da "yok"].
Sayfalar: ana sayfa (/), ürün (/urun/), hakkımızda (/hakkimizda/), iletişim (/iletisim/), gizlilik ve KVKK (/gizlilik/) ve 404.html. Ana sayfanın bölümleri sırasıyla: hero (h1, iki cümlelik açıklama, iki düğme, ürün görseli), imza öğesi olan ürün anlatımı, özellikler, kimler için, SSS ve kapanış çağrısı. İletişim sayfasında form olmasın; e-posta, telefon ve hazır mesajlı WhatsApp bağlantısı olsun, çünkü sunucu yalnız statik dosya servis eder.
Tarz: Koyu-motion. Koyu zemin, neon olmayan tek ölçülü aksan rengi, Fontshare'den sıkı bir grotesk display (ör. Cabinet Grotesk) ve sakin bir gövde fontu (ör. Switzer). Gradyan ve WebGL yok; cesaret yalnız ürün anlatımında.
Hareket kuralları (en zor kısım, harfiyen uygula):
1. Kütüphaneler: GSAP 3.13 çekirdeği, ScrollTrigger, SplitText ve Lenis. Dosyaları jsdelivr'den site_fetch ile `assets/vendor/` altına indir ve sürümü sabitle. Yalnız ana sayfada ve ürün sayfasında yükle; hakkımızda, iletişim ve gizlilik sayfalarında hiç betik olmasın. Swiper yükleme.
2. Bu betikleri `<script defer>` ile bağlama. Sayfanın sonuna küçük bir yükleyici koy: load olayından sonra iki requestAnimationFrame ve ardından requestIdleCallback beklesin, betikleri sırayla async=false ile eklesin ve `<html>` üzerinde `anim` sınıfı yoksa hiçbirini indirmesin. Demoda defer ile yüklenen kütüphaneler mobilde LCP'yi 3,2 saniyeye itti ve performansı 92'de bıraktı; bu yükleyiciyle 99 oldu.
3. `<head>` içindeki tek satırlık bir betik `<html>`'e `js` sınıfını, prefers-reduced-motion "reduce" değilse `anim` sınıfını eklesin. Gizli başlangıç durumlarını yalnız `.anim` altında tanımla; böylece JS kapalıyken ve hareket istemeyen ziyaretçide içerik baştan görünür ve kütüphane hiç inmez. Kütüphane yüklenemezse diye, gizlenen her öğeyi 2,5 saniye sonra görünür yapan bir CSS animasyonu güvenlik ağı olarak ekle. JS bu süreden geç gelirse görünen içeriği yeniden gizleme, yalnız sabitlenen anlatımı kur.
4. SplitText başlık girişi: ilk ekrandaki h1 LCP öğesidir, onu gizleyerek başlatma. h1, AA kontrastını geçen soluk bir renkte görünür başlasın ve SplitText satırları sırayla tam renge geçirsin (mask ve aria seçenekleri açık). Aşağıdan kayan maskeli satır girişini ekranın altındaki h2 başlıklarına sakla ve ScrollTrigger ile kaydırınca oynat.
5. İmza öğesi: ürün anlatımında gsap.matchMedia ile yalnız en az 768 piksel genişlikte ScrollTrigger pin ve scrub kullan (scrub 0,6 civarı, end "+=180%"). Solda üç adım sırayla etkinleşsin, sağda ürün ekranı adım adım dolsun. Etkin olmayan adımı opacity ile soluklaştırma; yalnız başlık rengini ve kenar çizgisini değiştir. Demoda opacity ile soluklaştırılan adımlar masaüstünde kontrast hatası verdi ve erişilebilirlik 95'e düştü. Mobilde pin yok, adımlar normal akışta belirsin. JS yoksa ürün ekranı bitmiş haliyle görünsün.
6. Lenis'i yalnız `(pointer: fine)` cihazlarda aç, dokunmatikte yerel kaydırma kalsın. Lenis'i gsap.ticker'a bağla, sayfa içi bağlantılarda hedefe kaydırdıktan sonra odağı hedefe taşı.
7. Ürün ekranı süsleyici bir figür olarak aria-hidden olsun, altına ne gösterdiğini anlatan bir figcaption yaz. Bütün etkileşimler klavyeyle kullanılabilsin ve odak halkası görünsün.
Kurulum ve bilinen tuzaklar (demo ölçümünde her biri puanı düşürdü, atlama):
1. Sunucuda yayında bir site varsa önce bana söyle, çünkü kurulum index.html ve assets klasörünü ezer. scaffold_site'ı önce confirm=false ile önizle, onayımla confirm=true çağır. Sonra site_design_guide ve site_seo_guide'ı oku. Koda başlamadan tasarım yönünü (tipografi, renk, ızgara, imza öğesi, hareket dili ve YÜKLENMEYECEK kütüphaneler) assets dışında kısa bir ART.md dosyasına yaz ve bana göster.
2. Tailwind'i derle, CDN'den yükleme. site_run_command ile background=true vererek `npm i -D tailwindcss@3` kur ve sonucu site_command_status ile izle. `tailwind.config.js` içindeki content yolları bütün HTML dosyalarını, şablonları ve sınıf yazan JS dosyalarını kapsasın. `_src/tw.css` dosyası `@import "../assets/app.css";` satırı ve üç `@tailwind` satırından oluşsun; `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify` ile tek dosyaya derle. Sayfalardan cdn.tailwindcss.com betiğini ve satır içi tailwind.config'i kaldır, yalnız `/assets/site.css` bağla. Her HTML değişikliğinden sonra yeniden derle.
3. Fontları kendi sunucunda barındır. Seçtiğin Fontshare ailelerinin CSS'ini oku, her ağırlığın woff2 dosyasını site_fetch ile `assets/fonts/` altına indir ve @font-face kurallarını `font-display: swap` ile `assets/app.css` içine yaz; design-check özgün fontu orada arar. İndirdiğin CSS'teki font-family adını kontrol et, çünkü Fontshare olmayan bir ağırlık istendiğinde başka bir aile döndürebiliyor. İlk ekrandaki başlığın fontunu ve gövde fontunu her sayfada `<link rel="preload" as="font" type="font/woff2" crossorigin>` ile önceden yükle; demoda bu adım yazı tipi değişiminden doğan kaymayı (CLS 0,024) sıfırladı. Fontshare fontlarının çoğunda ₺ işareti yok, fiyat yazacaksan "TL" kullan.
4. Menüyü ve alt bilgiyi statik HTML yap. chrome.js ve site.config.js'i sayfalara yükleme. site.config.js'teki nav listesini okuyup `_src/header.tpl` ve `_src/footer.tpl` şablonlarını her sayfadaki `<!-- nav:start --><!-- nav:end -->` ve `<!-- footer:start --><!-- footer:end -->` işaretlerinin arasına basan küçük bir `chrome-stamp.mjs` yaz; etkin sayfanın bağlantısına aria-current="page" eklesin. Şablon dosyalarının uzantısı .html olmasın ve içlerinde `{{...}}` yerine `
[[NAV]]` gibi yer tutucu kullan, yoksa design-check ve seo-check onları yarım kalmış sayfa sanar. Mobil menüyü JS'siz `<details>` ile kur. Alt bilgide işletme adı, adres ve telefon düz metin olarak dursun.
5. Görselleri site_fetch ile indirirken dönüştür: aynı fotoğrafı resize="480x", "800x" ve "1200x", image_format="webp", quality=65 ile ayrı dosyalara yaz. Her `<img>` için srcset, sizes, width ve height ver. İlk ekrandaki ana görsel fetchpriority="high" olsun ve lazy olmasın; diğerleri loading="lazy" decoding="async" olsun. Mobilde ana görsel ekranı dolduruyorsa `<picture>` ile mobile daha yatay ve küçük bir kırpım ver (demoda mobil görsel 89 KB'tan 43 KB'a indi).
6. Logodan site_fetch ile 48 piksellik PNG favicon üret ve her sayfaya `<link rel="icon">` ekle. Favicon yoksa tarayıcı konsola 404 yazar ve En İyi Uygulamalar puanı 96'ya düşer.
7. HTML doğrulayıcısının kuralları: belge büyük harfli `<!DOCTYPE html>` ile başlasın (kitin başlangıç dosyaları küçük harfle başlıyor), tel: bağlantılarının görünen metnindeki boşluklar ` ` olsun, style="" niteliği kullanma, her düğmeye type="button" yaz.
SEO, AEO ve GEO:
1. Adresleri dizin biçiminde ve sonu eğik çizgili kur (/urun/, /hakkimizda/, /iletisim/, /gizlilik/). site.config.js'in seo bloğunu doldur ve `node seo-stamp.mjs` çalıştır. Sayfaya özel şemayı (ana sayfa WebPage ve FAQPage; ürün SoftwareApplication ve FAQPage; hakkımızda AboutPage; iletişim ContactPage; iç sayfalarda BreadcrumbList. Fiziksel mağazası olmayan bir yazılım şirketi için site.config.js'te localBusiness:false) ayrı `<script type="application/ld+json">` bloklarına yaz ve @id ile temel grafiğe bağla. BreadcrumbList'i @graph içine gömme, kendi bloğunda dursun; seo-check onu yalnız böyle görür.
2. Title 48 ile 60 karakter olsun (seo-check 65'i aşanı hata sayar), description 145 ile 158 karakter, her sayfada tek h1. Her sayfanın ana içeriği en az 150 kelime olsun; iletişim ve gizlilik sayfaları bu sınırın altında kalmaya yatkın.
3. Her sayfanın ilk paragrafı sayfanın sorusuna doğrudan cevap versin. Sayfaya özgü SSS'yi `<details>` ile yaz ve FAQPage olarak işaretle. Yayımlayan kurumu ve "Son güncelleme" tarihini `<time>` ile göster.
4. robots.txt'te GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot ve CCBot için kararını gerekçesiyle yaz ve sitemap'i göster. sitemap.xml'de gerçek lastmod olsun. llms.txt'te sitenin iki cümlelik doğru özeti ve önemli sayfaların listesi bulunsun.
5. Uydurma yok: bana sormadan yorum, puan, ödül, müşteri sayısı, sertifika, çalışma saati, koordinat ya da fiyat yazma. Bilmediğin alanı şemaya hiç koyma.
Kapılar (sırayla; hepsi geçmeden "bitti" deme):
1. site_run_command ile `node chrome-stamp.mjs`, Tailwind derlemesi, `node seo-stamp.mjs`, `node seo-check.mjs` (0 hata, 0 uyarı), `node design-check.mjs` (0 hata; kalan uyarıyı gerekçesiyle yaz) ve `npx html-validate "**/*.html"` (0 hata).
2. Her sayfayı site_preview ile view="mobile" ve view="desktop" olarak gör. site_preview sayfayı hareket kapalıyken (reduced-motion) çeker; bu görüntüde içerik eksiksiz görünmüyorsa hareketsiz hal bozuk demektir. Tam sayfa görüntüsünde aşağıdaki lazy görseller boş çıkabilir; bunu hata sayma ama yolunu kontrol et.
3. Her sayfa için core_web_vitals'ı strategy="mobile" ve strategy="desktop" ile çalıştır. Kabul: mobilde Performance en az 95, Accessibility, Best Practices ve SEO 100; masaüstünde dördü de en az 95. Tutmayan sayfada resources=true ile hangi dosyanın geciktirdiğini bul, düzelt ve yeniden ölç. Ardından ana sayfada seo_audit'i strategy="mobile" ve runs=2 ile çalıştır. Ağ istekleri listesinde kendi alan adın dışında bir adres kalmamalı.
4. 360, 390, 768 ve 1440 piksel genişlikte yatay kaydırma olmasın, dokunma hedefleri en az 44 piksel olsun, konsolda hata olmasın.
Hareket kontrolü: site_preview hareketi gösteremediği için ana sayfanın sabitlenen bölümünü bana tarif et ve kendi tarayıcımda neye bakacağımı yaz: masaüstünde ürün anlatımı ekranın üstüne yapışıp adımlar kaydırmayla ilerlemeli, telefonda yapışmadan akmalı, işletim sisteminde hareketi azalt açıkken hiçbir şey hareket etmemeli ve her şey görünmeli.
Yayından sonra: site_headers ile `/assets/* Cache-Control: public, max-age=31536000, immutable` kuralını önizle ve onayımla uygula; bundan sonra CSS ya da JS değiştiğinde dosya adını sürümle (site-v2.css gibi). gsc_submit_sitemap ile sitemap.xml'i gönder ve gsc_url_inspect ile ana sayfanın durumuna bak. En sonda bana şunları ver: sayfa sayfa puan tablosu (sayfa, mobil dört puan, masaüstü dört puan, LCP, CLS), kapıların sonucu ve uyguladığın düzeltmelerin listesi.
