Baue auf meinem Opus Growth Hosting-Server
[Servername] eine traditionell wirkende Website für unseren Familienbetrieb. Betrieb:
[Firmenname],
[was wir herstellen, z. B. Olivenöl oder Türkischer Honig],
[Stadt],
[Gründungsjahr und Generation, nur wenn zutreffend]. Produkte: [je Produkt Name, Packungsgröße, Kurzbeschreibung und veröffentlichter Preis oder "kein Preis"]. Produktionsschritte:
[kurze Liste]. So bestellt man:
[Telefon, Laden, Lieferung]. Telefon:
[Telefon], E-Mail:
[E-Mail], Adresse des Ladens:
[Adresse], Domain:
[Domain]. Familien- und Archivfotos:
[wo sie liegen, oder "keine"].
Der Look ist alt, der Aufbau neu. Die Seite soll sich wie ein altes Etikett, ein Ladenschild oder ein Erntebuch anfühlen, die Seiten müssen sich aber auf dem Handy einwandfrei öffnen, dürfen kein JavaScript laden, und jede Seite muss gemessen werden. Der alte Look ist nie eine Entschuldigung für schlechte Lesbarkeit oder schwachen Kontrast.
Die Designrichtung ist traditionell:
1. Schrift: eine klassische Serifenfamilie von Fontshare (z. B. Gambetta 400, 400 italic, 600). Kapitälchen mit font-variant-caps: all-small-caps und weiter Laufweite bei Menü, Buttons und Labels; zentrierte Überschriften.
2. Farbe: ein papierfarbener Hintergrund, tintenbrauner Text, ein zweites Braun und eine Hauptfarbe (z. B. Olivgrün), eine zweite warme Farbe nur bei winzigen Labels. Alles mit mindestens 4,5:1 Kontrast.
3. Textur: eine Papierstruktur für den Hintergrund als SVG-feTurbulence-Data-URI im CSS; keine zusätzliche Bilddatei und keine zusätzliche Anfrage.
4. Signaturelement: ein alter Etikettenrahmen, ein doppelt linierter Kasten mit Eckornamenten (border, outline-offset sowie ::before, ::after) und ein kleines, als Inline-SVG gezeichnetes Ornament zwischen den Abschnitten (z. B. ein Olivenzweig), aria-hidden.
5. Layout: zentriert und schmal; Produkte in gerahmten Etikettenkarten, auf dem Handy eine Spalte.
6. Bewegung: keine.
7. Fotos: Nutze das Familienarchiv, falls es eines gibt. Andernfalls darfst du gemeinfreie oder offen lizenzierte Archivfotos verwenden, nenne aber Quelle und Lizenz in der Bildunterschrift und gib sie nie als eigene Familienfotos aus.
Seiten und ihr Schema:
1. index.html: ein gerahmter erster Bildschirm, dessen Eröffnungsabsatz "Wer, stellt was her, wo, verkauft wie" beantwortet, Produktetiketten, ein Familienabschnitt, so bestellt man. WebPage. Lege in site.config.js den passendsten Geschäftsuntertyp fest (z. B. Store oder FoodEstablishment).
2. urunler.html: jedes Produkt in einer eigenen Etikettenkarte mit Name, Packungsgröße, Beschreibung und veröffentlichtem Preis. CollectionPage und je Artikel ein Product (brand, manufacturer #business, offers mit price, priceCurrency, availability). Schreibe niemals einen Preis, den ich dir nicht genannt habe; ohne Preis lässt du offers ganz weg.
3. hikayemiz.html: die wahre Geschichte, Generation für Generation. AboutPage.
4. uretim.html: die Schritte von der Ernte oder dem Rohstoff bis zur Packung, die offizielle Güteklassendefinition des Produkts und die Verordnung, auf der sie beruht (z. B. der Türkische Lebensmittelkodex). WebPage und HowTo.
5. sss.html: sechs echte Fragen zu Bestellung, Lieferung und Lagerung. FAQPage.
6. iletisim.html: Bestelltelefon, Adresse des Ladens, ein Kartenlink; lass Öffnungszeiten weg, wenn sie sich je nach Saison ändern. ContactPage.
7. kvkk.html (Datenschutzhinweis) und 404.html.
Technische Regeln. Halte dich genau daran, denn die unten genannten Gates messen genau diese:
1. Einrichtung. Führe scaffold_site zuerst als Vorschau aus, zeige mir die Dateiliste und installiere nach meiner Freigabe mit confirm=true. Lies dann site_design_guide und site_seo_guide vollständig. Schreibe, bevor du Code schreibst, die Richtung in _kaynak/ART.md (Gefühl, Schriftpaarung, Farben mit Kontrastverhältnissen, Raster, Signaturelement, Entscheidung zur Bewegung, Seitenliste) und zeige sie mir.
2. JavaScript entfernen. Keine Seite dieser Website lädt JavaScript. Entferne aus jeder Seite das Skript cdn.tailwindcss.com, die Zeile tailwind.config, die Tags für GSAP, ScrollTrigger, SplitText, Lenis und Swiper sowie die Script-Tags motion.js, chrome.js und site.config.js; lösche assets/chrome.js und assets/motion.js. Behalte assets/site.config.js, aber nur als Quelle für Marke, Kontakt und SEO-Angaben von seo-stamp.mjs; sie wird nie im Browser geladen.
3. Menü und Footer sind statisches HTML. Die Komponenten <site-nav> und <site-footer> werden per JavaScript gezeichnet, sodass Such- und KI-Crawler Menü, interne Links und Kontaktdaten nicht sehen können. Schreibe den Header nach _kaynak/ust.inc und den Footer (Name, Adresse, Telefon, E-Mail, alle Seitenlinks, Datenschutzhinweis, "Web: Opus Growth") nach _kaynak/alt.inc. Verwende die Endung .inc, damit seo-stamp und html-validate die Fragmente nicht als Seiten behandeln. Jede Seite trägt die Marker <!-- ust:bas --><!-- ust:son --> und <!-- alt:bas --><!-- alt:son -->. Schreibe dann mit site_write_file ein abhängigkeitsfreies Node-Skript _kaynak/parca-bas.mjs: Es stempelt beide Fragmente zwischen die Marker in jeder HTML-Datei, setzt aria-current="page" auf den Menülink der aktuellen Seite und schreibt sitemap.xml neu, wobei es das dateModified aus dem JSON-LD jeder Seite als lastmod verwendet (404 und noindex-Seiten werden übersprungen). Baue das mobile Menü ohne JavaScript mit <details><summary>Menu</summary>; Desktop- und Mobilmenü sind zwei getrennte <nav>-Elemente mit unterschiedlichen aria-labels.
4. Schriften selbst hosten. Diese Website verwendet eine klassische Serifenfamilie und höchstens drei Dateien. Lade das Fontshare-CSS (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap, Gewichtscode 401 für Kursiv) mit site_fetch nach _kaynak/fontshare.css, lies es mit site_read_file und übernimm nur die woff2-URLs der gewünschten Familie; der Dienst hängt manchmal eine Familie an, die du nicht angefordert hast. Lade jede woff2-Datei mit site_fetch nach assets/fonts/. Lege die @font-face-Regeln (font-display: swap) in assets/app.css ab, denn design-check.mjs sucht nur in dieser Datei nach einer eigenen Schrift. Verwende nicht die Standardschriften Inter, Roboto, Poppins oder Montserrat.
5. Tailwind kompilieren. assets/app.css wird zur Tailwind-Quelle: oben @tailwind base; @tailwind components; @tailwind utilities;, dann @font-face, der Fokusring, der Skip-Link, eine prefers-reduced-motion-Regel und deine eigenen Komponentenklassen in @layer components. Gib einer Komponentenklasse nie den Namen eines Tailwind-Utilitys (list-item, table, grid, container, hidden usw.), weil der Konflikt nach dem Kompilieren das Layout unbemerkt zerstört. Schreibe tailwind.config.js im Stammverzeichnis (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"], Farben und fontFamily). Führe "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" mit site_run_command und background=true aus und warte mit site_command_status darauf. Der <head> jeder Seite enthält in dieser Reihenfolge: genau ein <link rel="stylesheet" href="/assets/site.css">, dann eine Preload-Zeile für jede Schriftdatei, die auf dem ersten Bildschirm verwendet wird (Überschrift, Akzent und Fließtext; as="font" type="font/woff2" crossorigin). Preload-Zeilen vor dem Stylesheet verzögern das CSS und verlängern LCP; eine Schrift des ersten Bildschirms ohne Preload wird spät getauscht, verschiebt die Seite und erhöht CLS. Außerdem <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. Die Favicon-Zeile ist Pflicht: Ohne sie fragt der Browser /favicon.ico an, erhält einen 404, und der Konsolenfehler senkt Best Practices.
6. Bilder. Lade Fotos mit site_fetch mit resize und image_format="webp" in mehreren Breiten herunter (480, 800, 1200 und 1600 für das Bild des ersten Bildschirms, 480, 800 und 1200 für die übrigen; Qualität zwischen 60 und 75, niedriger bei detailreichen Fotos). Jedes <img> hat srcset, sizes passend zum tatsächlichen Layout, width und height (null CLS) und einen aussagekräftigen, ehrlichen Alt-Text. fetchpriority="high" bekommt nur das Bild, das Lighthouse als LCP-Element meldet, und dieses Bild ist nicht lazy; alle anderen Bilder verwenden loading="lazy". Ist das LCP-Element Text, bekommt kein Bild fetchpriority. Bereite außerdem assets/img/logo.png, ein assets/img/og.jpg im Format 1200x630 und assets/img/favicon.svg vor.
7. HTML-Regeln (html-validate-Standard). <!DOCTYPE html> in Großbuchstaben; kein Inline-style-Attribut (auch nicht das style="background:var(--brand)" des Kits, nimm stattdessen eine Klasse); statt normaler Leerzeichen im Text von tel:-Links; ein type bei jedem <button>; keine Leerzeichen am Zeilenende; Tabellen mit <thead>, <tbody> und th scope. Links in Absätzen sind unterstrichen; Links in Menü, Footer, Brotkrumenpfad und Buttons haben eine Touch-Fläche von mindestens 44x44 Pixeln (min-h-
[44px] min-w-
[44px]).
8. Strukturierte Daten. Fülle den seo-Block in site.config.js (siteUrl, description, logo, og-Bild, Geschäftstyp, Adressfelder) und führe "node seo-stamp.mjs" mit site_run_command aus; das stempelt Organization, WebSite und, wo passend, einen LocalBusiness-Untertyp sowie Canonical- und OG-Tags. Ergänze seitenspezifisches Schema von Hand: auf jeder Seite einen WebPage-Knoten mit @id (oder AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished und dateModified, isPartOf #site, about #business oder #org und breadcrumb, der auf eine BreadcrumbList verweist; dazu ein Product mit Offer je Artikel auf der Produktseite, HowTo auf der Produktionsseite und FAQPage auf der FAQ-Seite. Schreibe jeden Knoten in einen EIGENEN <script type="application/ld+json">-Block und verwende keinen @graph-Wrapper, denn seo-check.mjs liest nur den obersten @type und übersieht eine BreadcrumbList innerhalb von @graph. Verknüpfe die Knoten über @id. Erfinde niemals Öffnungszeiten, Koordinaten, Bewertungen, Rezensionen, Auszeichnungen, Kundenzahlen oder Zertifikate; lass unbekannte Felder weg.
9. KI-Zugriff. Schreibe robots.txt: die gesamte Website offen, nur /_kaynak/ gesperrt; Allow: / für GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended und Bingbot; deine Entscheidung zu CCBot mit der Begründung als Kommentar; die Sitemap-Zeile zuletzt. Lege im Stammverzeichnis eine llms.txt an: eine korrekte Zusammenfassung des Betriebs in zwei Sätzen, die wichtigen Seiten mit je einer Zeile und die Kontaktdaten. Schreibe 404.html (noindex, mit den Markern für Header und Footer).
10. Texte. Jede Seite hat innerhalb von <main> mindestens 150 Wörter Originaltext, und der erste Absatz beantwortet direkt die Hauptfrage der Seite. Titel haben 48 bis 60 Zeichen, Beschreibungen 145 bis 158, auf jeder Seite einzigartig. Keine Gedankenstriche oder Halbgeviertstriche, keine Standardslogans, keine leeren Versprechen. Ist etwas auf der Website nicht echt, sage deutlich, dass es fiktiv ist.
Gates. Führe nach jeder Änderung diese Schritte in dieser Reihenfolge mit site_run_command aus und gehe erst weiter, wenn jeder sauber ist:
1. node _kaynak/parca-bas.mjs, node seo-stamp.mjs, der Tailwind-Build (erneut, wenn du Klassen hinzugefügt hast).
2. node seo-check.mjs: 0 Fehler und 0 Warnungen. Warnt es mit "gövde kısa" (Fließtext zu kurz), ergänze echten Text, keinen Füllstoff.
3. node design-check.mjs: 0 Fehler. Die einzige zulässige Warnung ist "Hiç hareket yok" (keine Bewegung); der klassische Stil verlangt das, nenne also im Bericht den Grund.
4. npx --yes html-validate "**/*.html": 0 Fehler.
5. Sieh dir jede Seite mit site_preview bei view="mobile" und view="desktop" an und prüfe die Startseite zusätzlich bei 360 und 768 Pixeln. Behebe horizontalen Überlauf, gedrängte Überschriften und Touch-Flächen unter 44 Pixeln und prüfe erneut.
6. Miss jede Seite mit core_web_vitals bei strategy="mobile" und strategy="desktop" und prüfe dann die Startseite und die längste Seite mit seo_audit. Ziel:
