Sur mon serveur d'hébergement Opus Growth
[nom du serveur], construis un site produit sombre et multipage pour
[nom du produit], qui raconte son histoire au fil du défilement. Produit :
[ce qu'il fait, à qui il s'adresse]. Les trois étapes qu'un utilisateur suit dans le produit :
[trois étapes]. Fonctionnalités clés :
[4 à 6 fonctionnalités]. Contact :
[e-mail],
[téléphone],
[numéro WhatsApp],
[adresse le cas échéant]. Domaine :
[domaine]. Préférence de couleur :
[couleur ou "tu choisis"]. Vraies captures d'écran ou photos du produit :
[liens ou "aucune"].
Pages : accueil (/), produit (/urun/), à propos (/hakkimizda/), contact (/iletisim/), confidentialité (/gizlilik/) et 404.html. Sections de l'accueil dans l'ordre : hero (h1, description en deux phrases, deux boutons, image du produit), l'histoire produit comme élément signature, fonctionnalités, à qui il s'adresse, FAQ et appel à l'action final. Pas de formulaire sur la page contact ; utilise l'e-mail, le téléphone et un lien WhatsApp avec message prérempli, car le serveur ne sert que des fichiers statiques.
Style : motion sombre. Fond sombre, une seule couleur d'accent sobre (pas de néon), une grotesque d'affichage serrée de Fontshare (par exemple Cabinet Grotesk) et une police de texte calme (par exemple Switzer). Pas de dégradés et pas de WebGL ; garde l'audace pour l'histoire produit.
Règles de motion (le plus difficile, à respecter à la lettre) :
1. Bibliothèques : GSAP 3.13 core, ScrollTrigger, SplitText et Lenis. Télécharge-les depuis jsdelivr dans `assets/vendor/` avec site_fetch et fige la version. Charge-les uniquement sur les pages d'accueil et produit ; les pages à propos, contact et confidentialité ne contiennent aucun script. Ne charge pas Swiper.
2. Ne les attache pas avec `<script defer>`. Place un petit loader en fin de page : après l'événement load, il attend deux appels à requestAnimationFrame puis requestIdleCallback, ajoute les scripts dans l'ordre avec async=false, et ne télécharge rien si `<html>` n'a pas la classe `anim`. Dans la démo, les bibliothèques en defer ont fait passer le LCP mobile à 3,2 s et la Performance à 92 ; avec ce loader, elle a atteint 99.
3. Un script d'une ligne dans `<head>` ajoute la classe `js` à `<html>`, et la classe `anim` sauf si prefers-reduced-motion vaut "reduce". Définis les états de départ masqués uniquement sous `.anim`, afin que le contenu soit visible dès le départ sans JS ou pour les visiteurs qui préfèrent moins d'animation, et que les bibliothèques ne soient jamais téléchargées pour eux. Comme filet de sécurité au cas où une bibliothèque ne se chargerait pas, ajoute une animation CSS qui rend visible chaque élément masqué après 2,5 s. Si le JS arrive plus tard que cela, ne masque pas à nouveau du contenu déjà visible ; construis seulement l'histoire épinglée.
4. Entrée du titre avec SplitText : le h1 du premier écran est l'élément LCP, ne le fais jamais démarrer masqué. Le h1 démarre visible dans une couleur atténuée qui respecte tout de même le contraste AA, et SplitText ramène ses lignes à la pleine couleur l'une après l'autre (options mask et aria activées). Garde l'entrée masquée, avec montée des lignes, pour les titres h2 plus bas, et déclenche-la au scroll avec ScrollTrigger.
5. Élément signature : dans l'histoire produit, utilise le pin et le scrub de ScrollTrigger via gsap.matchMedia uniquement à partir de 768 px de large (scrub autour de 0,6, end "+=180%"). À gauche, les trois étapes s'activent une à une ; à droite, l'écran du produit se remplit étape par étape. N'atténue pas les étapes inactives avec l'opacité ; change seulement la couleur du titre et la ligne de bordure. Dans la démo, des étapes atténuées par l'opacité ont échoué au contraste sur desktop et ont fait tomber l'Accessibilité à 95. Sur mobile, pas de pin ; les étapes apparaissent dans le flux normal. Sans JS, l'écran du produit affiche son état final.
6. N'active Lenis que sur les appareils `(pointer: fine)` afin que les appareils tactiles gardent le défilement natif. Pilote Lenis depuis gsap.ticker et déplace le focus vers la cible après le défilement vers un lien d'ancre.
7. L'écran du produit est une figure décorative avec aria-hidden et une figcaption qui explique ce qu'il montre. Chaque interaction fonctionne au clavier et l'anneau de focus reste visible.
Mise en place et pièges connus (chacun a fait baisser un score dans les mesures de la démo, ne les saute pas) :
1. Si un site est déjà en ligne sur le serveur, préviens-moi d'abord, car la mise en place écrase index.html et le dossier assets. Prévisualise scaffold_site avec confirm=false et appelle-le avec confirm=true après mon accord. Lis ensuite site_design_guide et site_seo_guide. Avant d'écrire du code, consigne la direction de design (typographie, couleur, grille, élément signature, langage de motion et bibliothèques qui ne seront PAS chargées) dans un court ART.md hors du dossier assets et montre-le-moi.
2. Compile Tailwind au lieu de le charger depuis le CDN. Installe-le avec site_run_command et background=true : `npm i -D tailwindcss@3`, puis enchaine avec site_command_status. Les chemins content de `tailwind.config.js` doivent couvrir tous les fichiers HTML, les templates et tout fichier JS qui écrit des noms de classes. `_src/tw.css` contient la ligne `@import "../assets/app.css";` et les trois lignes `@tailwind` ; compile-le en un seul fichier avec `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. Supprime le script cdn.tailwindcss.com et le tailwind.config inline de chaque page et ne lie que `/assets/site.css`. Recompile après chaque modification du HTML.
3. Héberge les polices toi-même. Lis le CSS des familles Fontshare choisies, télécharge le fichier woff2 de chaque graisse dans `assets/fonts/` avec site_fetch, et écris les règles @font-face avec `font-display: swap` dans `assets/app.css` ; design-check y cherche une police personnalisée. Vérifie le nom font-family dans le CSS téléchargé, car Fontshare peut renvoyer une autre famille lorsqu'une graisse n'existe pas. Précharge la police du titre du premier écran et la police de texte sur chaque page avec `<link rel="preload" as="font" type="font/woff2" crossorigin>` ; dans la démo, cela a supprimé le décalage de mise en page causé par le swap de police (CLS de 0,024 à 0). La plupart des polices Fontshare n'ont pas de glyphe ₺, écris donc "TL" pour les prix.
4. Rends le menu et le pied de page en HTML statique. Ne charge pas chrome.js ni site.config.js sur les pages. Écris un petit `chrome-stamp.mjs` qui lit la liste de navigation dans site.config.js et injecte `_src/header.tpl` et `_src/footer.tpl` entre les marqueurs `<!-- nav:start --><!-- nav:end -->` et `<!-- footer:start --><!-- footer:end -->` de chaque page, en ajoutant aria-current="page" au lien courant. Ne donne pas aux templates d'extension .html et utilise des placeholders comme `
[[NAV]]` plutôt que `{{...}}`, sinon design-check et seo-check les lisent comme des pages inachevées. Construis le menu mobile sans JS avec `<details>`. Garde le nom de l'entreprise, l'adresse et le téléphone en texte brut dans le pied de page.
5. Convertis les images pendant le téléchargement avec site_fetch : écris la même photo dans des fichiers séparés avec resize="480x", "800x" et "1200x", image_format="webp", quality=65. Donne à chaque `<img>` srcset, sizes, width et height. L'image principale du premier écran reçoit fetchpriority="high" et n'est jamais en lazy ; les autres reçoivent loading="lazy" decoding="async". Si l'image principale remplit l'écran du téléphone, sers sur mobile un recadrage plus large et plus léger avec `<picture>` (dans la démo, le hero mobile est passé de 89 Ko à 43 Ko).
6. Crée un favicon PNG de 48 px à partir du logo avec site_fetch et ajoute `<link rel="icon">` à chaque page. Sans lui, le navigateur journalise une erreur 404 et les Bonnes pratiques tombent à 96.
7. Règles du validateur HTML : commence chaque document par `<!DOCTYPE html>` en majuscules (les fichiers de départ du kit utilisent des minuscules), utilise ` ` pour les espaces dans le texte visible des liens tel:, n'utilise jamais d'attribut style="" et donne à chaque bouton type="button".
SEO, AEO et GEO :
1. Utilise des URL de type répertoire avec barre oblique finale (/urun/, /hakkimizda/, /iletisim/, /gizlilik/). Renseigne le bloc seo de site.config.js et exécute `node seo-stamp.mjs`. Écris le schéma propre à chaque page (accueil : WebPage et FAQPage ; produit : SoftwareApplication et FAQPage ; à propos : AboutPage ; contact : ContactPage ; BreadcrumbList sur les pages internes. Pour une société de logiciels sans boutique physique, définis localBusiness:false dans site.config.js) dans des blocs `<script type="application/ld+json">` séparés et relie-le au graphe de base avec @id. N'enfouis pas BreadcrumbList dans un @graph ; donne-lui son propre bloc, car c'est la seule façon pour seo-check de le voir.
2. Titres de 48 à 60 caractères (seo-check signale comme erreur tout ce qui dépasse 65), descriptions de 145 à 158 caractères, un seul h1 par page. Chaque page a besoin d'au moins 150 mots de contenu principal ; les pages contact et confidentialité ont tendance à rester en dessous.
3. Le premier paragraphe de chaque page répond directement à la question de la page. Rédige une FAQ propre à chaque page avec `<details>` et balise-la en FAQPage. Affiche l'organisation éditrice et une mention « Dernière mise à jour » avec `<time>`.
4. Dans robots.txt, écris ta décision et sa raison pour GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot et CCBot, et pointe vers le sitemap. sitemap.xml contient de vraies dates lastmod. llms.txt contient un résumé exact du site en deux phrases et la liste des pages clés.
5. N'invente rien : ni avis, ni notes, ni récompenses, ni nombre de clients, ni certificats, ni horaires d'ouverture, ni coordonnées, ni prix, sauf si je te les donne. Laisse les champs inconnus en dehors du schéma.
Contrôles (dans l'ordre ; ne considère pas le travail comme terminé tant qu'ils ne sont pas tous validés) :
1. Avec site_run_command, exécute `node chrome-stamp.mjs`, la compilation Tailwind, `node seo-stamp.mjs`, `node seo-check.mjs` (0 erreur, 0 avertissement), `node design-check.mjs` (0 erreur ; justifie tout avertissement restant) et `npx html-validate "**/*.html"` (0 erreur).
2. Affiche chaque page avec site_preview, view="mobile" et view="desktop". site_preview capture la page avec les animations désactivées (reduced-motion) ; si du contenu manque sur cette image, l'état sans animation est cassé. Dans les captures pleine page, les images lazy plus bas peuvent apparaitre vides ; ce n'est pas une erreur, mais vérifie leurs chemins.
3. Exécute core_web_vitals pour chaque page avec strategy="mobile" et strategy="desktop". Critère de réussite : sur mobile, Performance d'au moins 95 et Accessibilité, Bonnes pratiques et SEO à 100 ; sur desktop, les quatre à au moins 95. Sur une page qui échoue, utilise resources=true pour trouver le fichier qui la freine, corrige-le et mesure à nouveau. Exécute ensuite seo_audit sur la page d'accueil avec strategy="mobile" et runs=2. La liste des requêtes réseau ne doit contenir aucun hôte autre que ton propre domaine.
4. Pas de défilement horizontal aux largeurs 360, 390, 768 et 1440 px, zones tactiles d'au moins 44 px, aucune erreur dans la console.
Contrôle du motion : site_preview ne peut pas montrer le mouvement ; décris donc la section épinglée de la page d'accueil et dis-moi quoi vérifier dans mon propre navigateur : sur desktop, l'histoire produit doit rester collée en haut pendant que les étapes avancent avec le défilement ; sur téléphone, elle doit défiler normalement sans se coller ; avec la réduction des animations activée dans le système d'exploitation, rien ne doit bouger et tout doit être visible.
Après la publication : prévisual
