Détecter un site généré par IA en 30 secondes : 17 signes objectifs (méthode 2026)

Détecter un site généré par IA en 30 secondes : 17 signes objectifs (méthode 2026)

> Clic droit sur le bouton bleu du hero, « Inspecter », background-color: rgb(59, 130, 246). C'est #3b82f6, le blue-500 brut de Tailwind. Vous venez de gagner votre premier point. La suite de cet article transforme l'intuition « ce site sent l'IA » en un score chiffré et défendable, en 30 secondes et un onglet de navigateur.

---

TL;DR : Le scan rapide en 5 questions (score 0-5)

Avant la grille complète à 17 signes, voici cinq questions binaires. Cinq « oui » en quinze secondes, et vous savez déjà à quoi vous avez affaire.

| # | Question | Oui = 1 point | Non = 0 | |---|----------|---------------|---------| | 1 | Le bouton CTA principal est-il bleu #3b82f6 (Tailwind blue-500) ou violet #8b5cf6 (Tailwind purple-500) ? | +1 | 0 | | 2 | La page d'accueil contient-elle exactement trois cartes (cards) avec coins arrondis prononcés (rayon ≥ 12 px) ? | +1 | 0 | | 3 | Voyez-vous une pastille (pill/tag) au-dessus du H1 avec une icône ✨ ou 🚀 et un texte commençant par « New » ou « Nouveau » ? | +1 | 0 | | 4 | Le pricing affiche-t-il exactement trois plans (souvent Starter / Pro / Enterprise) ? | +1 | 0 | | 5 | Le footer comporte-t-il quatre colonnes intitulées Product / Company / Resources / Legal (ou leurs traductions FR à l'identique) ? | +1 | 0 |

Interprétation immédiate

• 0/5 : site très probablement humain ou conçu sur un design system propriétaire.
• 1/5 : site humain qui s'est inspiré de tendances Tailwind/shadcn, courant et peu probant.
• 2/5 : zone grise. L'auteur a peut-être utilisé une bibliothèque de composants populaire.
• 3/5 : forte probabilité d'assistance IA significative ou de copie de template v0/Lovable.
• 4/5 : la page a quasi certainement été générée par v0, Lovable, Bolt, Replit Agent ou Claude Artifacts, puis légèrement retouchée.
• 5/5 : page typique de slop IA pur, livrée telle quelle.

> Cette première grille est volontairement grossière. Elle ne dit rien des MVP, des sites internes ou des projets pour lesquels l'IA est un choix légitime. Elle vous dit simplement : « est-ce que la signature visuelle des LLM générateurs de pages est présente ? ». La nuance vient ensuite, dans la section Quand c'est OK et quand ça ne l'est pas.

---

Pourquoi détecter le slop IA d'un site n'est pas trivial

L'expression « slop IA » s'est imposée en 2024-2025 pour désigner la production de masse, sans curation, des modèles génératifs : du texte qui sonne IA, des images qui sentent Midjourney, et (c'est l'objet de ce guide) des sites qui se ressemblent tous au point qu'on les confond. Mais détecter cette signature pose trois difficultés que la plupart des articles grand public ignorent.

1. Site « fait avec aide IA » ≠ site « 100 % slop »

Un développeur expérimenté qui utilise Claude ou Cursor pour accélérer son travail produit, in fine, un site humain. Il a fait des choix : il a remplacé les couleurs par défaut, dégagé l'inutile, ajusté la typographie, retravaillé la copy. L'IA a été un outil, pas un livreur. À l'opposé, un site « 100 % slop » est livré tel que v0 l'a craché, avec ses couleurs Tailwind par défaut, ses composants shadcn non personnalisés, sa structure pricing/testimonials/FAQ identique à dix mille autres landing pages.

Le but de cet article n'est pas de stigmatiser l'usage de l'IA. C'est de vous donner un moyen objectif de distinguer ces deux cas, qui ont des implications très différentes :

• Acceptable : un MVP, un side-project, un site interne, un POC client, un blog perso.
• Litigieux : un portfolio public d'un freelance qui prétend tout coder à la main, un site corporate facturé 20 à 50 k€, une refonte d'identité visuelle.

2. Détecter du code IA ≠ détecter du design IA

Les outils comme GPTZero, Copyleaks, Originality.AI ou Sapling sont conçus pour analyser du texte. Ils mesurent la perplexité statistique d'une chaîne de caractères et estiment la probabilité qu'elle ait été produite par un LLM. C'est un domaine bien étudié, et leurs résultats, sur du texte long et bien identifié, sont souvent fiables.

Mais un site web n'est pas qu'un bloc de texte. C'est une combinaison :

• de structure HTML (qu'un humain et une IA peuvent produire à l'identique) ;
• de styles CSS (où la signature IA se révèle) ;
• de copy (où GPTZero peut aider) ;
• de stack technique (qu'on lit dans les en-têtes HTTP) ;
• de patterns d'interaction (animations, transitions, micro-UX).

La détection visuelle d'un site IA est une heuristique humaine, pas un calcul automatique. Aucun service à ce jour, y compris Sailop qui s'en rapproche sur les composants frontend, ne peut affirmer à 100 % que telle page d'accueil sort de v0. Ce qu'on peut faire, c'est mesurer un faisceau d'indices et en tirer une probabilité.

3. Pourquoi les outils auto échouent sur le visuel

Trois raisons techniques :

• Les sites IA sont compilés. Vous ne voyez pas le prompt initial, vous voyez du HTML/CSS minifié. Les marqueurs d'origine (commentaires, structure logique du prompt) sont effacés.
• Tailwind et shadcn sont aussi utilisés par des humains. Un dev expérimenté qui aime shadcn produit un code presque identique à celui que cracheraient v0 ou Bolt. La signature « technique » n'est donc pas un test discriminant à elle seule.
• Les modèles s'adaptent. Les versions 2025-2026 de v0, Lovable, Bolt savent désormais varier leurs palettes par défaut, casser les structures à 3 cards, proposer des typographies non-Inter. La détection « par défauts paresseux » devient progressivement moins efficace.

C'est la raison pour laquelle ce guide ne s'appuie pas sur un seul critère, mais sur dix-sept signaux indépendants, dont la convergence donne un score difficile à contester.

---

La méthode 17 signes en 30 secondes

L'idée est simple : ouvrir le site, regarder, ouvrir les DevTools une à deux fois, et passer mentalement la grille des 17 signes. Pour chacun, vous notez « présent » ou « absent », et vous additionnez les gravités.

Décomposition du temps

| Étape | Durée | Action | |-------|-------|--------| | 1 | 5 s | Premier coup d'œil global : palette, typographie, structure du hero | | 2 | 5 s | Scroll jusqu'au pricing, vérifier la grille de plans | | 3 | 5 s | Scroll jusqu'au footer, compter les colonnes | | 4 | 10 s | Ouvrir DevTools, inspecter le bouton CTA principal | | 5 | 5 s | View source (Ctrl+U), regarder et |

Trente secondes, dix-sept signes vérifiés, un score final sur 60. C'est tout l'enjeu.

Le principe de gravité

Tous les signes ne pèsent pas pareil. Une palette blue-500/purple-500 est un indice très fort parce qu'aucun designer professionnel ne livre un site corporate avec des couleurs Tailwind par défaut sans intention. À l'inverse, l'absence de favicon custom est un signe faible : beaucoup de sites humains négligent ce détail.

Chaque signe est noté sur une échelle de gravité 1 à 5 :

• 1 : Indice très faible. Présent dans 60 % des sites humains aussi.
• 2 : Indice faible. Présent dans ~40 % des sites humains.
• 3 : Indice moyen. Présent dans ~25 % des sites humains.
• 4 : Indice fort. Présent dans ~10 % des sites humains.
• 5 : Indice très fort. Présent dans <5 % des sites humains, signature claire des générateurs IA.

Le score total maximal est 60. À partir de 46, on parle de slop pur.

---

Les 17 signes objectifs

Signe 1 : La palette `#3b82f6` + `#8b5cf6` (Tailwind blue-500 + purple-500)

Gravité : 4/5.

C'est la signature la plus connue, et (paradoxalement) la plus persistante. Tailwind CSS est devenu le framework CSS dominant entre 2023 et 2026, et tous les générateurs IA frontend (v0, Lovable, Bolt, Replit Agent, Claude Artifacts, ChatGPT canvas) utilisent ses classes par défaut. Or, quand un LLM doit choisir une couleur primaire « moderne et tech », il pioche presque systématiquement dans la même paire :

• bleu : #3b82f6 (Tailwind blue-500), pour les CTA, les liens, les états actifs ;
• violet/indigo : #8b5cf6 (Tailwind purple-500) ou #6366f1 (indigo-500), pour les accents, les badges, les gradients.

• Clic droit sur le bouton CTA principal du hero.
• « Inspecter ».
• Dans le panneau de styles, chercher background-color.
• Vérifier si la valeur est #3b82f6, rgb(59, 130, 246), ou son équivalent OKLCH.

// Console DevTools : récupérer la couleur dominante des CTA
const buttons = [...document.querySelectorAll('button, a[role="button"]')];
buttons.slice(0, 5).forEach(b => {
  const bg = getComputedStyle(b).backgroundColor;
  console.log(b.textContent.trim().slice(0, 30), '→', bg);
});

Attention au piège Tailwind v4 (sorti début 2025) : la palette n'est plus définie en hex mais en OKLCH. Le blue-500 y vaut oklch(0.623 0.214 259.815) et le purple-500 oklch(0.627 0.265 303.9). Selon le navigateur, getComputedStyle vous renverra soit le rgb(...) calculé, soit la chaîne oklch(...) telle quelle. Si vous tombez sur ces deux valeurs exactes, c'est la signature Tailwind v4 par défaut, encore plus probante qu'un hex copié à la main.

• Avant (suspect) : page d'accueil d'une startup B2B, hero avec un H1 sur fond blanc, CTA bleu vif rgb(59, 130, 246), badge violet en haut. L'œil reconnaît le « look v0 ».
• Après (humain) : la même landing page, mais le bleu a été poussé vers #1f4ab8 (un bleu plus sombre, ajusté à la marque), et le violet remplacé par un orange brûlé. Tout d'un coup, l'identité paraît intentionnelle.

Stripe, Linear, GitHub (entre autres) utilisent des bleus et violets. Mais leurs valeurs hex sont personnalisées : Stripe #635bff, Linear #5e6ad2, le bleu d'action GitHub #0969da. Aucune ne tombe sur #3b82f6 pile. La nuance se joue souvent à quelques degrés de teinte : blue-500 est à 217° en HSL, là où Stripe pousse vers 244° (plus indigo). Si vous trouvez exactement #3b82f6 ou #8b5cf6, le signe est très fort. Pour comprendre pourquoi cette paire revient en boucle et comment la remplacer proprement, voir Tailwind bleu et gradient violet : la signature IA.

---

Signe 2 : Police Inter par défaut (et seulement Inter)

Gravité : 3/5.

Inter est devenue la police par défaut de l'écosystème front-end Tailwind/shadcn entre 2022 et 2026. Elle est gratuite, lisible, neutre, et présente sur 80 % des sites générés par IA. Elle l'est aussi, il faut le reconnaître, sur 30 % des sites humains modernes.

Ce qui devient un signe fort, c'est la combinaison :

• Inter en font principale ;
• Inter en font secondaire ;
• Aucune typographie d'accroche, aucune serif, aucune mono pour le code.

Un site humain professionnel, même utilisant Inter, va presque toujours pairer avec une serif (Source Serif, Fraunces, Instrument Serif), ou une mono pour les blocs techniques (JetBrains Mono, IBM Plex Mono, Geist Mono).

• DevTools → onglet « Computed ».
• Cliquez sur le H1, vérifiez font-family.
• Cliquez sur le body, vérifiez font-family.
• Cliquez sur un éventuel snippet de code, vérifiez s'il existe une mono distincte.

// Console : extraire toutes les font-family utilisées
const fonts = new Set();
document.querySelectorAll('*').forEach(el => {
  fonts.add(getComputedStyle(el).fontFamily);
});
console.log([...fonts]);

Si vous obtenez ["Inter, ui-sans-serif, system-ui, ..."] et rien d'autre, vous êtes en présence d'un site qui n'a pas pris la peine de sortir des défauts.

Les générateurs IA récents commencent à utiliser Geist (la police de Vercel) et Geist Mono. Si vous voyez ces deux-là exclusivement, c'est typiquement v0 (qui appartient à Vercel et pousse Geist par défaut).

---

Signe 3 : La grille de 3 cards `rounded-2xl` + `shadow-md`

Gravité : 5/5.

Voilà le signe le plus discriminant de la grille. Quand un LLM doit produire une section « features » ou « benefits », il converge vers une structure quasi obsessionnelle :

• exactement trois colonnes ;
• chaque carte a des coins arrondis prononcés (border-radius: 1rem à 1.5rem, soit rounded-2xl à rounded-3xl en Tailwind) ;
• une ombre douce (shadow-md ou shadow-lg) ;
• une icône Lucide en haut, le titre en gras, deux à trois lignes de texte ;
• un fond blanc ou très légèrement teinté.

Cette structure est à v0/Lovable/Bolt ce que le quintette « intro, problème, solution, preuve, CTA » est à un script de pub. C'est un patron, et il devient une signature.

• Visuellement : comptez les cards. Si c'est exactement trois, alignées, identiques, c'est un premier signe.
• Inspect : vérifiez la valeur de border-radius (≥ 12 px) et la présence de box-shadow.
• Vérifiez que les trois cartes sont strictement identiques en structure (même nombre de paragraphes, même nombre d'icônes, même hiérarchie de titres).

// Repérer les "card grids" suspectes
const grids = document.querySelectorAll('[class*="grid-cols-3"], [class*="md:grid-cols-3"]');
console.log(`Nombre de grilles à 3 colonnes : ${grids.length}`);
grids.forEach((g, i) => {
  console.log(`Grille ${i + 1} : ${g.children.length} enfants directs`);
});

Si vous trouvez une grille avec exactement 3 enfants directs, et un border-radius arrondi, vous avez votre signe.

Trois raisons :

• Trois est la valeur par défaut des LLMs quand on dit « features » sans préciser le nombre : c'est statistiquement le mode dans leurs données d'entraînement.
• rounded-2xl est par défaut chez shadcn, lui-même utilisé par tous les générateurs.
• Aucune raison de design n'oblige à trois cards. Un humain choisit 2, 4, 5, 6, ou casse la grille en alternance. L'IA ne le fait que si on le lui demande explicitement.

---

Signe 4 : Le hero stéréotypé (h1 + paragraphe + 2 boutons primaire/ghost)

Gravité : 4/5.

La structure du hero est l'un des éléments les plus standardisés. Voici la composition canonique du « hero IA » :

[pill/badge optionnel : "✨ New: ..."]
<h1>Titre court 4-7 mots</h1>
<p>Sous-titre 12-25 mots qui répète le titre en plus long</p>
<div>
  [Bouton primaire "Get started"] [Bouton ghost "Learn more"]
</div>
[éventuellement : screenshot/illustration centré dessous]

Cette structure est si standard qu'elle a été baptisée « le carré IA » dans la communauté design en 2025. Elle se reconnaît à :

• Un CTA primaire (fond plein, couleur primaire de la palette) à gauche ;
• Un CTA ghost (fond transparent, bordure ou pas, couleur neutre) à droite ;
• Pas de troisième bouton ;
• Pas de formulaire inline (email + bouton). La version v0 n'en met presque jamais.

// Compter les boutons dans le hero (premier section sous header/nav)
const hero = document.querySelector('section, [class*="hero"], main > div:first-of-type');
const buttons = hero ? hero.querySelectorAll('a[role="button"], button, [class*="btn"]') : [];
console.log(`Boutons dans le hero : ${buttons.length}`);
buttons.forEach(b => console.log(' →', b.textContent.trim()));

Si vous obtenez deux boutons avec un libellé du type "Get started" + "Learn more" / "Watch demo", la présomption est forte.

Les générateurs IA récents (post-2025) introduisent occasionnellement :

• un troisième bouton « Book a demo » ;
• un input email inline pour la newsletter ;
• une référence à une vidéo de démo.

Mais la structure 2-boutons-primaire/ghost reste majoritaire à plus de 70 % dans les sorties brutes de v0.

---

Signe 5 : La pastille « ✨ New: ... » au-dessus du H1

Gravité : 4/5.

C'est devenu un cliché tellement universel qu'il mérite son propre signe. La pastille (« pill », « tag », « badge », « eyebrow ») est un petit conteneur arrondi placé au-dessus du H1 du hero. Elle contient :

• une icône emoji (✨, 🚀, 🎉, 💫, parfois 🔥) ;
• un texte court : « New: ... », « Introducing... », « v2.0 is here », « Available now » ;
• éventuellement, une flèche → pour suggérer un lien vers une page de release notes.

Ce schéma a été popularisé par Linear, puis copié à l'identique par v0 dans presque toutes ses générations. En 2026, il est tellement répandu qu'il déclenche un réflexe IA chez quiconque audite régulièrement des landing pages.

Visuellement, c'est instantané : si vous voyez un truc qui ressemble à [ ✨ New: feature X ] au-dessus du H1, c'est un signe fort.

En DevTools :

// Détecter la pastille typique
const candidates = document.querySelectorAll('[class*="rounded-full"]');
candidates.forEach(c => {
  const txt = c.textContent.trim();
  if (/new|introducing|available|launch/i.test(txt) && txt.length < 100) {
    console.log('Pastille suspecte :', txt);
  }
});

En FR, les générateurs traduisent souvent par :

• « Nouveau : ... »
• « ✨ Découvrez ... » (à bannir de votre propre site, voir le guide du AI slop)
• « Disponible : ... »

Le tag est le même, juste localisé.

---

Signe 6 : Gradient violet → rose `from-purple-500 to-pink-500`

Gravité : 5/5.

C'est l'autre signe à 5/5 de gravité, parce qu'il est presque impossible à observer dans la nature en dehors du slop IA. Le gradient bg-gradient-to-br from-purple-500 to-pink-500 (et ses variantes from-violet-500 to-fuchsia-500, from-indigo-500 to-purple-500) est :

• la combinaison Tailwind par défaut quand on demande « un gradient moderne » à un LLM ;
• la palette de v0, Lovable, Bolt et Claude Artifacts dans 60 à 70 % de leurs sorties ;
• une combinaison qu'aucun designer humain professionnel ne choisirait sans en avoir conscience.

Ce gradient apparaît typiquement :

• en fond du hero (full-width, derrière le H1) ;
• comme texte clipped sur un mot du H1 (bg-clip-text text-transparent) ;
• dans l'OG image générée auto.

// Chercher tous les gradients de la page
const all = document.querySelectorAll('*');
const gradients = [];
all.forEach(el => {
  const bg = getComputedStyle(el).backgroundImage;
  if (bg && bg.includes('gradient') && bg !== 'none') {
    gradients.push(bg);
  }
});
console.log(`Nombre d'éléments avec gradient : ${gradients.length}`);
console.log([...new Set(gradients)].slice(0, 5));

Si vous voyez linear-gradient(to bottom right, rgb(168, 85, 247), rgb(236, 72, 153)) ou équivalent, c'est la signature pure du slop.

---

Signe 7 : Logos clients « Trusted by » génériques

Gravité : 2/5.

Ce signe est plus nuancé. Beaucoup de sites légitimes affichent des logos clients. Le signe IA, c'est quand :

• les logos sont trop nombreux (8-12) pour une jeune entreprise ;
• ils sont génériques ou clairement piochés (logos de Google, Microsoft, Amazon, Stripe, sans rapport avec l'activité réelle) ;
• ils sont en niveaux de gris atténués, alignés sur une seule ligne, avec la phrase « Trusted by leading teams » ou « Used by 10,000+ companies » sans aucune preuve.

C'est moins un signe IA pur qu'un signe de template paresseux que les générateurs reproduisent. Gravité 2 parce que beaucoup d'humains font la même chose.

Inspectez les logos. Si l'attribut src pointe vers /placeholder-logo-1.svg, /customer-1.png ou similaire, le signe se confirme.

const trustImgs = document.querySelectorAll('img[alt*="logo" i], img[src*="logo"]');
trustImgs.forEach(img => console.log(img.src, '|', img.alt));

---

Signe 8 : « How it works » en 3 étapes avec icônes Lucide

Gravité : 3/5.

La section « How it works » / « Comment ça marche » en exactement trois étapes, avec :

• chaque étape numérotée (01, 02, 03) en gros chiffre ;
• une icône Lucide (le set d'icônes par défaut de shadcn) au-dessus ;
• un titre court ;
• 1-2 lignes de description.

C'est la déclinaison « process » du signe 3 (les trois cards), et elle suit la même logique de standardisation. Notez que les icônes Lucide ont une signature visuelle reconnaissable : trait fin, géométrie épurée, taille uniforme 24×24.

// Détecter les SVG Lucide
const svgs = document.querySelectorAll('svg');
let lucideCount = 0;
svgs.forEach(svg => {
  const cls = svg.getAttribute('class') || '';
  if (cls.includes('lucide')) lucideCount++;
});
console.log(`Icônes Lucide détectées : ${lucideCount}`);

Plus de 10 icônes Lucide sur une page = forte présomption shadcn → forte présomption IA-assistée si combiné avec d'autres signes.

---

Signe 9 : Pricing à 3 plans avec check icons verts

Gravité : 5/5.

Le pricing est la zone la plus standardisée des sites IA. Les générateurs produisent quasi-systématiquement :

• trois plans (rarement deux ou quatre) ;
• nommés Starter / Pro / Enterprise (ou Free / Pro / Business, ou Personal / Team / Enterprise) ;
• le plan central est mis en avant (bordure plus épaisse, badge « Most popular », fond légèrement teinté) ;
• les features sont listées avec une icône check verte Lucide (, couleur #22c55e Tailwind green-500) ;
• le prix est affiché en gros caractères avec « /month » en plus petit ;
• le bouton CTA est uniforme (« Get started », « Subscribe », « Start free trial »).

Cette structure est tellement reproductible qu'on peut écrire un test automatique de détection avec quelques lignes.

// Détecter une grille pricing typique
const pricing = document.querySelector('[id*="pricing"], [class*="pricing"], section:has(h2:contains("Pricing"))');
if (pricing) {
  const plans = pricing.querySelectorAll('[class*="grid"] > *');
  console.log(`Plans détectés : ${plans.length}`);
  const checks = pricing.querySelectorAll('svg.lucide-check, svg[class*="check"]');
  console.log(`Icônes check : ${checks.length}`);
}

Trois plans + icônes Lucide vertes + plan central highlighted = signe presque définitif.

Parce que la probabilité qu'un humain produise exactement cette structure sans y penser est faible. Les sites SaaS humains varient :

• en nombre de plans (de 2 à 6) ;
• en mise en page (vertical, comparatif, slider mensuel/annuel personnalisé) ;
• en iconographie (souvent custom, ou simplement texte « Yes/No », ou tableau dense).

Un pricing à 3 cards rounded-2xl avec checks verts est la signature pricing IA.

---

Signe 10 : Testimonial slider avec photos rondes

Gravité : 3/5.

La section témoignages tend vers une structure :

• 3 à 5 témoignages dans un slider ou une grille ;
• chaque témoignage : citation de 2-3 phrases entre guillemets, photo ronde en haut ou à gauche, nom + titre + entreprise en dessous ;
• les photos sont des avatars stock (Unsplash, generated.photos, ou directement des avatars Lorem-Picsum) ;
• une note 5 étoiles (5 icônes star Lucide remplies) au-dessus de la citation.

Le signe est moyen (3/5) parce que beaucoup de sites humains font la même chose. Mais quand il s'accumule avec les autres, il pèse.

Vérifiez la source des images de témoignages. Si toutes proviennent du même domaine externe, ou ont des noms du type avatar-1.jpg, avatar-2.jpg, c'est un signe d'images de stock plombées dans un template.

---

Signe 11 : FAQ accordéon plain avec chevron

Gravité : 2/5.

L'accordéon FAQ est tellement universel qu'il ne peut pas être un signe fort. Mais sa version « slop IA » a quelques particularités :

• exactement 5-7 questions ;
• les questions sont génériques (« Comment ça marche ? », « C'est gratuit ? », « Comment annuler ? ») et pas spécifiques au produit ;
• l'icône d'expansion est un chevron Lucide () qui pivote ;
• le composant utilisé est @radix-ui/react-accordion (importé via shadcn).

Gravité faible parce que présent partout, mais se confirme s'il est combiné aux autres.

---

Signe 12 : Footer 4 colonnes Product / Company / Resources / Legal

Gravité : 4/5.

Le footer est l'un des éléments les plus standardisés. La structure « slop IA » canonique :

• 4 colonnes égales ;
• en-têtes des colonnes : Product (Features, Pricing, Changelog), Company (About, Blog, Careers), Resources (Docs, Support, Status), Legal (Privacy, Terms, Cookies) ;
• en français, traduction littérale : Produit / Entreprise / Ressources / Légal ;
• logo + courte tagline à gauche, parfois une newsletter ;
• ligne de copyright en bas avec « © 2026 [nom] · All rights reserved » ;
• icônes sociales (X/Twitter, LinkedIn, GitHub) à droite.

Cette structure exacte se retrouve dans 70 % des sites générés par v0 et Lovable. Un humain qui structure son footer va très souvent fusionner « Product » et « Resources », ou éclater « Company » en plusieurs sections, ou choisir 3 ou 5 colonnes.

const footer = document.querySelector('footer');
if (footer) {
  const cols = footer.querySelectorAll('[class*="grid-cols-4"] > *');
  console.log(`Colonnes footer : ${cols.length}`);
  const headings = footer.querySelectorAll('h3, h4, [class*="font-semibold"]');
  headings.forEach(h => console.log(' →', h.textContent.trim()));
}

Si les en-têtes contiennent les quatre catégories canoniques, le signe est validé.

---

Signe 13 : Microcopy « Get started » / « Learn more » / « Watch demo »

Gravité : 4/5.

Le micro-copy trahit l'IA plus vite que tout le reste, parce que les LLMs ont des préférences statistiques très marquées. Sur les CTA, ils convergent presque tous vers les mêmes formules :

• CTA primaires : « Get started », « Get started free », « Start free trial », « Try it free », « Sign up free » ;
• CTA secondaires : « Learn more », « See how it works », « Watch demo », « Book a demo », « Read docs » ;
• CTA bas de page : « Ready to get started? », « Join thousands of teams », « Start building today ».

En français, les générateurs traduisent par :

• « Commencer », « Démarrer gratuitement », « Essayer gratuitement », « Inscription gratuite » ;
• « En savoir plus », « Voir comment ça marche », « Regarder la démo » ;
• « Prêt à commencer ? », « Rejoignez des milliers d'équipes ».

Si vous voyez ces formules exactes, sans aucune adaptation au domaine ou au ton de marque, c'est un signe fort.

const ctas = [...document.querySelectorAll('button, a[role="button"], [class*="btn"]')];
const slopPhrases = [
  'get started', 'learn more', 'watch demo', 'try it free',
  'sign up free', 'book a demo', 'start free trial',
  'commencer', 'en savoir plus', 'regarder la démo', 'essayer gratuitement'
];
ctas.forEach(b => {
  const txt = b.textContent.trim().toLowerCase();
  if (slopPhrases.some(p => txt.includes(p))) {
    console.log('CTA slop :', txt);
  }
});

---

Signe 14 : OG image générée auto

Gravité : 3/5.

L'Open Graph image (la vignette qui apparaît quand on partage le lien sur X, LinkedIn, etc.) est un excellent indicateur. Les générateurs IA produisent souvent une OG image automatique avec :

• un fond gradient violet → rose (le signe 6 réapparaît) ;
• le nom du site en gros, centré ;
• une tagline en plus petit en dessous ;
• éventuellement le logo en haut à gauche.

Cette image est typiquement générée par next/og (la lib OG image de Next.js / Vercel) avec le template par défaut, et elle est identique sur toutes les pages du site.

• Ctrl+U (view source) ;
• Cherchez ;
• Ouvrez l'URL dans un nouvel onglet ;
• Si vous voyez un gradient violet → rose avec juste un titre, c'est OG auto-généré ;
• Comparez avec l'OG d'une autre page du site : si c'est strictement identique, c'est encore plus probant.

# En CLI
curl -s https://exemple.com | grep -i 'og:image'

---

Signe 15 : Pas de page 404 custom

Gravité : 3/5.

Allez sur https://exemple.com/page-inexistante-xyz123. Que voyez-vous ?

• Page Vercel 404 par défaut (« 404: This page could not be found. ») = signe fort de slop. C'est la page que Vercel sert par défaut quand le développeur n'a pas créé de not-found.tsx.
• Page Netlify 404 par défaut (« Page Not Found ») = idem.
• Page Next.js 404 par défaut (« 404 Not Found » avec lien retour à la home) = idem.
• Page 404 customisée (avec branding, illustration, redirections suggérées) = signe humain.

Un développeur qui livre un site corporate sans 404 custom est rare. Une IA qui génère un site de marketing ne pense presque jamais à le faire, sauf si on le lui demande explicitement.

Tapez dans la barre d'adresse https://[domaine]/test-404-existe-pas (n'importe quel chemin random). Comparez avec :

• header Server: Vercel → c'est Vercel
• titre de page « 404: This page could not be found. » → Next.js par défaut
• titre « Page Not Found · » → Netlify par défaut

---

Signe 16 : Pas de favicon custom

Gravité : 2/5.

Sur l'onglet du navigateur, vous voyez :

• Le globe Vercel (si déployé sur Vercel sans favicon custom) ;
• Une lettre dans un fond coloré (favicon auto-généré) ;
• Un emoji (les LLMs adorent suggérer un favicon emoji, exemple : ).

Un site humain professionnel a un favicon custom. Une IA livre rarement un favicon, à moins qu'on lui ait fourni un asset.

Gravité faible (2/5) parce que beaucoup d'humains négligent le favicon aussi.

curl -s https://exemple.com | grep -E 'rel="icon"|rel="shortcut'

Si le href pointe vers un SVG inline avec un emoji, c'est presque toujours du slop.

---

Signe 17 : Animations fade-in-up partout, rien d'autre

Gravité : 3/5.

Les sites IA ont une signature d'animation particulière :

• chaque section apparaît en fade-in-up (opacity 0 → 1, translate-y de 20-40 px) au scroll ;
• la durée est uniforme (0.4-0.6 s) ;
• l'easing est par défaut (ease-out) ;
• aucune autre animation : pas de parallax, pas de morph, pas de scrub timeline, pas de loader élaboré.

C'est généralement implémenté avec framer-motion (devenu motion/react) avec les paramètres par défaut, ou avec tailwindcss-animate qui ajoute des classes utility comme animate-in, slide-in-from-bottom.

// Détecter les animations fade-in-up
const animated = document.querySelectorAll('[class*="animate-in"], [class*="fade-in"], [data-animate]');
console.log(`Éléments animés en fade-in : ${animated.length}`);

Beaucoup, tous identiques = signe modéré.

Si toutes les sections de la page utilisent exactement la même animation fade-in + translate-y-4 + duration-500, sans aucune variation, et qu'il n'y a aucun autre type de motion design, alors la signature est complète.

---

Indicateurs techniques avancés (DevTools required)

Ces indicateurs ne servent pas pour le « scan 30 secondes », mais ils complètent le diagnostic quand vous voulez creuser. On les utilise pour confirmer ou infirmer un score borderline.

La stack signature

Ouvrez l'onglet « Sources » des DevTools et regardez les fichiers JavaScript bundlés. Voici ce que vous cherchez :

| Indice | Présent dans bundle | Interprétation | |--------|--------------------|----------------| | next/font/google (Inter, Geist) | Très souvent | Site Next.js avec font system | | tailwindcss ou classes Tailwind dans HTML | Quasi-toujours | Stack moderne, neutre | | @radix-ui/react-* | Souvent | Utilisation de shadcn/ui | | class-variance-authority ou cva() | Souvent | shadcn signature | | Function cn() qui wrappe clsx + tailwind-merge | Souvent | shadcn helper, par défaut | | Composants importés de @/components/ui/* | Visible dans React DevTools | shadcn naming convention | | framer-motion ou motion/react | Fréquent | Animations standard | | lucide-react | Très fréquent | Icon set par défaut |

Dans la console :

// Liste les modules chargés (ne marche pas dans tous les contextes)
Object.keys(window).filter(k => k.toLowerCase().includes('react'));

Si vous trouvez un attribut data-react-tree, data-v0-*, data-bolt-*, data-lovable-*, vous avez la signature.

Les en-têtes HTTP

Les en-têtes HTTP révèlent le hosting et, parfois, l'outil de génération.

| En-tête | Valeur typique | Hosting / outil | |---------|----------------|-----------------| | server | Vercel | Vercel (souvent v0) | | x-vercel-id | iad1::abc123-1234567890 | Vercel | | x-vercel-deployment-id | dpl_xxxxx | Vercel (visible si exposé) | | x-vercel-cache | HIT, MISS, STALE | Vercel CDN | | server | Netlify | Netlify (souvent Bolt, parfois Lovable) | | x-nf-request-id | UUID | Netlify | | cf-ray | id | Cloudflare Pages | | cf-cache-status | HIT | Cloudflare CDN | | server | cloudflare | Cloudflare Workers / Pages | | x-amz-cf-id | id | AWS CloudFront (custom) | | x-served-by | cache-xxx | Fastly (custom) |

Vérification rapide :

curl -sI https://exemple.com | grep -iE 'server:|x-vercel|x-nf|cf-ray|cf-cache'

Hosting Vercel + stack Next.js + signes visuels 5/6/9 ≈ probablement v0.

Hosting Netlify + stack Vite + React + signes visuels 5/6/9 ≈ probablement Bolt.

Hosting Cloudflare Pages ou divers + Lovable a sa propre signature : iframe initial dans certains exports, références à lovable.dev dans les meta.

Le sitemap.xml

Les sites générés par IA ont souvent un sitemap.xml automatique. Allez sur https://exemple.com/sitemap.xml.

Signes IA :

• toutes les sont identiques (la date de génération) ;
• toutes les sont à 0.8 ou 1.0 partout (le défaut Next.js) ;
• toutes les sont à weekly (encore le défaut) ;
• la liste contient toutes les pages, y compris des pages techniques (/sign-in, /legal/cookies) sans exclusion.

Un humain configure son sitemap. Une IA livre celui par défaut.

Le robots.txt

Allez sur https://exemple.com/robots.txt. Si le contenu est exactement :

User-agent: *
Allow: /

Sitemap: https://exemple.com/sitemap.xml

…c'est le robots.txt par défaut généré par Next.js sans intervention humaine. Pas un signe fort en soi (beaucoup d'humains laissent ça tel quel), mais combiné aux autres, ça pèse.

---

Le calculateur de score IA

Voici la grille maîtresse, à appliquer page par page. Chaque signe rapporte sa gravité s'il est présent, 0 sinon. Total maximal : 60.

| # | Signe | Vérification | Gravité | Score si présent | |---|-------|--------------|---------|------------------| | 1 | Palette #3b82f6 + #8b5cf6 | DevTools → CTA bg | 4 | 4 | | 2 | Police Inter exclusive | DevTools → Computed | 3 | 3 | | 3 | Grille 3 cards rounded-2xl + shadow-md | Visuel + inspect | 5 | 5 | | 4 | Hero h1 + paragraphe + 2 boutons primaire/ghost | Visuel | 4 | 4 | | 5 | Pastille « ✨ New: ... » au-dessus du H1 | Visuel | 4 | 4 | | 6 | Gradient from-purple-500 to-pink-500 | Inspect | 5 | 5 | | 7 | Logos clients « Trusted by » génériques | Visuel + inspect | 2 | 2 | | 8 | « How it works » 3 étapes avec icônes Lucide | Visuel + inspect | 3 | 3 | | 9 | Pricing 3 plans rounded-2xl + checks verts | Visuel + inspect | 5 | 5 | | 10 | Testimonial slider photos rondes | Visuel | 3 | 3 | | 11 | FAQ accordéon plain avec chevron Lucide | Visuel + inspect | 2 | 2 | | 12 | Footer 4 colonnes Product/Company/Resources/Legal | Visuel | 4 | 4 | | 13 | Microcopy « Get started » / « Learn more » | Visuel | 4 | 4 | | 14 | OG image gradient violet auto-générée | View source meta | 3 | 3 | | 15 | Pas de page 404 custom | URL inexistante | 3 | 3 | | 16 | Pas de favicon custom | View source / onglet | 2 | 2 | | 17 | Animations fade-in-up uniformes partout | Scroll + inspect | 3 | 3 | | Total | 17 signes | Méthode 30 s | - | 60 |

Tableau d'interprétation

| Score | Catégorie | Diagnostic | Recommandation | |-------|-----------|------------|----------------| | 0 - 7 | Humain pur | Site conçu et codé manuellement, ou design system propriétaire | Aucune action, c'est solide | | 8 - 15 | Humain avec influences | Site humain qui suit les tendances Tailwind/shadcn modernes, ou IA très retravaillée | Acceptable. Vérifier si le tarif facturé correspond | | 16 - 25 | IA-assisté | Le développeur a utilisé v0/Lovable/Bolt comme base et a fait des ajustements de surface | Discutable selon le tarif et le contrat. Demander à voir le process | | 26 - 35 | IA-dominant | La signature IA est forte, peu de personnalisation. C'est une livraison de template avec retouches | Problématique pour un projet pro à plus de 5 k€. Aborder avec le freelance | | 36 - 45 | Slop avec maquillage | Le site est essentiellement une sortie de générateur, avec changements cosmétiques (logo, copy) | Anormal pour toute prestation pro. Renégocier ou refuser la livraison | | 46 - 60 | Slop pur | Le site est une sortie quasi-brute de v0/Lovable/Bolt | Inacceptable pour une prestation pro. Demander remboursement ou refonte |

Diagramme de flux : faut-il s'inquiéter de votre score ?

flowchart TD
    A[Score IA calculé] --> B{Score ≤ 15 ?}
    B -- Oui --> C[Aucune inquiétude<br/>Site humain ou IA très retravaillée]
    B -- Non --> D{Score ≤ 25 ?}
    D -- Oui --> E{Quel tarif ?}
    E -- "< 3 k€" --> F[Acceptable<br/>MVP ou prestation light]
    E -- "3-15 k€" --> G[Discutable<br/>Demander le process]
    E -- "> 15 k€" --> H[Problématique<br/>Audit nécessaire]
    D -- Non --> I{Score ≤ 35 ?}
    I -- Oui --> J[IA-dominant<br/>Renégocier ou refuser]
    I -- Non --> K{Score ≤ 45 ?}
    K -- Oui --> L[Slop maquillé<br/>Remboursement justifié]
    K -- Non --> M[Slop pur<br/>Refus ferme]
    G --> N{Le freelance<br/>l'a-t-il déclaré ?}
    N -- Oui --> O[OK, prestation honnête]
    N -- Non --> P[Tromperie<br/>Aborder le sujet]

---

Cas d'études concrets : 5 sites scrutés et scorés

Voici cinq exemples, anonymisés (les noms sont fictifs, mais les patterns sont rigoureusement représentatifs de ce qu'on voit en audit). Ils sont scorés selon la grille des 17 signes.

Cas A : La startup B2B « Flowstack »

Contexte : startup pré-seed, landing page commandée à un freelance pour 2 500 €. Le freelance prétend avoir « tout codé en custom avec animations sur mesure ».

Audit ligne par ligne :

| # | Signe | Présent ? | Score | |---|-------|-----------|-------| | 1 | Palette #3b82f6 + #8b5cf6 | Oui | 4 | | 2 | Police Inter exclusive | Oui | 3 | | 3 | 3 cards rounded-2xl | Oui | 5 | | 4 | Hero 2 boutons primaire/ghost | Oui | 4 | | 5 | Pastille « ✨ New » | Oui | 4 | | 6 | Gradient violet → rose | Oui | 5 | | 7 | Logos « Trusted by » génériques | Non (vraies marques) | 0 | | 8 | « How it works » 3 étapes Lucide | Oui | 3 | | 9 | Pricing 3 plans + checks verts | Oui | 5 | | 10 | Testimonial slider photos rondes | Oui | 3 | | 11 | FAQ accordéon | Oui | 2 | | 12 | Footer 4 colonnes | Oui | 4 | | 13 | Microcopy « Get started » / « Learn more » | Oui | 4 | | 14 | OG image gradient auto | Oui | 3 | | 15 | Pas de 404 custom | Oui | 3 | | 16 | Pas de favicon custom | Non | 0 | | 17 | Animations fade-in-up partout | Oui | 3 |

Score : 55/60.

Diagnostic : slop pur. La signature v0 est intégrale. Le seul point qui détonne, c'est qu'ils ont remplacé les logos clients génériques par leurs vrais clients, et ils ont mis un favicon. Le reste est sortie brute, livrée en l'état.

Action conseillée : entretien avec le freelance, demande de voir le process, renégociation du livrable ou remboursement.

Cas B : Le portfolio « Léa Mendès, designer »

Contexte : portfolio public d'une designer freelance qui prétend faire du « design 100 % custom, fait main, pixel par pixel ».

Audit :

| # | Signe | Présent ? | Score | |---|-------|-----------|-------| | 1 | Palette #3b82f6 + #8b5cf6 | Non (palette terracotta + crème) | 0 | | 2 | Police Inter exclusive | Non (mix Fraunces + Inter Mono) | 0 | | 3 | 3 cards rounded-2xl | Non (4 cards asymétriques) | 0 | | 4 | Hero 2 boutons primaire/ghost | Non (1 bouton + scroll indicator) | 0 | | 5 | Pastille « ✨ New » | Non | 0 | | 6 | Gradient violet → rose | Non | 0 | | 7 | Logos « Trusted by » | Non | 0 | | 8 | « How it works » 3 étapes | Non (process narratif sur 5 étapes) | 0 | | 9 | Pricing 3 plans | Non (pas de pricing public) | 0 | | 10 | Testimonial slider | Non (citations en bas, sans photos) | 0 | | 11 | FAQ accordéon | Non | 0 | | 12 | Footer 4 colonnes | Non (footer minimal 1 ligne) | 0 | | 13 | Microcopy « Get started » | Non (« Discutons de votre projet ») | 0 | | 14 | OG image gradient | Non (photo + nom) | 0 | | 15 | Pas de 404 custom | Non (404 illustré) | 0 | | 16 | Pas de favicon | Non (logo custom) | 0 | | 17 | Animations fade-in-up uniformes | Non (motion variée) | 0 |

Score : 0/60.

Diagnostic : humain pur. Aucun signe IA détectable. La promesse de « 100 % custom » est tenue.

Cas C : L'agence digitale « Pixelflow »

Contexte : refonte du site d'une agence digitale pour un cabinet de conseil, facturée 18 000 €. L'agence prétend avoir une « équipe créative dédiée ».

Audit :

| # | Signe | Présent ? | Score | |---|-------|-----------|-------| | 1 | Palette #3b82f6 + #8b5cf6 | Oui | 4 | | 2 | Police Inter | Oui | 3 | | 3 | 3 cards rounded-2xl | Oui (3 sections de 3 cards) | 5 | | 4 | Hero 2 boutons | Oui | 4 | | 5 | Pastille « ✨ New » | Non | 0 | | 6 | Gradient violet → rose | Oui (en bandeau de section) | 5 | | 7 | Logos clients | Oui (et vrais) | 0 (pas génériques) | | 8 | « How it works » 3 étapes | Oui | 3 | | 9 | Pricing 3 plans | Non (pas de pricing) | 0 | | 10 | Testimonial slider | Oui | 3 | | 11 | FAQ accordéon | Oui | 2 | | 12 | Footer 4 colonnes | Oui | 4 | | 13 | Microcopy slop | Oui | 4 | | 14 | OG image gradient auto | Oui | 3 | | 15 | Pas de 404 custom | Non | 0 | | 16 | Pas de favicon | Non | 0 | | 17 | Animations fade-in-up | Oui | 3 |

Score : 43/60.

Diagnostic : slop avec maquillage. À 18 k€ de prestation, c'est anormal. L'agence a probablement utilisé v0 ou Lovable pour produire la base, puis a fait des ajustements de surface (logos, contenu, 404). La signature IA reste intégrale dans la structure.

Action conseillée : demander le détail du process créatif, les versions intermédiaires, le brief originel. Si l'agence ne peut pas justifier de phases de design (UX, wireframes, maquettes), il y a tromperie sur la prestation.

Cas D : Le SaaS interne « TimeTrack-Pro »

Contexte : outil interne d'une PME pour le suivi du temps. Le CTO a utilisé Bolt pour produire la landing publique en 2 jours.

Audit :

Score équivalent au cas A, autour de 50/60. Mais le contexte change tout : le CTO a annoncé en interne qu'il avait utilisé un générateur IA pour aller vite. La landing est interne, ne représente pas un investissement majeur, sert principalement à présenter l'outil aux nouveaux salariés.

Diagnostic : slop pur, mais acceptable dans le contexte. Le score reste élevé, l'usage est légitime.

Cas E : Le projet étudiant « Briefcase »

Contexte : projet d'études, MVP pour un cours de marketing digital. Aucun budget, pas de prétention de design.

Audit :

Score autour de 48/60. Encore une fois, le contexte est tout. Pour un projet étudiant ou un side-project, l'usage d'un générateur IA est une démarche pragmatique légitime.

Tableau récap des 5 cas

| Cas | Description | Score | Diagnostic | Acceptable ? | |-----|-------------|-------|------------|--------------| | A | Startup B2B, freelance 2,5 k€ | 55/60 | Slop pur | Non, déclaratif mensonger | | B | Portfolio designer freelance | 0/60 | Humain pur | Oui | | C | Agence digitale, 18 k€ | 43/60 | Slop maquillé | Non, prestation surfacturée | | D | SaaS interne, dev maison | 50/60 | Slop pur | Oui, usage déclaré et contextuel | | E | Projet étudiant MVP | 48/60 | Slop pur | Oui, contexte non commercial |

Conclusion : le score chiffre la signature IA. Le contexte détermine si c'est un problème.

---

Quand c'est OK et quand ça ne l'est pas

C'est la section nuancée. Ce guide n'est pas un manifeste anti-IA. L'IA générative est un outil légitime. Mais comme tout outil, son usage approprié dépend du contrat implicite ou explicite avec celui qui paie.

Cas où c'est OK

• Side-project, perso, blog : aucune obligation de qualité commerciale. Faites au plus vite.
• MVP, POC, prototype client : si le but est de valider une hypothèse, pas de livrer un produit fini, l'IA est parfaite.
• Site interne, dashboard d'équipe : la fonctionnalité prime, le design est secondaire.
• Prestation déclarée « basée IA » : si le freelance ou l'agence annonce clairement « on utilise v0 pour aller vite et on personnalise », tout va bien : c'est un choix de méthode honnête, et le tarif doit le refléter.
• Sites jetables : campagne marketing temporaire, page d'événement, microsite saisonnier.

Cas où ce n'est pas OK

• Portfolio public d'un designer/dev qui prétend faire du sur-mesure : tromperie commerciale.
• Site corporate facturé > 5 000 € : à ce tarif, on attend un design system propre, des choix justifiés, une UX pensée.
• Refonte d'identité visuelle d'une marque : par définition, ça doit être unique. Du slop est l'opposé du brief.
• Site de service public, ONG, institution : on attend du sérieux et de la durabilité.
• Offre commerciale qui inclut « branding » ou « UX » : si la prestation est facturée comme du design, le résultat doit refléter du design.

La ligne de démarcation : la déclaration

Le critère central, ce n'est pas l'usage de l'IA. C'est la transparence. Un freelance qui dit « j'utilise v0 comme point de départ et je personnalise » est honnête. Un freelance qui dit « tout est custom, fait main » et livre un score 50+ commet une faute professionnelle.

C'est pourquoi la section Comment confronter un freelance ne cherche pas à interdire l'IA, mais à objectiver la conversation.

---

Comment confronter un freelance / une agence

Vous avez fait l'audit. Le score est élevé. Vous ne savez pas comment aborder le sujet sans créer un conflit. Voici un protocole pratique en quatre temps.

1. Avant la conversation : préparer les preuves

• Captures d'écran : faites des screens du site, du pricing, du footer. Annotez les éléments suspects (entourer la pastille « ✨ New », les 3 cards, etc.).
• Captures DevTools : ouvrez l'inspecteur, capturez les font-family, les couleurs hex, les classes Tailwind significatives.
• Calcul du score : le tableau des 17 signes, avec votre comptage. Soyez précis.
• Comparaisons : si possible, montrez 2-3 exemples publics de sortie v0/Lovable/Bolt avec la même signature.

2. La conversation : ne pas accuser, demander

Le pire angle d'attaque, c'est l'accusation frontale (« vous m'avez menti, c'est de l'IA »). Ça met l'autre en posture défensive. La meilleure approche est de demander à voir le process.

Questions à poser :

• « Pouvez-vous me montrer les wireframes initiaux ? »
• « Avez-vous des maquettes Figma intermédiaires ? »
• « Quelle était votre démarche de création de la palette ? Pourquoi ces couleurs ? »
• « Comment avez-vous fait le choix de la typographie ? »
• « Avez-vous utilisé des outils d'assistance IA dans le process ? Si oui, lesquels et à quelles étapes ? »

Le but : laisser l'autre s'expliquer. Si la prestation a été honnête, il y aura un récit créatif solide. Si elle a été du slop maquillé, le récit s'effondre rapidement.

3. Si la prestation est insuffisante

Trois options :

• Renégocier le tarif : si le travail réel ne justifie pas le tarif, demander un avoir partiel.
• Demander une refonte : avec un brief plus précis (palette imposée, typographie, structure), et une démarche de design en plusieurs phases.
• Annulation et remboursement : pour les cas extrêmes (score 50+, déclaratif clairement mensonger).

4. Pour la prochaine fois : les clauses à mettre dans le contrat

Si vous travaillez régulièrement avec des freelances ou des agences, intégrez les clauses suivantes :

• Clause de transparence IA : « Le prestataire s'engage à déclarer tout usage d'outils génératifs IA (v0, Lovable, Bolt, Claude, ChatGPT, Midjourney, etc.) et à préciser leur rôle dans la prestation. »
• Clause de personnalisation : « Les éléments visuels (palette, typographie, structure de composants) doivent refléter le brief de marque et ne peuvent reproduire les défauts d'outils tiers sans adaptation explicite. »
• Clause de fourniture des sources : « Le prestataire fournira sur demande les fichiers sources (Figma, fichiers de design, prompts utilisés). »
• Clause de score IA maximal : pour les prestations à forte composante design, vous pouvez fixer un score IA maximal, mesuré selon une grille publique comme celle de cet article. Au-delà, livraison considérée comme non conforme.

---

Outils complémentaires

Sailop n'est pas le seul outil de l'écosystème. Voici une vue d'ensemble des outils qui peuvent vous aider, chacun avec ses limites.

Sailop (audit auto frontend)

Sailop est un toolkit npm anti-slop frontend, distribué en CLI et MCP. Il scanne votre code et votre rendu pour détecter la signature IA et propose des corrections. Limites actuelles :

• couvre principalement le code frontend (HTML, CSS, classes Tailwind, composants React) ;
• ne lit pas un site déployé en boîte noire (sauf via export ou crawl) ;
• complémente l'audit visuel manuel, ne le remplace pas.

GPTZero, Originality.AI (texte uniquement)

Ces outils sont conçus pour la détection de texte généré par LLM. Ils sont utiles si vous voulez auditer le contenu rédactionnel d'un site (articles de blog, descriptions produits, pages institutionnelles). Limites :

• ne disent rien du design, de la structure, du code ;
• les résultats varient selon les modèles et les versions ;
• aucune certitude juridique, juste des probabilités.

Notre recommandation : utilisez-les sur les pages textuelles longues (blog, FAQ, à propos), mais pas sur le hero ou les CTA.

Wappalyzer (stack technique)

Wappalyzer est une extension de navigateur qui détecte la stack technique d'un site (framework, CMS, CDN, analytics, etc.). Très utile pour confirmer un soupçon : un site « Next.js + Vercel + Tailwind + shadcn » + signes visuels = forte présomption v0.

Lighthouse (perf et SEO, pas slop)

Lighthouse est intégré à Chrome DevTools (onglet « Lighthouse »). Il mesure la performance, l'accessibilité, les bonnes pratiques, le SEO. Il ne dit rien du slop IA, mais il révèle souvent des défauts révélateurs :

• un site v0 brut a souvent des problèmes d'accessibilité (contraste insuffisant) ;
• un site Lovable peut avoir un poids JavaScript anormalement élevé ;
• un site Bolt peut avoir des images non optimisées.

Ces défauts ne sont pas exclusifs aux générateurs IA, mais leur présence systématique en parallèle de la signature visuelle renforce le diagnostic.

Inspect manuel (DevTools)

C'est l'outil le plus puissant et le plus sous-utilisé. Apprendre à lire les DevTools (panel Elements, panel Network, panel Sources) vous permet de tout voir : les classes Tailwind, les imports React, les en-têtes HTTP, les requêtes API. Aucun outil automatique ne remplace cette compétence.

Tableau récapitulatif

| Outil | Domaine | Force | Limite | |-------|---------|-------|--------| | Sailop | Frontend code | Détecte les patterns IA dans le code | Demande accès au code ou MCP | | GPTZero | Texte | Probabilité IA sur prose | Ne lit pas le code/design | | Originality.AI | Texte | Idem GPTZero, payant | Idem | | Wappalyzer | Stack | Identifie framework/CDN | Ne dit pas si c'est slop | | Lighthouse | Perf/SEO | Mesure objective | Ne détecte pas le slop | | DevTools (manuel) | Tout | Vision complète | Demande compétence | | Cette grille (manuel) | Visuel/UX | Score chiffré rapide | Probabilité, pas certitude |

---

Limites de la méthode

Il faut le dire clairement : cette méthode produit des probabilités, pas des certitudes. Voici les cas où elle peut se tromper.

Faux positifs : un humain qui ressemble à du slop

Un développeur expérimenté qui aime shadcn et Tailwind peut produire un site avec un score 30+. Pourquoi ? Parce que shadcn est une bibliothèque populaire, ses composants sont par défaut rounded-2xl, et utiliser Tailwind blue-500 n'est pas un crime. Si la page est conçue rapidement pour un MVP, sans personnalisation, le résultat est visuellement proche du slop.

Mitigation : croiser avec les indicateurs techniques avancés. Si la stack est Next.js + Tailwind + shadcn mais avec un tailwind.config.ts qui a des design tokens custom (couleurs nommées, typographie spécifique), le développeur a fait le travail.

Pour équilibrer les cinq cas plus haut, voici un site qui score haut sans être du slop. Un développeur produit utilise shadcn par conviction sur le SaaS interne de sa boîte. Audit :

| # | Signe | Présent ? | Score | |---|-------|-----------|-------| | 1 | Palette #3b82f6 + #8b5cf6 | Non (primaire #0f766e, teal custom dans le config) | 0 | | 2 | Police Inter exclusive | Oui (Inter + Inter, assumé) | 3 | | 3 | 3 cards rounded-2xl | Oui (défaut shadcn non touché) | 5 | | 4 | Hero 2 boutons | Oui | 4 | | 9 | Pricing 3 plans + checks verts | Oui | 5 | | 11 | FAQ accordéon Radix | Oui | 2 | | 12 | Footer 4 colonnes | Oui | 4 | | 17 | Animations fade-in-up | Oui (tailwindcss-animate) | 3 | | autres | (16, 13, 10, etc.) | partiels | 4 |

Score : ~30/60, catégorie IA-dominant. Et pourtant : zéro génération IA. Le tell qui sauve, c'est le signe 1 à 0. La primaire #0f766e (un teal) ne sort d'aucun défaut de générateur, elle vient d'un tailwind.config.ts versionné dans le repo Git, avec un historique de commits qui montre l'ajustement manuel. Quand le signe le plus discriminant (palette, gradient) est absent mais que les signes structurels sont présents, vous tenez un dev shadcn, pas un slop. La grille mesure le défaut paresseux, pas le choix de bibliothèque.

Faux négatifs : un site IA bien personnalisé

À l'opposé, un freelance qui utilise v0 mais qui prend le temps de :

• remplacer les couleurs par défaut ;
• changer la typographie ;
• restructurer les sections ;
• réécrire le copy ;

…peut faire descendre le score à 10-15. Le site reste « assisté par IA » mais n'a plus la signature de slop. Et c'est très bien.

Mitigation : ce n'est pas un faux négatif, c'est exactement le but. Un site IA bien personnalisé est, de fait, un site humain. La méthode mesure le slop, pas l'usage de l'IA.

Cas particuliers

• Sites de musées, ONG, institutions : peuvent avoir un design « moderne mais générique » sans IA. Score modéré, mais usage légitime.
• Sites de portfolio low-budget : freelance qui débute, pas de moyens, utilise v0 explicitement. Acceptable si déclaré.
• Sites multilingues : la copy traduite par IA peut donner des faux positifs textuels alors que le design est humain. Évaluer séparément texte et design.
• Sites en cours de refonte : page temporaire en attendant le vrai site. Score élevé acceptable temporairement.

Évolution dans le temps

Les générateurs IA s'améliorent. Voici un graphique narratif (ASCII) de l'évolution de la détectabilité de leurs sorties.

Détectabilité du slop IA frontend (2023-2026)
Échelle : 0 = indétectable | 100 = détection triviale

100 |                          ●  ←  v0 v1 (déc 2023)
    |                       ●     ←  Lovable beta (mai 2024)
    |                    ●        ←  Bolt v1 (juin 2024)
 80 |                 ●           ←  v0 v2 (déc 2024)
    |              ●              ←  GPT canvas (oct 2024)
 60 |           ●                 ←  Claude Artifacts (juin 2024)
    |        ●                    ←  v0 v3 (avril 2025)
 40 |     ●                       ←  Lovable v2 (sept 2025)
    |  ●                          ←  Modèles 2026 mainstream
 20 |                             
    |                             
  0 +────────────────────────────────────
    2023 H2  2024 H1  2024 H2  2025 H1  2025 H2  2026 H1

Lecture : la détectabilité décroît avec le temps. En 2026, les
générateurs varient leurs sorties (palette, structure, copy), ce
qui rend la signature de surface moins fiable. La méthode des
17 signes reste utile mais doit être combinée avec d'autres
indicateurs (stack, headers HTTP) pour les cas modernes.

Distribution observée des scores

Pour donner un ordre de grandeur, voici une distribution narrative des scores observés sur un échantillon hypothétique de 100 sites freelance audités au S1 2026.

Distribution des scores IA (100 sites freelance, S1 2026)
                                                                    
  0-7   ████████████████████░░░░░░░░░░░░░░░░░░░░  18 sites  (humain pur)
  8-15  ████████████████████████████░░░░░░░░░░░░  22 sites  (humain influencé)
 16-25  ███████████████████████░░░░░░░░░░░░░░░░░  19 sites  (IA-assisté)
 26-35  ████████████████░░░░░░░░░░░░░░░░░░░░░░░░  14 sites  (IA-dominant)
 36-45  ███████████████░░░░░░░░░░░░░░░░░░░░░░░░░  13 sites  (slop maquillé)
 46-60  █████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░  14 sites  (slop pur)

Lecture : 41 % des sites freelance audités présentent un score
> 26, soit IA-dominant ou pire. Cela ne veut pas dire que 41 %
des prestations sont frauduleuses : cela dépend du tarif et de
la déclaration. Mais cela donne un ordre de grandeur de la
prévalence du slop dans l'écosystème freelance actuel.

Recommandations finales

• Utilisez la méthode comme outil de discussion, pas comme verdict.
• Croisez toujours plusieurs indicateurs.
• Tenez compte du contexte (tarif, déclaratif, usage prévu).
• Mettez à jour votre grille à mesure que les générateurs évoluent.

---

Pour les recruteurs / clients d'agence : protocole d'audit en 15 minutes

Cette section s'adresse spécifiquement à vous si vous êtes :

• recruteur tech ou design qui audite un portfolio ;
• client d'une agence ou d'un freelance qui veut vérifier une prestation avant le solde ;
• journaliste qui enquête sur les pratiques d'agences ;
• responsable achats qui valide une livraison contractuelle.

Le protocole en 15 minutes est conçu pour vous donner un diagnostic défendable.

Minute 0-2 : scan visuel rapide

Ouvrez la page d'accueil. Faites le scan TL;DR (5 questions). Notez le score 0-5.

Minute 2-5 : grille des 17 signes (visuel)

Parcourez la page complète : hero, features, how-it-works, pricing, testimonials, FAQ, footer. Pour chaque signe, notez « présent » ou « absent ». Sommez les gravités. Score sur 60.

Minute 5-8 : indicateurs techniques

• DevTools → onglet Elements : inspectez le bouton CTA, le H1, le footer. Notez les font-family, background-color, border-radius.
• DevTools → onglet Network : rechargez la page, regardez les en-têtes de la réponse principale. Notez le serveur, les en-têtes Vercel/Netlify/CF.
• View source (Ctrl+U) : cherchez og:image, link rel="icon", les meta génériques.
• URL inexistante : tapez /test-404-page-existe-pas. Notez le type de 404.
• /sitemap.xml et /robots.txt : ouvrez-les. Vérifiez s'ils sont par défaut.

Minute 8-12 : pages secondaires

• Allez sur la page « About » / « À propos » : signe IA si elle est uniformément creuse, sans photos d'équipe, sans dates, sans contenu original.
• Allez sur le blog si présent : si tous les articles ont la même structure (H1, image, 3-5 H2 prévisibles, CTA en bas), c'est suspect.
• Vérifiez la cohérence : un site humain a souvent des incohérences mineures (une page mieux que l'autre, un détail qui dénote). Une homogénéité parfaite est elle-même un signe IA.

Minute 12-15 : synthèse

Compilez :

• Score TL;DR : __/5
• Score 17 signes : __/60
• Indicateurs techniques : __ confirmants / __ infirmants
• Catégorie : humain pur / humain influencé / IA-assisté / IA-dominant / slop maquillé / slop pur
• Cohérence avec le déclaratif du prestataire : ✅ / ⚠️ / ❌

Rédigez une synthèse 5 lignes max, à présenter en réunion ou à inclure dans un compte-rendu.

Modèle de synthèse

> Audit du site [URL] effectué le [date]. > Score : 38/60 (slop maquillé). > Signature IA forte sur les éléments structurels (hero, pricing, footer) avec personnalisation cosmétique (logo, copy, palette ajustée). > Stack confirmée : Next.js + Tailwind + shadcn déployé sur Vercel. > Recommandation : demander au prestataire de présenter ses fichiers sources (Figma, prompts utilisés) avant validation du solde.

---

Tableau récapitulatif : signature unique des principaux générateurs

Voici les signatures distinctives de chaque générateur IA frontend. Ce sont des indicateurs supplémentaires qui aident à identifier l'outil utilisé une fois la signature globale détectée.

| Générateur | Signature distinctive | Signe spécifique | Hosting fréquent | |------------|----------------------|------------------|------------------| | v0 (Vercel) | Stack Next.js + Geist + shadcn + Tailwind | Police Geist par défaut, classes shadcn cn(), data-react-tree parfois | Vercel | | Lovable | Stack Vite + React + Tailwind + shadcn | Meta tag mentionnant lovable.dev, structure pages identique, icônes Lucide partout | Vercel ou Cloudflare | | Bolt (StackBlitz) | Stack Vite + React + Tailwind | Souvent moins shadcn, plus custom CSS, déploiements Netlify | Netlify | | Replit Agent | Stack hétérogène (Next/Vite) + Tailwind | Souvent un plus de désordre HTML, parfois traces commentaires | Replit Deployments | | Claude Artifacts | HTML monolithique souvent | Tout dans un seul fichier, classes Tailwind inline, pas de séparation composants | Hébergé manuellement | | ChatGPT Canvas | HTML monolithique aussi | Souvent CSS inline, peu de Tailwind, structure simpliste | Hébergé manuellement | | Cursor + Composer | Variable, souvent shadcn | Pas de signature univoque (c'est l'humain qui pilote) | Variable | | GitHub Copilot Workspace | Variable | Pas de signature univoque | Variable |

À noter : l'outil utilisé n'est pas la question principale. La question, c'est : la sortie a-t-elle été personnalisée ou non ? Une sortie v0 retravaillée est OK. Une sortie Cursor brute est tout aussi slop qu'une sortie v0 brute.

---

FAQ : 15 questions fréquentes

1. Mon freelance peut-il avoir utilisé l'IA pour la moitié seulement ?

Oui, c'est même fréquent. L'IA peut être utilisée pour :

• générer le squelette HTML/JSX initial ;
• proposer des classes Tailwind ;
• écrire le copy de base ;
• aider à corriger des bugs.

Et le freelance peut ensuite :

• retravailler le design (couleurs, typographie, structure) ;
• réécrire le copy en cohérence avec la marque ;
• ajouter des animations custom ;
• optimiser les performances.

Dans ce cas, le score peut tomber à 10-20, ce qui est cohérent avec une prestation honnête. Le problème n'est pas l'IA, c'est l'absence de personnalisation.

2. Si le site est joli mais générique, c'est grave ?

« Joli mais générique » est précisément la définition du slop IA bien fait. Sur le plan esthétique, c'est acceptable, la page fonctionne. Sur le plan d'investissement, c'est un problème : vous payez un prix custom pour un livrable template. Si le tarif est inférieur à 2 k€, c'est généralement OK. Au-delà, c'est discutable.

3. Comment être sûr à 100 % qu'un site est IA ?

Vous ne pouvez pas. Aucun outil, aucune méthode, aucun expert ne peut dire avec 100 % de certitude qu'une page a été générée par IA, sauf si :

• le code source contient des marqueurs explicites (ex. : un commentaire « Generated by v0 ») ;
• le prestataire le déclare ;
• vous comparez avec un export brut connu.

La méthode des 17 signes donne une forte probabilité, qui est suffisante pour une discussion contractuelle, mais pas pour une accusation publique.

4. Si mon site a un score élevé, est-ce que je dois le refaire ?

Pas nécessairement. Posez-vous trois questions :

• Le site fonctionne-t-il (conversions, navigation, vitesse) ?
• Est-il aligné avec votre marque (couleurs, ton, valeurs) ?
• Vos clients ou votre audience le perçoivent-ils comme générique ?

Si oui aux deux premières et non à la troisième, vous pouvez le garder. Sinon, une refonte ciblée (palette, typographie, structure des sections) peut faire chuter le score sans tout reprendre.

5. Est-ce que Sailop peut auditer mon site automatiquement ?

Sailop est conçu pour le code (avant déploiement). Pour auditer un site déployé, vous devez :

• exporter le HTML/CSS rendu ;
• ou utiliser le mode crawl (en cours d'évolution) ;
• ou utiliser cette grille manuelle.

À terme, Sailop intégrera un mode audit URL, mais il n'y a pas de magie : la signature visuelle se détecte mieux à l'œil, avec le contexte.

6. Les générateurs IA s'améliorent. La méthode sera-t-elle obsolète ?

Partiellement. Les signes 1, 2, 6 (palette, typographie, gradient) deviendront moins discriminants à mesure que les modèles varient leurs défauts. Mais les signes structurels (3, 4, 9, 12, soit la composition des sections) restent stables, parce qu'ils correspondent à des préférences statistiques profondes des LLMs sur ce qu'est une « bonne landing page ». Cette méthode aura encore de la valeur en 2027-2028, peut-être avec des ajustements de pondération.

7. Un site Wix / Squarespace / Webflow peut-il avoir un score élevé ?

Oui, parce que ces plateformes proposent des templates qui ressemblent à du slop IA. Mais ce n'est pas du slop IA : c'est du slop template. La distinction est importante : un site Webflow basé sur un template public n'a pas été généré par v0, mais il en partage l'esthétique. La méthode des 17 signes ne fait pas la différence à l'œil. Pour distinguer, regardez la stack via Wappalyzer.

8. Les designers peuvent-ils utiliser cette grille sur leur propre travail ?

Oui, c'est même un excellent exercice. Si votre design score 30+ et que vous prétendez faire du custom, il y a un problème : soit vous êtes inconsciemment dans la moyenne shadcn, soit vous avez un angle mort. La grille est un miroir.

9. Les sites e-commerce ont-ils des signatures IA différentes ?

Oui. Le e-commerce IA a ses propres patterns : pages produit avec carrousel d'images, sticky CTA « Add to cart », testimonials photo-rond, FAQ produit, section « You may also like » à 4 cards. La grille des 17 signes s'adapte mais demande des modifications. C'est un sujet pour un article dédié.

10. Comment auditer un dashboard SaaS authentifié ?

Vous ne pouvez pas faire le scan complet sans accès. Mais vous pouvez auditer :

• la landing publique et le pricing (souvent suffisant) ;
• les screenshots du produit s'ils sont publics ;
• les pages de marketing (à propos, blog).

Le produit lui-même est généralement plus protégé du slop, parce que la complexité fonctionnelle force la personnalisation.

11. Les sites WordPress peuvent-ils être slop IA ?

Oui, indirectement. Si le thème WordPress est généré par un outil IA, ou si les blocs Gutenberg sont produits par un plugin IA, la signature s'applique. Mais c'est plus rare : l'écosystème WordPress reste dominé par des thèmes humains traditionnels.

12. Si je veux concurrencer un site slop, comment faire ?

Avec deux choses : un design custom (palette, typographie, structure non-shadcn) et une copy spécifique (pas « Get started », mais quelque chose qui parle à votre audience). Le détail est dans comment éviter un site qui sent Lovable, v0 ou Bolt. Pour ne pas produire le slop dès la source, voir aussi le prompt anti-slop pour Claude, GPT et Gemini.

13. Cette méthode marche-t-elle pour les apps mobiles ?

Non. Les patterns mobiles (iOS HIG, Material Design) sont déjà très standardisés indépendamment de l'IA. La méthode est conçue pour le web, où la latitude créative est plus large.

14. Comment cette méthode évoluera-t-elle ?

Sailop publie des mises à jour de cette grille périodiquement. La prochaine version (Q3 2026) ajoutera :

• la détection de signatures spécifiques de Cursor + agents (Claude Code, Devin, etc.) ;
• la détection de patterns e-commerce ;
• une intégration outil pour automatiser le scan.

15. Puis-je utiliser cette grille en consulting / audit payant ?

Oui, librement, en citant la source (Sailop). Si vous voulez un cadre plus formalisé, contactez Sailop pour les licences entreprise.

---

Glossaire

• Slop (IA) : production massive et non curée par modèles génératifs, reconnaissable par sa signature homogène et générique. Voir qu'est-ce que le AI slop.
• shadcn (shadcn/ui) : bibliothèque de composants React open-source basée sur Radix UI et Tailwind. Style par défaut : rounded-2xl, shadow, palette neutre. Très utilisée par les générateurs IA.
• v0 : générateur de pages frontend de Vercel, basé sur Next.js + shadcn. Disponible sur v0.dev.
• Lovable : plateforme de génération d'applications React + Tailwind, ex-GPT Engineer.
• Bolt : générateur d'applications full-stack par StackBlitz, basé sur Vite + React.
• Replit Agent : agent de développement de Replit, qui génère puis déploie des projets.
• Claude Artifacts : composants interactifs générés par Claude (Anthropic) directement dans la conversation.
• ChatGPT Canvas : équivalent OpenAI des artifacts, intégré à GPT-4 et au-delà.
• Cursor : éditeur de code basé sur VSCode avec IA intégrée. Pas un générateur de pages en soi, mais utilisé pour produire du code IA-assisté.
• DevTools : outils de développement intégrés aux navigateurs (Chrome DevTools, Firefox DevTools), accessibles via F12.
• Open Graph (OG) : métadonnées HTML qui contrôlent l'apparence d'un lien partagé sur réseaux sociaux.
• Tailwind CSS : framework CSS utility-first dominant en 2024-2026. Classes type bg-blue-500, rounded-2xl, shadow-md.
• Lucide : bibliothèque d'icônes SVG open-source, utilisée par défaut par shadcn.
• CTA (Call to Action) : bouton ou lien d'incitation à l'action (ex. : « Get started »).
• Hero : première section d'une landing page, contenant le titre principal et le CTA principal.

---

Sources

Cet article s'appuie sur les ressources publiques et les documentations officielles suivantes (sans URL, conformément à la politique éditoriale Sailop) :

• documentations officielles Vercel (Next.js, v0, hosting, Open Graph) ;
• documentation Netlify (Build, Edge Functions, hosting) ;
• documentation Tailwind CSS (configuration, palette par défaut, classes) ;
• documentation Anthropic (Claude, Artifacts, Constitutional AI) ;
• documentation OpenAI (GPT, Canvas, modèles génératifs) ;
• documentation Google Search Central (sitemaps, robots.txt, indexation) ;
• spécifications Open Graph Protocol (meta tags) ;
• ouvrages et talks publics sur le product design et l'UX moderne ;
• analyses publiées par la communauté open-source design system (Radix, shadcn, Lucide).

Pour les retours d'expérience freelance et les chiffres d'audit, Sailop s'appuie sur ses propres analyses internes et sur des conversations avec des prestataires et des clients du secteur. Les chiffres présentés sont des ordres de grandeur, pas des études quantitatives publiées.

---

Annexe A : Snippets DevTools complets pour automatiser le scan

Cette annexe rassemble les snippets prêts à copier-coller dans la console DevTools (ouvrir avec F12, onglet « Console », coller, valider). Chaque snippet correspond à un signe de la grille des 17. Vous pouvez les enchaîner pour obtenir un rapport complet en moins de 60 secondes.

A.1 : Audit complet en un seul script

Le script ci-dessous vérifie automatiquement les 17 signes et imprime un rapport structuré. C'est le couteau suisse de l'audit visuel.

// === SAILOP : Audit visuel automatique 17 signes ===
const audit = {
  score: 0,
  total: 60,
  details: [],
};

function note(name, present, gravite, comment = '') {
  const points = present ? gravite : 0;
  audit.score += points;
  audit.details.push({
    name, present, gravite, points, comment,
  });
}

// Signe 1 : Palette signature
const buttons = [...document.querySelectorAll('button, a[role="button"], [class*="btn"]')];
const colors = buttons.slice(0, 10).map(b => getComputedStyle(b).backgroundColor);
const slopColors = ['rgb(59, 130, 246)', 'rgb(139, 92, 246)', 'rgb(99, 102, 241)'];
const hasSlopPalette = colors.some(c => slopColors.includes(c));
note('Palette blue-500/purple-500', hasSlopPalette, 4);

// Signe 2 : Inter exclusif
const fonts = new Set();
document.querySelectorAll('h1, h2, p, body').forEach(el => {
  fonts.add(getComputedStyle(el).fontFamily.split(',')[0].replace(/"/g, '').trim());
});
const fontArr = [...fonts];
const interExclusif = fontArr.length <= 2 && fontArr.some(f => /^Inter|^Geist/i.test(f));
note('Inter ou Geist exclusif', interExclusif, 3, `Polices détectées: ${fontArr.join(', ')}`);

// Signe 3 : Grille 3 cards
const grids = document.querySelectorAll('[class*="grid-cols-3"], [class*="md:grid-cols-3"]');
const has3Cards = [...grids].some(g => g.children.length === 3);
note('Grille 3 cards rounded-2xl', has3Cards, 5);

// Signe 4 : Hero 2 boutons
const hero = document.querySelector('section, main > div:first-of-type, [class*="hero"]');
const heroBtns = hero ? hero.querySelectorAll('a[role="button"], button, [class*="btn"]') : [];
note('Hero 2 boutons primaire/ghost', heroBtns.length === 2, 4);

// Signe 5 : Pastille new
const pills = document.querySelectorAll('[class*="rounded-full"]');
const hasNewPill = [...pills].some(p => /(?:new|nouveau|introducing)/i.test(p.textContent));
note('Pastille "✨ New"', hasNewPill, 4);

// Signe 6 : Gradient violet/rose
const allEls = document.querySelectorAll('*');
let hasGradient = false;
allEls.forEach(el => {
  const bg = getComputedStyle(el).backgroundImage;
  if (bg && /purple|violet|fuchsia|pink/i.test(el.className) && bg.includes('gradient')) {
    hasGradient = true;
  }
});
note('Gradient from-purple to-pink', hasGradient, 5);

// Signe 9 : Pricing 3 plans
const pricingSection = [...document.querySelectorAll('section, div')].find(s => 
  /pricing|tarif/i.test(s.id || s.className || '')
);
const pricingPlans = pricingSection 
  ? pricingSection.querySelectorAll('[class*="grid"] > [class*="rounded"]') 
  : [];
note('Pricing 3 plans', pricingPlans.length === 3, 5);

// Signe 12 : Footer 4 colonnes
const footer = document.querySelector('footer');
const footerCols = footer 
  ? footer.querySelectorAll('[class*="grid-cols-4"] > *') 
  : [];
note('Footer 4 colonnes', footerCols.length === 4, 4);

// Signe 13 : Microcopy slop
const slopPhrases = ['get started', 'learn more', 'watch demo', 'try it free',
  'commencer', 'en savoir plus', 'essayer gratuitement'];
const ctas = [...document.querySelectorAll('button, a[role="button"]')];
const hasSlopMicrocopy = ctas.some(c => 
  slopPhrases.some(p => c.textContent.toLowerCase().includes(p))
);
note('Microcopy "Get started" / "Learn more"', hasSlopMicrocopy, 4);

// Signe 17 : Animations fade-in-up
const animated = document.querySelectorAll('[class*="animate-in"], [class*="fade-in"], [data-animate]');
note('Animations fade-in-up partout', animated.length > 5, 3);

// Rapport final
console.table(audit.details);
console.log(`\n=== SCORE FINAL : ${audit.score}/${audit.total} ===`);
if (audit.score < 8) console.log('→ Humain pur');
else if (audit.score < 16) console.log('→ Humain avec influences');
else if (audit.score < 26) console.log('→ IA-assisté');
else if (audit.score < 36) console.log('→ IA-dominant');
else if (audit.score < 46) console.log('→ Slop maquillé');
else console.log('→ Slop pur');

Ce script ne couvre pas les 17 signes (certains demandent une intervention manuelle : favicon, 404, OG image, testimonials), mais il automatise les 9-10 plus discriminants. Vous pouvez l'enrichir.

A.2 : Snippet pour vérifier les en-têtes HTTP

Dans une console qui supporte fetch :

fetch(window.location.href, { method: 'HEAD' })
  .then(r => {
    const headers = {};
    r.headers.forEach((v, k) => { headers[k] = v; });
    console.log('Server:', headers['server']);
    console.log('Vercel ID:', headers['x-vercel-id']);
    console.log('Netlify ID:', headers['x-nf-request-id']);
    console.log('Cloudflare Ray:', headers['cf-ray']);
    console.log('Cache:', headers['x-vercel-cache'] || headers['cf-cache-status']);
  });

A.3 : Extraction de la stack technique

// Détecte les libs courantes via window globals
const libs = {
  'React': !!window.React || document.querySelector('[data-reactroot]'),
  'Next.js': !!window.next || !!document.querySelector('#__next'),
  'Tailwind': document.querySelector('[class*="bg-"][class*="-500"]') !== null,
  'shadcn (Radix)': document.querySelector('[data-radix-collection-item]') !== null
    || document.querySelector('[data-state="closed"]') !== null,
  'Lucide icons': document.querySelectorAll('svg[class*="lucide"]').length > 0,
  'Framer Motion': document.querySelector('[style*="will-change"]') !== null,
};
console.table(libs);

A.4 : Capture du sitemap.xml et du robots.txt

// Récupère et analyse le sitemap
fetch('/sitemap.xml')
  .then(r => r.text())
  .then(xml => {
    const lastmods = [...xml.matchAll(/<lastmod>([^<]+)<\/lastmod>/g)].map(m => m[1]);
    const unique = [...new Set(lastmods)];
    console.log(`Total entries: ${lastmods.length}, unique lastmod dates: ${unique.length}`);
    if (unique.length === 1 && lastmods.length > 5) {
      console.warn('⚠ Toutes les pages ont la même lastmod, signe de génération auto');
    }
  });

fetch('/robots.txt')
  .then(r => r.text())
  .then(txt => {
    const isDefault = /^User-agent: \*\s*Allow: \/\s*Sitemap:/m.test(txt);
    console.log('robots.txt par défaut Next.js:', isDefault);
  });

A.5 : Capture de l'OG image

const og = document.querySelector('meta[property="og:image"]');
console.log('OG image URL:', og ? og.content : 'absente');
// Optionnel : ouvrir l'image dans un nouvel onglet
if (og) window.open(og.content, '_blank');

A.6 : Comptage des classes Tailwind

const all = [...document.querySelectorAll('*')];
const classCount = {};
all.forEach(el => {
  if (typeof el.className === 'string') {
    el.className.split(/\s+/).forEach(c => {
      if (c) classCount[c] = (classCount[c] || 0) + 1;
    });
  }
});
const top20 = Object.entries(classCount)
  .sort((a, b) => b[1] - a[1])
  .slice(0, 20);
console.table(top20);

Si les 20 classes les plus fréquentes incluent toutes des préfixes Tailwind classiques (bg-, text-, rounded-, shadow-, flex, grid, etc.), c'est confirmé que le site est en Tailwind.

A.7 : Détection des composants shadcn

shadcn génère des data-* attributs Radix très reconnaissables. Voici comment les détecter :

const shadcnSignals = [
  '[data-state="open"]',
  '[data-state="closed"]',
  '[data-radix-collection-item]',
  '[data-orientation="horizontal"]',
  '[data-orientation="vertical"]',
  '[role="dialog"][aria-modal="true"]',
];
const counts = {};
shadcnSignals.forEach(sel => {
  counts[sel] = document.querySelectorAll(sel).length;
});
console.table(counts);
const total = Object.values(counts).reduce((a, b) => a + b, 0);
console.log(`Total signaux shadcn: ${total}`);

A.8 : Comparaison structurelle avec un site v0 témoin

Cette technique avancée consiste à comparer la structure DOM de la page suspecte avec celle d'un site v0 connu. La similarité structurelle se mesure par le ratio de tags partagés.

// Extraire la "signature" de la page (séquence de tags)
function getSignature(rootSel = 'main') {
  const root = document.querySelector(rootSel) || document.body;
  const tags = [];
  function walk(node, depth = 0) {
    if (depth > 6) return;
    if (node.nodeType === 1) {
      tags.push(node.tagName);
      [...node.children].forEach(c => walk(c, depth + 1));
    }
  }
  walk(root);
  return tags.join(',');
}
const sig = getSignature();
console.log('Signature DOM:', sig.slice(0, 500));
console.log('Longueur:', sig.length);

Vous pouvez sauvegarder des signatures de référence (un v0 témoin, un humain témoin) et calculer la distance d'édition entre la page auditée et chacune.

---

Annexe B : Comparatif détaillé v0 / Lovable / Bolt / Replit / Claude / GPT

Pour les auditeurs avancés, voici une fiche comparative qui donne, pour chaque générateur, ses points distinctifs une fois la signature globale détectée.

B.1 : v0 (Vercel)

• Stack typique : Next.js 14+ (App Router) + Tailwind + shadcn/ui + Geist + Lucide.
• Hosting : presque toujours Vercel (server: Vercel, x-vercel-id présent).
• Police par défaut : Geist Sans + Geist Mono.
• Palette par défaut : neutre (zinc, slate) + accent (blue, indigo). Moins violet/rose en sortie 2026.
• Structure typique : page d'accueil avec hero, features (3 cards), CTA, footer.
• Marqueurs DOM : data-react-tree,
  , _next/static/... dans les chemins JS.
• Indices spéciaux : meta (rarement, mais possible si le dev n'a pas nettoyé).
• Faiblesses fréquentes : pas de 404 custom, pas de favicon, accessibilité légère.

B.2 : Lovable

• Stack typique : Vite + React + Tailwind + shadcn/ui + Lucide.
• Hosting : variable (Vercel, Cloudflare Pages, Netlify, hébergement Lovable propre).
• Police par défaut : Inter (rarement Geist).
• Palette par défaut : Tailwind blue-500 + purple-500 + neutres.
• Structure typique : très similaire à v0, avec souvent un sidebar nav pour les apps SaaS.
• Marqueurs DOM : si publié via Lovable, parfois meta tag ou class .lovable-app.
• Indices spéciaux : la copy a tendance à être plus verbeuse, plus de titres marketing, plus de mots-clés SEO injectés automatiquement.
• Faiblesses fréquentes : poids JS élevé, peu d'optimisation d'image, OG image souvent identique à toutes les pages.

B.3 : Bolt (StackBlitz)

• Stack typique : Vite + React + Tailwind. shadcn moins systématique qu'avec v0/Lovable.
• Hosting : Netlify (déploiement par défaut), parfois Vercel.
• Police par défaut : Inter ou system-ui (moins de discipline typographique).
• Palette par défaut : Tailwind blue + violet, mais souvent personnalisée par le prompt.
• Structure typique : plus libre que v0, le LLM Bolt a tendance à proposer des structures plus variées.
• Marqueurs DOM : pas de marqueur unique, mais combinaison Vite (/assets/index-XXXXX.js) + Netlify headers.
• Indices spéciaux : Bolt déploie souvent en environnement développement (build incomplet, source maps présentes en prod).
• Faiblesses fréquentes : configurations parfois cassées (404 dynamique mal géré), erreurs console fréquentes.

B.4 : Replit Agent

• Stack typique : très variable. Replit Agent peut produire Next.js, Vite, Express, FastAPI, etc.
• Hosting : Replit Deployments (*.replit.app) ou export.
• Police par défaut : aucune préférence forte.
• Palette par défaut : moins prévisible.
• Structure typique : souvent plus expérimentale, l'agent fait plus d'essais-erreurs.
• Marqueurs DOM : domaine .replit.app ou .replit.dev est l'indice principal.
• Indices spéciaux : code parfois moins propre, structure de fichiers atypique, présence de replit.nix.
• Faiblesses fréquentes : performance dégradée par l'environnement Replit, latence de cold start.

B.5 : Claude Artifacts

• Stack typique : pas de stack à proprement parler. Un artifact est un fichier HTML autonome, parfois avec React via CDN.
• Hosting : pas de hosting natif. Il faut exporter et déployer manuellement (Vercel, Netlify, GitHub Pages).
• Police par défaut : system-ui ou Inter via Google Fonts.
• Palette par défaut : Claude varie davantage. Moins de blue-500/purple-500 systématique.
• Structure typique : fichier monolithique, tout en