Opus Growth hosting sunucumdaki
[sunucu adı] sitesine,
[ürün ya da girişim adı] için neo-brütalist tarzda, çok sayfalı ve JavaScript kullanmayan bir tanıtım sitesi kur. Ürün:
[ürün ne yapar, kimin için]. Nasıl çalıştığı:
[üç adım]. Öne çıkan özellikler:
[4 ile 6 özellik]. Fiyat: [plan adları ve fiyatlar ya da "fiyat sayfası olmasın"]. İndirme ya da kayıt bağlantıları:
[App Store, Google Play ya da kayıt adresi]. İletişim:
[e-posta],
[telefon],
[WhatsApp numarası],
[adres]. Alan adı:
[alan adı]. Marka renkleri:
[renkler ya da "sen seç"]. Gerçek fotoğraflar ya da ekran görüntüleri:
[bağlantılar ya da "yok"].
Sayfalar: ana sayfa (/), nasıl çalışır (/nasil-calisir/), fiyat (/fiyat/), 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, çıkartma rozetler ve imza öğesi), kategori şeridi, üç adım, kimler için (fotoğraflı), özellikler, SSS ve kapanış çağrısı. İletişim sayfasında form olmasın; e-posta, telefon, hazır mesajlı WhatsApp bağlantısı ve indirme bağlantıları olsun, çünkü sunucu yalnız statik dosya servis eder.
Tarz: Neo-brütalist, ama oyuncak gibi değil, ürün gibi. Kalın siyah çerçeve (3 piksel), bulanıklığı olmayan sert gölge (yalnız siyah, 4, 6 ve 10 piksel kaydırma), düz ve canlı renk blokları (krem zemin üstünde domates, limon, nane, gök mavisi ve leylak gibi en fazla beş düz renk), çıkartma gibi hafif eğik rozetler. Tipografi Fontshare'den tombul ve karakterli bir display (ör. Chubbo) ile sakin bir grotesk gövde (ör. Supreme 400 ve 700). Gradyan, cam efekti, yumuşak gölge ve mor-mavi geçiş yok. Sitede hiç JavaScript yok; GSAP, Lenis ve Swiper yüklenmez. İmza öğesi: hero'nun sağında, ürünün ana ekranını görsel yerine gerçek HTML ile çizen kalın çerçeveli bir kart (ör. bir evin bu ayki harcamaları ve ay sonu ödeme özeti) ve çevresine yapışmış çıkartmalar.
Renk, kontrast ve hareket kuralları (bu tarzda puanı en kolay kaybettiren yer):
1. Metni her renkli zeminde siyah yaz, beyaz metin kullanma. Her renk için siyahla kontrast oranını hesapla ve ART.md'ye tablo olarak yaz; 4,5'in altında kalan rengi koyulaştır. Demoda en düşük oran domates turuncusu üstünde 6,7 çıktı ve erişilebilirlik bütün sayfalarda 100 oldu.
2. Odak halkası 3 piksel siyah ve 3 piksel boşluklu olsun; siyah zeminli alt bilgide limon sarısına dönsün. Odak halkası, kalın çerçeveyle karışmasın diye outline-offset kullan.
3. Düğme ve kartların oyuncu kayması yalnız transform ve box-shadow ile yapılsın: üzerine gelince translate(-2px, -2px) ve gölge büyür, basınca translate(4px, 4px) ve gölge sıfırlanır. Düğmeler en az 48, küçük düğmeler en az 44 piksel yüksekliğinde olsun.
4. Çıkartmaların eğikliğini transform'a değil ayrı `rotate` özelliğine yaz ve açıyı `
[--r:-4deg]` gibi bir Tailwind keyfi özellik sınıfıyla ver. Böylece hareket azaltma kuralı transform'u sıfırlasa da çıkartmalar eğik kalır; style="" niteliği de gerekmez.
5. Çıkartmaların "yapışma" girişi yalnız `scale` ve `translate` ile, `@media (prefers-reduced-motion: no-preference)` içinde ve data-reveal="slap" niteliğiyle çalışsın (design-check hareketi bu nitelikten tanır). Opaklıkla gizleme yok, h1 hiç hareket etmez. prefers-reduced-motion: reduce'da bütün animasyon ve geçişler kapanır.
6. Dekoratif çıkartmaları aria-hidden="true" yap; bilgi taşıyanlar (ör. "6 kişiye kadar ücretsiz") düz liste öğesi olarak kalsın. Mobilde kartın köşesine taşan dekoratif çıkartma başka bir rozetin üstüne biniyorsa onu 640 pikselin altında gizle; demoda "Fiş eklendi" çıkartması 390 pikselde "3 kişi" rozetini kapattı.
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. Bu sitede JavaScript dosyası olmadığı için content listesine JS eklemen gerekmez.
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. Alt bilgi siyah zeminliyse içindeki bağlantıların rengini krem, hover'ını limon yap ve her birini en az 44 piksel yüksekliğinde tut.
SEO, AEO ve GEO:
1. Adresleri dizin biçiminde ve sonu eğik çizgili kur (/nasil-calisir/, /fiyat/, /hakkimizda/, /iletisim/, /gizlilik/). site.config.js'in seo bloğunu doldur ve `node seo-stamp.mjs` çalıştır. Fiziksel mağazası olmayan bir girişim için site.config.js'te localBusiness:false yaz. Sayfa şemaları: ana sayfa WebPage ve FAQPage; nasıl çalışır WebPage ve FAQPage; fiyat SoftwareApplication (applicationCategory, operatingSystem ve her plan için Offer) ve FAQPage; hakkımızda AboutPage; iletişim ContactPage; iç sayfalarda BreadcrumbList. SoftwareApplication'a kullanıcı yorumu ya da puan eklemeyeceğin için Google'ın uygulama zengin sonucu çıkmayabilir; bu normaldir, puan 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 hakkımızda, iletişim ve gizlilik sayfaları ilk denemede 113 ile 148 kelimede kaldı; bu sayfalara "destek talebine neler yazmalı" ya da "veriler kimlerle paylaşılır" gibi gerçek bilgi ekle.
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: düğmenin üstüne gelince yukarı sola kalkmalı, basınca gölgesine oturmalı; sayfa açılırken çıkartmalar hafifçe yapışmalı; Tab ile gezerken her bağlantıda kalın siyah odak halkası görünmeli; işletim sisteminde hareketi azalt açıkken hiçbir şey kıpırdamamalı ama çıkartmalar eğik kalmalı; JavaScript kapalıyken mobil menü yine açılmalı.
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.
