Opus Growth hosting sunucumdaki
[sunucu adı] sitesine,
[yapay zeka ürününün adı] için aurora zeminli, buzlu cam kartlı, açık ve koyu temalı çok sayfalı bir ürün sitesi kur. Ürün:
[ürün ne yapar, kimin için]. Nasıl çalışır:
[üç adım]. Neler çıkarır ya da yapar:
[4 ile 6 özellik]. Veri ve güvenlik: [verinin nerede, ne kadar saklandığı, model eğitiminde kullanılıp kullanılmadığı]. Deneme ya da kayıt yolu:
[deneme süresi, kayıt adresi]. İletişim:
[e-posta],
[telefon],
[WhatsApp numarası],
[adres]. Alan adı:
[alan adı]. Marka renkleri:
[renkler ya da "sen seç"]. Ürün ekran görüntüleri ya da fotoğraflar:
[bağlantılar ya da "yok"].
Sayfalar: ana sayfa (/), özellikler (/ozellikler/), güvenlik (/guvenlik/), 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 ve imza öğesi olan ürün kartı), üç adım, kimin işine yarar (fotoğraflı), SSS ve kapanış çağrısı. Güvenlik sayfası yapay zeka ürünlerinde satın alma kararının yarısıdır; saklama süresini, erişimi ve model eğitimini açıkça yaz. İletişim sayfasında form olmasın, çünkü sunucu yalnız statik dosya servis eder.
Tarz: Aurora ve cam. Zeminde yavaşça süzülen, yumuşak ve çok renkli bir ışık (aurora), içerik ise buzlu cam kartlarda. Palet mor-mavi olmasın; nane, kayısı ve buz mavisi gibi markaya uygun üç yumuşak ton seç. Tipografi Fontshare'den yumuşak bir serif display (ör. Gambetta 500) ve sakin bir gövde (ör. Synonym 400 ve 600). Cam efektini yalnız kart yüzeylerinde kullan, bütün sayfayı cama boğma. Canvas, WebGL, video, GSAP, Lenis ve Swiper yok. Tek JavaScript, satır içi küçük bir tema anahtarı. İmza öğesi: hero'da cam kart içinde ürünün yaptığı işi gösteren gerçek HTML örnek (ör. bir toplantı dökümünden çıkarılan karar ve görev).
Aurora, cam ve tema kuralları (bu tarzda performans ve kontrast en kolay burada bozulur):
1. Aurorayı saf CSS ile yap: `position: fixed` tek bir aria-hidden katman, iki sözde öğe (::before ve ::after) ve onların içinde üç büyük radial-gradient. Hareketi yalnız transform (translate3d, rotate, scale) ile, 25 ile 35 saniyelik `alternate` döngüyle ver ve `will-change: transform` ekle. Gradyanın kendisini, background-position'ı ya da filter: blur'u canlandırma; bunlar her karede yeniden boyama yapar. Animasyonu `@media (prefers-reduced-motion: no-preference)` içine koy; hareket azaltmada aurora durur ama görünür kalır.
2. Renkleri CSS değişkenleriyle tanımla (--bg, --fg, --mute, --line, --card, --solid, --acc, --accfg ve aurora tonları) ve Tailwind renklerini bu değişkenlere bağla (ör. colors: {bg: "var(--bg)"}). Koyu tema değerlerini hem `:root
[data-theme="dark"]` hem `@media (prefers-color-scheme: dark) { :root:not(
[data-theme="light"]) }` altında yaz; böylece JavaScript kapalıyken bile sistem teması uygulanır.
3. Tema anahtarı: `<head>` içinde stil dosyasından sonra tek satırlık bir betik localStorage'daki seçimi okuyup `<html>`'e data-theme yazsın ve `js` sınıfını eklesin; bu satır ilk boyamadan önce çalıştığı için sayfa açılırken yanlış temada yanıp sönmez. localStorage erişimini try ile sar. Sayfa sonundaki küçük betik anahtara tıklanınca temayı değiştirsin, seçimi saklasın ve sistem teması değişince düğme durumunu güncellesin. Düğme gerçek bir `<button type="button">` olsun, `aria-pressed` koyu tema açıkken true olsun, mobilde yalnız simge görünse de erişilebilir adı ("Koyu tema") dursun. JavaScript yokken düğmeyi gizle (`html:not(.js) .theme-toggle { display: none }`). Ayrıca `<meta name="color-scheme" content="light dark">` ekle.
4. Cam kartı tek bir `.glass` sınıfında topla: önce düz renk zemin (--solid), sonra `@supports (backdrop-filter: blur(1px))` içinde yarı saydam zemin ve `backdrop-filter: blur(18px) saturate(140%)` (Safari için -webkit- önekiyle). `@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)` altında kart düz renge döner ve aurora gizlenir. HTML'de backdrop-blur yardımcı sınıfını kullanma; design-check bir sayfada beşten fazla gördüğünde "her yerde glassmorphism" uyarısı verir.
5. Kontrastı İKİ temada da ölç. Lighthouse yalnız açık temayı denetler; koyu temayı ayrıca kontrol etmezsen koyu temadaki soluk metin gözden kaçar. Kartın yarı saydam zemini en parlak aurora renginin üstünde bile metni 4,5:1'in üstünde tutacak kadar opak olsun (demoda açık temada beyaz yüzde 66, koyu temada koyu yeşil yüzde 58). Aksan düğmesinin metin rengini temaya göre değiştir (açıkta koyu çam üstünde beyaz, koyuda açık nane üstünde koyu yeşil).
6. Hero kartının girişini yalnız transform ile ve data-reveal niteliğiyle ver (design-check hareketi bu nitelikten tanır); h1'i asla gizleme ya da soldurma, çünkü LCP öğesidir.
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. Tema renkleri değişkenle verildiği için Tailwind'in opaklık kısaltmaları (bg-fg/50 gibi) çalışmaz; yarı saydam renk gerekiyorsa ayrı bir değişken tanımla.
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.
SEO, AEO ve GEO:
1. Adresleri dizin biçiminde ve sonu eğik çizgili kur (/ozellikler/, /guvenlik/, /iletisim/, /gizlilik/). site.config.js'in seo bloğunu doldur ve `node seo-stamp.mjs` çalıştır. Fiziksel mağazası olmayan bir yazılım şirketi için site.config.js'te localBusiness:false yaz. Sayfa şemaları: ana sayfa WebPage ve FAQPage; özellikler SoftwareApplication (applicationCategory, operatingSystem, featureList) ve FAQPage; güvenlik WebPage ve FAQPage; iletişim ContactPage; iç sayfalarda BreadcrumbList. Sahip olmadığın bir güvenlik sertifikasını ya da uygunluk belgesini yazma; varsa belge numarası ve geçerlilik tarihiyle yaz. 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 iletişim ve gizlilik sayfaları ilk denemede 84 ve 116 kelimede kaldı; "deneme süresinde neler olur" ve "veriler kimlerle paylaşılır" gibi gerçek bilgilerle tamamlandı.
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. Koyu temayı da gör: site_preview sistem temasını değiştiremediği için kontrastı koyu temada da ölçen bir denetim (ör. axe-core'un color-contrast kuralı, prefers-color-scheme: dark ile) çalıştır ya da koyu temayı geçici olarak varsayılan yapıp bir kez önizle.
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 ve temayı değiştiremediği için bana kendi tarayıcımda neye bakacağımı yaz: zemindeki ışık çok yavaş süzülmeli; anahtara tıklayınca tema değişmeli, başka sayfaya geçince seçim korunmalı ve sayfa açılırken bir an bile diğer temada görünmemeli; işletim sistemi koyu temadaysa site ilk açılışta koyu gelmeli; hareketi azalt açıkken aurora durmalı; saydamlığı azalt açıkken kartlar düz renge dönmeli; JavaScript kapalıyken anahtar görünmemeli ama sistem teması yine uygulanmalı.
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.
