J'ai vibe-codé mon site sur Lovable / v0 / Bolt et il ressemble à tous les autres : le guide complet 2026

Tu as ouvert Lovable, tapé "build me a SaaS landing page for X", attendu trois minutes, et tu as eu un site. Il fonctionne. Il a un hero, des features en trois colonnes, un pricing, un footer. Tu l'as déployé. Tu l'as montré à un ami dev. Il a souri poliment et il t'a dit : "Ah, c'est mignon, ça ressemble à un truc Bolt, non ?"

Et là tu as compris. Ton site, que tu as payé 20 € par mois pour le faire générer, qui t'a pris dix prompts à itérer, qui contient les couleurs que tu as demandées et même ton logo en haut à gauche — ce site, n'importe qui dans la tech le reconnaît en trois secondes comme un site IA. Pas parce qu'il y a écrit "Built with Lovable" en bas (tu as enlevé le badge). Mais parce qu'il a la silhouette. Le rythme. Les choix par défaut. Les emojis dans les cards. La palette slate-900 + blue-500. Le rounded-2xl shadow-md partout. Le hero centré avec un tag "Coming soon" violet en haut.

Bonne nouvelle : ce n'est pas une fatalité. Mauvaise nouvelle : tu ne peux pas régler ça en demandant à l'IA "rends-le plus original". Elle te générera une autre version du même biais. Le problème n'est pas dans tes prompts. Il est dans la distribution statistique des choix par défaut des modèles, qui produisent en moyenne tous le même genre de site.

Ce guide te donne 23 modifications concrètes, priorisées par gain visuel et coût en temps, pour transformer ton site IA en site qui a l'air d'avoir été pensé par un humain qui sait ce qu'il fait. La plupart se font en 30 minutes à 4 heures. Aucune ne demande de tout recoder. Aucune ne demande de retoucher l'IA — juste d'éditer les fichiers qu'elle a produits.

Si tu n'as jamais entendu parler du concept de slop visuel généré par IA, tu peux d'abord lire le guide définitif sur l'AI slop pour le contexte. Si tu veux savoir comment un visiteur peut détecter un site IA en trente secondes, il y a aussi un article dédié là-dessus. Sinon, on attaque.

TL;DR — checklist 23 modifs priorisées

Voici la checklist complète. Imprime-la, coche au fur et à mesure. Le tableau est trié par ratio gain visuel / temps : les premières lignes sont les plus rentables, fais-les en priorité même si tu ne fais rien d'autre.

| # | Modification | Durée | Niveau technique | Gain visuel | |---|---|---|---|---| | 1 | Sortir d'Inter (passer à Space Grotesk + Space Mono) | 10 min | Débutant | Très élevé | | 2 | Tuer le bleu Tailwind par défaut (12 palettes alternatives) | 20 min | Débutant | Très élevé | | 5 | Bannir rounded-2xl + shadow-md + gradient-to-br | 15 min | Débutant | Très élevé | | 7 | Personnaliser le hero (asymétrie + suppression tag-pill) | 45 min | Intermédiaire | Très élevé | | 12 | Tuer le tag-pill "✨ New: ..." au-dessus du H1 | 5 min | Débutant | Élevé | | 17 | Voix éditoriale non-"We help X do Y" | 30 min | Débutant | Élevé | | 6 | Remplacer les emojis par des SVG custom ou ASCII | 30 min | Intermédiaire | Élevé | | 3 | Remplacer la grille de 3 cards features | 1 h | Intermédiaire | Élevé | | 8 | Tuer le pricing en 3 cards alignées | 45 min | Intermédiaire | Élevé | | 4 | Asymétriser les sections (60/40, 70/30) | 1 h | Intermédiaire | Élevé | | 11 | Tuer le terminal mockup à 3 dots colorés | 20 min | Intermédiaire | Élevé | | 19 | Logo sans cercle dégradé violet | 30 min | Débutant | Élevé | | 10 | Footer non-4-colonnes | 30 min | Débutant | Moyen | | 18 | Images non-Unsplash-blue-gradient | 45 min | Débutant | Moyen | | 9 | Une longue citation au lieu d'un slider de testimonials | 30 min | Débutant | Moyen | | 20 | Microcopy non-"Get started" | 20 min | Débutant | Moyen | | 22 | OG image custom | 1 h | Intermédiaire | Moyen | | 23 | Métadonnées + sitemap + robots non-default | 30 min | Intermédiaire | Faible | | 13 | Animations : rien ou signature unique (pas fade-in-up) | 1 h | Intermédiaire | Moyen | | 21 | Form fields non-rounded-default | 20 min | Débutant | Faible | | 16 | Loading state non-spinner | 30 min | Intermédiaire | Faible | | 15 | Page 404 unique | 45 min | Intermédiaire | Faible | | 14 | Curseur custom (avec parcimonie) | 1 h | Intermédiaire | Faible |

Les six premières modifications représentent à elles seules environ 80% du gain visuel. Si tu n'as qu'une heure et demie, fais celles-là, déploie, regarde la différence et reviens pour le reste plus tard.

Le problème : pourquoi ça ressemble à tous les autres

Avant de réparer, il faut comprendre. Ce n'est pas une question de qualité — Lovable, v0, Bolt et Replit Agent produisent du code qui marche, qui est responsive, qui a souvent un bon état des animations et des transitions. Le problème est en amont : ils ont été entraînés sur les mêmes datasets, ils utilisent les mêmes outils sous le capot (souvent Tailwind + Next.js + shadcn/ui), et leurs prompts système les poussent vers les mêmes choix par défaut. Résultat : une signature visuelle commune, reconnaissable.

Les biais signature des quatre outils

Chaque outil a ses tics. Si tu les connais, tu sais quoi corriger.

| Outil | Biais signature | Choix par défaut typiques | |---|---|---| | Lovable | Cards arrondies + gradients diagonaux + emojis dans les features | bg-gradient-to-br from-blue-50 to-purple-50, cards en rounded-2xl, hero centré, badge "✨" en haut | | v0.dev | shadcn/ui poussé à l'extrême + dark mode partout + minimalisme noir/blanc | Slate-950, accent unique, beaucoup de border-border, terminaux mock, copy en anglais startup | | Bolt.new | Saturé en composants + grilles 3 colonnes + lucide-react par défaut | Grid 3 cols sur tout, icônes Lucide, transitions hover-scale, bcp de text-balance | | Replit Agent | Stack hybride + assemblage moins cohérent + plus de débordement responsive | Mélange de styles, parfois bootstrap-ish, plus chaotique mais reconnaissable au mismatch |

La plupart des sites IA en 2026 mélangent en réalité les biais : tu as itéré sur Lovable puis tu es allé sur v0 pour un composant, tu as fini avec Bolt pour le déploiement. Le résultat est un patchwork de tics.

Pourquoi c'est un problème, concrètement

Trois conséquences pratiques, indépendamment du goût :

Première conséquence — la confiance. Quand un visiteur reconnaît un site comme "généré par IA", la confiance baisse. Pas parce que l'IA serait mauvaise, mais parce que les gens associent "site générique" à "projet pas sérieux", "tentative de scam", ou simplement "personne ne s'est foulé". C'est injuste, mais c'est la réalité du signal social en 2026. Si tu vends quelque chose, c'est un coût de conversion direct.

Deuxième conséquence — la mémoire. Un site générique est invisible. Personne ne le partage, personne ne s'en souvient, personne n'en parle dans un Slack ou un Discord. Or, en 2026, le bouche-à-oreille reste le canal d'acquisition le plus rentable, surtout pour des produits niche.

Troisième conséquence — le SEO et les LLM. Les moteurs comme Google Search Generative Experience, Perplexity, ChatGPT Search, Claude Search, et Brave Search détectent de plus en plus le contenu "boilerplate IA". Pour le moment, ça affecte surtout le contenu textuel, mais il n'est pas absurde de penser que les patterns visuels finiront par être pris en compte (favicon générique, OG image absente, structure HTML répétitive, etc.). Ne pas avoir de signature est un risque à moyen terme.

Ce qui n'est PAS le problème

Pour qu'on parte sur de bonnes bases : utiliser une IA pour générer ton site n'est pas un problème en soi. Ce qui est un problème, c'est de ne pas l'éditer après. Lovable, v0, Bolt — ce sont des outils utiles. Mais leur sortie est une matière première, pas un produit fini. Les designers professionnels qui les utilisent savent ça. Ils prennent la sortie comme un point de départ et passent ensuite trois à dix heures à la rendre unique.

Toi tu vas faire pareil, mais avec une checklist. C'est la suite.

Diagnostic en 5 minutes : ton site crie-t-il "généré par IA" ?

Avant de tout casser, mesure. Voici 12 questions, deux points par "oui". Score en bas du tableau.

| # | Question | Oui = 2 pts | |---|---|---| | 1 | Tu utilises Inter, ou Geist, ou la police par défaut Tailwind sans la changer ? | | | 2 | Ta couleur principale est blue-500, blue-600, indigo-500, ou un dégradé bleu→violet ? | | | 3 | Ton hero a un tag "✨ New: ..." ou "🚀 Coming soon" au-dessus du titre ? | | | 4 | Tes features sont présentées en 3 cards alignées avec une icône en haut ? | | | 5 | Tes icônes viennent toutes de Lucide ou Heroicons sans modification ? | | | 6 | Tes cards ont rounded-2xl ou rounded-3xl ? | | | 7 | Tu as au moins un shadow-md ou shadow-xl quelque part dans le hero ? | | | 8 | Ta section pricing est en 3 cards (Basic, Pro, Enterprise) alignées ? | | | 9 | Ton footer a 4 colonnes (Product, Company, Resources, Legal) ? | | | 10 | Ton CTA principal dit "Get started", "Get started for free", ou "Try it now" ? | | | 11 | Tu as un mockup de terminal avec 3 dots rouge/jaune/vert ? | | | 12 | Tu as un dégradé conique violet/rose/bleu en arrière-plan quelque part ? | |

Scoring :

• 0–6 pts : Tu as déjà fait du travail, ton site a une vraie identité. Lis quand même les 23 modifs, tu vas trouver des optimisations.
• 8–14 pts : Site moyen. Visible comme IA mais pas insurmontable. Les modifs 1, 2, 5, 7, 12 vont te donner un boost massif.
• 16–24 pts : Site très typé IA. Toutes les modifs sont à faire, mais c'est l'occasion d'apprendre. Compte 4 à 8 heures de travail bien réparti.

Note ton score quelque part. Tu vas le refaire après les modifs, et tu vas voir l'écart.

Les 23 modifications priorisées

On y va. Chaque modif suit le même format : pourquoi (le biais), avant (le code typique IA), après (une option moins clichée), et combien ça coûte en temps. Tu n'es pas obligé de les faire dans l'ordre — fais celles dont le gain visuel est élevé en premier.

1. Sortir d'Inter (passer à Space Grotesk + Space Mono ou autre duo)

Pourquoi. Inter est la police par défaut de la majorité des templates Next.js. Elle est partout. C'est une bonne police, lisible, neutre, mais elle est devenue le "Helvetica du web 2026" — invisible parce que vue partout. Geist (la police Vercel) est en train de devenir son équivalent dans l'écosystème v0. Si tu veux te démarquer, ça commence par là.

Avant (Lovable / v0 / Bolt par défaut) :

// app/layout.tsx
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Après (duo Space Grotesk pour le titre + Space Mono pour les détails techniques) :

// app/layout.tsx
import { Space_Grotesk, Space_Mono } from 'next/font/google'

const spaceGrotesk = Space_Grotesk({
  subsets: ['latin'],
  variable: '--font-grotesk',
  display: 'swap',
})

const spaceMono = Space_Mono({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-mono',
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="fr" className={`${spaceGrotesk.variable} ${spaceMono.variable}`}>
      <body className="font-grotesk">{children}</body>
    </html>
  )
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        grotesk: ['var(--font-grotesk)', 'system-ui', 'sans-serif'],
        mono: ['var(--font-mono)', 'ui-monospace', 'monospace'],
      },
    },
  },
}

Utilisation : titres en font-grotesk, métadonnées (timestamps, IDs, references) en font-mono. Ça donne instantanément un côté éditorial / technique qui sort du moule SaaS.

Alternatives à considérer :

• Geist Mono + Inter : si tu veux rester safe mais ajouter du caractère via la mono.
• JetBrains Mono + Manrope : très lisible, très tech, sort du moule SaaS.
• IBM Plex Sans + IBM Plex Mono : ton corporate-tech, très bien pour des sites B2B.
• Fraunces (display) + Inter : si tu veux un côté magazine, le contraste display/sans est très fort.
• Cormorant + Manrope : pour un côté luxe / éditorial.
• Söhne (payante) : si tu as un budget, c'est la police qui revient le plus dans les sites design "Nope, pas IA".

Coût : 10 minutes (installation + remplacement dans le body + ajustement des font- utilities sur tes titres et tes badges).

Gain : Très élevé. C'est probablement la modif au meilleur ratio. À elle seule, elle change la perception du site.

2. Tuer le bleu Tailwind par défaut (12 palettes alternatives)

Pourquoi. Le bleu Tailwind (blue-500, blue-600, indigo-500) est devenu en 2025-2026 ce que le bleu Facebook était en 2010 : la couleur "par défaut tech". Combinée à un dégradé from-blue-500 to-purple-600 ou from-indigo-500 via-purple-500 to-pink-500, c'est la signature absolue du SaaS IA. Si tu veux pas que ton site soit reconnu en 3 secondes comme IA, change ça en priorité.

Avant :

/* Lovable / v0 / Bolt par défaut */
--primary: #3b82f6;       /* blue-500 */
--primary-hover: #2563eb; /* blue-600 */
/* gradient hero */
.bg-hero { background: linear-gradient(to bottom right, #6366f1, #a855f7, #ec4899); }

Après — choisis une de ces 12 palettes alternatives, qui ont chacune une personnalité claire :

| # | Nom | Primary | Secondary | Usage typique | |---|---|---|---|---| | 1 | Charbon + Ambre | #1c1917 (stone-900) | #f59e0b (amber-500) | Éditorial, indé | | 2 | Bleu nuit + Or | #0f172a (slate-900) | #eab308 (yellow-500) | Luxe, conseil | | 3 | Vert mousse + Crème | #365314 (lime-900) | #fef3c7 (amber-100) | Vert, durable | | 4 | Brique + Crème | #7f1d1d (red-900) | #fef3c7 | Restauration, food | | 5 | Marine + Beige | #1e3a8a (blue-900) | #fde68a (amber-200) | Pro classique | | 6 | Aubergine + Pistache | #581c87 (purple-900) | #bef264 (lime-300) | Créatif, mode | | 7 | Noir total + Cyan acide | #0a0a0a | #06b6d4 (cyan-500) | Tech indé | | 8 | Beige cassé + Terracotta | #fef3c7 | #c2410c (orange-700) | Wellness, lifestyle | | 9 | Rose poudré + Vert sapin | #fce7f3 (pink-100) | #14532d (green-900) | Beauté, slow | | 10 | Bleu pétrole + Sable | #164e63 (cyan-900) | #fde68a | Maritime, voyage | | 11 | Blanc cassé + Rouge accent | #fafaf9 (stone-50) | #dc2626 (red-600) | Magazine, journalisme | | 12 | Lavande + Charbon | #ede9fe (violet-100) | #1c1917 | Calme, méditation |

Chaque palette est une combinaison primary + secondary, avec une neutre (gris/beige/blanc cassé) en arrière-plan. Choisis celle qui correspond à ton secteur, pas celle qui te plaît esthétiquement — la cohérence avec le métier est ce qui rend les couleurs crédibles.

/* Exemple — palette Charbon + Ambre */
:root {
  --background: #fafaf9;
  --foreground: #1c1917;
  --primary: #1c1917;
  --primary-foreground: #fafaf9;
  --accent: #f59e0b;
  --accent-foreground: #1c1917;
  --muted: #f5f5f4;
  --border: #e7e5e4;
}

Conseil bonus : évite les dégradés multicolores. Une seule couleur primary + une seule accent + une neutre, c'est suffisant. Les sites pros utilisent rarement plus de trois couleurs dans leur palette principale.

Coût : 20 minutes (édition du :root + remplacement des classes bg-blue-*, text-blue-*, border-blue-* par tes nouvelles variables).

Gain : Très élevé. Couplé à la modif #1, tu changes 60% de la perception visuelle du site.

3. Remplacer la grille de 3 cards features

Pourquoi. La grille de 3 cards est le pattern features par défaut du SaaS IA. Avant l'IA, les sites avaient des présentations features très variées : sections asymétriques, listes longues, schémas, photos avec texte autour, comparatifs, etc. L'IA a normalisé tout ça en "trois colonnes alignées avec une icône en haut, un H3, un paragraphe". C'est devenu le tic le plus reconnaissable.

Avant :

// Le classique 3-cards Lovable / Bolt
<section className="grid grid-cols-1 md:grid-cols-3 gap-6">
  {features.map((f) => (
    <div className="rounded-2xl border bg-white p-6 shadow-md">
      <div className="rounded-lg bg-blue-50 p-3 w-fit">
        <Icon className="h-6 w-6 text-blue-600" />
      </div>
      <h3 className="mt-4 text-xl font-semibold">{f.title}</h3>
      <p className="mt-2 text-slate-600">{f.description}</p>
    </div>
  ))}
</section>

Après — quatre alternatives selon ton ton :

Option A : section narrative (longue) — si tu as 4-6 features fortes, fais une section par feature, avec image/diagramme à gauche ou droite en alternant, et texte de l'autre côté. Ça donne un feeling de magazine ou de produit fait avec soin.

<section className="space-y-32">
  {features.map((f, i) => (
    <div
      key={f.title}
      className={`grid grid-cols-1 lg:grid-cols-12 gap-12 items-center ${
        i % 2 === 1 ? 'lg:[&>*:first-child]:order-2' : ''
      }`}
    >
      <div className="lg:col-span-7">
        <FeatureVisual feature={f} />
      </div>
      <div className="lg:col-span-5">
        <span className="font-mono text-sm uppercase tracking-widest">
          0{i + 1} / 0{features.length}
        </span>
        <h3 className="mt-4 text-4xl font-grotesk">{f.title}</h3>
        <p className="mt-6 text-lg leading-relaxed">{f.description}</p>
      </div>
    </div>
  ))}
</section>

Option B : grille bento asymétrique — si tu veux garder un format compact, fais une grille bento à 4-5 cells de tailles différentes, où la première feature occupe deux colonnes et les autres une.

<section className="grid grid-cols-12 gap-4">
  <Card className="col-span-12 md:col-span-7 row-span-2">{/* main */}</Card>
  <Card className="col-span-12 md:col-span-5">{/* small 1 */}</Card>
  <Card className="col-span-12 md:col-span-5">{/* small 2 */}</Card>
  <Card className="col-span-12 md:col-span-4">{/* small 3 */}</Card>
  <Card className="col-span-12 md:col-span-8">{/* main 2 */}</Card>
</section>

Option C : liste éditoriale numérotée — si ton produit est conceptuel ou si tu veux insister sur un process, fais une liste numérotée verticale, avec un trait vertical à gauche et chaque item ayant son numéro en mono.

<ol className="border-l border-stone-300 space-y-16 pl-8">
  {features.map((f, i) => (
    <li key={f.title} className="relative">
      <span className="absolute -left-12 font-mono text-2xl">
        {String(i + 1).padStart(2, '0')}
      </span>
      <h3 className="text-2xl font-grotesk">{f.title}</h3>
      <p className="mt-2 max-w-2xl">{f.description}</p>
    </li>
  ))}
</ol>

Option D : tableau comparatif — si tu compares ton produit à une alternative, un tableau comparatif est plus lisible et plus rare en 2026 que la grille 3-cards.

Coût : 1 heure pour passer de l'option par défaut à l'une de ces alternatives, plus le temps de retoucher le contenu pour qu'il fitte le nouveau format.

Gain : Élevé.

4. Asymétriser les sections (60/40, 70/30, pas 50/50)

Pourquoi. L'IA adore le 50/50. Hero avec texte à gauche, image à droite, parts égales. Section features avec image à droite, texte à gauche, parts égales. C'est équilibré, oui, mais ça crée un rythme visuel monotone et ça sent l'IA à plein nez. Les designers humains travaillent souvent en 60/40, 65/35, voire 70/30 selon la hiérarchie de l'information. C'est ce qui rend une page intéressante à parcourir.

Avant :

<section className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
  <div>
    <h2>Titre</h2>
    <p>Description...</p>
  </div>
  <div>
    <Image />
  </div>
</section>

Après — utilise une grille 12 colonnes et casse l'équilibre :

{/* Texte 65% / Image 35% — pour insister sur le texte */}
<section className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
  <div className="lg:col-span-7">
    <h2 className="text-5xl font-grotesk">Titre</h2>
    <p className="mt-6 text-lg max-w-2xl">Description longue...</p>
  </div>
  <div className="lg:col-span-4 lg:col-start-9">
    {/* col-start-9 laisse un gutter intentionnel à droite */}
    <Image />
  </div>
</section>

{/* Image 70% / Texte 30% — pour montrer un produit */}
<section className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
  <div className="lg:col-span-8 lg:col-start-1">
    <ProductScreenshot />
  </div>
  <div className="lg:col-span-3 lg:col-start-10">
    <p className="text-sm font-mono uppercase tracking-wider">
      Une note plus courte, qui complète l'image au lieu de la dupliquer.
    </p>
  </div>
</section>

Conseils :

• Varie le ratio entre les sections. Hero 60/40, features 70/30, CTA 100% centré, pricing 50/50, FAQ 80/20. Chaque section a son propre rythme.
• Laisse parfois des espaces blancs intentionnels (col-start-2 ou col-end-11 pour enlever des colonnes au début ou à la fin).
• Ne mets pas tout au centre. Le centrage massif est un autre tic IA. Aligne à gauche par défaut, ne centre que ce qui est volontairement important.

Coût : 1 heure (à étaler sur 3-5 sections principales).

Gain : Élevé. C'est subtil mais le visiteur sent que la page n'est pas un template.

5. Bannir `rounded-2xl` + `shadow-md` + `gradient-to-br`

Pourquoi. Ce trio est la signature des cards SaaS IA en 2026. Tu vas le voir sur 90% des sites Lovable et v0. Il a même son nom dans les communautés design : "le card AI default". Le problème n'est pas que ce soit moche — c'est que c'est la même chose partout, donc invisible.

Avant :

<div className="rounded-2xl shadow-md bg-gradient-to-br from-white to-slate-50 p-6">
  ...
</div>

Après — quatre alternatives, chacune avec une personnalité :

Option A : carte plate avec bordure nette (style éditorial/technique)

<div className="border border-stone-300 bg-white p-8">
  ...
</div>

Option B : carte avec ombre dure offset (style brutalist / indé)

<div
  className="border-2 border-stone-900 bg-stone-50 p-8"
  style={{ boxShadow: '6px 6px 0 0 #1c1917' }}
>
  ...
</div>

Option C : carte avec coin coupé (style technique / scanner)

<div
  className="border border-stone-300 bg-white p-8"
  style={{
    clipPath:
      'polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%)',
  }}
>
  ...
</div>

Option D : carte sans carte (juste le contenu, séparé par un trait)

<div className="border-t border-stone-300 pt-8">
  ...
</div>

Pour les ombres : si tu en mets, mets-en peu, et choisis-en une qui a du caractère. Pas shadow-md. Préfère une ombre douce et longue (shadow-[0_20px_60px_-15px_rgba(0,0,0,0.15)]), ou une ombre offset dure, ou pas d'ombre du tout. L'absence d'ombre est aussi un choix qui affirme.

Pour les dégradés : si tu veux garder un dégradé, fais-le très subtil (deux nuances proches du même gris) ou très radical (un dégradé conique avec une couleur signature, mais une seule, pas l'arc-en-ciel).

Coût : 15 minutes (chercher les rounded-2xl, shadow-md, gradient-to-br dans tes fichiers et remplacer).

Gain : Très élevé.

6. Remplacer les emojis par des SVG custom ou ASCII

Pourquoi. Les emojis dans les cards features (✨, 🚀, ⚡, 🎯, 💎, 🔥) sont LE marker IA n°1 en 2026. Aucun designer humain en 2026 ne met d'emoji dans un site B2B sérieux — sauf intentionnellement, avec un parti pris. La présence de plusieurs emojis dans des cards alignées est presque garantie d'être un site IA.

Avant :

const features = [
  { emoji: '✨', title: 'Magic', desc: '...' },
  { emoji: '🚀', title: 'Fast', desc: '...' },
  { emoji: '🔒', title: 'Secure', desc: '...' },
]

Après — trois options selon ton ton :

Option A : SVG custom (15 minutes par icône, mais signature très forte). Crée 3-5 icônes simples dans un éditeur (Figma, Affinity, Sketch, ou même Inkscape gratuit), exporte-les en SVG, mets-les dans /public/icons/. Une icône en SVG personnalisé, même très simple, sort immédiatement du moule.

import MagicIcon from '@/icons/magic.svg'
import FastIcon from '@/icons/fast.svg'

const features = [
  { Icon: MagicIcon, title: 'Magic', desc: '...' },
  { Icon: FastIcon, title: 'Fast', desc: '...' },
]

Option B : ASCII / typographie. Si tu n'as pas le temps de faire des SVG, utilise une notation typographique. Numéros en mono, ou caractères ASCII (+, *, >, →, ■, ◆, ▲).

const features = [
  { mark: '01', title: 'Magic', desc: '...' },
  { mark: '02', title: 'Fast', desc: '...' },
  { mark: '03', title: 'Secure', desc: '...' },
]

// rendu
<span className="font-mono text-2xl text-stone-400">{f.mark}</span>

Option C : Lucide ou Heroicons modifiés. Si tu veux garder une lib d'icônes, prends-en une moins courue (Tabler, Phosphor, Iconoir) et applique un traitement custom : taille fixée, couleur unique de ta palette, parfois rotation ou inversion.

import { Sparkles, Zap, Lock } from 'lucide-react'

// Dans le composant
<div className="border border-stone-900 p-2 w-fit">
  <Sparkles className="h-5 w-5" strokeWidth={1.25} />
</div>

Le strokeWidth={1.25} (au lieu du 2 par défaut) donne déjà à l'icône un style plus fin, plus éditorial, moins "icône SaaS".

Coût : 30 minutes pour l'option B (plus rapide), 1 à 3 heures pour l'option A (SVG).

Gain : Élevé.

7. Personnaliser le hero (asymétrie + suppression du tag-pill)

Pourquoi. Le hero IA standard est : tag-pill en haut ("✨ New: ..."), H1 centré gigantesque, sous-titre centré gris, deux CTA centrés, image en dessous ou à droite. C'est tellement répandu qu'un visiteur peut prédire le contenu d'un hero en voyant juste sa silhouette pendant une demi-seconde.

Avant :

<section className="text-center max-w-4xl mx-auto py-32">
  <span className="inline-flex items-center gap-2 rounded-full bg-blue-50 px-4 py-1 text-sm">
    ✨ New: Now with AI
  </span>
  <h1 className="mt-6 text-6xl font-bold tracking-tight">
    The all-in-one platform for X
  </h1>
  <p className="mt-6 text-xl text-slate-600">
    Build, deploy, and scale faster than ever before.
  </p>
  <div className="mt-8 flex justify-center gap-4">
    <button className="rounded-lg bg-blue-600 px-6 py-3 text-white">
      Get started
    </button>
    <button className="rounded-lg border px-6 py-3">Watch demo</button>
  </div>
</section>

Après — quatre patterns alternatifs :

Pattern A : asymétrique éditorial (notre préféré pour les outils tech indés)

<section className="grid grid-cols-12 gap-8 py-32">
  <div className="col-span-12 lg:col-span-7">
    <span className="font-mono text-xs uppercase tracking-widest text-stone-500">
      v0.4.2 — toolkit npm
    </span>
    <h1 className="mt-6 text-6xl font-grotesk leading-[1.05]">
      Une phrase concrète.<br />
      Sans buzzword.<br />
      <span className="text-amber-600">Avec un mot accent.</span>
    </h1>
    <p className="mt-8 text-lg max-w-xl">
      Un sous-titre qui parle au lecteur, pas au moteur de recherche.
      Tu peux faire deux ou trois lignes sans peur.
    </p>
    <div className="mt-10 flex flex-col sm:flex-row gap-4">
      <a href="#" className="border-2 border-stone-900 bg-stone-900 text-white px-6 py-3 font-mono text-sm">
        npm i sailop
      </a>
      <a href="#" className="font-mono text-sm underline underline-offset-4">
        Documentation →
      </a>
    </div>
  </div>
  <div className="col-span-12 lg:col-span-4 lg:col-start-9">
    <pre className="bg-stone-50 border border-stone-300 p-4 font-mono text-xs leading-relaxed">
{`$ npx sailop scan
[scan] 23 issues found
[scan] severity: high
[scan] see report.json`}
    </pre>
  </div>
</section>

Pattern B : hero "lettre" — plus de texte, moins de visuel, ton très direct

<section className="max-w-2xl py-32">
  <p className="font-mono text-xs uppercase">Lettre ouverte aux devs qui ont vibe-codé un site et qui le regrettent</p>
  <h1 className="mt-6 text-4xl font-grotesk leading-relaxed">
    Tu n'as pas mal fait. Tu as juste suivi les défauts. Voici comment changer.
  </h1>
  <p className="mt-8 text-lg">
    Sailop est un toolkit npm qui scanne ton site et te dit, ligne par ligne,
    ce qui ressemble aux 1000 autres sites Lovable.
  </p>
</section>

Pattern C : hero "scanner" (style technique / HUD)

<section className="relative bg-stone-950 text-stone-50 py-32 overflow-hidden">
  <div className="absolute inset-0 opacity-10 bg-[linear-gradient(to_right,#fff1_1px,transparent_1px),linear-gradient(to_bottom,#fff1_1px,transparent_1px)] bg-[size:32px_32px]" />
  <div className="relative max-w-5xl mx-auto px-8">
    <div className="font-mono text-xs uppercase tracking-widest text-amber-400">
      [ scan in progress // 23 hits detected ]
    </div>
    <h1 className="mt-8 text-7xl font-mono leading-none">
      anti<br />slop<br />toolkit
    </h1>
  </div>
</section>

Pattern D : hero minimal (style éditorial — texte seul, beaucoup d'espace)

<section className="py-48">
  <h1 className="text-7xl font-grotesk max-w-3xl leading-[1.1]">
    Une phrase, c'est tout.
  </h1>
</section>

Coût : 45 minutes pour adapter ton hero existant à un de ces patterns.

Gain : Très élevé. Le hero est la première chose qu'on voit, c'est là que la perception se joue.

8. Tuer le pricing en 3 cards alignées (Basic, Pro, Enterprise)

Pourquoi. Le pricing 3-cards aligné est aussi cliché que la grille 3-cards features. C'est le pattern par défaut de tous les builders, et il est devenu invisible à force d'être vu partout. Surtout, il pousse les utilisateurs à choisir le plan du milieu (le "Pro"), ce qui n'est pas toujours ce que tu veux pour ton produit.

Avant :

<section className="grid grid-cols-1 md:grid-cols-3 gap-6">
  <PricingCard plan="Basic" price="$9" />
  <PricingCard plan="Pro" price="$29" highlighted />
  <PricingCard plan="Enterprise" price="$99" />
</section>

Après — quatre alternatives :

Option A : un seul plan + un usage-based — si tu peux te le permettre (et c'est souvent vrai pour des outils B2C ou des dev tools indés), un seul prix transparent + un add-on usage-based fait gagner en clarté et sort de la grille 3-cards.

<section className="max-w-2xl py-24">
  <h2 className="text-4xl font-grotesk">Un prix, c'est tout.</h2>
  <div className="mt-12 border-2 border-stone-900 p-8">
    <div className="font-mono text-xs uppercase">Sailop Pro</div>
    <div className="mt-4 text-6xl font-grotesk">19€<span className="text-base">/mois</span></div>
    <ul className="mt-8 space-y-2 font-mono text-sm">
      <li>+ Scan illimité</li>
      <li>+ MCP server</li>
      <li>+ Mises à jour</li>
    </ul>
    <a href="#" className="mt-8 block bg-stone-900 text-white text-center py-3 font-mono">
      S'abonner
    </a>
  </div>
  <p className="mt-6 text-sm text-stone-600">
    Pas de free tier. Pas de Pro vs Enterprise. Si ça ne te suffit pas, écris-moi.
  </p>
</section>

Option B : tableau comparatif — plus adapté si tu as vraiment 3 plans avec des différences importantes. Un tableau dense, en mono, avec des "✓" et des "—", est beaucoup plus lisible qu'un grid de cards et est rare en 2026.

<table className="w-full font-mono text-sm">
  <thead>
    <tr className="border-b-2 border-stone-900">
      <th className="text-left py-4">Feature</th>
      <th className="text-right py-4">Solo (9€)</th>
      <th className="text-right py-4">Team (29€)</th>
      <th className="text-right py-4">Studio (99€)</th>
    </tr>
  </thead>
  <tbody>
    <tr className="border-b border-stone-300">
      <td className="py-3">Scans / mois</td>
      <td className="text-right">100</td>
      <td className="text-right">1 000</td>
      <td className="text-right">∞</td>
    </tr>
    {/* ... */}
  </tbody>
</table>

Option C : pricing en accordéon ou en liste verticale — chaque plan est un bloc en pleine largeur, l'un en dessous de l'autre, ce qui rend chaque plan plus visible et plus narratif. Bien quand chaque plan vise une persona très différente.

Option D : pricing slider usage-based. Tu mets un slider du nombre d'utilisateurs / requêtes / sites, et le prix se calcule. Très efficace pour des outils dev. Plus rare, plus engageant.

Coût : 45 minutes.

Gain : Élevé.

9. Une longue citation au lieu d'un slider de testimonials

Pourquoi. Le slider de 3-5 testimonials avec photos rondes, étoiles, et logos d'entreprises est devenu un cliché aussi reconnaissable que la grille de features. En plus, il est rarement crédible (les photos sont souvent des stock photos, les logos sont parfois là sans autorisation), et il dilue l'effet : 5 témoignages courts ont moins d'impact qu'un seul témoignage long et concret.

Avant :

<section className="text-center">
  <h2>Loved by developers</h2>
  <div className="grid grid-cols-3 gap-6 mt-12">
    {testimonials.map((t) => (
      <div className="rounded-2xl bg-white p-6 shadow-md">
        <div className="flex gap-1">★★★★★</div>
        <p>"Game-changer for our team."</p>
        <div className="flex items-center gap-3 mt-4">
          <Image src={t.photo} className="rounded-full" />
          <div>
            <div>{t.name}</div>
            <div className="text-sm text-slate-500">{t.role}</div>
          </div>
        </div>
      </div>
    ))}
  </div>
</section>

Après :

<section className="max-w-3xl mx-auto py-32">
  <p className="font-mono text-xs uppercase tracking-widest">
    Témoignage — Mars 2026
  </p>
  <blockquote className="mt-8 text-2xl font-grotesk leading-relaxed">
    "Avant Sailop, je passais une heure à comparer mon site à 30 autres
    sur Awwwards en me demandant pourquoi le mien semblait moins pro.
    En réalité, j'avais 23 tics IA dans mon CSS, dont 19 que je n'aurais
    jamais repérés sans aide. Le scan a pris 4 secondes. Les corrections
    ont pris 3 heures. Le résultat : un site dont je suis fier et que
    deux clients m'ont félicité d'avoir refait."
  </blockquote>
  <footer className="mt-12 flex items-center gap-4">
    <div className="h-px flex-1 bg-stone-300" />
    <div className="font-mono text-sm">
      <div>Marie L., dev solo</div>
      <div className="text-stone-500">Studio indé, Paris</div>
    </div>
  </footer>
</section>

Une citation longue, concrète, qui raconte un avant/après précis, vaut beaucoup plus que cinq citations vagues. Et elle prend moins de place sur la page.

Coût : 30 minutes (l'essentiel du temps est dans la rédaction de la citation, pas dans le code).

Gain : Moyen mais cumulatif (ça crédibilise le produit en plus de personnaliser le site).

10. Footer non-4-colonnes (Product, Company, Resources, Legal)

Pourquoi. Le footer 4-colonnes "Product / Company / Resources / Legal" est un autre tic IA universel. Sur 90% des sites Lovable et v0, il est exactement structuré comme ça, avec les mêmes catégories et des liens fictifs ou pointant vers des pages 404.

Avant :

<footer className="grid grid-cols-1 md:grid-cols-4 gap-8 py-12">
  <div>Logo + tagline</div>
  <div>Product (Features, Pricing, Changelog)</div>
  <div>Company (About, Blog, Careers)</div>
  <div>Resources (Docs, Help, Contact)</div>
  <div>Legal (Privacy, Terms)</div>
</footer>

Après — trois alternatives :

Option A : footer minimal (3-4 lignes en mono, pas de colonnes)

<footer className="border-t border-stone-300 py-12">
  <div className="max-w-5xl mx-auto px-8 font-mono text-sm flex flex-wrap gap-6 justify-between">
    <div>
      <div>Sailop — toolkit npm anti-AI-slop</div>
      <div className="mt-2 text-stone-500">Made by un humain, à Paris.</div>
    </div>
    <div className="flex gap-6">
      <a href="/docs">Docs</a>
      <a href="/blog">Blog</a>
      <a href="/contact">Contact</a>
      <a href="/privacy">Privacy</a>
    </div>
  </div>
</footer>

Option B : footer "lettre" (un paragraphe + signature)

<footer className="border-t border-stone-900 py-16">
  <div className="max-w-2xl mx-auto px-8">
    <p className="font-grotesk leading-relaxed">
      Sailop est un projet solo. Pas de venture capital, pas de team de 50.
      Si tu as une question, écris-moi à [email protected] et je réponds
      en moins de 48 heures.
    </p>
    <p className="mt-6 font-mono text-sm text-stone-500">
      © 2026 — version 0.4.2 — Privacy / Terms / Source
    </p>
  </div>
</footer>

Option C : footer "scanner" (esthétique HUD, pour les sites tech)

<footer className="bg-stone-950 text-stone-50 font-mono text-xs">
  <div className="max-w-7xl mx-auto px-8 py-8 border-t border-amber-500/20">
    <div className="flex items-center justify-between">
      <div>[ system online // last update 2026-04-28 ]</div>
      <div>v0.4.2 / docs / privacy / terms</div>
    </div>
  </div>
</footer>

Coût : 30 minutes.

Gain : Moyen.

11. Tuer le terminal mockup à 3 dots colorés

Pourquoi. Le terminal mockup avec les 3 dots rouge / jaune / vert dans le coin gauche, accompagné d'un faux output $ npm install ... ou $ yarn dev, est un cliché v0 / Bolt absolu. Il signale au visiteur "site fait par une IA qui ne sait pas comment montrer un produit autrement". Si tu veux montrer du code ou un terminal, fais-le sans le mockup MacOS.

Avant :

<div className="rounded-xl bg-slate-950 overflow-hidden">
  <div className="flex gap-2 p-3 border-b border-slate-800">
    <span className="h-3 w-3 rounded-full bg-red-500" />
    <span className="h-3 w-3 rounded-full bg-yellow-500" />
    <span className="h-3 w-3 rounded-full bg-green-500" />
  </div>
  <pre className="p-6 text-sm text-green-400 font-mono">
    $ npm install awesome-package
    + [email protected]
  </pre>
</div>

Après — quatre alternatives :

Option A : code sans chrome (juste un bloc avec une bordure simple)

<div className="border border-stone-300 bg-stone-50">
  <div className="border-b border-stone-300 px-4 py-2 font-mono text-xs">
    install.sh
  </div>
  <pre className="p-4 text-sm font-mono">
{`#!/bin/bash
npm install sailop
npx sailop init`}
  </pre>
</div>

Option B : code en pleine largeur, sans card (style éditorial)

<pre className="border-l-2 border-amber-500 pl-6 py-4 font-mono text-sm">
{`$ npx sailop scan
[scan] reading 14 files
[scan] 23 issues found
[scan] see report.json`}
</pre>

Option C : commande inline (pour CTA install)

<div className="inline-flex items-center gap-3 border border-stone-300 px-4 py-2">
  <span className="font-mono text-xs text-stone-500">$</span>
  <code className="font-mono">npm i sailop</code>
  <button className="ml-2 text-xs underline">copier</button>
</div>

Option D : faux output ASCII (dans le ton scanner)

<pre className="font-mono text-xs leading-tight">
{`┌─────────────────────────────┐
│  SCAN COMPLETE              │
├─────────────────────────────┤
│  files scanned     ::    14 │
│  issues detected   ::    23 │
│  severity high     ::     7 │
└─────────────────────────────┘`}
</pre>

L'ASCII art a un côté hacker / vintage / unique qui sort complètement du moule SaaS et qui colle bien aux dev tools indés.

Coût : 20 minutes.

Gain : Élevé pour les sites tech / dev tools.

12. Tuer le tag-pill "✨ New: ..." au-dessus du H1

Pourquoi. Cette pilule au-dessus du H1, avec un emoji et un texte type "Now with AI", "Coming soon", "Just shipped", "Beta open" — c'est le marqueur IA n°1 dans le hero. Plus reconnaissable que tout le reste.

Avant :

<span className="inline-flex items-center gap-2 rounded-full bg-purple-50 px-4 py-1 text-sm">
  ✨ New: Now with AI
</span>

Après — trois alternatives :

Option A : enlever totalement. Le hero n'a pas besoin d'une notification. Si tu as quelque chose de neuf à annoncer, mets-le en bas de page, dans une section dédiée, ou dans un email à tes utilisateurs.

Option B : remplacer par une métadonnée mono. Si tu veux donner une indication de version, de date ou de statut, fais-le en font-mono discret, sans emoji, sans pilule.

<span className="font-mono text-xs uppercase tracking-widest text-stone-500">
  v0.4.2 — toolkit npm — avril 2026
</span>

Option C : remplacer par une vraie phrase. Si tu as quelque chose à annoncer, écris une phrase courte qui dit pourquoi c'est important pour le lecteur, pas pour toi.

<p className="text-sm border-l-2 border-amber-500 pl-3">
  Mise à jour 0.4.2 : le scan détecte maintenant les sites Bolt en plus de Lovable et v0.
</p>

Coût : 5 minutes.

Gain : Élevé. C'est rapide, et ça enlève un signal majeur "site IA".

13. Animations : rien ou signature unique (pas fade-in-up)

Pourquoi. L'IA met du fade-in-up ou fade-in partout au scroll. Chaque section apparaît en montant de 20 pixels avec une opacité qui passe de 0 à 1. C'est devenu invisible à force d'être vu. Et surtout, c'est souvent mal exécuté (timing trop long, déclenchement trop tardif, ce qui rend la lecture pénible).

Avant (Framer Motion classique) :

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6 }}
>
  ...
</motion.div>

Après — trois options :

Option A : aucune animation. Sérieusement. Sur 80% des sites, l'absence d'animation est plus pro que les animations par défaut. Le contenu se charge, on le lit, on scrolle. Pas besoin de faire entrer chaque paragraphe.

Option B : une seule signature animation. Choisis UNE animation qui sera ta signature, et utilise-la partout, mais nulle part ailleurs. Par exemple : un trait horizontal qui s'étend de gauche à droite à l'apparition d'un H2, et c'est tout. Ou un compteur qui s'incrémente sur tes chiffres clés. Ou un effet de typing sur ton tagline (avec parcimonie). Une signature, pas dix.

{/* Signature : trait qui s'étend sous le H2 */}
<h2 className="text-4xl font-grotesk relative inline-block">
  Titre de section
  <span className="absolute -bottom-2 left-0 h-px w-full bg-amber-500 origin-left animate-[scaleX_0.6s_ease-out]" />
</h2>

Option C : animations contextuelles, jamais "scroll-fade". Si tu animes, anime ce qui réagit à une interaction utilisateur (hover sur un bouton, clic sur un menu, ouverture d'un accordion). N'anime pas l'apparition au scroll — c'est ce qui sent le plus IA et c'est ce qui ralentit le plus la lecture.

Coût : 1 heure (à étaler — chercher les motion.* dans tes fichiers et soit les enlever, soit les remplacer par ta signature unique).

Gain : Moyen.

14. Curseur custom (avec parcimonie)

Pourquoi. Un curseur custom est une signature très forte qui sort tout de suite du moule. Mais c'est aussi un risque : si c'est mal fait, c'est pénible et inutilisable. À utiliser seulement si tu sais ce que tu fais et si ton site supporte ce niveau de parti pris.

Quand l'utiliser : sites portfolios, agences créatives, projets artistiques, dev tools très typés.

Quand l'éviter : SaaS B2B classique, e-commerce, dashboard, tout ce qui demande de la productivité.

Implémentation simple (un cercle qui suit le curseur, sans cacher le curseur natif) :

'use client'
import { useEffect, useState } from 'react'

export function CustomCursor() {
  const [pos, setPos] = useState({ x: 0, y: 0 })
  const [hover, setHover] = useState(false)

  useEffect(() => {
    const move = (e) => setPos({ x: e.clientX, y: e.clientY })
    const enter = () => setHover(true)
    const leave = () => setHover(false)
    window.addEventListener('mousemove', move)
    document.querySelectorAll('a, button').forEach((el) => {
      el.addEventListener('mouseenter', enter)
      el.addEventListener('mouseleave', leave)
    })
    return () => {
      window.removeEventListener('mousemove', move)
    }
  }, [])

  return (
    <div
      className={`fixed pointer-events-none z-50 mix-blend-difference rounded-full border border-white transition-[width,height] ${
        hover ? 'w-12 h-12' : 'w-4 h-4'
      }`}
      style={{
        left: pos.x,
        top: pos.y,
        transform: 'translate(-50%, -50%)',
      }}
    />
  )
}

Conseils :

• Garde le curseur natif visible. Cacher le curseur est très risqué côté accessibilité.
• Évite les curseurs avec lag (smooth-follow) qui rendent la navigation flottante.
• Désactive le curseur custom sur mobile (il n'a aucun sens).
• Désactive sur prefers-reduced-motion.

Coût : 1 heure.

Gain : Faible à moyen, très dépendant du contexte.

15. Page 404 unique

Pourquoi. La page 404 par défaut Next.js / Lovable / v0 est "Page not found" + un bouton "Go home". Elle est rare à voir (parce que les visiteurs ne l'atteignent pas souvent), mais quand on l'atteint, elle est mémorable si elle est unique. C'est une mini opportunité de signature.

Avant :

// app/not-found.tsx (default Next.js)
export default function NotFound() {
  return (
    <div className="text-center">
      <h1>404 — Not Found</h1>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

Après — quatre exemples :

Exemple A : 404 "scanner"

export default function NotFound() {
  return (
    <div className="min-h-screen bg-stone-950 text-stone-50 font-mono p-12">
      <pre className="text-xs">
{`┌────────────────────────────────────────┐
│  ERROR 404                             │
├────────────────────────────────────────┤
│  scanned    ::  /la-page-que-tu-veux   │
│  status     ::  not found              │
│  timestamp  ::  ${new Date().toISOString()}  │
└────────────────────────────────────────┘`}
      </pre>
      <p className="mt-12">→ <a href="/" className="underline">retourner au scan principal</a></p>
    </div>
  )
}

Exemple B : 404 "lettre"

export default function NotFound() {
  return (
    <div className="max-w-2xl mx-auto py-32 px-8">
      <p className="font-mono text-xs uppercase">404 — page introuvable</p>
      <h1 className="mt-6 text-4xl font-grotesk leading-relaxed">
        Cette page n'existe pas, ou plus, ou pas encore.
      </h1>
      <p className="mt-6">
        Si tu cherchais quelque chose en particulier, écris-moi à
        [email protected] et je vois ce que je peux faire.
        Sinon, le retour à la maison est <a href="/" className="underline">par ici</a>.
      </p>
    </div>
  )
}

Exemple C : 404 "ASCII art" — un dessin ASCII de naufrage, de boussole, de carte au trésor, de panneau "perdu". Adapte au thème du site.

Exemple D : 404 fonctionnelle — un champ de recherche au lieu d'un bouton home. Plus utile pour le visiteur.

Coût : 45 minutes.

Gain : Faible (peu de visiteurs voient cette page) mais c'est un détail qui contribue à la cohérence d'ensemble.

16. Loading state non-spinner

Pourquoi. Le spinner circulaire est universel, donc invisible. Si tu veux que tes loading states soient mémorables et signature, remplace-les par autre chose.

Avant :

<svg className="animate-spin h-5 w-5">
  <circle className="opacity-25" ... />
  <path className="opacity-75" ... />
</svg>

Après — quatre alternatives :

Option A : compteur ASCII

const [frame, setFrame] = useState(0)
const frames = ['|', '/', '─', '\\']
useEffect(() => {
  const id = setInterval(() => setFrame((f) => (f + 1) % 4), 100)
  return () => clearInterval(id)
}, [])
return <span className="font-mono">{frames[frame]} chargement...</span>

Option B : barre de progression linéaire (plus calme, plus pro)

<div className="h-px w-32 bg-stone-200">
  <div className="h-full bg-stone-900 animate-[grow_1s_ease-out_infinite]" />
</div>

Option C : pulse sur le squelette (skeleton loading) plutôt que spinner

<div className="space-y-2">
  <div className="h-4 bg-stone-200 animate-pulse w-3/4" />
  <div className="h-4 bg-stone-200 animate-pulse w-1/2" />
  <div className="h-4 bg-stone-200 animate-pulse w-2/3" />
</div>

Option D : mot qui change ("scan en cours", puis "lecture des fichiers", puis "analyse des patterns", etc.) — donne au loading un côté narratif.

Coût : 30 minutes.

Gain : Faible.

17. Voix éditoriale non-"We help X do Y"

Pourquoi. L'IA produit en moyenne du copy générique, structuré comme : "We help [audience] [verb] [thing] faster / better / smarter." C'est partout. C'est invisible. Et c'est la signature copy IA n°1.

Avant (typique Lovable / Bolt) :

We help developers ship better products faster.
The all-in-one platform for modern teams.
Build, deploy, and scale faster than ever before.
Empowering creators worldwide.
The smart way to grow your business.

Après — voici cinq directions différentes pour ta voix éditoriale, choisis-en une :

Direction A : voix "lettre / personnelle"

> "Sailop est un toolkit npm que j'ai écrit parce que j'en avais marre que mon site ressemble à 100 autres. Tu installes, tu lances le scan, tu vois ce qui cloche."

Direction B : voix "technique / mono"

> "Sailop scanne le code de ton site et détecte 17 patterns visuels typiquement IA. Output JSON. Compatible Tailwind, Next.js, Astro. MIT."

Direction C : voix "manifeste"

> "Tous les sites IA se ressemblent. Pas par paresse, par défaut. Sailop est une réponse : un scanner qui te dit, ligne par ligne, ce qui crie 'généré par IA' dans ton CSS, et comment le réparer."

Direction D : voix "constatation factuelle"

> "En 2026, la plupart des sites Lovable, v0 et Bolt utilisent les mêmes 8 polices, les mêmes 3 dégradés, et les mêmes 5 patterns de hero. Sailop détecte ces patterns dans ton code."

Direction E : voix "promesse simple, sans hype"

> "Sailop scanne ton site. Il liste les choses qui ressemblent à du Lovable / v0 / Bolt par défaut. Tu corriges. Ton site est unique."

Conseils :

• Évite "we", "us", "our team" si tu es solo. Dis "je", "moi", c'est plus crédible.
• Évite les superlatifs ("the best", "the most powerful", "the only X you'll ever need").
• Évite les structures listicle ("Build, deploy, and scale" — c'est une signature IA).
• Préfère le concret ("23 patterns détectés", "scan en 4 secondes") à l'abstrait ("powerful", "efficient", "intuitive").

Coût : 30 minutes (plus le temps de réfléchir à ton positionnement, qui peut prendre plus longtemps).

Gain : Élevé.

18. Images non-Unsplash-blue-gradient

Pourquoi. Les images Unsplash téléchargées par défaut par Lovable / v0 ont des biais signature : photos de mains tapant sur un MacBook, code sur écran avec dégradé bleu, équipes diverses souriant en open space, abstraits dégradés bleu/violet. Tu les as vues 1000 fois.

Avant : photo Unsplash "team meeting" en haut de la page About.

Après — cinq alternatives :

Option A : pas d'image. Beaucoup de sites pros n'ont pas de photos, juste de la typo et de la couleur. C'est radical et ça marche.

Option B : tes propres photos. Une vraie photo de toi, ton bureau, ton chien, ton produit dans ses conditions réelles. Si tu n'as pas de photographe, ton iPhone suffit, du moment que la lumière est bonne.

Option C : illustrations custom. Si tu as accès à un illustrateur freelance, même budget modeste, c'est un investissement énorme en signature visuelle. Sinon, fais-en toi-même en SVG simple.

Option D : photos archives, scans, polaroids. Pour un site éditorial ou personnel, des photos qui ont du grain, qui sont datées, qui ont une texture, sortent du moule "stock photo blue gradient".

Option E : screenshots produit, mais non-mockup MacOS. Si tu montres ton produit, fais-le en pleine largeur, sans cadre, sans 3 dots colorés, sans dégradé en arrière-plan. Le screenshot brut dans un cadre blanc cassé fait pro.

Conseils si tu utilises quand même Unsplash :

• Évite les recherches "team", "office", "code", "developer", "ai", "future". Trop saturées.
• Préfère les photographes peu connus, les photos avec moins de 1000 téléchargements.
• Recadre toujours, ne prends jamais l'image originale.
• Applique un traitement (noir et blanc, duotone avec ta palette, grain ajouté) — ça uniformise et ça personnalise.

Coût : 45 minutes.

Gain : Moyen.

19. Logo sans cercle dégradé violet

Pourquoi. Le logo IA par défaut est : un cercle ou un carré arrondi avec un dégradé violet/rose/bleu, et soit une lettre blanche au centre, soit une icône abstraite (étincelle, montagne, infini). Tu en as vu 100 cette semaine.

Avant :

<div className="rounded-full bg-gradient-to-br from-purple-500 to-pink-500 h-10 w-10 flex items-center justify-center text-white font-bold">
  S
</div>

Après — quatre alternatives :

Option A : juste le nom en typo signature. Aucune icône. Le nom écrit dans ta police signature (Space Grotesk, JetBrains Mono, Manrope...) avec un traitement (capitales, monospace, weight précis). C'est ce que font la plupart des sites tech indés en 2026.

<span className="font-mono uppercase tracking-widest text-sm">
  sailop
</span>

Option B : icône SVG simple, monocouleur, sans dégradé. Une icône abstraite que tu dessines toi-même (ou commandes), monocouleur, sans gradient, posée à côté du nom.

<div className="flex items-center gap-2">
  <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor">
    <path d="M12 2 L22 22 L2 22 Z" />
  </svg>
  <span className="font-grotesk">Sailop</span>
</div>

Option C : ASCII / typographique. Le logo est un caractère typo détourné — un signe [ ], un *, un >, un ■, un ◆. Très efficace pour les dev tools.

<span className="font-mono">[sailop]</span>

Option D : monogramme géométrique simple, sans dégradé. Si tu tiens à une icône, fais-la en monocouleur ou en deux couleurs maximum, jamais en dégradé violet/rose/bleu.

Coût : 30 minutes (plus si tu fais designer un logo).

Gain : Élevé.

20. Microcopy non-"Get started"

Pourquoi. "Get started" / "Get started for free" / "Try it now" / "Start free trial" — quatre variantes, et 95% des sites IA en utilisent une. Ces formules sont devenues invisibles. Tu peux faire mieux avec à peine plus d'effort.

Avant :

<button>Get started for free</button>
<button>Try it now</button>
<button>Watch demo</button>

Après — par type de CTA :

Pour un install npm / dev tool :

• npm i sailop
• npx sailop scan
• lire la doc
• voir le code source

Pour un SaaS payant :

• créer un compte
• commencer le scan
• voir un exemple
• parler à un humain

Pour un site portfolio / agence :

• voir les projets
• discuter d'un projet
• lire l'approche
• télécharger le PDF

Pour un produit physique / e-commerce :

• commander
• voir les détails
• ajouter au panier
• lire l'histoire

Conseils :

• Préfère les verbes concrets aux génériques. "Commencer le scan" > "Get started".
• Évite les emojis dans les boutons (autre signature IA).
• Adapte le ton au reste du site — si ton copy est en français, ne mets pas le CTA en anglais (sauf parti pris assumé).
• Utilise minuscules ou capitales selon ton ton, mais sois cohérent.

Coût : 20 minutes.

Gain : Moyen.

21. Form fields non-rounded-default

Pourquoi. Les forms par défaut Lovable / v0 sont en rounded-md ou rounded-lg avec une bordure border-input. C'est le style shadcn/ui par défaut, qui est devenu reconnaissable.

Avant :

<input className="rounded-md border border-input px-3 py-2" />

Après — trois options :

Option A : flat sans border-radius

<input className="border border-stone-300 px-3 py-2 focus:border-stone-900 focus:outline-none" />

Option B : underline-only

<input className="border-b-2 border-stone-300 focus:border-stone-900 px-1 py-2 outline-none" />

Option C : box dur avec ombre offset (style brutalist)

<input
  className="border-2 border-stone-900 px-3 py-2 focus:outline-none focus:translate-x-[-2px] focus:translate-y-[-2px]"
  style={{ boxShadow: '4px 4px 0 0 #1c1917' }}
/>

Coût : 20 minutes.

Gain : Faible.

22. OG image custom

Pourquoi. L'OG image (l'image qui apparaît quand quelqu'un partage ton site sur X, LinkedIn, Slack, Discord) est un détail qui fait énormément. Sur Lovable / v0 / Bolt, l'OG image par défaut est soit absente (image générique du builder), soit un screenshot automatique de la page d'accueil. Avoir une vraie OG image custom et signée signale "vrai projet, vraie attention".

Avant : pas d'OG image, ou screenshot auto.

Après : crée une image PNG de 1200×630 pixels, dans ta typographie et ta palette, qui contient :

• Ton logo / nom (en grand)
• Une phrase courte (ton tagline ou la promesse)
• Une signature visuelle (un trait, une icône, une grille, un coin coupé)
• Pas de photo générique, pas d'emoji

// app/layout.tsx
export const metadata = {
  title: 'Sailop — toolkit npm anti-AI-slop',
  description: '...',
  openGraph: {
    title: 'Sailop',
    description: '...',
    url: 'https://sailop.com',
    siteName: 'Sailop',
    images: [
      {
        url: 'https://sailop.com/og.png',
        width: 1200,
        height: 630,
        alt: 'Sailop — toolkit npm anti-AI-slop',
      },
    ],
    locale: 'fr_FR',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Sailop',
    description: '...',
    images: ['https://sailop.com/og.png'],
  },
}

Conseils pour designer ton OG image :

• Format 1200×630 px exactement.
• Pas plus de 8 mots à l'écran.
• Police lisible à petite taille (parce que les previews sont parfois rognées).
• Évite les dégradés violet/rose/bleu — ils signalent IA même en miniature.
• Test avec opengraph.xyz (pas de promo, c'est juste un outil pratique pour prévisualiser).

Coût : 1 heure.

Gain : Moyen.

23. Métadonnées + sitemap + robots non-default

Pourquoi. Cette modif est plus SEO que visuelle, mais elle compte parce qu'elle signale "site sérieux, pas généré-déployé en 3 minutes". Les sites IA ont souvent des métadonnées par défaut, pas de sitemap, et un robots.txt vide ou incorrect.

À faire :

Métadonnées par page. Chaque page a son propre