Construis un site produit multipage avec un fond aurore, des cartes en verre dépoli et des thèmes clair et sombre pour
[nom du produit IA] sur le site
[nom du serveur] de mon serveur d'hébergement Opus Growth. Produit :
[ce qu'il fait, pour qui]. Fonctionnement :
[trois étapes]. Ce qu'il produit ou fait :
[4 à 6 fonctionnalités]. Données et sécurité : [où les données sont stockées, pendant combien de temps, si elles servent à l'entrainement des modèles]. Parcours d'essai ou d'inscription :
[durée de l'essai, URL d'inscription]. Contact :
[e-mail],
[téléphone],
[numéro WhatsApp],
[adresse]. Domaine :
[domaine]. Couleurs de marque :
[couleurs, ou "à toi de choisir"]. Captures d'écran ou photos du produit :
[liens, ou "aucune"].
Pages : accueil (/), fonctionnalités (/ozellikler/), sécurité (/guvenlik/), contact (/iletisim/), confidentialité (/gizlilik/) et 404.html. Sections de l'accueil dans l'ordre : hero (h1, introduction en deux phrases, deux boutons et la carte produit qui sert d'élément signature), trois étapes, à qui s'adresse le produit (avec une photo), FAQ et un appel à l'action final. Pour les produits IA, la page sécurité pèse pour moitié dans la décision d'achat ; indique clairement la conservation des données, les accès et l'entrainement des modèles. Pas de formulaire sur la page contact, car le serveur ne sert que des fichiers statiques.
Style : aurore et verre. Une lumière douce et multicolore qui dérive lentement en arrière-plan (l'aurore), avec le contenu posé sur des cartes en verre dépoli. Pas de palette violet vers bleu ; choisis trois tons doux adaptés à la marque, par exemple menthe, abricot et bleu glacier. Typographie : une serif d'affichage douce chez Fontshare (par exemple Gambetta 500) avec une police de texte calme (par exemple Synonym 400 et 600). N'applique l'effet verre qu'aux surfaces des cartes ; ne noie pas la page sous le verre. Pas de canvas, WebGL, vidéo, GSAP, Lenis ni Swiper. Le seul JavaScript est une petite bascule de thème en ligne. Élément signature : une carte en verre dans le hero avec un vrai exemple HTML de ce que fait le produit (par exemple une décision et une tache extraites d'une transcription de réunion).
Règles pour l'aurore, le verre et le thème (c'est là que ce style casse le plus facilement les performances et le contraste) :
1. Réalise l'aurore en CSS pur : une seule couche `position: fixed` en aria-hidden, deux pseudo-éléments (::before et ::after) et trois grands radial-gradients à l'intérieur. Anime uniquement avec transform (translate3d, rotate, scale) sur une boucle `alternate` de 25 à 35 secondes et ajoute `will-change: transform`. N'anime ni le dégradé lui-même, ni background-position, ni filter: blur ; ils provoquent un repaint à chaque image. Place l'animation dans `@media (prefers-reduced-motion: no-preference)` ; avec la réduction des animations, l'aurore s'arrête mais reste visible.
2. Définis les couleurs en variables CSS (--bg, --fg, --mute, --line, --card, --solid, --acc, --accfg et les tons de l'aurore) et fais pointer les couleurs Tailwind vers elles (par exemple colors: {bg: "var(--bg)"}). Écris les valeurs sombres à la fois sous `:root
[data-theme="dark"]` et sous `@media (prefers-color-scheme: dark) { :root:not(
[data-theme="light"]) }`, afin que le thème du système s'applique même sans JavaScript.
3. Bascule de thème : un script d'une ligne dans `<head>`, après la feuille de style, lit le choix enregistré dans localStorage, écrit data-theme sur `<html>` et ajoute la classe `js` ; comme il s'exécute avant le premier affichage, la page ne clignote jamais dans le mauvais thème. Entoure l'accès à localStorage d'un try. Un petit script en fin de page change le thème au clic, enregistre le choix et met à jour le bouton quand le thème du système change. Le bouton est un vrai `<button type="button">` avec `aria-pressed` à true quand le sombre est actif, et il garde son nom accessible ("Thème sombre") même quand seule l'icône s'affiche sur mobile. Masque le bouton sans JavaScript (`html:not(.js) .theme-toggle { display: none }`). Ajoute aussi `<meta name="color-scheme" content="light dark">`.
4. Garde la carte en verre dans une seule classe `.glass` : d'abord un fond opaque (--solid), puis, dans `@supports (backdrop-filter: blur(1px))`, un fond translucide avec `backdrop-filter: blur(18px) saturate(140%)` (avec le préfixe -webkit- pour Safari). Sous `@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)`, la carte devient opaque et l'aurore est masquée. N'utilise pas l'utilitaire backdrop-blur dans le HTML ; design-check signale du « glassmorphism partout » dès qu'il en voit plus de cinq sur une page.
5. Mesure le contraste dans LES DEUX thèmes. Lighthouse n'audite que le thème clair ; si tu ne vérifies pas le sombre séparément, du texte pale passe entre les mailles en mode sombre. Rends le fond translucide de la carte assez opaque pour garder le texte au-dessus de 4,5:1 même sur la couleur d'aurore la plus claire (dans la démo : blanc à 66 pour cent en clair et vert foncé à 58 pour cent en sombre). Change la couleur du texte du bouton d'accent selon le thème (blanc sur pin foncé en clair, vert foncé sur menthe pale en sombre).
6. Donne à la carte du hero son entrée avec transform uniquement et un attribut data-reveal (design-check reconnait le mouvement à cet attribut) ; ne masque ni ne fais jamais apparaitre en fondu le h1, car c'est l'élément LCP.
Mise en place et pièges connus (chacun a couté des points ou fait échouer un contrôle lors de la mesure 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 l'installation écrase index.html et le dossier assets. Prévisualise d'abord scaffold_site avec confirm=false, puis appelle confirm=true une fois que j'ai validé. Lis ensuite site_design_guide et site_seo_guide. Avant d'écrire du code, rédige la direction de design (typographie, couleur, grille, élément signature, langage de mouvement et bibliothèques qui ne seront PAS chargées) dans un court ART.md en dehors d'assets et montre-le-moi.
2. Compile Tailwind, ne le charge pas depuis le CDN. Installe `npm i -D tailwindcss@3` avec site_run_command et background=true, puis enchaine avec site_command_status. Les chemins content de `tailwind.config.js` doivent couvrir tous les fichiers HTML, sous-dossiers compris, les gabarits `_src/*.tpl` et tout fichier JS qui écrit des 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`. Retire des pages le script cdn.tailwindcss.com, le tailwind.config en ligne, chrome.js et motion.js, et ne lie que `/assets/site.css`. Recompile après chaque modification du HTML. Comme les couleurs du thème sont des variables, les raccourcis d'opacité de Tailwind (comme bg-fg/50) ne fonctionnent pas ; définis une variable distincte si tu as besoin d'une couleur translucide.
3. Auto-héberge les polices. Lis le CSS de Fontshare avec une requête par famille et par graisse (`https://api.fontshare.com/v2/css?f[]=famille@graisse`), télécharge chaque fichier woff2 dans `assets/fonts/` avec site_fetch et écris les règles @font-face avec `font-display: swap` dans `assets/app.css` ; design-check cherche la police personnalisée à cet endroit. Précharge TOUTES les graisses utilisées au-dessus de la ligne de flottaison (titre, texte et boutons) sur chaque page avec `<link rel="preload" as="font" type="font/woff2" crossorigin>` et place ces lignes avant le lien de la feuille de style. La plupart des polices Fontshare n'ont pas le signe ₺ ; écris donc les prix avec "TL".
4. Fais du menu et du pied de page du HTML statique. Écris un petit `chrome-stamp.mjs` qui lit la liste de navigation dans site.config.js et estampille `_src/header.tpl` et `_src/footer.tpl` entre les marqueurs `<!-- nav:start --><!-- nav:end -->` et `<!-- footer:start --><!-- footer:end -->` sur chaque page, en ajoutant aria-current="page" au lien actif. Ne donne pas aux gabarits l'extension .html et utilise des espaces réservés comme `
[[NAV]]` plutôt que `{{...}}`. Construis le menu mobile avec `<details>` et sans JS. Garde le nom de l'entreprise, l'adresse et le téléphone en texte brut dans le pied de page, et donne aux liens du pied de page et du fil d'Ariane au moins 44 pixels de hauteur.
5. Convertis les images pendant leur téléchargement avec site_fetch : écris la même photo dans des fichiers distincts avec resize="480x", "800x" et "1120x" (ou les largeurs dont la page a besoin), image_format="webp" et quality=65. Donne à chaque `<img>` srcset, sizes ainsi que width et height conformes au vrai ratio. L'image principale au-dessus de la ligne de flottaison reçoit fetchpriority="high" et n'est pas lazy ; ne donne fetchpriority qu'au véritable élément LCP, et loading="lazy" decoding="async" aux autres.
6. Écris un petit `favicon.svg` à la racine du site et ajoute `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` à chaque page ; s'il existe un logo PNG, fais une apple-touch-icon avec site_fetch, resize="180x180" et image_format="png". Sans favicon, le navigateur consigne une erreur 404 pour /favicon.ico et Best Practices tombe à 96.
7. Règles du validateur HTML : commence chaque document par un `<!DOCTYPE html>` en majuscules, mets les attributs entre guillemets doubles, utilise ` ` pour les espaces dans le texte visible des liens tel:, n'emploie jamais d'attribut style="" (si tu as besoin d'une variable CSS, utilise une classe de propriété arbitraire Tailwind comme `
[--r:-4deg]`), donne à chaque bouton type="button", ne mets pas d'aria-label sur des éléments sans rôle comme `<ul>` ou `<div>`, et utilise `<section aria-label="...">` au lieu de role="region".
SEO, AEO et GEO :
1. Utilise des URL en style répertoire avec une barre oblique finale (/ozellikler/, /guvenlik/, /iletisim/, /gizlilik/ ou leurs équivalents dans ta langue). Renseigne le bloc seo de site.config.js et lance `node seo-stamp.mjs`. Pour une entreprise de logiciels sans boutique physique, mets localBusiness:false dans site.config.js. Schémas par page : accueil WebPage et FAQPage ; fonctionnalités SoftwareApplication (applicationCategory, operatingSystem, featureList) et FAQPage ; sécurité WebPage et FAQPage ; contact ContactPage ; BreadcrumbList sur les pages intérieures. N'indique aucun certificat de sécurité ni document de conformité que tu ne détiens pas ; si tu en détiens un, donne son numéro et sa date de validité. Écris chaque schéma propre à une page dans son propre bloc `<script type="application/ld+json">` et relie-le au graphe de base avec @id. N'imbrique pas BreadcrumbList dans @graph ; garde-le dans 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 considère au-delà de 65 comme une erreur), descriptions de 145 à 158 caractères, un seul h1 par page. Le contenu principal de chaque page fait au moins 150 mots. Dans la démo, les pages contact et confidentialité ne faisaient que 84 et 116 mots au premier essai et ont été complétées avec de vraies informations, comme « ce qui se passe pendant l'essai » et « avec qui les données sont partagées ».
3. Le premier paragraphe de chaque page répond directement à la question de la page, et le h1 est formulé comme cette question. Rédige la FAQ propre à la page avec `<details>` et balise-la en FAQPage. Affiche l'organisation éditrice et une mention « Dernière mise à jour » avec `<time datetime>`.
4. Dans robots.txt, écris ta décision, avec la raison, pour GPTBot, OAI-SearchBot, ChatchatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot et CCBot, et indique le sitemap. sitemap.xml contient un vrai lastmod. llms.txt contient un résumé exact du site en deux phrases et la liste des pages importantes.
5. Pas d'invention : n'écris ni avis, ni notes, ni récompenses, ni nombre de clients, ni certificats, ni horaires d'ouverture, ni coordonnées, ni prix, ni chiffres produit sans me demander. Laisse totalement hors du schéma tout champ que tu ne connais pas.
Contrôles (dans l'ordre ; ne dis pas « terminé » avant que tous soient passés) :
1. Avec site_run_command, lance dans l'ordre `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 ; si le contenu n'est pas complet dans cette capture, l'état sans animation est cassé. Les images lazy plus bas dans la page peuvent apparaitre vides dans une capture pleine page ; ne compte pas cela comme une erreur, mais vérifie leurs chemins. Vérifie aussi le thème sombre : comme site_preview ne peut pas changer le thème du système, lance un audit de contraste en mode sombre (par exemple la règle color-contrast d'axe-core avec prefers-color-scheme: dark), ou mets temporairement le sombre par défaut et prévisualise-le une fois.
3. Lance core_web_vitals pour chaque page avec strategy="mobile" puis strategy="desktop". Critères d'acceptation : sur mobile, Performance d'au moins 95 et Accessibility, Best Practices et SEO à 100 ; sur desktop, les quatre scores à 95 minimum, objectif 100. Pour une page qui échoue, trouve le fichier lent avec resources=true, corrige-le et mesure à nouveau. Lance ensuite seo_audit sur la page d'accueil avec strategy="mobile" et runs=2. La liste des requêtes réseau ne doit contenir aucune adresse hors de ton propre domaine (les liens de boutique et WhatsApp sont des liens, pas des requêtes).
4. Aucun défilement horizontal à 360, 390, 768 et 1440 pixels de large, zones tactiles d'au moins 44 pixels, aucune erreur dans la console.
Contrôle des interactions : comme site_preview ne peut ni exécuter les animations ni changer de thème, dis-moi ce qu'il faut observer dans mon propre navigateur : la lumière en arrière-plan dérive très lentement ; un clic sur la bascule change le thème, le choix survit à un changement de page et la page ne clignote jamais dans l'autre thème pendant le chargement ; si le système d'exploitation est en mode sombre, le site s'ouvre en sombre ; avec la réduction des animations activée, l'aurore s'arrête ; avec la réduction de la transparence activée, les cartes deviennent opaques ; sans JavaScript, la bascule est masquée mais le thème du système s'applique toujours.
Après la publication : prévisualise la règle `/assets/* Cache-Control: public, max-age=31536000, immutable` avec site_headers et applique-la une fois que j'ai validé ; ensuite, versionne le nom de fichier à chaque modification du CSS ou du JS (site-v2.css, etc.). Soumets sitemap.xml avec gsc_submit_sitemap et contrôle la page d'accueil avec gsc_url_inspect. À la fin, donne-moi : un tableau des scores par page (page, quatre scores mobile, quatre scores desktop, LCP, CLS), les résultats des contrôles et la liste des correctifs appliqués.
