Opus Growth hosting sunucumdaki
[sunucu adı] sitesine,
[marka adı] için sayfalar arası görsel geçişli, lookbook tarzında çok sayfalı bir moda ya da yaşam tarzı sitesi kur. Marka:
[ne üretiyor, nerede, kimin için]. Sezon ya da koleksiyon adı:
[ad]. Ürünler: [her biri için ad, kategori, renk, malzeme, fiyat ve fotoğraf bağlantısı]. Beden tablosu:
[ölçüler ya da "yok"]. Satış yolu: [atölye ya da mağaza adresi, WhatsApp numarası, varsa mağaza bağlantısı]. Kargo ve iade koşulları:
[varsa]. İletişim:
[e-posta],
[telefon],
[adres]. Alan adı:
[alan adı]. Lookbook fotoğrafları:
[bağlantılar].
Sayfalar: lookbook ana sayfası (/), koleksiyon (/koleksiyon/), her ürün için ayrı bir sayfa (/urun/
[ürün-adı]/), atölye ya da hakkımızda (/atolye/), iletişim (/iletisim/) ve 404.html. Ana sayfanın bölümleri: hero (h1, kısa marka açıklaması, iki düğme ve dikey ana fotoğraf), altında her biri bir ürüne bağlanan üç fotoğraflı lookbook bölümü, malzeme ya da üretim hikayesi ve SSS. Koleksiyon sayfası: kategori filtreleri ve ürün ızgarası. Ürün sayfası: büyük görsel, ad, fiyat, ilk paragrafta ürünün ne olduğu, malzeme, renk, bedenler ve bakım listesi, "Nasıl alırım?" kutusu, beden tablosu ve aynı koleksiyondan iki ürün. Sitede sepet ve ödeme olmasın; satın alma WhatsApp, mağaza ya da atölye üzerinden yapılsın ve bu her ürün sayfasında açıkça yazsın.
Tarz: Basılı bir lookbook gibi editoryal moda. Kumaş tonunda zemin, köşesi yuvarlatılmamış kenarsız fotoğraflar, 1 piksellik ince çizgiler, büyük harfli ve aralıklı küçük etiketler, bol boşluk. Tipografi Fontshare'den yüksek kontrastlı bir moda serifi (ör. Melodrama 400 ve 600) ve sakin bir grotesk gövde (ör. Archivo 400 ve 500). Tek aksan rengi (ör. kil) yalnız odak halkası ve hover'da. Lookbook üçlüsü 12 sütunda 5, 4 ve 3 sütun genişliğinde ve kademeli dikey kaymayla dizilsin. İki imza öğesi var: sayfalar arası görsel geçişi ve koleksiyon ızgarasında Flip ile açılan hızlı bakış. Lenis, Swiper, ScrollTrigger ve SplitText yüklenmez.
Sayfa geçişi ve Flip kuralları (harfiyen uygula):
1. Belgeler arası View Transitions: `assets/app.css` içine `@view-transition { navigation: auto; }` yaz. Koleksiyon kartındaki görsel ile ürün sayfasındaki ana görsel AYNI view-transition-name'i taşısın; adı Tailwind keyfi özellik sınıfıyla ver (`
[view-transition-name:u-urun-adi]`), style="" kullanma. Bir sayfada her ad yalnız bir kez geçsin, iki öğe aynı adı taşırsa tarayıcı geçişi iptal eder; ürün sayfasındaki "aynı koleksiyondan" kartları kendi ürünlerinin adını taşıyabilir. Üst menüye `view-transition-name: site-header` ver ki geçiş sırasında sabit kalsın. Grup süresi 0,5 saniye, kök soluşması 0,3 saniye olsun. `@media (prefers-reduced-motion: reduce)` içinde `@view-transition { navigation: none; }` yaz. Bu özelliği desteklemeyen tarayıcılar normal gezinir; yedek için JavaScript yazma.
2. GSAP ve Flip yalnız koleksiyon sayfasında yüklensin, diğer sayfalarda hiç betik olmasın. GSAP 3.13 çekirdeğini ve Flip eklentisini jsdelivr'den site_fetch ile `assets/vendor/` altına indir, sürümü sabitle. `<head>`'deki tek satırlık betik `<html>`'e `js` sınıfını, prefers-reduced-motion "reduce" değilse `anim` sınıfını eklesin. Sayfa sonundaki küçük yükleyici load olayından sonra iki requestAnimationFrame ve requestIdleCallback beklesin, `anim` yoksa hiçbir şey indirmesin, varsa gsap.min.js, Flip.min.js ve `gsap.registerPlugin(Flip)` satırını içeren küçük dosyayı async=false ile sırayla eklesin.
3. Etkileşimi Flip'ten ayır: `assets/koleksiyon.js` (defer) filtreyi ve hızlı bakışı Flip OLMADAN da çalıştırsın. Her değişiklikte, Flip ve `anim` varsa önce `Flip.getState(kartlar)` al, DOM'u değiştir, sonra `Flip.from(durum, {duration: 0.6, ease: "power3.inOut", nested: true})` çağır; yoksa değişikliği anında uygula. Böylece hareket istemeyen ziyaretçi de filtreyi ve hızlı bakışı kullanır.
4. Filtre: "Tümü" ve kategori düğmeleri `role="group"` ve aria-label taşıyan bir kapsayıcıda, her biri `aria-pressed` ile. Kategoriye uymayan kartlara `hidden` ver; Flip'te `absolute: true`, girenler için onEnter (opacity ve scale 0,92'den 1'e), çıkanlar için onLeave kullan. Bir `aria-live="polite"` alanı "3 ürün gösteriliyor" gibi sonucu duyursun.
5. Hızlı bakış (ızgaradan detaya görsel dönüşümü): her kartta `aria-expanded` ve `aria-controls` taşıyan bir "Hızlı bak" düğmesi ve `hidden` bir detay paneli (açıklama, kombin önerisi, ürün sayfası bağlantısı) olsun. Açılınca kart `grid-column: 1 / -1` ile tam genişliğe geçsin ve masaüstünde görsel solda, detay sağda iki sütuna bölünsün; Flip görselin küçük kareden büyük görsele büyümesini canlandırır. Açılan kartın görselinde `sizes` değerini büyük görünüme göre güncelle ki daha büyük dosya insin. Aynı anda tek kart açık kalsın, düğme metni "Kapat" olsun ve odak tabindex="-1" verilen panele taşınsın.
6. JavaScript yokken filtre ve hızlı bakış düğmeleri görünmesin (`.js-only` yalnız `.js` altında görünür), bütün kartlar ve ürün sayfası bağlantıları çalışsın. Kartın asıl bağlantısı her zaman ürün sayfasına gitsin; hızlı bakış ayrı bir düğmedir.
Kurulum ve bilinen tuzaklar (demo ölçümünde her biri puanı ya da bir kapıyı 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ı alt klasörler dahil bütün HTML dosyalarını, `_src/*.tpl` şablonlarını 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, satır içi tailwind.config'i, chrome.js'i ve motion.js'i kaldır, yalnız `/assets/site.css` bağla. Her HTML değişikliğinden sonra yeniden derle. content listesine `assets/koleksiyon.js` dosyasını da ekle, çünkü `is-open` gibi sınıfları o yazar.
3. Fontları kendi sunucunda barındır. Fontshare CSS'ini her aile ve ağırlık için ayrı istekle oku (`https://api.fontshare.com/v2/css?f[]=aile@ağırlık`), her 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. İlk ekranda kullanılan HER ağırlığı (başlık, gövde ve düğme) her sayfada `<link rel="preload" as="font" type="font/woff2" crossorigin>` ile önceden yükle ve bu satırları stil dosyası bağlantısından önce koy. Fontshare fontlarının çoğunda ₺ işareti yok, fiyatı "TL" ile yaz.
4. Menüyü ve alt bilgiyi statik HTML yap. 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. Şablonların uzantısı .html olmasın ve içlerinde `{{...}}` yerine `
[[NAV]]` gibi yer tutucu kullan. Mobil menüyü JS'siz `<details>` ile kur. Alt bilgide işletme adı, adres ve telefon düz metin olarak dursun; alt bilgi ve kırıntı bağlantıları da en az 44 piksel yüksekliğinde olsun.
5. Görselleri site_fetch ile indirirken dönüştür: aynı fotoğrafı resize="480x", "800x" ve "1120x" (ya da sayfanın gerektirdiği genişlikler), image_format="webp", quality=65 ile ayrı dosyalara yaz. Her `<img>` için srcset, sizes ve gerçek oranla aynı width ve height ver. İlk ekrandaki ana görsel fetchpriority="high" olsun ve lazy olmasın; fetchpriority'yi yalnız gerçek LCP öğesine ver, diğerleri loading="lazy" decoding="async" olsun.
6. Site köküne küçük bir `favicon.svg` yaz ve her sayfaya `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` ekle; logonun PNG'si varsa site_fetch ile resize="180x180", image_format="png" vererek apple-touch-icon üret. Favicon yoksa tarayıcı /favicon.ico için 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, nitelikleri çift tırnakla yaz, tel: bağlantılarının görünen metnindeki boşluklar ` ` olsun, style="" niteliği kullanma (bir CSS değişkeni gerekiyorsa Tailwind'in `
[--r:-4deg]` gibi keyfi özellik sınıfını kullan), her düğmeye type="button" yaz, aria-label'ı `<ul>` ya da `<div>` gibi rolü olmayan öğelere koyma ve role="region" yerine `<section aria-label="...">` kullan.
8. Ürün görsellerini site_fetch ile 4:5 dikey oranda resize="400x", "640x" ve "960x" olarak indir; bütün ürün fotoğrafları aynı oranda olsun ki ızgara düzgün dursun ve Flip geçişi bozulmasın. Ürün sayfasındaki ana görsel o sayfanın LCP öğesidir, fetchpriority="high" alır.
9. Display fontunun rakamlarını kontrol et: demoda Melodrama'nın sıfırı çizgili çıktı ve h1'deki "2026" uzaktan "2Ø26" gibi okundu. Rakamları display fonttaki başlıklara koyma ya da rakamları gövde fontuyla yaz.
SEO, AEO ve GEO:
1. Adresleri dizin biçiminde ve sonu eğik çizgili kur (/koleksiyon/, /urun/
[ürün-adı]/, /atolye/, /iletisim/). site.config.js'in seo bloğunu doldur ve `node seo-stamp.mjs` çalıştır. Fiziksel atölye ya da mağaza varsa site.config.js'te businessType için en özgül türü (ör. ClothingStore) ve adresi yaz; çalışma saatini yalnız ben verirsem ekle. Sayfa şemaları: ana sayfa WebPage ve FAQPage; koleksiyon CollectionPage ve her ürünün url'sini sıralayan ItemList; her ürün sayfası ItemPage ve Product (name, description, image, sku, color, material, category, brand ve Offer: price, priceCurrency TRY, availability, itemCondition, url, seller @id); atölye AboutPage; iletişim ContactPage; iç sayfalarda BreadcrumbList (Lookbook, Koleksiyon, ürün). Sitede ödeme olmasa da Offer doğru fiyatı ve stok durumunu taşır; kargo ve iade koşullarını verirsem Offer'a shippingDetails ve hasMerchantReturnPolicy ekle. Yorum ya da puan (aggregateRating) uydurma. Sayfaya özel her şemayı ayrı bir `<script type="application/ld+json">` bloğuna 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. Demoda atölye ve iletişim sayfaları ilk denemede 113 ve 95 kelimede kaldı; "atölyede neler yapılıyor" ve "yazarken neleri belirtmeli" gibi gerçek bilgiyle tamamlandı. Ürün sayfalarında ortak cümleleri (bakım, kumaş) kısa liste öğesi olarak yaz, açıklamayı her ürün için ayrı yaz; seo-check sayfalar arasında yüzde 50'nin üstünde aynı cümle görürse kopya içerik uyarısı verir.
3. Her sayfanın ilk paragrafı sayfanın sorusuna doğrudan cevap versin; h1'i de bu soru gibi kur. Sayfaya özgü SSS'yi `<details>` ile yaz ve FAQPage olarak işaretle. Yayımlayan kurumu ve "Son güncelleme" tarihini `<time datetime>` 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, fiyat ya da ürün değeri yazma. Bilmediğin alanı şemaya hiç koyma.
Kapılar (sırayla; hepsi geçmeden "bitti" deme):
1. site_run_command ile sırasıyla `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 ç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, hedef 100. 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ı (mağaza ve WhatsApp bağlantıları istek değil, bağlantıdır).
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.
Etkileşim kontrolü: site_preview hareketi gösteremediği için bana kendi tarayıcımda neye bakacağımı yaz: Chrome ya da Edge'de koleksiyondan bir ürüne tıklayınca görsel bulunduğu karttan ürün sayfasındaki yerine büyüyerek geçmeli, menü yerinde kalmalı; Firefox'ta sayfa normal açılmalı; filtreye basınca kartlar kayarak yeniden dizilmeli; "Hızlı bak" kartı ızgara içinde açmalı ve görsel büyümeli; hareketi azalt açıkken aynı işlemler anında olmalı; JavaScript kapalıyken bütün ürünler görünmeli. Ben de yerel bir denetimde ürün sayfasında `document.documentElement.matches(':active-view-transition')` değerinin geçiş sırasında true olduğunu gördüm; sen de aynı kontrolü yapabilirsin.
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.
