Site web

DĂ©finir une politique robots.txt pour les crawlers IA et la publier en toute sĂ©curitĂ©

Vous aide Ă dĂ©cider Ă quels crawlers IA le site doit ĂȘtre ouvert, en distinguant les rĂŽles de recherche, de rĂ©cupĂ©ration Ă la demande d'un utilisateur et d'entraĂźnement. PrĂ©visualise un nouveau robots.txt qui conserve vos rĂšgles existantes, l'Ă©crit sur votre site hĂ©bergĂ© ou WordPress aprĂšs validation, puis vĂ©rifie qu'il est bien en ligne.

Quand l'utiliser

Lorsque vous ne savez pas quels robots d'IA autoriser sur votre site et que vous voulez une politique robots.txt réfléchie sans ouvrir par erreur des zones privées.

Ce que vous obtenez

Vous obtenez un nouveau robots.txt qui conserve vos règles existantes, organisé par rôle de robot, prévisualisé ligne par ligne, publié après votre validation et vérifié en ligne.

Modifie-t-il quelque chose dans mon compte ?

Seulement avec votre accord. L'assistant montre d'abord un aperçu de chaque modification et attend votre feu vert.

Fonctionne avec

SEO Intelligence, WordPress

À compléter avant l'envoi

[URL du site][hĂ©bergement Opus Growth ou WordPress]

Retravaille le robots.txt de mon site [URL du site] autour d'une politique dĂ©libĂ©rĂ©e pour les crawlers IA. Type de site : [hĂ©bergement Opus Growth ou WordPress]. Ma prĂ©fĂ©rence : [A : ouvert Ă tous / B : recherche ouverte, entraĂźnement fermĂ© / C : sur mesure, explique]. 1. Lis l'Ă©tat actuel. Lis [URL du site]/robots.txt avec site_read_url. Si le site est sur l'hĂ©bergement Opus Growth, lis aussi robots.txt avec site_read_file et vĂ©rifie qu'il correspond Ă ce qui est en ligne. S'il s'agit de WordPress, identifie le plugin SEO qui le gĂšre avec wordpress_seo et vĂ©rifie avec wordpress_snippet action='list' si un snippet touche dĂ©jĂ au robots.txt. Liste tous les groupes de rĂšgles existants, toutes les lignes Disallow et toutes les lignes Sitemap. 2. Explique les rĂŽles. RĂ©partis les crawlers en trois groupes et dis-moi en une phrase chacun ce que je perds ou gagne : 1. Recherche et citation : OAI-SearchBot, Claude-SearchBot, PerplexityBot, Bingbot, Googlebot, Applebot. Les bloquer empĂȘche le site d'ĂȘtre citĂ© comme source dans les rĂ©ponses de cet assistant. 2. RĂ©cupĂ©ration en direct pour le compte d'un utilisateur : ChatGPT-User, Claude-User, Perplexity-User. Ces crawlers arrivent quand un utilisateur partage mon lien ou quand l'assistant ouvre une page pour rĂ©pondre. Selon la documentation des fournisseurs, robots.txt peut ne pas s'appliquer dans tous les cas Ă ces requĂȘtes initiĂ©es par l'utilisateur ; prĂ©cise donc qu'une rĂšgle ici n'est pas une garantie. 3. EntraĂźnement des modĂšles : GPTBot, ClaudeBot, Google-Extended, Applebot-Extended, CCBot, meta-externalagent. Les bloquer limite l'utilisation du contenu dans les futurs entraĂźnements, mais ne retire pas le contenu des modĂšles dĂ©jĂ entraĂźnĂ©s. Bloquer Google-Extended n'affecte ni Google Search ni les AI Overviews. 3. RĂ©dige le brouillon. PrĂ©pare le nouveau robots.txt selon ma prĂ©fĂ©rence en respectant ces rĂšgles : 1. DĂšs qu'un groupe est Ă©crit sous le nom propre d'un crawler, celui-ci ne lit plus le groupe `User-agent: *`. Recopie donc toutes les lignes Disallow du groupe * (espace d'administration, panier, rĂ©sultats de recherche interne, etc.) dans chaque groupe nommĂ©, sans quoi tu ouvriras des zones privĂ©es sans t'en rendre compte. 2. Ne bloque pas les fichiers CSS, JavaScript ni les images, car les crawlers en ont besoin pour afficher la page. 3. Conserve les lignes Sitemap existantes et ajoute l'URL complĂšte du sitemap si elle manque. 4. Ne bloque aucun crawler de recherche sauf si je le demande explicitement. 5. Ne touche pas aux crawlers SEO de la concurrence (comme AhrefsBot et SemrushBot) sauf si je le demande ; ils sortent du pĂ©rimĂštre de cette tĂąche. 4. Montre un aperçu. Compare l'ancien et le nouveau fichier ligne Ă ligne, puis affiche un tableau avec la dĂ©cision avant et aprĂšs pour chaque crawler : crawler, rĂŽle, ancienne dĂ©cision, nouvelle dĂ©cision. Attends mon accord. 5. Applique aprĂšs validation. 1. Site hĂ©bergĂ© : Ă©cris robots.txt avec site_write_file. La plateforme prend un instantanĂ© de version avant chaque Ă©criture ; indique-moi donc Ă quelle version de site_versions je peux revenir. 2. WordPress : quand aucun fichier physique n'existe sur le serveur, WordPress gĂ©nĂšre lui-mĂȘme le robots.txt et le filtre `robots_txt` permet de le modifier. CrĂ©e un snippet PHP avec wordpress_snippet qui utilise ce filtre, emplacement 'everywhere'. Le snippet est crĂ©Ă© inactif : montre-moi le code et n'active-le qu'aprĂšs mon accord. Si un plugin de cache est actif, vide le cache avec wordpress_purge_cache. 6. Relis le rĂ©sultat. Relis robots.txt avec site_read_url et montre que le nouveau contenu est bien en ligne. Sur WordPress, si le contenu n'a pas changĂ©, c'est qu'un fichier robots.txt physique existe sur le serveur et que le filtre ne peut pas l'atteindre. Dans ce cas, dĂ©sactive le snippet et guide-moi pour modifier le fichier dans l'Ă©diteur de fichiers du plugin SEO (Yoast : Outils, Ădition de fichiers ; Rank Math : RĂ©glages gĂ©nĂ©raux, Modifier robots.txt) ou dans le panneau d'hĂ©bergement. Termine par une note de deux phrases : la modification prend effet quand les crawlers relisent le fichier (en gĂ©nĂ©ral sous un jour), et si une rĂšgle de CDN ou de pare-feu bloque par nom de crawler, robots.txt seul ne suffit pas.

1. Lis l'Ă©tat actuel. Lis [URL du site]/robots.txt avec site_read_url. Si le site est sur l'hĂ©bergement Opus Growth, lis aussi robots.txt avec site_read_file et vĂ©rifie qu'il correspond Ă ce qui est en ligne. S'il s'agit de WordPress, identifie le plugin SEO qui le gĂšre avec wordpress_seo et vĂ©rifie avec wordpress_snippet action='list' si un snippet touche dĂ©jĂ au robots.txt. Liste tous les groupes de rĂšgles existants, toutes les lignes Disallow et toutes les lignes Sitemap.
2. Explique les rĂŽles. RĂ©partis les crawlers en trois groupes et dis-moi en une phrase chacun ce que je perds ou gagne :
   1. Recherche et citation : OAI-SearchBot, Claude-SearchBot, PerplexityBot, Bingbot, Googlebot, Applebot. Les bloquer empĂȘche le site d'ĂȘtre citĂ© comme source dans les rĂ©ponses de cet assistant.
   2. RĂ©cupĂ©ration en direct pour le compte d'un utilisateur : ChatGPT-User, Claude-User, Perplexity-User. Ces crawlers arrivent quand un utilisateur partage mon lien ou quand l'assistant ouvre une page pour rĂ©pondre. Selon la documentation des fournisseurs, robots.txt peut ne pas s'appliquer dans tous les cas Ă ces requĂȘtes initiĂ©es par l'utilisateur ; prĂ©cise donc qu'une rĂšgle ici n'est pas une garantie.
   3. EntraĂźnement des modĂšles : GPTBot, ClaudeBot, Google-Extended, Applebot-Extended, CCBot, meta-externalagent. Les bloquer limite l'utilisation du contenu dans les futurs entraĂźnements, mais ne retire pas le contenu des modĂšles dĂ©jĂ entraĂźnĂ©s. Bloquer Google-Extended n'affecte ni Google Search ni les AI Overviews.
3. RĂ©dige le brouillon. PrĂ©pare le nouveau robots.txt selon ma prĂ©fĂ©rence en respectant ces rĂšgles :
   1. DĂšs qu'un groupe est Ă©crit sous le nom propre d'un crawler, celui-ci ne lit plus le groupe `User-agent: *`. Recopie donc toutes les lignes Disallow du groupe * (espace d'administration, panier, rĂ©sultats de recherche interne, etc.) dans chaque groupe nommĂ©, sans quoi tu ouvriras des zones privĂ©es sans t'en rendre compte.
   2. Ne bloque pas les fichiers CSS, JavaScript ni les images, car les crawlers en ont besoin pour afficher la page.
   3. Conserve les lignes Sitemap existantes et ajoute l'URL complĂšte du sitemap si elle manque.
   4. Ne bloque aucun crawler de recherche sauf si je le demande explicitement.
   5. Ne touche pas aux crawlers SEO de la concurrence (comme AhrefsBot et SemrushBot) sauf si je le demande ; ils sortent du pĂ©rimĂštre de cette tĂąche.
4. Montre un aperçu. Compare l'ancien et le nouveau fichier ligne Ă ligne, puis affiche un tableau avec la dĂ©cision avant et aprĂšs pour chaque crawler : crawler, rĂŽle, ancienne dĂ©cision, nouvelle dĂ©cision. Attends mon accord.
5. Applique aprĂšs validation.
   1. Site hĂ©bergĂ© : Ă©cris robots.txt avec site_write_file. La plateforme prend un instantanĂ© de version avant chaque Ă©criture ; indique-moi donc Ă quelle version de site_versions je peux revenir.
   2. WordPress : quand aucun fichier physique n'existe sur le serveur, WordPress gĂ©nĂšre lui-mĂȘme le robots.txt et le filtre `robots_txt` permet de le modifier. CrĂ©e un snippet PHP avec wordpress_snippet qui utilise ce filtre, emplacement 'everywhere'. Le snippet est crĂ©Ă© inactif : montre-moi le code et n'active-le qu'aprĂšs mon accord. Si un plugin de cache est actif, vide le cache avec wordpress_purge_cache.
6. Relis le rĂ©sultat. Relis robots.txt avec site_read_url et montre que le nouveau contenu est bien en ligne. Sur WordPress, si le contenu n'a pas changĂ©, c'est qu'un fichier robots.txt physique existe sur le serveur et que le filtre ne peut pas l'atteindre. Dans ce cas, dĂ©sactive le snippet et guide-moi pour modifier le fichier dans l'Ă©diteur de fichiers du plugin SEO (Yoast : Outils, Ădition de fichiers ; Rank Math : RĂ©glages gĂ©nĂ©raux, Modifier robots.txt) ou dans le panneau d'hĂ©bergement.

Termine par une note de deux phrases : la modification prend effet quand les crawlers relisent le fichier (en gĂ©nĂ©ral sous un jour), et si une rĂšgle de CDN ou de pare-feu bloque par nom de crawler, robots.txt seul ne suffit pas.

Ouvrir dans Claude Ouvrir dans ChatGPT En discuter sur le forum

Exemple de résultat

Un exemple du résultat de ce prompt. Sa structure provient de la sortie réelle des outils ; les chiffres et les noms sont fictifs.

Exemple de résultat (basé sur un site fictif, pas sur des données clients réelles)

Le fichier actuel contient deux groupes : User-agent: * (Disallow: /panel/, /cart/) et User-agent: GPTBot (Disallow: /). Votre préférence est B : recherche ouverte, entrainement fermé.

Crawler	Rôle	Ancienne décision	Nouvelle décision
OAI-SearchBot	Recherche	Autorisé	Autorisé
Claude-SearchBot	Recherche	Autorisé	Autorisé
PerplexityBot	Recherche	Autorisé	Autorisé
ChatGPT-User	Requête utilisateur	Autorisé	Autorisé
GPTBot	Entrainement	Bloqué	Bloqué
ClaudeBot	Entrainement	Autorisé	Bloqué
Google-Extended	Entrainement	Autorisé	Bloqué
CCBot	Entrainement	Autorisé	Bloqué

Remarque : l'ancien groupe GPTBot ne répétait pas les lignes /panel/ et /cart/. Cela était sans conséquence, puisque ce groupe fermait l'ensemble du site, mais dans le nouveau fichier ces deux lignes sont écrites dans chaque groupe nommé.

Après votre validation, robots.txt a été écrit avec site_write_file. site_read_url l'a relu en ligne : il renvoie un code 200 et affiche le nouveau contenu. Pour revenir en arrière, la version de 14:02 dans site_versions contient l'ancien fichier.

Remarque : les crawlers relisent généralement le fichier dans la journée. Si une règle de pare-feu bloque par nom de crawler, robots.txt seul ne suffit pas.

Recherches associées

robots.txt robots d'ia bloquer gptbot autoriser chatgpt claudebot google-extended exclure entraînement ia citations ia perplexitybot robots.txt wordpress

Ces prompts donnent le meilleur résultat quand votre assistant IA est connecté à vos comptes avec Opus Growth.

Connecter vos comptes gratuitement

Autres prompts

Site webModifie après votre accordDémo en direct

Créer un site d'expert éditorial avec rubrique de guides et schema auteur

Votre assistant construit le site d'un expert : une page d'accueil façon une de magazine, des guides longs et un profil d'auteur. Typographie à empattements, schema Article et Person, articles datés et sourcés : une publication que l'on lit et que les réponses d'IA peuvent citer.

Quand l'utiliserQuand vous êtes expert indépendant, consultant ou freelance et que votre site ressemble à une brochure qui ne prouve pas votre expertise et n'est pas cité par les moteurs de recherche et les réponses d'IA.

Construis-moi un site d'expert au style éditorial sur mon serveur d'hébergement Opus Growth [nom du serveur]. Moi : [nom complet], [spécialité, ex. consultant export], [zone que je couvre, ou "en ligne"]. Services : [services]. Expérience : [expérience réelle et secteurs dans lesquels j'ai travaillé ; ne rien inventer]. Téléphone : [téléphone], e-mail : [e-mail], domaine : [domaine]. Sujets des deux premiers guides : [sujet 1], [sujet 2]. Si mon cabinet reçoit du public, son adresse : [adresse ou "aucune"].

Le site doit se lire comme une publication qui prouve l'expertise par l'écriture, pas comme une plaquette. Les guides sont au centre du site, car ce sont eux que les lecteurs et les réponses d'IA citent.

La direction de design est éditoriale :
1. Typographie : une serif de caractère issue de Fontshare pour les titres (ex. Zodiak 700 et 400 italique) et une sans-serif posée pour l'interface et les textes courts (ex. Author 400 et 600). Corps d'article en serif à 19 pixels, interligne 1,7, 68 caractères par ligne au maximum.
2. Couleur : fond papier crème, texte encre foncée, un gris chaud secondaire et un seul accent sombre (ex. lie-de-vin). L'accent n'apparait que sur les surtitres, la lettrine et les filets des citations.
3. Grille : 12 colonnes ; une une asymétrique 7 / 5 sur la page d'accueil, avec de fins filets verticaux entre les colonnes. Pas d'ombres ni de coins arrondis.
4. Élément signature : un bandeau de titre avec double filet, comme le titre d'un journal (avec une fine ligne de date au-dessus), et dans les articles une grande lettrine de la couleur d'accent ainsi qu'une citation en marge.
5. Mouvement : aucun.

Pages et schema associés :
1. index.html (une) : un titre et un chapeau dont le premier paragraphe répond à "qui êtes-vous, qui aidez-vous et sur quoi", l'image et le titre de l'article principal, une colonne latérale avec les autres articles, les services et l'auteur, une citation, et un bandeau "ma façon de travailler". WebPage et Person.
2. hizmetler.html : une section par service ; le premier paragraphe dit à qui il s'adresse et quand, suivi d'étapes numérotées et du livrable écrit. Un Service par prestation, avec la Person auteur comme provider.
3. hakkimda.html : expérience réelle, principes de travail (aucune garantie de résultat), méthode de production des articles et politique de sources. ProfilePage avec mainEntity Person (jobTitle, knowsAbout, worksFor #org).
4. rehber/index.html : articles du plus récent au plus ancien, avec date et auteur. CollectionPage et ItemList (numberOfItems).
5. rehber/[article].html : au moins 700 mots, un premier paragraphe qui répond directement à la question, une hiérarchie de H2, un tableau avec thead et th scope quand c'est utile, au moins une citation en marge, deux à quatre liens internes et des sources en fin d'article. En haut, un lien vers l'auteur et les dates de publication et de dernière mise à jour dans <time>. Article (headline, image, datePublished, dateModified, author via @id vers la Person, publisher #org). Si vous utilisez des chiffres d'exemple, indiquez qu'ils sont fictifs.
6. iletisim.html : ContactPage. 7. kvkk.html (notice de confidentialité) et 404.html.

Si le cabinet ne reçoit pas de public, mets localBusiness: false dans site.config.js ; Organization plus Person suffisent.

Règles techniques. Suis-les à la lettre, car les contrôles ci-dessous mesurent exactement cela :

1. Mise en place. Lance d'abord scaffold_site en aperçu, montre-moi la liste des fichiers, puis installe avec confirm=true après mon accord. Lis ensuite site_design_guide et site_seo_guide en entier. Avant d'écrire du code, rédige la direction dans _kaynak/ART.md (ambiance, association de polices, couleurs avec ratios de contraste, grille, élément signature, décision sur le mouvement, liste des pages) et montre-la-moi.
2. Supprime tout JavaScript. Aucune page de ce site ne charge de JavaScript. Retire de chaque page le script cdn.tailwindcss.com, la ligne tailwind.config, les balises GSAP, ScrollTrigger, SplitText, Lenis et Swiper ainsi que les balises script motion.js, chrome.js et site.config.js ; supprime assets/chrome.js et assets/motion.js. Garde assets/site.config.js, mais uniquement comme source de la marque, des coordonnées et du bloc seo pour seo-stamp.mjs ; il n'est jamais chargé dans le navigateur.
3. Menu et pied de page en HTML statique. Les composants <site-nav> et <site-footer> sont dessinés par JavaScript, donc les robots de recherche et d'IA ne voient ni le menu, ni les liens internes, ni les coordonnées. Écris l'en-tête dans _kaynak/ust.inc et le pied de page (nom, adresse, téléphone, e-mail, lien de chaque page, notice de confidentialité, "Web: Opus Growth") dans _kaynak/alt.inc. Utilise l'extension .inc pour que seo-stamp et html-validate ne traitent pas ces fragments comme des pages. Chaque page contient les marqueurs  et . Écris ensuite avec site_write_file un script Node sans dépendance, _kaynak/parca-bas.mjs : il insère les deux fragments entre les marqueurs dans chaque fichier HTML, ajoute aria-current="page" au lien du menu de la page courante, et réécrit sitemap.xml en utilisant le dateModified du JSON-LD de chaque page comme lastmod (en ignorant 404 et les pages noindex). Construis le menu mobile sans JavaScript avec <details><summary>Menu</summary> ; les menus desktop et mobile sont deux éléments <nav> distincts avec des aria-label différents.
4. Héberge les polices toi-même. Ce site utilise deux familles et cinq fichiers au plus ; les polices des titres, du chapeau en italique et du corps apparaissent toutes sur le premier écran, donc précharge les quatre. Dans la démo, ne précharger que deux polices a fait monter le CLS d'un long article à 0,24 et fait tomber la Performance mobile à 86 ; en préchargeant les quatre, le CLS est tombé à 0 et la Performance est montée à 99. Télécharge le CSS Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap, code de graisse 401 pour l'italique) avec site_fetch dans _kaynak/fontshare.css, lis-le avec site_read_file et ne garde que les URL woff2 de la famille demandée ; le service ajoute parfois une famille que tu n'as pas demandée. Télécharge chaque woff2 avec site_fetch dans assets/fonts/. Mets les règles @font-face (font-display: swap) dans assets/app.css, car design-check.mjs ne cherche une police personnalisée que dans ce fichier. N'utilise pas les polices par défaut Inter, Roboto, Poppins ou Montserrat.
5. Compile Tailwind. assets/app.css devient la source Tailwind : @tailwind base; @tailwind components; @tailwind utilities; en haut, puis @font-face, l'anneau de focus, le lien d'évitement, une règle prefers-reduced-motion et tes propres classes de composants dans @layer components. Ne donne jamais à une classe de composant le nom d'un utilitaire Tailwind (list-item, table, grid, container, hidden, etc.), car ce conflit casse silencieusement la mise en page après compilation. Écris tailwind.config.js à la racine (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"], couleurs et fontFamily). Lance "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" avec site_run_command et background=true, puis attends avec site_command_status. Le <head> de chaque page contient, dans cet ordre : un unique <link rel="stylesheet" href="/assets/site.css">, puis une ligne de préchargement pour chaque fichier de police utilisé sur le premier écran (titre, accent et corps ; as="font" type="font/woff2" crossorigin). Des lignes de préchargement placées avant la feuille de style retardent le CSS et allongent le LCP ; une police du premier écran sans préchargement s'affiche tardivement, décale la page et augmente le CLS ; enfin <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. La ligne du favicon est obligatoire : sans elle, le navigateur demande /favicon.ico, reçoit un 404, et l'erreur en console abaisse le score Best Practices.
6. Images. Télécharge les photos avec site_fetch en utilisant resize et image_format="webp" à plusieurs largeurs (480, 800, 1200 et 1600 pour l'image du premier écran, 480, 800 et 1200 pour les autres ; qualité entre 60 et 75, plus basse pour les photos très détaillées). Chaque <img> a un srcset, des sizes correspondant à la mise en page réelle, width et height (CLS nul) et un texte alt pertinent et honnête. fetchpriority="high" va uniquement sur l'image que Lighthouse signale comme élément LCP, et cette image n'est pas lazy ; toutes les autres images utilisent loading="lazy". Si l'élément LCP est du texte, aucune image n'a fetchpriority. Prépare aussi assets/img/logo.png, un assets/img/og.jpg de 1200x630 et assets/img/favicon.svg.
7. Règles HTML (valeurs par défaut de html-validate). <!DOCTYPE html> en majuscules ; pas d'attribut style en ligne (y compris le style="background:var(--brand)" du kit, utilise une classe à la place) ; &nbsp; au lieu d'espaces simples dans le texte des liens tel: ; un type sur chaque <button> ; pas d'espaces en fin de ligne ; tableaux avec <thead>, <tbody> et th scope. Les liens dans les paragraphes sont soulignés ; les liens du menu, du pied de page, du fil d'Ariane et des boutons ont une zone tactile d'au moins 44x44 pixels (min-h-[44px] min-w-[44px]).
8. Données structurées. Renseigne le bloc seo de site.config.js (siteUrl, description, logo, image og, type d'entreprise, champs d'adresse) et lance "node seo-stamp.mjs" avec site_run_command ; il pose Organization, WebSite et, le cas échéant, un sous-type LocalBusiness, ainsi que les balises canonical et OG. Ajoute à la main le schema propre à chaque page : sur toutes les pages, un nœud WebPage avec un @id (ou AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished et dateModified, isPartOf #site, about #business ou #org, et breadcrumb pointant vers un BreadcrumbList ; plus un Service par prestation, Person et ProfilePage pour l'auteur, ItemList sur l'index des guides et Article sur chaque guide. Écris chaque nœud dans son PROPRE bloc <script type="application/ld+json"> et n'utilise pas d'enveloppe @graph, car seo-check.mjs ne lit que le @type de premier niveau et ne voit pas un BreadcrumbList placé dans @graph. Relie les nœuds par @id. N'invente jamais horaires d'ouverture, coordonnées géographiques, notes, avis, récompenses, nombres de clients ou certificats ; omets les champs inconnus.
9. Accès des IA. Écris robots.txt : tout le site ouvert, seul /_kaynak/ fermé ; Allow: / pour GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended et Bingbot ; ta décision sur CCBot avec la raison en commentaire ; la ligne Sitemap en dernier. Ajoute llms.txt à la racine : un résumé exact de l'activité en deux phrases, les pages importantes avec une ligne chacune, et les coordonnées. Écris 404.html (noindex, avec les marqueurs d'en-tête et de pied de page).
10. Rédaction. Chaque page a au moins 150 mots de texte original dans <main>, et le premier paragraphe répond directement à la question principale de la page. Les titres font 48 à 60 caractères, les descriptions 145 à 158, uniques sur chaque page. Pas de tirets cadratins ni demi-cadratins, pas de slogans bateau, pas de promesses creuses. Si un élément du site n'est pas réel, dis-le clairement : il est fictif.

Site webModifie après votre accordDémo en direct

Créer un site d'entreprise familiale au look classique, aux standards modernes

Demandez à votre assistant de construire le site d'un producteur de troisième génération, dans l'esprit d'une vieille étiquette ou d'une enseigne, avec cadre et texture papier. Le look est ancien, la construction est moderne : mobile first, sans JavaScript, polices auto-hébergées, WebP, schémas Product et HowTo.

Quand l'utiliserQuand vous tenez une entreprise familiale ou une boutique et voulez un site au look d'étiquette ancienne et d'enseigne, qui reste rapide sur mobile et réussit les contrôles SEO et d'accessibilité.

Construis un site d'aspect traditionnel pour notre entreprise familiale sur mon serveur d'hébergement Opus Growth [nom du serveur]. Entreprise : [nom de l'entreprise], [ce que nous fabriquons, p. ex. huile d'olive ou loukoum], [ville], [année de création et génération, uniquement si c'est vrai]. Produits : [pour chacun, nom, conditionnement, courte description et prix publié, ou "pas de prix"]. Étapes de production : [courte liste]. Comment commander : [téléphone, boutique, livraison]. Téléphone : [téléphone], e-mail : [e-mail], adresse de la boutique : [adresse], domaine : [domaine]. Photos de famille et d'archives : [où elles se trouvent, ou "aucune"].

Le look est ancien, la construction est neuve. Le site doit évoquer une vieille étiquette, une enseigne ou un registre de récolte, mais les pages doivent s'ouvrir sans faille sur mobile, ne charger aucun JavaScript, et chaque page doit être mesurée. Le look ancien n'est jamais une excuse pour une mauvaise lisibilité ou un contraste insuffisant.

La direction artistique est traditionnelle :
1. Typographie : une seule famille à empattements classique issue de Fontshare (p. ex. Gambetta 400, 400 italique, 600). Petites capitales avec font-variant-caps: all-small-caps et espacement large pour le menu, les boutons et les libellés ; titres centrés.
2. Couleur : un fond ton papier, un texte brun encre, un brun secondaire et une couleur principale (p. ex. vert olive), avec une seconde couleur chaude uniquement sur de minuscules libellés. Le tout avec un contraste d'au moins 4,5:1.
3. Texture : une texture papier pour le fond, en data URI SVG feTurbulence dans le CSS ; pas de fichier image supplémentaire ni de requête en plus.
4. Élément signature : un cadre d'étiquette ancienne, une boite à double filet avec ornements d'angle (border, outline-offset, ::before et ::after), et un petit ornement dessiné en SVG inline entre les sections (p. ex. un rameau d'olivier), aria-hidden.
5. Mise en page : centrée et étroite ; produits dans des cartes d'étiquette encadrées, une colonne sur mobile.
6. Mouvement : aucun.
7. Photos : utilise les archives de la famille s'il y en a. Sinon, tu peux utiliser des photos d'archives du domaine public ou sous licence libre, mais indique la source et la licence dans la légende et ne les présente jamais comme celles de la famille.

Pages et leurs schémas :
1. index.html : un premier écran encadré dont le paragraphe d'ouverture répond à "qui, fabrique quoi, où, vend comment", des étiquettes produits, une section famille, comment commander. WebPage. Définis dans site.config.js le sous-type d'entreprise le plus adapté (p. ex. Store ou FoodEstablishment).
2. urunler.html : chaque produit dans sa propre carte d'étiquette avec nom, conditionnement, description et prix publié. CollectionPage et un Product par article (brand, manufacturer #business, offers avec price, priceCurrency, availability). N'écris jamais un prix que je ne t'ai pas donné ; sans prix, omets entièrement offers.
3. hikayemiz.html : la vraie histoire, génération après génération. AboutPage.
4. uretim.html : les étapes de la récolte ou de la matière première jusqu'à l'emballage, la définition officielle du grade du produit et la réglementation sur laquelle elle repose (p. ex. le Codex alimentaire turc). WebPage et HowTo.
5. sss.html : six vraies questions sur la commande, la livraison et la conservation. FAQPage.
6. iletisim.html : téléphone de commande, adresse de la boutique, lien vers la carte ; ne mets pas les horaires s'ils changent selon la saison. ContactPage.
7. kvkk.html (notice de confidentialité) et 404.html.

Règles techniques. Suis-les à la lettre, car les contrôles ci-dessous mesurent exactement ces points :

1. Mise en place. Lance d'abord scaffold_site en aperçu, montre-moi la liste des fichiers, puis installe avec confirm=true une fois que j'ai donné mon accord. Lis ensuite site_design_guide et site_seo_guide en entier. Avant d'écrire du code, rédige la direction dans _kaynak/ART.md (ambiance, association de polices, couleurs avec rapports de contraste, grille, élément signature, décision sur le mouvement, liste des pages) et montre-la-moi.
2. Supprime le JavaScript. Aucune page de ce site ne charge de JavaScript. Retire de chaque page le script cdn.tailwindcss.com, la ligne tailwind.config, les balises GSAP, ScrollTrigger, SplitText, Lenis et Swiper et les balises script motion.js, chrome.js et site.config.js ; supprime assets/chrome.js et assets/motion.js. Conserve assets/site.config.js, mais uniquement comme source de la marque, des contacts et du seo pour seo-stamp.mjs ; il n'est jamais chargé dans le navigateur.
3. Menu et pied de page en HTML statique. Les composants <site-nav> et <site-footer> sont dessinés par JavaScript : les robots de recherche et d'IA ne voient donc ni le menu, ni les liens internes, ni les coordonnées. Écris l'en-tête dans _kaynak/ust.inc et le pied de page (nom, adresse, téléphone, e-mail, tous les liens de pages, notice de confidentialité, "Web: Opus Growth") dans _kaynak/alt.inc. Utilise l'extension .inc pour que seo-stamp et html-validate ne traitent pas ces fragments comme des pages. Chaque page porte les marqueurs  et . Écris ensuite avec site_write_file, dans _kaynak/parca-bas.mjs, un script Node sans dépendance : il injecte les deux fragments entre les marqueurs dans chaque fichier HTML, ajoute aria-current="page" au lien de menu de la page courante et réécrit sitemap.xml en utilisant le dateModified du JSON-LD de chaque page comme lastmod (en ignorant 404 et les pages noindex). Construis le menu mobile sans JavaScript avec <details><summary>Menu</summary> ; les menus desktop et mobile sont deux éléments <nav> distincts, avec des aria-label différents.
4. Héberge les polices toi-même. Ce site utilise une seule famille à empattements classique et trois fichiers au maximum. Télécharge le CSS Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap, code de graisse 401 pour l'italique) avec site_fetch dans _kaynak/fontshare.css, lis-le avec site_read_file et ne retiens que les URL woff2 de la famille demandée ; le service ajoute parfois une famille que tu n'as pas demandée. Télécharge chaque woff2 avec site_fetch dans assets/fonts/. Place les règles @font-face (font-display: swap) dans assets/app.css, car design-check.mjs ne cherche une police personnalisée que dans ce fichier. N'utilise pas Inter, Roboto, Poppins ou Montserrat par défaut.
5. Compile Tailwind. assets/app.css devient la source Tailwind : @tailwind base; @tailwind components; @tailwind utilities; en haut, puis @font-face, l'anneau de focus, le lien d'évitement, une règle prefers-reduced-motion et tes propres classes de composants dans @layer components. Ne donne jamais à une classe de composant le nom d'un utilitaire Tailwind (list-item, table, grid, container, hidden, etc.), car le conflit casse silencieusement la mise en page après compilation. Écris tailwind.config.js à la racine (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"], couleurs et fontFamily). Lance "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" avec site_run_command et background=true, puis attends avec site_command_status. Le <head> de chaque page contient, dans cet ordre : un unique <link rel="stylesheet" href="/assets/site.css">, puis une ligne preload pour chaque fichier de police utilisé sur le premier écran (titre, accent et corps ; as="font" type="font/woff2" crossorigin). Des lignes preload placées avant la feuille de style retardent le CSS et allongent le LCP ; une police du premier écran sans preload s'échange tardivement, décale la page et fait monter le CLS ; puis <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. La ligne du favicon est obligatoire : sans elle, le navigateur demande /favicon.ico, reçoit un 404, et l'erreur en console fait baisser les Bonnes pratiques.
6. Images. Télécharge les photos avec site_fetch en utilisant resize et image_format="webp" à plusieurs largeurs (480, 800, 1200 et 1600 pour l'image du premier écran, 480, 800 et 1200 pour les autres ; qualité entre 60 et 75, plus basse pour les photos très détaillées). Chaque <img> a srcset, sizes correspondant à la vraie mise en page, width et height (CLS nul) et un texte alt pertinent et honnête. fetchpriority="high" va uniquement sur l'image que Lighthouse signale comme élément LCP, et cette image n'est pas en lazy ; toutes les autres utilisent loading="lazy". Si l'élément LCP est du texte, aucune image ne reçoit fetchpriority. Prépare aussi assets/img/logo.png, un assets/img/og.jpg en 1200x630 et assets/img/favicon.svg.
7. Règles HTML (valeurs par défaut de html-validate). <!DOCTYPE html> en majuscules ; aucun attribut style en ligne (y compris le style="background:var(--brand)" du kit, utilise plutôt une classe) ; &nbsp; au lieu d'espaces simples dans le texte des liens tel: ; un type sur chaque <button> ; pas d'espaces en fin de ligne ; tableaux avec <thead>, <tbody> et th scope. Les liens dans les paragraphes sont soulignés ; les liens du menu, du pied de page, du fil d'Ariane et des boutons ont une zone tactile d'au moins 44x44 pixels (min-h-[44px] min-w-[44px]).
8. Données structurées. Remplis le bloc seo de site.config.js (siteUrl, description, logo, image og, type d'entreprise, champs d'adresse) et lance "node seo-stamp.mjs" avec site_run_command ; il estampille Organization, WebSite et, si pertinent, un sous-type LocalBusiness, ainsi que les balises canonical et OG. Ajoute à la main les schémas propres à chaque page : sur chaque page un nœud WebPage avec un @id (ou AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished et dateModified, isPartOf #site, about #business ou #org, et breadcrumb pointant vers un BreadcrumbList ; plus un Product avec Offer par article sur la page produits, HowTo sur la page production et FAQPage sur la page FAQ. Écris chaque nœud dans son PROPRE bloc <script type="application/ld+json"> et n'utilise pas d'enveloppe @graph, car seo-check.mjs ne lit que le @type de premier niveau et rate un BreadcrumbList placé dans @graph. Relie les nœuds avec @id. N'invente jamais d'horaires, de coordonnées, de notes, d'avis, de récompenses, de nombres de clients ou de certificats ; laisse de côté les champs inconnus.
9. Accès pour les IA. Écris robots.txt : tout le site ouvert, seul /_kaynak/ fermé ; Allow: / pour GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended et Bingbot ; à toi de décider pour CCBot, en indiquant la raison en commentaire ; la ligne Sitemap en dernier. Ajoute llms.txt à la racine : un résumé exact de l'entreprise en deux phrases, les pages importantes avec une ligne chacune, et les coordonnées. Écris 404.html (noindex, avec les marqueurs d'en-tête et de pied de page).
10. Rédaction. Chaque page contient au moins 150 mots de texte original dans <main>, et le premier paragraphe répond directement à la question principale de la page. Les titres font de 48 à 60 caractères, les descriptions de 145 à 158, uniques sur chaque page. Pas de tirets cadratins ni demi-cadratins, pas de slogans bateau, pas de promesses vides. Si quoi que ce soit sur le site n'est pas réel, dis-le clairement : c'est fictif.

Site webModifie après votre accordDémo en direct

Créer un site de cabinet juridique ou comptable, minimaliste suisse et rassurant

Demandez à votre assistant de construire un site de cabinet statique sur une grille stricte, avec une hiérarchie portée par une seule famille typographique. Il place les signaux de confiance qu'exige un domaine YMYL : profils des praticiens, note d'information datée et sourcée, formulations conformes aux règles de publicité professionnelle et schema Person.

Quand l'utiliserLorsque vous dirigez un cabinet d'avocats ou d'expertise comptable et qu'il vous faut un site crédible et rapide qui inspire confiance sans enfreindre les règles de publicité professionnelle.

Construis un site statique multipage, minimaliste suisse, pour notre cabinet sur mon serveur d'hébergement Opus Growth [server name]. Cabinet : [practice name], [profession, e.g. law firm or accounting practice], [city]. Domaines d'intervention : [areas]. Praticiens : [for each, name, title, bar or chamber they are registered with, registration number, areas]. Téléphone : [phone], e-mail : [email], adresse : [address], domaine : [domain]. Sujet de la note d'information : [a frequently asked topic, e.g. the legal cap on rent increases].

Nous sommes dans un domaine où les gens prennent des décisions qui engagent leur argent et leurs droits : la confiance doit venir de la clarté, des références et des sources, pas de la décoration. Respecte les règles professionnelles : pour les avocats en Turquie, le règlement de l'Union des barreaux de Turquie sur l'interdiction de la publicité ; pour les experts-comptables, les règles professionnelles du TÜRMOB ; ou l'équivalent là où nous exerçons. N'écris ni taux de réussite, ni nombre d'affaires gagnées, ni noms de clients, ni affirmations de supériorité du type « le meilleur » ou « expert de référence », ni comparaisons d'honoraires, ni garanties, ni promesses exagérées. Présente l'information avec la mention qu'elle est générale et ne remplace pas un conseil juridique ou financier.

La direction de design est le minimalisme suisse :
1. Typographie : une seule famille de grotesque Fontshare (par ex. Switzer 400, 500, 600). La hiérarchie vient uniquement de la taille et de la graisse : un grand titre serré aligné à gauche, un texte courant posé, de petites étiquettes de section.
2. Couleur : fond blanc, texte quasi noir, un gris foncé et un seul accent (par ex. rouge suisse). L'accent n'apparait que sur la marque de section, les étiquettes et l'anneau de focus. Les photos sont en noir et blanc (Tailwind grayscale).
3. Grille : 12 colonnes strictes. Dans chaque section, l'étiquette occupe les colonnes 1 à 3 et le contenu les colonnes 4 à 12 ; les sections sont séparées par un filet noir de 1 pixel. Pas de coins arrondis ni d'ombres.
4. Élément signature : étiquettes de section numérotées avec une marque § dans la couleur d'accent, et de discrets repères de grille à 12 colonnes tracés en CSS seul derrière le premier écran.
5. Mouvement : aucun.

Pages et leur schema :
1. index.html : un premier écran dont le paragraphe d'ouverture répond à « quelles affaires, pour qui, où », les domaines d'intervention, la façon de travailler et le mode de fixation des honoraires (sans chiffres, avec le barème officiel et une lettre de mission écrite), la dernière note d'information, un résumé de l'équipe. WebPage.
2. calisma-alanlari.html : une section par domaine ; le premier paragraphe répond à la question la plus fréquente du domaine, suivi des principaux sujets et de la base légale. Un Service par domaine.
3. ekip.html : un profil pour chaque praticien (nom, titre, barreau ou ordre, domaines, courte biographie). AboutPage et un Person par praticien (jobTitle, knowsAbout, worksFor #business, memberOf le barreau ou l'ordre).
4. bilgi-notlari/[topic].html : une note appuyée sur le texte de loi, qui s'ouvre sur une réponse courte. En haut : auteur, relecteur, date de publication et date de dernière révision ; à la fin, une liste de sources. Article (author et publisher via @id, image, datePublished, dateModified, citation) et reviewedBy plus lastReviewed sur la WebPage. N'écris jamais un point juridique ou financier que tu ne connais pas ; pose-moi la question pour chaque phrase dont tu doutes.
5. sss.html : six vraies questions, FAQPage. 6. iletisim.html : ContactPage. 7. kvkk.html (mentionnant le secret professionnel) et 404.html.

Règles techniques. Suis-les à la lettre, car les contrôles ci-dessous mesurent exactement cela :

1. Mise en place. Lance d'abord scaffold_site en prévisualisation, montre-moi la liste des fichiers, et installe avec confirm=true une fois que j'ai validé. Lis ensuite site_design_guide et site_seo_guide en entier. Avant d'écrire du code, consigne la direction dans _kaynak/ART.md (ambiance, association de polices, couleurs avec leurs ratios de contraste, grille, élément signature, décision sur le mouvement, liste des pages) et montre-la-moi.
2. Supprime le JavaScript. Aucune page de ce site ne charge de JavaScript. Retire de chaque page le script cdn.tailwindcss.com, la ligne tailwind.config, les balises GSAP, ScrollTrigger, SplitText, Lenis et Swiper ainsi que les balises script motion.js, chrome.js et site.config.js ; supprime assets/chrome.js et assets/motion.js. Conserve assets/site.config.js, mais uniquement comme source de marque, de contact et de seo pour seo-stamp.mjs ; il n'est jamais chargé dans le navigateur.
3. Menu et pied de page en HTML statique. Les composants <site-nav> et <site-footer> sont dessinés par JavaScript : les robots des moteurs de recherche et des IA ne voient donc ni le menu, ni les liens internes, ni les coordonnées. Écris l'en-tête dans _kaynak/ust.inc et le pied de page (nom, adresse, téléphone, e-mail, lien vers chaque page, notice de confidentialité, « Web: Opus Growth ») dans _kaynak/alt.inc. Utilise l'extension .inc pour que seo-stamp et html-validate ne traitent pas ces fragments comme des pages. Chaque page porte les marqueurs  et . Écris ensuite avec site_write_file un script Node sans dépendance, _kaynak/parca-bas.mjs : il injecte les deux fragments entre les marqueurs dans chaque fichier HTML, ajoute aria-current="page" au lien de menu de la page courante, et réécrit sitemap.xml en utilisant le dateModified du JSON-LD de chaque page comme lastmod (en ignorant les pages 404 et noindex). Réalise le menu mobile sans JavaScript avec <details><summary>Menu</summary> ; les menus desktop et mobile sont deux éléments <nav> distincts avec des aria-label différents.
4. Héberge les polices toi-même. Ce site utilise une seule famille de polices et trois fichiers au maximum. Télécharge le CSS Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap, code de graisse 401 pour l'italique) avec site_fetch vers _kaynak/fontshare.css, lis-le avec site_read_file et ne retiens que les URL woff2 de la famille demandée ; le service ajoute parfois une famille que tu n'as pas demandée. Télécharge chaque woff2 avec site_fetch dans assets/fonts/. Place les règles @font-face (font-display: swap) dans assets/app.css, car design-check.mjs ne cherche une police personnalisée que dans ce fichier. N'utilise pas Inter, Roboto, Poppins ou Montserrat par défaut.
5. Compile Tailwind. assets/app.css devient la source Tailwind : @tailwind base; @tailwind components; @tailwind utilities; en haut, puis @font-face, l'anneau de focus, le lien d'évitement, une règle prefers-reduced-motion et tes propres classes de composants dans @layer components. Ne donne jamais à une classe de composant le nom d'un utilitaire Tailwind (list-item, table, grid, container, hidden, etc.), car le conflit casse silencieusement la mise en page après compilation. Écris tailwind.config.js à la racine (content : ["./*.html", "./**/*.html", "./_kaynak/*.inc"], couleurs et fontFamily). Exécute "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" avec site_run_command et background=true, et attends le résultat avec site_command_status. Le <head> de chaque page contient, dans cet ordre : un unique <link rel="stylesheet" href="/assets/site.css">, puis une ligne preload pour chaque fichier de police utilisé sur le premier écran (titre, accent et texte ; as="font" type="font/woff2" crossorigin). Des lignes preload placées avant la feuille de style retardent le CSS et allongent le LCP ; une police du premier écran sans preload s'affiche tardivement, décale la page et fait monter le CLS ; enfin <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. La ligne du favicon est obligatoire : sans elle, le navigateur demande /favicon.ico, reçoit une 404, et l'erreur en console fait baisser Best Practices.
6. Images. Télécharge les photos avec site_fetch en utilisant resize et image_format="webp" à plusieurs largeurs (480, 800, 1200 et 1600 pour l'image du premier écran, 480, 800 et 1200 pour les autres ; qualité entre 60 et 75, plus basse pour les photos détaillées). Chaque <img> a srcset, des sizes conformes à la mise en page réelle, width et height (CLS nul) et un texte alternatif pertinent et honnête. fetchpriority="high" ne va que sur l'image que Lighthouse signale comme élément LCP, et cette image n'est pas en lazy ; toutes les autres images utilisent loading="lazy". Si l'élément LCP est du texte, aucune image n'a de fetchpriority. Prépare aussi assets/img/logo.png, un assets/img/og.jpg de 1200x630 et assets/img/favicon.svg.
7. Règles HTML (valeurs par défaut de html-validate). <!DOCTYPE html> en majuscules ; aucun attribut style en ligne (y compris le style="background:var(--brand)" du kit, utilise une classe à la place) ; &nbsp; au lieu d'espaces simples dans le texte des liens tel: ; un type sur chaque <button> ; aucun espace en fin de ligne ; tableaux avec <thead>, <tbody> et th scope. Les liens dans les paragraphes sont soulignés ; les liens du menu, du pied de page, du fil d'Ariane et des boutons ont une zone tactile d'au moins 44x44 pixels (min-h-[44px] min-w-[44px]).
8. Données structurées. Renseigne le bloc seo de site.config.js (siteUrl, description, logo, image og, type d'entreprise, champs d'adresse) et exécute "node seo-stamp.mjs" avec site_run_command ; il injecte Organization, WebSite et, le cas échéant, un sous-type LocalBusiness, ainsi que les balises canonical et OG. Ajoute à la main le schema propre à chaque page : sur toutes les pages, un nœud WebPage avec un @id (ou AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished et dateModified, isPartOf #site, about #business ou #org, et breadcrumb pointant vers un BreadcrumbList ; plus un Service par domaine d'intervention, un Person par praticien sur la page équipe, Article et reviewedBy sur la note d'information, et FAQPage sur la page FAQ. Écris chaque nœud dans SON PROPRE bloc <script type="application/ld+json"> et n'utilise pas d'enveloppe @graph, car seo-check.mjs ne lit que le @type de premier niveau et ne voit pas un BreadcrumbList situé dans un @graph. Relie les nœuds par @id. N'invente jamais d'horaires d'ouverture, de coordonnées, de notes, d'avis, de distinctions, de nombres de clients ou de certificats ; laisse de côté les champs inconnus.
9. Accès des IA. Écris robots.txt : tout le site ouvert, seul /_kaynak/ fermé ; Allow: / pour GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended et Bingbot ; ta décision sur CCBot avec la raison en commentaire ; la ligne Sitemap en dernier. Ajoute llms.txt à la racine : un résumé exact de l'entreprise en deux phrases, les pages importantes avec une ligne chacune et les coordonnées. Écris 404.html (noindex, avec les marqueurs d'en-tête et de pied de page).
10. Rédaction. Chaque page contient au moins 150 mots de texte original dans <main>, et le premier paragraphe répond directement à la question principale de la page. Les titres font de 48 à 60 caractères, les descriptions de 145 à 158, uniques sur chaque page. Pas de tirets cadratins ni demi-cadratins, pas de slogans bateau, pas de promesses creuses. Si un élément du site n'est pas réel, indique clairement qu'il est fictif.

Contrôles. Après chaque modification, exécute-les avec site_run_command dans cet ordre et ne passe à la suite que lorsque chacun est propre :
1. node _kaynak/parca-bas.mjs, node seo-stamp.mjs, la compilation Tailwind (à refaire si tu as ajouté des classes).
2. node seo-check.mjs : 0 erreur et 0 avertissement. S'il signale « gövde kısa » (corps trop court), ajoute du vrai texte, pas du remplissage.
3. node design-check.mjs : 0 erreur. Le seul avertissement

Site webModifie après votre accordDémo en direct

Créer un site corporate multipage sans JavaScript et le livrer à 100

Demandez à votre assistant de construire un site statique, rapide et accessible pour une activité de type architecture, ingénierie ou conseil. Le menu et le pied de page sont en HTML statique, les polices et le CSS sont auto-hébergés, et chaque page est mesurée avant la livraison.

Quand l'utiliserQuand vous avez besoin d'un site d'entreprise multipage, rapide et accessible, pour un cabinet d'architecture, d'ingénierie ou de conseil, sans aucun JavaScript.

Construis un site corporate multipage entièrement statique pour mon entreprise, sur mon serveur d'hébergement Opus Growth [nom du serveur]. Entreprise : [nom de l'entreprise], [secteur, par ex. cabinet d'ingénierie et d'architecture], [ville / zone d'intervention]. Services : [services avec une courte description chacun]. Téléphone : [téléphone], e-mail : [e-mail], adresse : [adresse], domaine : [domaine]. Préférence de couleurs : [couleur / préférence de marque, ou "à ton choix"]. Photos : [où se trouvent les vraies photos, ou "utilise des photos libres de droits adaptées"].

Ce site privilégie la vitesse et l'accessibilité. Pas une seule ligne de JavaScript sur aucune page ; GSAP, Lenis et Swiper ne sont jamais chargés. Tout, y compris le menu, le menu mobile et la FAQ, fonctionne avec HTML et CSS.

La direction de design est "planche de dessin technique" :
1. Typographie : une police de titre grotesque serrée issue de Fontshare (par ex. Cabinet Grotesk 800) et une police de texte posée (par ex. General Sans 400 et 600). Trois fichiers de police au maximum.
2. Couleurs : un fond ton papier clair, un texte encre foncé, un gris secondaire et une seule couleur d'accent de type signalétique. L'accent n'apparait que sur les étiquettes, les filets fins et le bouton principal. Chaque couleur de texte atteint au moins 4,5:1 de contraste.
3. Grille : 12 colonnes, sections séparées par des filets de 1 pixel ; ni ombres, ni coins arrondis, ni dégradés.
4. Élément signature : sous l'image du premier écran, une bande de quatre cellules dans le style du cartouche d'un plan d'architecte (par ex. type de projet, norme appliquée, échelle, numéro de planche), et une grille millimétrée très discrète dessinée en CSS uniquement derrière le premier écran.
5. Mouvement : aucun. Pas de durées de transition non plus ; seuls le soulignement et la couleur changent instantanément au survol.

Pages et schémas :
1. index.html : un premier écran dont le paragraphe d'ouverture répond directement à "que faites-vous, pour qui, où", trois cartes de service (chacune renvoyant à sa section), un processus en quatre étapes (numérotées "Étape 1" avec un compteur CSS, pas 01/02), deux exemples de projets, un bandeau téléphone. WebPage.
2. hizmetler.html : une section par service ; le premier paragraphe répond à "quand est-ce nécessaire, à quoi cela sert", puis une liste du périmètre, la durée typique et les livrables. WebPage plus un Service par service (provider #business, areaServed).
3. projeler.html : des exemples avec type de batiment, méthode et résultat ; noms de clients uniquement avec autorisation. CollectionPage.
4. hakkimizda.html : qui nous sommes, nos règles de travail, où nous intervenons. AboutPage.
5. sss.html : au moins six vraies questions dans des <details>. WebPage et FAQPage.
6. iletisim.html : téléphone, e-mail et adresse dans <address>, un lien vers la carte ; ne mets pas les horaires si tu ne les connais pas. ContactPage avec mainEntity #business.
7. kvkk.html (notice de confidentialité) et 404.html.

Règles techniques. Suis-les à la lettre, car les contrôles ci-dessous mesurent exactement ces points :

1. Mise en place. Lance d'abord scaffold_site en aperçu, montre-moi la liste des fichiers, puis installe avec confirm=true après mon accord. Lis ensuite site_design_guide et site_seo_guide en entier. Avant d'écrire du code, rédige la direction dans _kaynak/ART.md (ambiance, association de polices, couleurs avec rapports de contraste, grille, élément signature, décision sur le mouvement, liste des pages) et montre-la-moi.
2. Supprimer le JavaScript. Aucune page de ce site ne charge de JavaScript. Retire de chaque page le script cdn.tailwindcss.com, la ligne tailwind.config, les balises GSAP, ScrollTrigger, SplitText, Lenis et Swiper ainsi que les balises script motion.js, chrome.js et site.config.js ; supprime assets/chrome.js et assets/motion.js. Garde assets/site.config.js, mais uniquement comme source de marque, de contact et de seo pour seo-stamp.mjs ; il n'est jamais chargé dans le navigateur.
3. Menu et pied de page en HTML statique. Les composants <site-nav> et <site-footer> sont dessinés par JavaScript, donc les robots de recherche et d'IA ne voient ni le menu, ni les liens internes, ni les coordonnées. Écris l'en-tête dans _kaynak/ust.inc et le pied de page (nom, adresse, téléphone, e-mail, lien vers chaque page, notice de confidentialité, "Web: Opus Growth") dans _kaynak/alt.inc. Utilise l'extension .inc pour que seo-stamp et html-validate ne traitent pas ces fragments comme des pages. Chaque page contient les marqueurs  et . Écris ensuite avec site_write_file un script Node sans dépendances, _kaynak/parca-bas.mjs : il injecte les deux fragments entre les marqueurs dans chaque fichier HTML, ajoute aria-current="page" au lien du menu de la page courante, et réécrit sitemap.xml en utilisant le dateModified du JSON-LD de chaque page comme lastmod (en ignorant la 404 et les pages noindex). Construis le menu mobile sans JavaScript avec <details><summary>Menu</summary> ; les menus desktop et mobile sont deux éléments <nav> distincts avec des aria-label différents.
4. Auto-héberger les polices. Ce site utilise trois fichiers de police au maximum. Télécharge le CSS Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap, code de graisse 401 pour l'italique) avec site_fetch vers _kaynak/fontshare.css, lis-le avec site_read_file et ne retiens que les URL woff2 de la famille demandée ; le service ajoute parfois une famille que tu n'as pas demandée. Télécharge chaque woff2 avec site_fetch dans assets/fonts/. Place les règles @font-face (font-display: swap) dans assets/app.css, car design-check.mjs ne cherche une police personnalisée que dans ce fichier. N'utilise pas les polices par défaut Inter, Roboto, Poppins ou Montserrat.
5. Compiler Tailwind. assets/app.css devient la source Tailwind : @tailwind base; @tailwind components; @tailwind utilities; en haut, puis @font-face, l'anneau de focus, le lien d'évitement, une règle prefers-reduced-motion et tes propres classes de composants dans @layer components. Ne donne jamais à une classe de composant le nom d'un utilitaire Tailwind (list-item, table, grid, container, hidden, etc.), car le conflit casse silencieusement la mise en page après compilation. Écris tailwind.config.js à la racine (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"], couleurs et fontFamily). Lance "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" avec site_run_command et background=true, et attends le résultat avec site_command_status. Le <head> de chaque page contient, dans cet ordre : un seul <link rel="stylesheet" href="/assets/site.css">, puis une ligne preload pour chaque fichier de police utilisé sur le premier écran (titre, accent et texte ; as="font" type="font/woff2" crossorigin). Des lignes preload placées avant la feuille de style retardent le CSS et allongent le LCP ; une police du premier écran sans preload s'affiche tard, décale la page et augmente le CLS, puis <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. La ligne du favicon est obligatoire : sans elle, le navigateur demande /favicon.ico, reçoit une 404, et l'erreur en console abaisse le score Best Practices.
6. Images. Télécharge les photos avec site_fetch en utilisant resize et image_format="webp" à plusieurs largeurs (480, 800, 1200 et 1600 pour l'image du premier écran, 480, 800 et 1200 pour les autres ; qualité entre 60 et 75, plus basse pour les photos détaillées). Chaque <img> a srcset, des sizes qui correspondent à la mise en page réelle, width et height (zéro CLS) et un texte alt pertinent et honnête. fetchpriority="high" n'est mis que sur l'image que Lighthouse signale comme élément LCP, et cette image n'est pas en lazy ; toutes les autres images utilisent loading="lazy". Si l'élément LCP est un texte, aucune image ne reçoit fetchpriority. Prépare aussi assets/img/logo.png, un assets/img/og.jpg de 1200x630 et assets/img/favicon.svg.
7. Règles HTML (valeurs par défaut de html-validate). <!DOCTYPE html> en majuscules ; aucun attribut style en ligne (y compris le style="background:var(--brand)" du kit, utilise une classe à la place) ; &nbsp; au lieu d'espaces simples dans le texte des liens tel: ; un type sur chaque <button> ; pas d'espaces en fin de ligne ; tableaux avec <thead>, <tbody> et th scope. Les liens dans les paragraphes sont soulignés ; les liens du menu, du pied de page, du fil d'Ariane et des boutons ont une zone tactile d'au moins 44x44 pixels (min-h-[44px] min-w-[44px]).
8. Données structurées. Remplis le bloc seo de site.config.js (siteUrl, description, logo, image og, type d'entreprise, champs d'adresse) et lance "node seo-stamp.mjs" avec site_run_command ; il injecte Organization, WebSite et, le cas échéant, un sous-type LocalBusiness, ainsi que le canonical et les balises OG. Ajoute à la main le schéma propre à chaque page : sur chaque page un nœud WebPage avec un @id (ou AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished et dateModified, isPartOf #site, about #business ou #org, et breadcrumb pointant vers un BreadcrumbList ; plus un Service par service sur la page des services et FAQPage sur la page FAQ. Écris chaque nœud dans son PROPRE bloc <script type="application/ld+json"> et n'utilise pas d'enveloppe @graph, car seo-check.mjs ne lit que le @type de premier niveau et rate un BreadcrumbList placé dans @graph. Relie les nœuds avec @id. N'invente jamais d'horaires d'ouverture, de coordonnées, de notes, d'avis, de distinctions, de nombre de clients ou de certificats ; laisse de côté les champs inconnus.
9. Accès pour les IA. Écris robots.txt : tout le site ouvert, seul /_kaynak/ fermé ; Allow: / pour GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended et Bingbot ; ta décision sur CCBot avec la raison en commentaire ; la ligne Sitemap en dernier. Ajoute llms.txt à la racine : un résumé correct de l'entreprise en deux phrases, les pages importantes avec une ligne chacune, et les coordonnées. Écris 404.html (noindex, avec les marqueurs d'en-tête et de pied de page).
10. Rédaction. Chaque page contient au moins 150 mots de texte original dans <main>, et le premier paragraphe répond directement à la question principale de la page. Les titres font de 48 à 60 caractères, les descriptions de 145 à 158, uniques sur chaque page. Pas de tirets cadratins ni demi-cadratins, pas de slogans bateau, pas de promesses creuses. Si un élément du site n'est pas réel, dis-le clairement et indique qu'il est fictif.

Contrôles. Après chaque modification, lance-les avec site_run_command dans cet ordre et ne passe pas à la suite tant que chacun n'est pas propre :
1. node _kaynak/parca-bas.mjs, node seo-stamp.mjs, la compilation Tailwind (à refaire si tu as ajouté des classes).
2. node seo-check.mjs : 0 erreur et 0 avertissement. S'il signale "gövde kısa" (corps trop court), ajoute du vrai texte, pas du remplissage.
3. node design-check.mjs : 0 erreur. Le seul avertissement toléré est "Hiç hareket yok" (aucun mouvement) ; c'est un choix délibéré de ce site, donc explique la raison dans le rapport.
4. npx --yes html-validate "**/*.html" : 0 erreur.
5. Regarde chaque page avec site_preview en view="mobile" et view="desktop", et vérifie aussi la page d'accueil en 360 et 768 pixels. Corrige tout débordement horizontal, titre à l'étroit ou zone tactile inférieure à 44 pixels, puis regarde à nouveau.
6. Mesure chaque page avec core_web_vitals en strategy="mobile" et strategy="desktop", puis audite la page d'accueil et la page la plus longue avec seo_audit. Objectif : sur mobile, Accessibility, Best Practices et SEO à 100 et Performance à au moins 95 ; sur desktop, les quatre à au moins 95. Aucune requête ne doit sortir du site. Si le LCP est élevé, utilise resource