Sur le site
[server name] de mon serveur d'hébergement Opus Growth, construis un site marketing statique et rapide pour mon logiciel
[product name], avec le rendu des templates SaaS modernes de Webflow, sans utiliser Webflow. Produit :
[what it does and for whom, one sentence]. Fonctionnalités clés :
[six features, one sentence each]. Captures d'écran de l'application :
[links to three screenshots and what each one shows]. Offres : [plan names, monthly and yearly prices, whether VAT is included, what each plan includes]. Logos de clients que j'ai l'autorisation écrite d'afficher :
[logo files or "none"]. Citations de clients :
[approved quote, name, title, company or "none"]. Entreprise :
[legal name],
[address],
[phone],
[email],
[WhatsApp number]. Parcours d'inscription ou de démo : [sign-up page URL or "demo requests by WhatsApp and email"]. Domaine :
[domain].
Pages : accueil (hero avec une capture du produit, bandeau de logos, grille bento de fonctionnalités, présentation produit à onglets, citations clients, FAQ, appel à l'action final), fonctionnalités (/ozellikler/, chaque fonctionnalité avec son propre titre et son ancre), tarifs (/fiyatlar/ : sélecteur, cartes d'offres, tableau comparatif, FAQ facturation), contact (/iletisim/, sans formulaire ; e-mail, WhatsApp avec message prérempli et téléphone), confidentialité (/gizlilik/) et 404.html.
Style : SaaS moderne sur fond clair. Si aucune
[colour preference] n'est indiquée, un fond blanc cassé chaud, un texte noir encre et un seul accent vif (utilisé uniquement en fond, avec du texte sombre dessus). Deux graisses d'une même famille Fontshare (par exemple Satoshi 400 et 700). De grandes tuiles bento arrondies, des boutons en forme de pilule, la capture du produit dans un cadre de fenêtre sombre. Pas de dégradés violet-bleu et pas d'effet verre partout.
Règles d'interaction (les interactions Webflow sans bibliothèque) :
1. GSAP, Lenis et Swiper ne sont PAS chargés. Écris les interactions en CSS plus un seul fichier JS natif de 3 Ko maximum, chargé avec defer sur la page d'accueil uniquement. Le sélecteur de prix n'a besoin d'aucun script.
2. Grille bento : une grille CSS à 4 colonnes sur desktop, une tuile en 2x2 et deux tuiles larges de 2 colonnes, agencées sans aucune cellule vide ; une seule colonne sur mobile. Chaque tuile porte un vrai lien vers le titre correspondant sur la page des fonctionnalités et la tuile entière est cliquable : donne au lien un ::after avec inset:0 (lien étiré) et ne mets pas de second lien dans la tuile. Au survol et avec :focus-within, la bordure fonce, la tuile monte de 4 pixels avec transform et le petit fragment d'interface à l'intérieur bouge (une liste d'étapes glisse sur le côté, des barres grandissent avec scaleY).
3. Le bandeau de logos n'utilise que les logos des clients qui ont donné leur autorisation écrite ; s'il n'y en a pas, supprime la section et ne la remplace pas par de faux logos ni par une liste d'« intégrations » inventée. Le bandeau est composé de deux copies de la même liste (la seconde avec aria-hidden="true") qui défilent avec un @keyframes translate3d(-50%, 0, 0) en CSS ; il se met en pause au survol et au focus. Comme le mouvement dure plus de cinq secondes, la WCAG 2.2.2 exige un bouton « Mettre le bandeau en pause » : le bouton est masqué dans le HTML, le JS l'affiche et met à jour aria-pressed et son libellé. Donne à la ligne qui contient le bouton une min-height égale à la hauteur du bouton ; dans la démo, la ligne s'agrandissait à l'apparition du bouton et un léger décalage (CLS 0,002) a été mesuré sur desktop. Avec prefers-reduced-motion, l'animation s'arrête, la copie est masquée et les logos deviennent une grille statique qui passe à la ligne.
4. Présentation produit à onglets : dans le HTML, les onglets sont des liens internes à la page vers les panneaux (href="#ekran-x") et les trois panneaux sont visibles les uns sous les autres, de sorte que le contenu est complet sans JS et pour les robots d'indexation. Donne au conteneur des onglets role="group" et un aria-label. Le JS les transforme en role="tablist", "tab" et "tabpanel", gère aria-selected, aria-controls, tabindex et hidden, prend en charge les flèches gauche et droite, Début et Fin, et sélectionne l'onglet correspondant quand la page s'ouvre avec #ekran-x. Les panneaux se trouvent sous le premier écran, donc les masquer ne provoque aucun décalage de mise en page ; les images des panneaux utilisent loading="lazy".
5. Le sélecteur de prix fonctionne sans JS : deux boutons radio dans un fieldset (Mensuel coché par défaut) et des règles comme `.pricing:has(#donem-yillik:checked) .price-m { display: none }` qui révèlent les prix annuels. Masque le bouton radio visuellement mais garde le label entier cliquable et accessible au clavier ; affiche l'anneau de focus avec `label:has(input:focus-visible)`. Dans la vue mensuelle, chaque offre affiche une ligne « Facturé annuellement : X TL », de sorte que les deux prix existent dans le texte.
6. Les citations de clients proviennent uniquement de citations approuvées, vérifiables par nom, titre et entreprise. Si tu n'en as aucune, supprime la section ; si tu en utilises une pendant la rédaction, fais-en une carte provisoire en pointillés indiquant qu'elle sera remplie quand une vraie citation arrivera, et demande-moi avant de publier. N'écris pas de schéma Review ni aggregateRating.
7. La capture du produit dans le hero est l'élément LCP sur desktop : fetchpriority="high", pas de lazy, avec sizes donnant sa largeur réelle. Sur mobile, le LCP est généralement le texte du titre ; la capture doit tout de même charger sa version de 480 pixels via srcset.
Schéma : SoftwareApplication sur les pages d'accueil et de tarifs (name, applicationCategory "BusinessApplication", operatingSystem, url, image, publisher et une Offer par offre et par période de facturation : name, price, priceCurrency "TRY", url). Google exige une note ou un avis pour le résultat enrichi des applications logicielles ; sans véritables avis collectés sur votre propre site, aucune étoile ne s'affichera, et cela ne doit pas se résoudre avec une note inventée. FAQPage sur les pages d'accueil, de fonctionnalités et de tarifs, ContactPage sur la page de contact, BreadcrumbList sur les pages internes. Le premier paragraphe de la page de tarifs répond directement : « Les tarifs de
[product name] commencent à N TL par mois ». Le tableau comparatif est un vrai `<table>` et défile horizontalement sur les écrans étroits à l'intérieur de `<section tabindex="0" aria-label="...">` ; dans la démo, une div avec role="region" a déclenché prefer-native-element, et deux sections étiquetées par le même titre ont déclenché unique-landmark.
Installation et pièges connus (chacun a couté des points dans les mesures de la démo, n'en saute aucun) :
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 scaffold_site avec confirm=false, et appelle-le avec confirm=true seulement après mon accord. Lis ensuite site_design_guide et site_seo_guide. Avant d'écrire du code, mets la direction de design (typographie, couleurs, grille, élément signature, langage de mouvement et bibliothèques qui ne seront PAS chargées) dans un court fichier ART.md placé hors d'assets et montre-le-moi.
2. Compile Tailwind, ne le charge pas 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 `_src` et tout fichier JS qui écrit des classes. `_src/tw.css` contient la ligne `@import "../assets/app.css";` plus 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 le script cdn.tailwindcss.com et le tailwind.config en ligne 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 de la famille Fontshare choisie, télécharge le woff2 de chaque graisse séparément avec site_fetch dans `assets/fonts/`, et écris les règles @font-face avec `font-display: swap` dans `assets/app.css`, c'est là que design-check cherche une police personnalisée. Vérifie le nom font-family dans le CSS téléchargé et assure-toi que la famille contient les lettres turques ı, İ, ş et ğ (Tanker n'a pas de ı). Précharge CHAQUE graisse utilisée dans le premier écran avec `<link rel="preload" as="font" type="font/woff2" crossorigin>`, placé avant la ligne de la feuille de style ; si cela fait plus de trois fichiers, utilise moins de graisses. Dans la démo, une seule graisse de corps non préchargée a poussé le LCP mobile à 2,6 secondes et la Performance à 97. La plupart des polices Fontshare n'ont pas le symbole ₺, donc écris les prix avec « TL ».
4. Le menu et le pied de page sont du HTML statique. Ne charge pas chrome.js, motion.js ni site.config.js sur les pages. Écris un petit `chrome-stamp.mjs` qui lit la liste de navigation depuis 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. Utilise des espaces réservés comme `
[[NAV]]` au lieu de `{{...}}` et ne donne pas aux templates l'extension .html, sinon design-check et seo-check les traitent comme des pages inachevées. Construis le menu mobile avec un `<details>` 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 récupération avec site_fetch : écris la même image en fichiers séparés avec resize="480x", "800x" et "1200x", image_format="webp", quality=60 (site_fetch ne recadre pas, donc demande la source au ratio dont tu as besoin). Donne à chaque `<img>` srcset, sizes et width et height correspondant au ratio réel. L'image qui est l'élément LCP de la page reçoit fetchpriority="high" et n'est pas lazy ; toutes les autres images reçoivent loading="lazy" decoding="async". Si une image remplit le premier écran mobile, sers un recadrage plus petit au mobile avec `<picture>`.
6. Ajoute `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` à chaque page et crée une apple-touch-icon de 180 pixels à partir du logo avec site_fetch et resize="180x180". Sans lien favicon, le navigateur demande /favicon.ico, enregistre une 404 et les Bonnes pratiques tombent à 96.
7. Règles du validateur HTML : commence chaque document par un `<!DOCTYPE html>` en majuscules ; chaque espace dans le texte visible d'un lien tel: doit être ` `, y compris celle après un préfixe comme « Appeler : 0212... » ; n'utilise pas style="" ; donne un type à chaque bouton ; mets aria-label uniquement sur des landmarks, des formulaires ou des éléments interactifs (sur un ul ou une div sans rôle, c'était une erreur) ; n'étiquette jamais deux landmarks avec le même nom ; ne laisse aucun espace en fin de ligne.
8. Ne saute pas de niveau de titre : sur une page de liste, des titres de cartes en h3 juste après le h1 ont fait tomber l'Accessibilité à 98. Quand tu réutilises une carte, définis son niveau de titre page par page (h2 sur une page de liste, h3 dans une section h2).
9. Nomme l'attribut de mouvement data-reveal (design-check ne reconnait le mouvement que sous ce nom). Le JS ne donne l'état de départ masqué qu'aux blocs situés sous l'écran à l'ouverture de la page, et ne masque jamais le contenu du premier écran ; utilise transform, car un fondu en opacity abaisse l'audit de contraste. Place l'attribut sur le bloc qui enveloppe un titre et sa description, pas sur le titre seul ; dans la démo, un titre en attente glissait par-dessus le paragraphe en dessous. Avec prefers-reduced-motion: reduce, rien n'est masqué et les animations sont désactivées.
SEO, AEO et GEO :
1. Utilise des URL de type répertoire avec une barre oblique finale. Remplis le bloc seo de site.config.js et exécute `node seo-stamp.mjs`. Écris le schéma propre à chaque page dans des blocs `<script type="application/ld+json">` séparés, reliés au graphe de base par @id. N'imbrique pas BreadcrumbList dans @graph ; garde-le dans son propre bloc, c'est la seule façon pour seo-check de le voir.
2. Titres de 60 caractères maximum (seo-check signale comme erreur tout titre de moins de 25 ou de plus de 65 caractères), descriptions de 130 à 158 caractères, un seul h1 par page, et au moins 150 mots de contenu principal sur chaque page. Les pages de contact, de confidentialité et de liste ont tendance à être trop courtes ; ajoute des informations propres à la page, pas du remplissage.
3. Le premier paragraphe de chaque page répond directement à la question de la page. Écris des FAQ propres à chaque page avec `<details>` et balise-les en FAQPage. Affiche l'éditeur et une date de « Dernière mise à jour » dans un élément `<time>`.
4. Dans robots.txt, écris ta décision avec une justification pour GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot et CCBot, et indique 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 importantes.
5. Aucune invention : n'écris pas d'avis, de notes, de récompenses, de nombres de clients, de certificats, d'horaires d'ouverture, de coordonnées ni de prix sans me demander. Laisse totalement de côté du schéma tout champ que tu ne connais pas.
Contrôles (dans l'ordre ; ne dis pas « terminé » tant que tous ne sont pas 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 le mouvement désactivé (reduced-motion) ; si du contenu manque dans cette capture, l'état statique est défaillant. Dans les captures pleine page, les éléments fixes comme une barre collante peuvent apparaitre au milieu de la page et les images lazy plus bas peuvent être vides ; ne les compte pas comme des erreurs, mais vérifie leurs chemins.
3. Exécute core_web_vitals pour chaque page avec strategy="mobile" et strategy="desktop". Critères d'acceptation : sur mobile, Performance d'au moins 95 (objectif 99 à 100) et Accessibilité, Bonnes pratiques et SEO à 100 ; sur desktop, les quatre à 100. Pour une page qui échoue, utilise resources=true pour trouver le fichier qui la ralentit, corrige-le et mesure à nouveau. Exécute ensuite seo_audit sur la page d'accueil avec strategy="mobile" et runs=2. Aucune adresse extérieure à ton propre domaine ne doit rester dans la liste des requêtes réseau.
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 : site_preview ne peut pas montrer le survol ni le mouvement. Explique-moi comment vérifier dans un navigateur desktop que les tuiles bento montent au survol et au focus avec Tab, que le bouton « Mettre le bandeau en pause » arrête le bandeau, que les onglets changent avec les flèches du clavier, que le sélecteur de prix affiche les prix annuels même sans JavaScript, et que sur un téléphone avec mouvement réduit les logos deviennent une grille statique.
Après la publication : prévisualise avec site_headers la règle `/assets/* Cache-Control: public, max-age=31536000, immutable` et applique-la une fois que j'ai donné mon accord ; à partir de là, versionne le nom de fichier chaque fois que le CSS ou le JS change (site-v2.css, etc.). Soumets sitemap.xml avec gsc_submit_sitemap et inspecte la page d'accueil avec gsc_url_inspect. À la fin, donne-moi : un tableau des scores page par page (page, quatre scores mobile, quatre scores desktop, LCP, CLS), le résultat de chaque contrôle et la liste des correctifs appliqués.
