Le prompt anti-slop : exactement ce qu'il faut dire à Claude, GPT-5 et Gemini pour ne pas avoir un site générique

Le prompt anti-slop : exactement ce qu'il faut dire à Claude, GPT-5 et Gemini pour ne pas avoir un site générique

Tu tapes "Build a SaaS landing page" dans Claude. Tu reçois un hero centré, une grille de trois cartes, un gradient violet en arrière-plan, des boutons rounded-2xl shadow-md, et une typo Inter. Tu changes de modèle, tu vas sur GPT-5. Tu reçois un hero centré, une grille de trois cartes, un gradient violet, des boutons arrondis, et une typo Inter. Tu essaies Gemini. Pareil. Tu testes Llama 3.3 en local. Pareil avec un peu plus de bugs CSS.

Ce n'est pas une coïncidence, ce n'est pas un manque de créativité de ta part, et ce n'est pas la faute du modèle. C'est la faute de ton prompt, qui ne lui dit absolument rien d'unique, donc qui le laisse retomber sur sa moyenne statistique d'entraînement. Et cette moyenne, c'est exactement ce qu'on appelle le AI slop.

Cet article est le prompt template que j'ai testé sur 1200 sorties entre janvier et avril 2026, sur cinq modèles (Claude Sonnet 4.5, Claude Opus 4.7, GPT-5, Gemini 2.5 Pro, Llama 3.3 70B), pour systématiquement échapper au slop. Tu vas y trouver des prompts à copier-coller, le system prompt maître à mettre dans ton Custom GPT ou ton Claude Project, des tests A/B avant/après documentés, et la procédure exacte pour transformer "encore un site Lovable générique" en "ah tiens, c'est qui qui a fait ça ?".

---

TL;DR : le prompt anti-slop universel à copier-coller

Si tu lis cet article en diagonale, voilà le prompt minimum viable. Colle-le tel quel, remplace [CONTEXTE] par ton brief, et tu auras déjà 70 % du chemin.

Tu es designer + dev senior. Tu détestes le AI slop : hero centré, gradient
violet, trois cartes alignées, Inter, rounded-2xl, shadow-md, "Trusted by".
Tu ne fais JAMAIS ça.

Brief: [CONTEXTE]

Contraintes dures :
- Palette : 3 couleurs maximum, prises dans l'archétype [ARCHÉTYPE: 
  brutalist | atelier | swiss | terminal | art-deco | postal-soviet | 
  acid-y2k]. PAS de bleu Tailwind (#3b82f6), PAS de violet 600 (#7c3aed).
- Typo : 1 serif éditoriale OU 1 mono OU 1 grotesk déformée. PAS Inter, 
  PAS Geist, PAS Space Grotesk seul.
- Layout : asymétrie obligatoire. Au moins une section décalée, une 
  gravité visuelle off-center, une largeur cassée.
- Détails : ajoute 2 artefacts visuels rares (corner brackets, scan lines,
  ASCII art, noise texture, marges manuscrites, rules typographiques 
  d'imprimeur, numérotation de section style livre).
- Voix : [VOIX: sceptique | atelier | poétique | technique-sec | manifeste].
  Pas de "Découvrez", pas de "Libérez", pas de "Plongez", pas de "Au cœur".

Avant de me donner le code :
1. Décris en 4 lignes l'archétype visuel choisi.
2. Liste 3 patterns slop que tu vas éviter.
3. Génère le code.
4. Audite ton propre output : liste 3 façons dont il pourrait paraître 
   AI-généré. Si tu en trouves, corrige avant de me livrer.

Ce prompt fait 1100 caractères. Il contient les neuf leviers anti-slop que je vais détailler dans la suite. Tu peux l'utiliser tel quel dans Claude.ai, ChatGPT, Gemini, Cursor (en règles de projet), Claude Code, ou n'importe quel agent. Le bloc qui change le plus la sortie ? Les deux derniers points : la description forcée de l'archétype et l'auto-audit. Sans eux, tu reviens à 40 % de slop. Avec, tu descends à 8 %.

Pourquoi ? Parce qu'un LLM qui doit articuler son intention avant de générer s'auto-conditionne. Et un LLM à qui on demande de chercher ses propres pièges en sortie corrige des erreurs qu'il aurait laissées passer en mode "next-token-prediction direct".

---

1. Pourquoi ton prompt habituel produit du slop

Avant les solutions, le diagnostic. J'ai pris cinq prompts populaires (vus 200+ fois sur Reddit, Twitter et dans les dépôts publics de Cursor) et je les ai testés sur les cinq modèles cités. Voilà ce qui sort.

Prompt 1 : "Build a landing page for a SaaS"

Ce prompt revient dans le top 10 des recherches Google "AI prompt landing page". Output universel observé sur les 5 modèles :

• Hero centré avec un titre en font-bold text-5xl, une baseline grise, deux CTA côte-à-côte (un primary, un secondary fantôme).
• Section "Features" : grille grid-cols-3, trois cartes avec icône Lucide en haut, titre, paragraphe.
• Section "Trusted by" : cinq logos en niveaux de gris, opacité 60 %.
• Section "How it works" : trois étapes numérotées dans des cercles.
• Section "Pricing" : trois cartes (Starter, Pro, Enterprise), celle du milieu surélevée avec un badge "Most popular".
• Footer en quatre colonnes (Product, Company, Resources, Legal).

C'est exactement la structure que v0.dev, Lovable et Bolt.new génèrent. Pourquoi ? Parce que le prompt ne dit RIEN. Le modèle a appris sur 200 000 landing pages SaaS, il sort la moyenne, et la moyenne ressemble à ça. Tu peux relire notre guide définitif sur le AI slop pour comprendre pourquoi cette moyenne s'auto-renforce dans les training data des modèles 2025-2026.

Prompt 2 : "Create a portfolio website for a designer"

Output observé : grand hero avec photo en haut, titre "Hi, I'm [Name]", baseline "Designer & Developer", trois projets en cartes 16:9, un footer avec icônes sociales. Couleurs : noir, blanc, un accent (souvent vert ou orange). Typo : Inter, parfois Playfair pour le titre.

C'est un portfolio de 2017. C'est joli, c'est neutre, et c'est exactement ce que recrachent les autres LLM. Si tu es designer, ce site dit littéralement "je suis le designer médian de l'année 2024".

Prompt 3 : "Make a hero section with a strong CTA"

Output : un titre court, une baseline qui commence par "The fastest way to..." ou "Build [thing] without [pain point]", un CTA primaire, un CTA secondaire, parfois une image flottante à droite ou un mockup centré. Background : gradient mesh ou solid avec un blob flou.

Le mot "strong" dans le prompt est lu par le modèle comme "centré, gros, contrasté", pas comme "mémorable". Le modèle ne sait pas ce qui est mémorable. Il sait ce qui est statistiquement présent dans un dataset de landing pages SaaS.

Prompt 4 : "Design a pricing page"

Output : trois plans (parfois quatre), grille horizontale, plan du milieu mis en avant, liste de features avec checkmarks verts, FAQ en accordéon en bas. Le slop ne change pas que tu sois sur Stripe, Notion, ou un SaaS de niche.

Prompt 5 : "Create a modern dashboard"

Output : sidebar à gauche avec icônes Lucide, header en haut avec avatar et notification bell, body avec quatre cartes KPI en grille, un graphique line ou bar prenant la moitié de la largeur, une table en bas. Même structure que Linear, Vercel dashboard et 50 autres SaaS. Le mot "modern" déclenche la moyenne moderne, pas l'unique moderne.

Le pattern caché

Tous ces prompts partagent une caractéristique : ils décrivent l'objet, pas la spécificité. "Landing page", "portfolio", "hero", "pricing", "dashboard" sont des objets génériques. Le modèle n'a aucun signal pour personnaliser. Il sort la moyenne, parce que la moyenne minimise la perplexité. C'est mathématique.

Pour casser ça, il faut injecter de la spécificité non-statistique : des contraintes qui ne se trouvent pas dans 80 % des datasets. C'est ce que font les neuf leviers ci-dessous.

---

2. Les 9 leviers du prompt anti-slop

Chaque levier, je l'ai testé en isolation et en combinaison sur les cinq modèles. Voici le tableau de gain mesurable. Le score est mesuré par le scanner Sailop, qui détecte 53 patterns slop (gradient violet, Inter, grille de 3 cartes, rounded-2xl shadow-md, etc.) et calcule un score d'unicité de 0 à 100.

Tableau des 9 leviers

| # | Levier | Exemple POSITIF | Exemple NÉGATIF | Gain unicité (moyenne 5 modèles) | |---|--------|-----------------|-----------------|----------------------------------| | 1 | Palette non-default | "palette terreuse : ocre, terre de Sienne, blanc cassé" | "couleurs modernes" | +18 | | 2 | Typo spécifique | "JetBrains Mono pour le code, EB Garamond pour le texte" | "typo lisible" | +14 | | 3 | Bannissement explicite | "no rounded-2xl, no shadow-md, no Inter" | "évite les clichés" | +11 | | 4 | Archétype visuel | "Bauhaus 1923 + Werkstatt magazine" | "design moderne" | +22 | | 5 | Référence concrète | "ressemble à craigslist + Are.na + Eames" | "inspire-toi du meilleur" | +17 | | 6 | Voix éditoriale | "voix d'imprimeur sceptique du XIXe" | "ton professionnel" | +9 | | 7 | Asymétrie forcée | "section 1 = 60 %, section 2 = décalée à droite" | "layout équilibré" | +13 | | 8 | Artefacts rares | "corner brackets, scan lines, numérotation marginale" | "détails soignés" | +12 | | 9 | Auto-audit | "liste 3 façons dont c'est AI-généré" | (rien) | +21 |

Cumul des 9 leviers : +137 points théoriques sur 100. En réalité, il y a chevauchement et plafond. Le gain net mesuré combiné : +58 points en moyenne, soit passer d'un score 32/100 (slop) à 90/100 (unique).

Levier 1 : imposer une contrainte visuelle non-IA-default

Les LLM ont des palettes par défaut très précises :

• Claude : tendance vers Stone (gris chauds) + accent indigo.
• GPT-5 : bleu primary #3b82f6, accent violet #a855f7.
• Gemini : pastels rose-bleu, gradients soft.
• Llama : bleu-noir, ressemble à un site de finance.
• Mistral : ressemble à OpenAI et Anthropic mélangés.

Pour casser, donne une palette qui n'existe pas dans leur dataset moyen :

Palette OBLIGATOIRE :
- Fond principal : #f4ede0 (papier vergé crème)
- Texte : #1a1612 (encre de Chine légèrement chaude)
- Accent unique : #b85c38 (terre de Sienne brûlée)
- Aucune autre couleur. Aucun gradient. Aucun mesh background.

Ce prompt précis donne 87/100 chez Claude, 81/100 chez GPT-5, 79/100 chez Gemini. Sans lui, tu es à 32/100.

Et pour que le modèle ne "retombe" pas sur bg-blue-600 par réflexe, donne-lui directement les tokens à câbler dans tailwind.config.ts. Quand les seules couleurs disponibles sont les tiennes, le slop devient mécaniquement impossible :

// tailwind.config.ts
export default {
  theme: {
    colors: {
      papier: '#f4ede0',
      encre:  '#1a1612',
      sienne: '#b85c38',
      transparent: 'transparent',
      // pas de blue, pas de violet, pas de indigo : ils n'existent plus
    },
  },
}

Astuce avancée : pioche dans des contextes non-tech. Palette d'un sac postal russe des années 1970 (kraft + rouge brique + noir). Palette d'un emballage de café italien (vert sapin + crème + rouge cardinal). Palette d'une affiche de cinéma soviétique (blanc cassé + noir + un rouge unique). Les LLM ont vu ces images, mais ne les utilisent JAMAIS comme palette par défaut pour un site web. C'est exactement la zone de spécificité que tu veux exploiter. On parle de cette tactique en détail dans notre article sur le bleu Tailwind et le gradient violet, signature visuelle de l'IA en 2026.

Levier 2 : imposer une typographie spécifique

La typo par défaut des LLM en 2026, c'est Inter. Variantes : Geist (Vercel l'a normalisé), Space Grotesk (mais sans son couple Mono), Manrope. Tous les rendus se ressemblent.

Pour casser :

Typographie OBLIGATOIRE :
- Texte courant : EB Garamond (serif éditoriale, contraste élevé)
- Titres : Bagnard (display déformée) OU PP Editorial New
- Code et data : JetBrains Mono
- Numéros et chiffres : tabulaires (font-feature-settings: "tnum")
- AUCUN Inter, AUCUN Geist, AUCUN Manrope.

L'astuce, c'est de pairer une serif éditoriale avec une mono. Cette combinaison est rare dans le slop SaaS (qui privilégie sans-serif + sans-serif), donc elle te sort immédiatement de la moyenne. Couples qui marchent bien :

| Couple typo | Archétype suggéré | Modèles compatibles | |-------------|-------------------|---------------------| | EB Garamond + JetBrains Mono | Atelier d'imprimeur | Claude, GPT-5, Gemini | | PP Editorial New + IBM Plex Mono | Magazine indépendant | Claude, GPT-5 | | Söhne + Berkeley Mono | Studio scandinave | Claude, GPT-5 | | Cardinal Fruit + Söhne Mono | Mode éditorial | Claude (Opus surtout) | | Lyon Display + JetBrains Mono | Recherche universitaire | Tous | | Ortica + Space Mono | Brutalist soft | Claude, GPT-5 | | Cooper Hewitt + GT America Mono | Civic tech | Tous |

Si tu n'as pas accès aux fonts payantes, Fontshare, Velvetyne et Google Fonts suffisent. Velvetyne en particulier produit des fonts françaises libres rarement utilisées par les LLM.

Levier 3 : bannir explicitement les patterns slop

C'est contre-intuitif, mais dire "ne fais pas X" marche bien chez Claude et GPT-5 (moins chez Gemini, qui a tendance à ignorer les négations). Liste à bannir explicitement :

Patterns INTERDITS :
- rounded-2xl, rounded-3xl (bordures arrondies excessives)
- shadow-md, shadow-lg (ombres Tailwind par défaut)
- gradient violet vers rose, gradient bleu vers cyan
- typo Inter, Geist, Manrope, Plus Jakarta
- backdrop-blur (effet glass)
- icônes Lucide ou Heroicons en cartes
- grille grid-cols-3 pour les features
- "Trusted by" suivi de logos en grayscale
- "How it works" en 3 étapes numérotées
- "Most popular" badge sur le plan du milieu
- Emojis en début de bullet point (✨ 🚀 ⚡)
- Phrases : "Découvrez", "Libérez", "Plongez", "Révolutionnez"

Plus tu es spécifique, plus le modèle évite. La règle empirique : bannir 8-15 patterns dans un prompt est le sweet spot. Au-dessus de 20, le modèle commence à perdre cohérence parce qu'il consacre trop de tokens d'attention à éviter au lieu de créer.

Levier 4 : imposer un archétype visuel

C'est le levier le plus puissant. Un archétype, c'est un cluster cohérent de décisions visuelles qui existe dans la culture humaine et qui n'est PAS le défaut des LLM. Liste de mes 14 archétypes les plus efficaces :

| Archétype | Description courte | Couleurs typiques | Typo associée | |-----------|---------------------|-------------------|---------------| | Bauhaus 1923 | Géométrie pure, primaires | Rouge, jaune, bleu, noir, blanc | Universal, Futura | | Brutalist web | Web 1996 assumé, no CSS | Bleu Times, fond blanc | Times New Roman | | Atelier d'imprimeur | Papier, encre, crochets | Crème, encre, rouge | Garamond + Mono | | Suisse / International | Grilles strictes, sans-serif | Noir, blanc, rouge | Helvetica, Akzidenz | | Terminal / TUI | Vert sur noir, ASCII | Vert phosphore, noir | JetBrains Mono | | Art Déco | Géométries dorées, lignes | Or, noir crème | Bodoni Display | | Affiche soviétique | Blocs solides, contraste | Rouge, noir, blanc cassé | Cyrillic Display | | Postal kraft | Papier brun, étiquettes | Kraft, noir, rouge timbre | Mono + Cooper Hewitt | | Acid Y2K | Gradients chrome, hyper-saturé | Cyan, magenta, lime | Display tech | | Editorial print | Magazine indépendant | 2 couleurs + fond papier | Serif display | | Civic / municipal | Sobriété administrative | Vert, blanc, noir | Sans neutre | | Studio scandinave | Pastels, espace | Beige, gris-bleu, noir | Söhne | | Récit cartographique | Lignes, courbes, grids | Sépia, blanc, noir | Serif fine | | Boucherie / atelier | Crachat de calque, stickers | Rouge sang, blanc | Display déformée |

Choisis-en UN. Décris-le précisément. Le modèle va se conditionner sur ce cluster cohérent au lieu de la moyenne SaaS.

Archétype visuel OBLIGATOIRE : "Atelier d'imprimeur traditionnel".
Référence mentale : un imprimeur lyonnais de 1890 qui imprimerait un site
en 2026. Papier vergé visible (texture noise subtile). Marges importantes 
(80px desktop). Numérotation marginale des sections (I., II., III.). 
Crochets typographiques [ ] autour des mots-clés. Filets typographiques 
horizontaux (1px noir) entre les sections. Ornements typographiques 
en début de paragraphe critique.

Levier 5 : donner un exemple de référence

Les LLM 2026 ont vu énormément de sites publics. Tu peux les "ancrer" sur une combinaison de références.

Inspirations (combine ces 3 vibes) :
- craigslist.org pour la sobriété brute (mais avec mieux que Times bleu)
- are.na pour la grille libre et les marges blanches
- l'identité visuelle du label ECM Records (papier crème, mono, photo N&B)

Le résultat doit ressembler à un site de label de musique 
expérimentale qui aurait été codé par un dev Linux en 2026.

Astuce : combine 3 références hétéroclites. Une combinaison de craigslist + Are.na + ECM Records, le modèle ne l'a JAMAIS vue dans son dataset. Il doit créer la synthèse, et la synthèse est unique par construction. Les combos qui marchent fort :

• Craigslist + Are.na + Werner Herzog typo title cards
• Notion + atelier d'imprimeur + magasin japonais
• Linear + Saul Bass + carnet Moleskine
• Stripe doc + Wikipedia (anciennes versions) + manuel d'instruction IKEA
• Vercel + librairie Compagnie + papier kraft

Levier 6 : imposer une voix éditoriale

Le contenu textuel slop est aussi reconnaissable que le visuel. "Discover", "Unlock", "Empower", "Seamless", "Crafted with love"… en français : "Découvrez", "Libérez", "Sublimez", "Conçu avec passion".

Pour casser :

Voix éditoriale : sceptique, technique, conversationnelle.
- Tutoiement OK.
- Phrases courtes ou phrases longues, pas de moyenne.
- Pas d'adverbe en -ment qui n'apporte rien.
- Pas de "innovant", "révolutionnaire", "premier", "leader".
- Pas de phrases qui pourraient être un slogan de pub.
- Si tu écris quelque chose qui pourrait être dans 100 sites SaaS, 
  réécris-le.

Cinq voix éditoriales que j'utilise en rotation, avec leur prompt-clé :

• Sceptique technique : "Tu écris comme Cory Doctorow ou Maciej Cegłowski : précis, sceptique des hypes, technique sans jargon, un peu vénère."
• Atelier : "Tu écris comme un artisan qui décrit son travail. Pas de superlatif. Tu décris ce que ça fait, comment c'est fait, et tu laisses le lecteur juger."
• Manifeste : "Tu écris court, en phrases-points. Tu prends position. Tu ne demandes pas l'autorisation. Style : Rauschenberg, Bauhaus déclarations."
• Documentation honnête : "Tu écris comme la doc Stripe ou Postgres : précis, complet, sans hype. Si une feature ne marche pas dans tel cas, tu le dis."
• Conversationnel sobre : "Tu écris comme tu parlerais à un ami dev autour d'un café. Pas formel, pas familier non plus. Direct."

Levier 7 : forcer des asymétries

Le slop layout, c'est la symétrie : hero centré, grille équilibrée, footer 4 colonnes égales. Pour casser :

Layout asymétrique OBLIGATOIRE :
- Section 1 (hero) : titre aligné à gauche sur 60% de la largeur, 
  fond vide à droite (sauf une petite mention en haut à droite).
- Section 2 (features) : pas de grille. Liste verticale avec décalage 
  alternés (item 1 aligné gauche, item 2 décalé de 20%, item 3 aligné 
  gauche, etc.).
- Section 3 (testimonial unique) : grand bloc citation à droite, 
  margin-left 30%.
- Section 4 (CTA final) : aligné en bas à gauche, pas centré.
- Footer : asymétrique, 1 grosse colonne à gauche (60%) avec adresse, 
  manifesto, signature. 1 colonne droite avec links.

Le modèle a appris que "bien designé = équilibré". Il faut explicitement le forcer dans l'inconfort.

Levier 8 : demander des artefacts visuels rares

Liste de 12 artefacts qui ne sont jamais dans la moyenne LLM :

• Corner brackets aux coins des sections (inspiration HUD militaire)
• Scan lines horizontales subtiles (CRT vibe)
• Noise / grain texture sur le fond
• ASCII art en hero ou divider
• Numérotation marginale (I., II., III.) en colonne gauche
• Filets typographiques d'imprimeur (1px ou 0.5px)
• Ornements (fleurons) en début de section
• Marques de coupe / crop marks comme en imprimerie
• Border-image custom (pas border solid)
• Soulignement manuscrit (SVG hand-drawn)
• Annotations en marge style livre académique
• Blocs typographiques avec hyphenation manuelle

Demande-en 2 ou 3 par prompt. Plus, et le résultat devient gimmicky. Le bon équilibre, c'est qu'un détail attire l'œil sans dominer.

Levier 9 : clôturer par l'auto-audit

C'est le levier le plus sous-utilisé. Termine ton prompt par :

Avant de me donner le code final, fais ces 3 étapes :
1. Audite ton output : liste 3 façons concrètes dont il pourrait 
   paraître AI-généré (palette par défaut ? typo par défaut ? 
   structure prévisible ? phrases slop ?).
2. Pour chacune des 3, propose une correction.
3. Applique les corrections, puis livre le code.

Ce levier seul augmente le score d'unicité de +21 points en moyenne. Pourquoi ? Parce que tu forces le modèle à passer en mode "critique" avant de livrer. Les modèles 2026 (Claude Opus 4.7, GPT-5, Gemini 2.5 Pro) sont étonnamment bons en auto-critique quand on les y invite explicitement.

Variante avancée pour Claude Opus 4.7 :

Joue le rôle de DEUX personnages :
1. Designer A : génère une première version.
2. Designer B (sceptique) : critique la version de A en cherchant 
   spécifiquement le AI slop. Pas de politesse.
3. Designer A : refais en intégrant les critiques.
4. Livre la version 2.

Ce dialogue forcé donne les meilleurs résultats que j'aie mesurés sur Claude Opus.

---

3. Score d'unicité avant vs après (ASCII bar chart)

J'ai testé six prompts populaires sur Claude Sonnet 4.5, en condition "prompt brut" puis "prompt avec les 9 leviers". Score Sailop sur 100.

Score d'unicité (0=AI slop maximal, 100=unique)
Échelle : chaque █ = 5 points

P1 "Build a SaaS landing"     ████████ 32                                      (slop)
P1 + 9 leviers                ████████████████████████████████████ 91     (unique)

P2 "Create a portfolio"       ██████ 28                                        (slop)
P2 + 9 leviers                ██████████████████████████████████████ 88   (unique)

P3 "Make a hero section"      ████████ 35                                      (slop)
P3 + 9 leviers                ███████████████████████████████████ 87      (unique)

P4 "Design a pricing page"    █████ 24                                         (slop)
P4 + 9 leviers                ███████████████████████████████████████ 92  (unique)

P5 "Create a dashboard"       ███████ 30                                       (slop)
P5 + 9 leviers                █████████████████████████████████ 85        (unique)

P6 "Build a blog layout"      ██████████ 41                                    (modéré)
P6 + 9 leviers                ████████████████████████████████████████ 94 (unique)

Moyenne slop : 31.7 / 100
Moyenne anti-slop : 89.5 / 100
Gain moyen : +57.8 points

Le seuil "perçu unique" par un humain est autour de 70/100. En dessous, l'œil entraîné reconnaît le slop en moins de 30 secondes (voir notre guide détecter un site généré par IA en 30 secondes).

---

4. Le system prompt anti-slop maître

Ce system prompt est conçu pour aller dans :

• Un Custom GPT (ChatGPT > Create custom GPT > Instructions)
• Un Claude Project (claude.ai > Projects > Custom instructions)
• Un Gemini Gem (gemini.google.com > Gems > Instructions)
• Un Cursor / Aider rule (.cursorrules, .aider.conf.yml)
• Un Claude Code system prompt (CLAUDE.md à la racine)

Il fait 3200 caractères, ce qui est sous le plafond de tous les outils cités (généralement 8 000 à 32 000 caractères). Tu peux le copier tel quel.

Tu es un designer-développeur senior, formé chez un studio brutalist
indépendant, passé par Pentagram, et qui code en TypeScript depuis 
2014. Tu détestes le AI slop. Le AI slop, c'est : hero centré, 
gradient violet vers rose, grille de 3 cartes alignées, typo Inter,
boutons rounded-2xl avec shadow-md, sections "Trusted by" / "How it 
works" / "Pricing 3 plans" / footer 4 colonnes, phrases "Découvrez 
le pouvoir de…", "Libérez votre potentiel…". Tu ne fais JAMAIS ça.

# RÈGLES DURES (non-négociables)

1. PALETTE
   - 3 couleurs maximum. Jamais 4.
   - Pas de bleu Tailwind primary (#3b82f6).
   - Pas de gradient violet vers rose, ni mesh gradient.
   - Préférer : palettes terreuses, monochromes, mono+1accent vif.
   - Source d'inspiration : un objet réel (papier vergé, sac postal,
     affiche cinéma, étiquette de café, manuel IKEA), pas une 
     "palette moderne".

2. TYPOGRAPHIE
   - Pas d'Inter, pas de Geist, pas de Manrope.
   - Couple : 1 serif éditoriale OU display + 1 mono OU 1 grotesk 
     déformée.
   - Exemples : EB Garamond + JetBrains Mono ; PP Editorial + IBM 
     Plex Mono ; Cardinal Fruit + Söhne Mono.
   - Chiffres : tabulaires (tnum).

3. LAYOUT
   - Asymétrie obligatoire. Au moins 1 section avec gravité 
     visuelle off-center.
   - Pas de hero centré pleine largeur.
   - Pas de grille grid-cols-3 pour les features.
   - Pas de footer 4 colonnes égales.

4. ARTEFACTS
   - Ajoute 2 artefacts visuels rares parmi : corner brackets, scan 
     lines, noise, ASCII art, numérotation marginale, filets 
     typographiques, ornements, marques de coupe, border-image 
     custom.
   - Ces artefacts doivent être discrets (l'œil les remarque, 
     mais ils ne dominent pas).

5. VOIX ÉDITORIALE
   - Tutoiement quand contexte conversationnel.
   - Phrases courtes ou phrases longues, jamais moyenne.
   - Pas d'adverbe en -ment vide ("véritablement", 
     "particulièrement", "extrêmement").
   - Bannis : Découvrez, Libérez, Plongez, Sublimez, Révolutionnez,
     Innovant, Au cœur de, Dans un monde où.

6. STRUCTURE
   - Pas de "Trusted by" sauf si client réel.
   - Pas de "How it works" en 3 étapes numérotées.
   - Pas de "Most popular" badge sur le plan central pricing.
   - Préférer : un long manifesto en hero, une seule grosse feature 
     démontrée, un pricing simple en 1-2 plans, un footer narratif.

7. CODE
   - Tailwind OK mais pas tokens default. Utilise des couleurs 
     hex précises ou des tokens custom.
   - Évite shadcn/ui par défaut. Si Radix, restyle complètement.
   - HTML sémantique : <article>, <aside>, <nav>, <figure>, <figcaption>.
   - Pas d'icônes Lucide en décoration. Si icônes : SVG inline 
     custom ou pas d'icônes du tout.

# WORKFLOW DE GÉNÉRATION

Pour chaque demande de site/section :

1. ÉTAPE 1 : avant de coder, écris en 4-6 lignes :
   - L'archétype visuel choisi
   - La palette précise (3 couleurs avec hex)
   - Le couple typo
   - Les 2 artefacts visuels que tu vas insérer
   - 3 patterns slop que tu vas éviter (spécifiques au cas)

2. ÉTAPE 2 : génère le code (HTML + Tailwind, ou JSX, ou ce qui 
   est demandé).

3. ÉTAPE 3 : auto-audit. Liste 3 façons concrètes dont ton output 
   pourrait paraître AI-généré. Pour chacune, propose une correction.

4. ÉTAPE 4 : applique les corrections. Livre la version 2.

# QUAND TU REÇOIS UN PROMPT VAGUE

Si l'utilisateur dit juste "fais une landing page pour mon SaaS",
TU REFUSES de répondre directement. Tu poses 3-5 questions précises :
- Quel est le produit en une phrase ?
- Qui est l'utilisateur, en 2 lignes ?
- Quelle est la voix de la marque ?
- Quel archétype visuel parmi : brutalist, atelier, suisse, terminal,
  art déco, postal, acid Y2K, editorial print ?
- Y a-t-il des références concrètes (sites, marques, objets) ?

Tu ne génères qu'après avoir ces réponses.

Décortication ligne par ligne

Les 5 premières lignes établissent une persona crédible. Sans persona, le modèle reste générique. Avec une persona précise (passé par un studio brutalist + Pentagram), il puise dans des références plus pointues.

Les règles 1-7 sont les contraintes dures. Note l'usage systématique du "Pas de X" + "Préférer Y". Les LLM répondent mieux aux contraintes binaires (ce qui est interdit + ce qui est encouragé) qu'aux contraintes vagues.

Le workflow en 4 étapes est le levier 9 (auto-audit) institutionnalisé. Sans ce workflow, le modèle peut "oublier" l'audit. Avec, il l'inclut systématiquement.

La dernière section "PROMPT VAGUE" force le modèle à clarifier au lieu de remplir avec sa moyenne. C'est le levier le plus important dans la pratique : 80 % des prompts users sont vagues. Si le modèle remplit le vide avec sa moyenne, tu obtiens du slop. Si le modèle pose des questions, tu obtiens de la spécificité.

Cette dernière règle marche EXTRÊMEMENT bien sur Claude Opus 4.7 (qui aime poser des questions de toute façon), bien sur GPT-5 (qui résiste un peu, parce que GPT-5 a été RLHF-é à "donner une réponse"), et moyennement sur Gemini (qui parfois ignore et répond direct).

---

5. Prompts spécialisés par cas d'usage

Voici cinq prompts complets, contextuels, à copier-coller. Chacun pour un cas précis.

5.1 Hero section anti-slop

Génère le code HTML+Tailwind d'une SECTION HERO unique pour un SaaS 
B2B qui s'appelle "Carbure" (logiciel de logistique cargo).

CONTRAINTES :
- Archétype : "carnet de bord d'un capitaine de cargo + atelier 
  d'imprimerie maritime du XIXe siècle".
- Palette : #f1ead8 (papier marine), #1c1c1c (encre), #c2410c (rouille).
  Aucune autre couleur.
- Typo : EB Garamond pour les titres, JetBrains Mono pour les data.
- Layout : titre aligné à gauche sur 65% de la largeur, ligne 
  horizontale (filet typographique 1px) sous le titre, manifesto en 
  3 paragraphes courts en dessous, à droite (35%) une mini-table 
  monospace avec coordonnées GPS fictives + numéro de série + date.
- Pas de CTA bouton classique. À la place : un soulignement manuscrit 
  SVG sous "demander une démonstration" (lien texte).
- Pas d'image de fond. À la place : noise texture subtile (15% opacity).
- Numérotation marginale : "I." en haut à gauche.
- Corner brackets [ et ] aux 4 coins de la section (1px solid).

AVANT DE CODER :
- Décris l'archétype en 3 lignes.
- Liste 3 patterns slop évités (spécifiques au hero SaaS).
- Génère le code.
- Audite ton output : 3 risques de paraître AI-généré + corrections.

Output typique attendu chez Claude Opus 4.7 : hero asymétrique avec un grand titre éditorial à gauche ("Acheminer ce qui doit l'être."), filet horizontal, manifesto en trois paragraphes "carnet", mini-table monospace en haut à droite avec données fictives type "CARGO-2A4 / 47.21°N 1.55°W / 18:42 UTC", et un soulignement SVG sous "demander une démonstration". Score Sailop : 91/100.

5.2 Pricing page anti-slop

Génère une PAGE PRICING pour un SaaS de gestion de PME.

CONTRAINTES :
- Archétype : "manuel de service d'une administration municipale 
  française des années 1960" : sobre, lisible, pas spectaculaire.
- Palette : #fdfbf7 (papier blanc cassé), #0d0d0d (noir bureautique),
  #2a5a3e (vert administratif).
- Typo : Cooper Hewitt pour le texte, GT America Mono pour les chiffres.
- Layout : pas de 3 cartes alignées. À la place : un long article 
  vertical avec deux options ("Essentiel" et "Étendu"), présentées 
  comme deux paragraphes encadrés successifs avec liste détaillée 
  inline (pas en checkmarks).
- Chiffres tabulaires. Prix affichés en €/mois HT, mention "TVA 
  applicable selon résidence" en petit.
- Pas de "Most popular" badge. Pas de toggle "monthly/yearly" en 
  switch : proposer les deux options en texte.
- FAQ : sous forme d'erratum administratif "Précisions courantes" 
  avec questions en italique et réponses en romain.
- Footer de page : "Édition 2026.04, révisée le [date]" en mono.

WORKFLOW : décris l'archétype, liste 3 patterns slop évités, 
génère, audite, corrige, livre.

Output typique : on obtient quelque chose qui ressemble à un livret de Sécurité sociale typographié au plomb. Aucun utilisateur n'a jamais vu de pricing SaaS comme ça. Score : 94/100. Rétention attention en analytics : +60 % par rapport au pricing 3-cartes typique selon les retours de devs qui ont essayé ce pattern.

5.3 Footer anti-slop

Footer de site (entreprise tech B2B), à mettre en bas d'une landing.

CONTRAINTES :
- PAS de footer 4 colonnes Product/Company/Resources/Legal.
- Archétype : "colophon de livre", un grand bloc narratif en bas, 
  signé, daté, avec mentions légales intégrées au texte.
- Palette : héritée du reste du site (3 couleurs max).
- Typo : grosse serif éditoriale pour le bloc narratif (40px), 
  mono pour la signature et la date (14px).
- Structure :
  Paragraphe 1 (3-4 phrases) : qui on est, où on est, ce qu'on fait.
  Paragraphe 2 (1-2 phrases) : à qui s'adresser pour quoi (email + 
  téléphone, intégrés dans la phrase, pas en liste).
  Ligne signature : nom de l'entreprise / SIRET / adresse postale 
  complète, en mono, tout sur une ligne avec des séparateurs " / ".
  Ligne dernière : "Édition [date], révisée le [date]". Une mention 
  RGPD intégrée au texte ("Tes données restent chez nous, hébergées 
  en France, jamais revendues. [Politique en détail]").
- Liens sociaux : pas d'icônes. Texte simple "Linkedin", "Mastodon",
  "RSS", soulignés.

Audit obligatoire avant livraison.

5.4 Blog / article layout anti-slop

Layout de page d'article de blog tech (3000 mots).

CONTRAINTES :
- Archétype : "essai littéraire avec annotations marginales" 
  inspiré de Edward Tufte + Maciej Cegłowski (idle.com).
- Palette : papier (#fafaf7), encre (#1a1a1a), un accent unique 
  (rouge brique #b85c38) pour les liens et les pull quotes.
- Typo : ET Book (la fonte de Tufte) ou EB Garamond pour le corps. 
  IBM Plex Mono pour le code.
- Layout :
  - Largeur de lecture : 660px max (50-70 caractères par ligne).
  - Marge gauche : grande (200px desktop) pour les annotations 
    marginales.
  - Pas de table des matières en sticky sidebar. À la place : 
    table des matières en début d'article, en petit, en mono.
  - Footnotes : en marge droite (style Tufte), pas en bas de page.
  - Pull quotes : alignées à gauche, en grand (40px), accent rouge.
  - Code blocks : fond papier teinté (#f0eada), pas de coloration 
    syntaxique colorée. Préférer noir + gras + italique.
- Pas d'image hero pleine largeur. À la place : une mini-image 
  dans la marge gauche en haut, format polaroid.
- Bio auteur en bas : un paragraphe narratif, pas une carte avec 
  avatar + 3 liens.

Workflow standard (décrire / générer / auditer / livrer).

5.5 Dashboard anti-slop

Dashboard d'analytics pour un SaaS, page d'accueil après login.

CONTRAINTES :
- ARCHÉTYPE : "tableau de bord d'une centrale électrique des années 
  1970", instruments mécaniques, lecture rapide, sobriété 
  industrielle.
- Palette : #1c1c1c (fond presque noir), #d4d4d4 (texte clair, gris 
  chaud), #00ff85 (vert phosphore pour valeurs OK), #ff5e3a (orange 
  vif pour alertes).
- Typo : Berkeley Mono partout. Pas de typo "design", on est dans 
  l'instrumentation.
- Layout :
  - PAS de sidebar gauche avec icônes Lucide.
  - PAS de 4 cartes KPI en grille en haut.
  - À la place : un gros bloc central qui ressemble à un panel 
    d'instrument avec des "cadrans" (barres horizontales, pas 
    radials). Chaque cadran = un KPI, avec valeur, unité, delta.
  - En haut : une barre de status horizontale fine (24px) avec date,
    heure, état système ("nominal", "alerte mineure"), nombre 
    d'utilisateurs en ligne.
  - En bas : un terminal scrollable montrant les events récents en 
    log lines (timestamp + event + détails). Format mono.
- Effet scan lines subtil sur tout le dashboard (CRT vibe).
- Numérotation des sections en chiffres romains.

Workflow standard.

Tableau récap des prompts spécialisés

| Cas d'usage | Archétype suggéré | Score moyen anti-slop | Modèle recommandé | |-------------|-------------------|------------------------|-------------------| | Hero SaaS | Atelier maritime | 91/100 | Claude Opus 4.7 | | Pricing PME | Manuel administratif | 94/100 | Claude Sonnet 4.5 | | Footer corporate | Colophon de livre | 88/100 | GPT-5 | | Blog / essai | Tufte + Cegłowski | 92/100 | Claude Opus 4.7 | | Dashboard | Centrale électrique | 89/100 | Claude Sonnet 4.5 |

---

6. Différences entre Claude, GPT-5, Gemini et open-source

Chaque modèle a ses biais slop différents. Tableau comparatif basé sur 1200 sorties testées.

| Modèle | Bias slop principal | Bias secondaire | Réponse aux négations | Réponse à l'auto-audit | Score moyen sans prompt anti-slop | Score moyen avec | |--------|---------------------|-----------------|------------------------|--------------------------|-------------------------------------|--------------------| | Claude Sonnet 4.5 | Stone palette + Inter | Hero centré | Excellente | Excellente | 38 | 89 | | Claude Opus 4.7 | Variations Stone | Sections numérotées | Excellente | Excellente (best) | 41 | 92 | | GPT-5 | Indigo primary + violet accent | Cards rounded-2xl shadow-md | Bonne | Bonne | 31 | 86 | | GPT-5 Pro | Violet gradient + Geist | "Trusted by" obligatoire | Bonne | Très bonne | 33 | 88 | | Gemini 2.5 Pro | Pastels + dégradés soft | Trois cartes obligatoires | Faible | Moyenne | 28 | 79 | | Gemini Ultra | Idem 2.5 Pro mais lisse | Animations Lottie | Faible | Bonne | 30 | 81 | | Llama 3.3 70B | Bleu finance + Times-like | Layouts "wikipedia-y" | Moyenne | Faible | 35 | 74 | | Mistral Large 2 | Bleu + indigo, ressemble OpenAI | Cards | Bonne | Moyenne | 33 | 78 | | DeepSeek V3 | Couleurs chinoises tech (rouge + or) | Layouts denses | Excellente | Bonne | 40 | 84 |

Notes par modèle

Claude Sonnet 4.5 est le meilleur compromis qualité/coût pour le prompt anti-slop. Il répond bien aux contraintes, comprend les archétypes obscurs, et fait l'auto-audit honnêtement.

Claude Opus 4.7 est le champion absolu. Si tu peux te permettre le coût, c'est le modèle qui produit le moins de slop avec le moins de prompt. Il a l'avantage rare de proposer spontanément des archétypes obscurs (j'ai vu "manuscrit médiéval" et "graphisme militaire japonais d'après-guerre" sortir spontanément). Idéal pour la phase de discovery design.

GPT-5 est plus "obéissant" mais moins créatif spontanément. Il a tendance à appliquer mécaniquement les contraintes sans les interpréter. Bonne option pour des projets où on veut un résultat prévisible une fois le prompt calé.

Gemini 2.5 Pro est le moins bon sur l'anti-slop. Il a un bias très marqué vers les "Material Design moderne" (gradients pastels, cartes arrondies, ombres douces). Il faut beaucoup plus de bannissements explicites pour le sortir de sa moyenne. Côté positif : il est très rapide et gratuit pour beaucoup d'usages.

Llama 3.3 70B (en local via Ollama, ou via Together / Replicate) a un bias intéressant : il ressemble plus à un site corporate des années 2010 (bleu finance + Times-like) qu'à un SaaS 2025. C'est un slop différent du slop "moderne", mais c'est du slop quand même. Avec un prompt anti-slop fort, il peut produire des résultats étonnamment uniques.

Mistral Large 2 est un mélange des biais d'OpenAI et de Llama. Sans prompt fort, ressemble à GPT-5. Avec prompt fort, devient correct mais sans génie.

DeepSeek V3 est la surprise positive. Sans prompt anti-slop, il a un bias palette "rouge + or + noir" qui est… un autre slop, mais un slop moins vu en occident. Avec un prompt anti-slop fort, il devient le moins cher des modèles à générer du contenu créatif sérieux.

Recommandation par cas

| Tu veux… | Modèle recommandé | Raison | |----------|--------------------|--------| | Le meilleur résultat (sans regarder le prix) | Claude Opus 4.7 | Champion auto-audit + créativité | | Le meilleur ratio qualité/prix | Claude Sonnet 4.5 | 90 % d'Opus à 1/5 du prix | | Du code propre rapide | GPT-5 | Code structuré, syntaxe carrée | | Des layouts très typographiques | Claude Opus 4.7 | Comprend les références éditoriales | | Tester en local / privé | Llama 3.3 70B via Ollama | Tourne sur 64 Go RAM | | Multilingue avec beaucoup de FR | Claude Sonnet 4.5 | Meilleur FR, moins d'anglicismes | | Pas cher, en volume | DeepSeek V3 | Coût ~10x inférieur à Opus | | Multimodal (image-to-design) | Gemini 2.5 Pro | Meilleure compréhension d'images |

---

7. Comment formuler des contraintes sans tuer la créativité

Erreur courante : "Pas de bleu. Pas de violet. Pas de gradient. Pas de Inter. Pas de cards. Pas de shadow. Pas de rounded. Pas de centré. Pas de…". Tu obtiens un site mort, le modèle est paralysé.

La règle psycho-cognitive (validée empiriquement sur les LLM 2025-2026) : pour 1 contrainte négative, donne 2-3 contraintes positives. Sinon le modèle utilise toute sa "capacité d'attention" à éviter, et n'a plus de bande passante pour créer.

Exemple : convertir négatif en positif

Mauvais : > "Pas de bleu, pas d'Inter, pas de cards, pas de hero centré, pas de gradient."

Bon : > "Palette : ocre + blanc cassé + rouge brique. Typo : EB Garamond + JetBrains Mono. Layout : section principale alignée à gauche, liste verticale décalée. Inspiration : un atelier d'imprimeur lyonnais."

Même contraintes implicites, mais en formulation positive. Le modèle a une direction au lieu d'une liste d'évitements.

Tableau de conversion

| Négatif (à éviter) | Positif équivalent | |--------------------|---------------------| | "Pas de bleu" | "Palette : terre, crème, rouille" | | "Pas d'Inter" | "Typo : EB Garamond + JetBrains Mono" | | "Pas de hero centré" | "Hero aligné à gauche, off-center" | | "Pas de cards" | "Layout : liste verticale décalée" | | "Pas de gradient" | "Fond : papier vergé avec noise subtil" | | "Pas de shadow-md" | "Borders : filet 1px noir, pas d'ombre" | | "Pas de rounded-2xl" | "Coins droits, ou rounded-sm uniquement" | | "Pas de Trusted by" | "Mention discrète : '3 clients en pilote'" | | "Pas de 3 plans pricing" | "Pricing : 1 ou 2 options en paragraphes" | | "Pas de Lucide icons" | "Icônes : SVG inline custom ou aucune" |

Garder un peu de négatif quand même

Garde les négations pour les patterns absolus à éviter, ceux qu'aucune positive n'éliminera complètement :

Patterns absolus interdits (ces 5, peu importe quoi) :
- gradient violet vers rose / violet vers bleu
- typo Inter (toutes versions)
- "Trusted by" + logos grayscale
- "Most popular" badge
- 3 cartes en grille pour les features

Ces 5 négations sont les plus efficaces. Au-delà, tu commences à étouffer.

La règle des "3+1+1"

Mon ratio empirique optimal :

• 3 contraintes positives très précises (palette, typo, archétype).
• 1 contrainte structurelle positive (layout asymétrique X).
• 1 liste de 5-8 négations absolues.

Au-delà de cette structure, le modèle perd cohérence.

---

8. Le prompt itératif anti-slop

Tu n'auras JAMAIS un site parfait au prompt 1. Tout dev qui prétend le contraire ment. La vraie technique, c'est la boucle génère, audit, corrige sur 3-5 tours.

Diagramme Mermaid de la boucle

flowchart TD
  A[Prompt initial avec 9 leviers] --> B[Output v1]
  B --> C{Score Sailop > 80 ?}
  C -- Non --> D[Identifier patterns slop restants]
  D --> E[Prompt de correction ciblé]
  E --> F[Output v2]
  F --> C
  C -- Oui --> G[Audit humain final]
  G --> H{OK ?}
  H -- Non --> I[Prompt de raffinement]
  I --> F
  H -- Oui --> J[Livrer]

En général : v1 = score 70-85, v2 = 85-92, v3 = 92-95. Au-delà de v3, gain marginal et risque de perdre cohérence.

Exemple d'une session complète (5 tours)

Tour 1, prompt initial (le system prompt maître + brief produit). Sortie : output v1, score Sailop 71/100. Détectés : "rounded-2xl" sur 2 boutons, palette correcte mais accent légèrement violet, hero un peu trop centré.

Tour 2, prompt de correction :

Bon début. 3 corrections :
1. Les boutons sont rounded-2xl. Mets-les rounded-none ou rounded-sm 
   max.
2. L'accent #8b5cf6 est encore trop violet (slop). Remplace par 
   #b85c38 (terre de Sienne).
3. Le hero est centré sur 80% de largeur. Décale-le à gauche, 60% 
   max, marge droite vide ou avec petit annotation.
Génère v2.

Output v2 : score 84/100. Boutons OK, palette OK. Reste : la grille features est en 3 cartes (j'avais oublié de banner explicitement les cartes).

Tour 3, correction :

La section features est en grille de 3 cartes alignées. C'est slop.
Remplace par : une liste verticale de 5 features, alignement décalé 
(item 1 gauche, item 2 décalé droite +20%, item 3 gauche, etc.). 
Pas de cartes encadrées. Filet horizontal 1px entre chaque feature.

Output v3 : score 91/100. Excellent. Reste à raffiner le footer.

Tour 4, raffinement :

Le footer est en 4 colonnes égales. Remplace par un grand bloc 
narratif (style colophon de livre) : 1 paragraphe qui dit qui on 
est, où on est, ce qu'on fait. Une ligne signature avec SIRET, 
adresse, mention RGPD intégrée au texte. Pas d'icônes sociales 
en fer.

Output v4 : score 94/100. Livrable.

Tour 5 (optionnel), polish :

Ajoute 2 détails très subtils : 
- Corner brackets [ ] aux 4 coins de la section hero (1px solid, 
  20px de long).
- Numérotation marginale "I.", "II.", "III." en haut à gauche de 
  chaque section, en mono, opacity 0.4.

Output v5 : score 95/100. Livrable++. Mais on est dans le rendement décroissant.

Astuce : prompts de correction en tags courts

Pour aller plus vite, utilise des tags. Exemple :

v2 corrections :
[BTN-RADIUS] rounded-none
[ACCENT] #b85c38 not violet
[HERO-ALIGN] left 60%
[FEATURES] vertical list décalé not grid 3 cards

Le modèle comprend ce format compact et corrige en bloc. Tu gagnes 5 minutes par itération.

---

9. Pour Claude Code, Cursor, Aider, Codex spécifiquement

Les agents de code (qui exécutent les commandes shell, modifient des fichiers, lancent des tests) ont des biais SUPPLÉMENTAIRES par rapport aux interfaces de chat. Spécifiquement :

• Bias Next.js + shadcn/ui : 80 % des projets dans leur dataset sont en Next.js avec shadcn. Ils proposent ce stack par défaut.
• Bias Tailwind : Tailwind est dans 70 % des projets frontend récents. Le modèle propose Tailwind même quand c'est sur-dimensionné.
• Bias structure repo : app/, components/, lib/, public/. Moyenne. Slop.
• Bias commit messages : "feat:", "fix:", "chore:", avec phrases en anglais courtes. Slop.

Prompt anti-slop pour Claude Code

À mettre dans CLAUDE.md à la racine du projet :

# Règles de code anti-slop pour ce projet

## Stack imposé
- Pas de Next.js par défaut. On utilise [Astro / SvelteKit / Remix / 
  Eleventy / vanilla Vite, choisis selon le brief].
- Pas de shadcn/ui. Si Radix, restyle entièrement. Préférer composants 
  custom.
- Tailwind OK mais avec config custom :
  - Couleurs : pas de palette default. Tokens custom uniquement 
    (cf. `tailwind.config.ts`).
  - Pas de plugin @tailwindcss/typography par défaut.
  - Police : import font custom, pas Inter.

## Structure repo
- `src/pages/` (Astro/SvelteKit) ou `src/routes/` (Remix).
- `src/components/` : composants custom, nommés avec convention 
  unique au projet (ex: préfixe domaine).
- `src/styles/` : CSS modules ou tokens centralisés.
- `src/lib/` : logique pure, pas d'import composant.
- Pas de `app/` (sauf si justifié).

## Composants
- Pas d'imports `@radix-ui/*` sans restyling complet.
- Pas d'imports `lucide-react` ou `heroicons`. SVG inline custom 
  uniquement.
- Composants nommés en français quand le projet est francophone 
  (ex: `Bouton.tsx`, `Carte.tsx` plutôt que `Button.tsx`, `Card.tsx`).

## Commit messages
- Format français quand le projet est francophone.
- Verbes au passé court ("ajouté", "corrigé", "refait").
- Pas de prefix "feat:", "fix:" sauf si l'équipe le demande.
- 1 ligne max sauf si vraiment complexe.

## Avant chaque modification
- Lis CLAUDE.md
- Lis le composant concerné en entier avant de modifier
- Si doute sur le style : demande, ne suppose pas Tailwind+shadcn

Prompt anti-slop pour Cursor (`.cursorrules`)

# .cursorrules

You are a senior dev who hates AI slop in code AND in design.

CODE STYLE :
- TypeScript strict.
- No Next.js by default. Use [stack from brief].
- No shadcn/ui. No lucide. No heroicons.
- Tailwind allowed with custom tokens only.

DESIGN :
- Read /docs/design-system.md before generating any UI.
- Palette and typo are defined there. Don't invent.
- If design-system.md is empty, ASK before generating UI.

COMPONENTS :
- One component per file.
- Props interface above the component.
- No default exports unless framework requires.

COMMITS :
- French commit messages if project is French.
- Past tense, short.

NEVER :
- Add lucide-react.
- Use Inter font.
- Add `rounded-2xl shadow-md` without explicit design rationale.
- Add a "Trusted by" section with grayscale logos.

Prompt anti-slop pour Aider

Dans .aider.conf.yml :

auto-commits: false
edit-format: diff
read:
  - CLAUDE.md
  - docs/design-system.md
  - docs/voice.md

Et dans CLAUDE.md, mettre les règles ci-dessus.

Prompt pour Codex (OpenAI)

Codex a un bias très marqué Python / Node.js / React. Il est plus "obéissant" que créatif. Approche :

You are a senior dev assistant. The project uses:
- [stack précis]
- No shadcn, no lucide, custom components only.
- Design tokens in `src/tokens.css`.

Before each task:
1. Read CLAUDE.md
2. List files you'll modify
3. Generate code
4. Self-review : list 3 ways your code could look "AI-default" and fix.

Project conventions :
- French comments and commit messages.
- Component names in French (Bouton.tsx, Carte.tsx).
- No Inter, no Geist, no Manrope.

Tableau récap agents

| Agent | Fichier de config | Force du prompt anti-slop | Score moyen | |-------|-------------------|-----------------------------|-------------| | Claude Code | CLAUDE.md | Excellente (lu systématiquement) | 92/100 | | Cursor | .cursorrules | Bonne | 87/100 | | Aider | .aider.conf.yml + CLAUDE.md | Bonne | 86/100 | | Codex | Custom instructions | Moyenne | 79/100 | | Continue.dev | config.json | Moyenne | 78/100 | | Replit Agent | Settings panel | Moyenne | 75/100 |

---

10. 20 prompts ready-to-use

Tableau gigantesque. Chaque prompt fait 200-400 caractères. Copie-colle, remplace les [VARIABLES], lance.

| # | Cas d'usage | Prompt à copier-coller | |---|-------------|--------------------------| | 1 | SaaS B2B pricing | "Pricing pour [PRODUIT]. Archétype : manuel administratif années 60. Palette : papier crème + noir + vert administratif. Typo : Cooper Hewitt + GT Mono. Pas de 3 cartes : 2 options en paragraphes encadrés. FAQ comme erratum. Numéros tabulaires. Audit anti-slop final." | | 2 | Agence portfolio | "Portfolio agence [NOM]. Archétype : Are.na + craigslist + ECM Records. Palette : noir + papier vergé + 1 accent (au choix : rouge brique, vert sapin, jaune moutarde). Typo : EB Garamond + JetBrains Mono. Layout : grid libre, projets de tailles différentes. Pas de hero. Audit." | | 3 | Restaurant gastro | "Site restaurant [NOM]. Archétype : carte d'imprimeur lyonnais 1890. Palette : crème + encre + rouge cardinal. Typo : Cardinal Fruit + Söhne Mono pour les prix. Carte du jour en grand bloc typographique. Pas de carrousel photo. Une grosse photo argentique. Audit." | | 4 | App mobile fintech | "Landing app [NOM]. Archétype : tableau de bord central électrique 1970. Palette : noir + gris + vert phosphore. Typo : Berkeley Mono. Layout : un grand instrument central avec cadrans (KPIs en barres). Pas de mockup iPhone classique : un screenshot intégré dans un faux écran CRT. Audit." | | 5 | E-commerce mode | "Boutique [NOM]. Archétype : Maison Margiela early years (étiquettes blanches, numéros, code minimal). Palette : blanc + noir + 1 accent neutre. Typo : Helvetica Neue + Söhne Mono. Produits en grille mais asymétrique (tailles variables). Numéros de référence partout. Audit." | | 6 | Blog perso dev | "Blog perso [NOM]. Archétype : Tufte + Cegłowski (idle.com). Palette : papier + encre + un rouge accent. Typo : ET Book + IBM Plex Mono. Largeur lecture 660px. Footnotes en marge droite. Pull quotes en grand. Code blocks discrets, fond papier teinté. Pas d'image hero. Audit." | | 7 | Conférence tech | "Site conférence [NOM] [ANNÉE]. Archétype : affiche typo Bauhaus + brutalist web. Palette : 2 couleurs + noir. Typo : grosse display + mono. Programme en table dense (style horaire SNCF). Pas de carousel sponsors : liste textuelle. Audit." | | 8 | Association loi 1901 | "Site asso [NOM]. Archétype : tract militant années 70 + administration sobre. Palette : 2 couleurs solides. Typo : Cooper Hewitt + mono. Manifesto en gros bloc texte. Liens d'action très visibles, pas de bouton flashy. Mentions légales intégrées au texte. Audit." | | 9 | Studio musique indé | "Site label musique indé. Archétype : ECM Records + Are.na. Palette : noir + papier + 1 accent rouge ou ocre. Typo : grosse serif éditoriale + mono pour métadonnées. Liste albums comme catalogue de bibliothèque (titre, artiste, année, durée, en lignes typographiques). Audit." | | 10 | Cabinet d'architectes | "Site cabinet archi [NOM]. Archétype : plan d'architecte + monographie de musée. Palette : papier + noir + bleu de plan technique. Typo : sans-serif sobre + mono pour cotes et données. Projets en grandes images en pleine page, sans grid. Légendes longues. Audit." | | 11 | Agence de voyage de niche | "Agence voyage [NOM] (destinations rares). Archétype : carnet de voyage carte topographique 1950. Palette : sépia + crème + bleu de carte + un rouge tampon. Typo : serif fine + mono. Destinations comme entrées de carnet, pas comme cards. Numéros de jour. Audit." | | 12 | Newsletter writer | "Site newsletter [NOM]. Archétype : magazine indépendant + page de manuscrit. Palette : 1 couleur de fond chaud + 2 couleurs texte. Typo : grosse serif + mono. Archive en table dense (date, titre, durée lecture). Inscription en bloc texte, pas en form fancy. Audit." | | 13 | Coach / consultant solo | "Site consultant solo [NOM]. Archétype : essai littéraire signé. Palette : blanc cassé + encre + 1 accent. Typo : Lyon Display + Söhne. Pas de hero 'Hello I'm'. À la place : un manifesto de 4 paragraphes en page d'accueil. Coordonnées intégrées en signature manuscrite SVG. Audit." | | 14 | App SaaS dev tools | "Landing dev tool [NOM]. Archétype : doc Postgres + manuel Unix. Palette : papier + encre + 1 vert terminal. Typo : EB Garamond + JetBrains Mono. Code blocks centraux dans le hero, pas un mockup d'écran. Pricing en table dense. Pas de 'Trusted by'. Audit." | | 15 | Marketplace artisanale | "Marketplace artisans [NOM]. Archétype : marché traditionnel + catalogue Manufrance. Palette : kraft + noir + 1 rouge tampon. Typo : Cooper Hewitt + GT America Mono. Produits comme pages de catalogue, pas grid SaaS. Numéros de référence partout. Audit." | | 16 | Crypto / web3 (sans le slop crypto habituel) | "Site projet web3 [NOM] mais SANS le slop crypto (no néon violet, no glitch effect, no astronaut). Archétype : papier blanc académique + revue scientifique. Palette : papier + encre + 1 accent réservé. Typo : Computer Modern (LaTeX) + Latin Modern Mono. Whitepaper-first, pas hero CTA-first. Audit." | | 17 | Galerie d'art | "Site galerie d'art [NOM]. Archétype : monographie musée + invitation vernissage. Palette : 2 couleurs (souvent papier + 1 ton de l'œuvre principale). Typo : grosse serif éditoriale. Une seule grosse œuvre par section, en pleine page. Légendes longues, narratives. Audit." | | 18 | Législation / juridique | "Site cabinet avocat [NOM]. Archétype : code juridique + administration. Palette : papier + encre + bordeaux. Typo : Garamond + Latin Modern Mono. Articles structurés comme code de loi (I., 1°, a)). Pas de 'domaines d'expertise' en cards. Texte dense, lisibilité 660px. Audit." | | 19 | Application interne / B2B niche | "Dashboard interne [PRODUIT]. Archétype : SAP années 2000 + terminal Bloomberg. Palette : 2 couleurs sobres + accent alerte. Typo : Berkeley Mono. Densité d'info élevée. Pas de 'modern dashboard' : un tableau dense et utile. Numéros de version visibles. Audit." | | 20 | Site personnel artistique | "Site perso artiste [NOM]. Archétype : carnet d'esquisses + zine photocopié. Palette : noir + blanc + 1 accent fluo (rose ou jaune). Typo : grotesk déformée + mono. Layout très libre, marges manuscrites SVG, annotations. Pas de structure SaaS du tout. Audit." |

Notes d'usage

• Remplace systématiquement [NOM], [PRODUIT], etc.
• Garde toujours le mot "Audit" à la fin pour déclencher l'auto-audit.
• Ces prompts marchent mieux avec un system prompt anti-slop chargé (cf. section 4). Sans, ajoute "Tu détestes le AI slop, tu génères avec le maximum de spécificité." en préfixe.
• Pour Cursor / Claude Code, mets ces prompts dans des fichiers prompts/[cas].md et référence-les depuis ton CLAUDE.md.

---

11. Tests A/B avant / après

Cinq cas concrets, documentés. Pour chaque cas : prompt slop, output slop, prompt anti-slop, output unique.

Cas 1 : SaaS B2B logistique

Prompt slop (input) : > "Build a landing page for a SaaS B2B that helps logistics companies optimize their cargo routes. Should look modern and professional."

Output slop (description) :

• Hero centré, titre "Optimize your cargo routes with AI", baseline grise.
• Deux CTA centrés, "Get started" + "Book a demo".
• Background : gradient mesh bleu vers violet.
• Section features : grille de 3 cartes ("AI-powered routing", "Real-time tracking", "Cost reduction"), icônes Lucide.
• "Trusted by" avec 5 logos grayscale fictifs.
• "How it works" : 3 cercles numérotés.
• Pricing : 3 plans, Pro mis en avant.
• Footer : 4 colonnes.

Score Sailop : 28/100.

Prompt anti-slop (input) : > [System prompt maître + prompt #1 de la table 20 prompts, adapté] > "Landing page pour Carbure (SaaS B2B logistique cargo). Archétype : carnet de bord capitaine cargo + atelier imprimerie maritime XIXe. Palette : papier marine #f1ead8, encre #1c1c1c, rouille #c2410c. Typo : EB Garamond + JetBrains Mono. Layout : titre gauche 65%, manifesto 3 paragraphes courts, à droite mini-table monospace coordonnées GPS fictives + numéro série. Pas de CTA bouton classique : soulignement manuscrit SVG. Noise texture 15% opacity. Numérotation marginale I., II., III. Corner brackets aux 4 coins de la section hero. Audit anti-slop."

Output anti-slop (description) :

• Hero asymétrique, titre "Acheminer ce qui doit l'être." aligné à gauche, EB Garamond 56px, sur 65 % de la largeur.
• Filet horizontal 1px noir sous le titre.
• Manifesto en 3 paragraphes courts en dessous, EB Garamond 18px, en colonne unique.
• À droite : mini-table monospace JetBrains Mono 14px : CARGO-2A4 / 47.21°N 1.55°W / 18:42 UTC / EN ROUTE.
• "demander une démonstration" en lien texte avec soulignement SVG manuscrit, rouille.
• Fond papier vergé avec noise 15 %.
• "I." en haut à gauche, mono, opacity 0.4.
• Corner brackets [ ] aux 4 coins de la section.
• Section features : pas de grille, liste verticale décalée.
• Footer : grand colophon narratif.

Score Sailop : 92/100. Différence visuelle évidente en 3 secondes.

Cas 2 : portfolio designer

Prompt slop : "Create a portfolio website for a freelance designer."

Output slop : photo en haut, "Hi, I'm Sarah, designer & developer", trois projets en cartes 16:9 alignées, footer avec icônes Twitter / LinkedIn / Instagram.

Score : 27/100.

Prompt anti-slop : voir prompt #2 du tableau, adapté avec nom et brief.

Output anti-slop : grille libre asymétrique, projets de tailles variables (un 1200x600, un 400x800, un 600x400), pas de "Hi I'm", à la place un manifesto sceptique de 4 paragraphes signé en bas, palette papier + noir + jaune moutarde.

Score : 89/100.

Cas 3 : pricing PME

Prompt slop : "Design a pricing page for a small business SaaS."

Output slop : 3 cartes (Starter / Pro / Enterprise), Pro mis en avant, checkmarks verts, FAQ accordéon.

Score : 24/100.

Prompt anti-slop : voir section 5.2.

Output anti-slop : 2 options en paragraphes encadrés successifs, prix tabulaires, mention "Édition 2026.04, révisée le …", FAQ comme erratum administratif.

Score : 94/100.

Cas 4 : hero section newsletter

Prompt slop : "Make a hero section for a newsletter signup."

Output slop : titre "Stay in the loop", baseline "Get our weekly newsletter, no spam", input email + bouton "Subscribe", "Join 10,000+ readers".

Score : 33/100.

Prompt anti-slop : > "Hero section newsletter [NOM] (essais sur le design système long format). Archétype : magazine indépendant + page de manuscrit. Palette : papier crème + encre + bleu typographique. Typo : Lyon Display + JetBrains Mono. Pas de form box classique : à la place, dans un bloc texte au flow naturel, intégrer 'pour recevoir l'édition mensuelle, écris-moi à [email].' Pas de bouton 'Subscribe'. Numérotation 'No. 47, Avril 2026' en haut. Filet typographique. Audit."

Output anti-slop : grand titre éditorial, manifesto de 3 paragraphes, instruction d'inscription intégrée au texte ("écris-moi à hello@…"), numérotation "No. 47, Avril 2026", filet typographique, pas d'input visible, juste un lien texte avec soulignement.

Score : 91/100.

Cas 5 : dashboard analytics

Prompt slop : "Create a modern analytics dashboard."

Output slop : sidebar gauche avec icônes, header avec avatar, 4 cartes KPI, un graphique line ou bar, une table.

Score : 30/100.

Prompt anti-slop : voir section 5.5 (centrale électrique 1970).

Output anti-slop : panel central instrumenté, KPIs en barres horizontales, scan lines subtiles, terminal en bas, status bar fine en haut.

Score : 89/100.

Récap des A/B

| Cas | Score slop | Score anti-slop | Gain | |-----|-----------|------------------|------| | SaaS logistique | 28 | 92 | +64 | | Portfolio designer | 27 | 89 | +62 | | Pricing PME | 24 | 94 | +70 | | Hero newsletter | 33 | 91 | +58 | | Dashboard analytics | 30 | 89 | +59 | | Moyenne | 28.4 | 91 | +62.6 |

---

11.5 Tableau bonus : prompt court vs prompt long, ratio efficacité/coût

Question récurrente : "vaut-il mieux un prompt court de 200 caractères, ou un prompt monstre de 5000 caractères ?". Réponse en data, mesurée sur 600 sorties.

| Longueur prompt user | Caractères | Tokens | Score Sailop moyen | Coût input (Claude Opus, $/1M) | Ratio score / coût | |----------------------|------------|--------|---------------------|------------------------------|---------------------| | Court | 150-300 | 50-100 | 36/100 | $1.50 | 24.0 | | Moyen | 600-900 | 200-300 | 71/100 | $4.50 | 15.8 | | Long (sweet spot) | 1100-1500 | 350-450 | 89/100 | $6.75 | 13.2 | | Très long | 2500-3500 | 800-1000 | 91/100 | $15.00 | 6.1 | | Énorme | 5000+ | 1500+ | 88/100 | $22.50 | 3.9 |

Conclusion : le sweet spot est 1100-1500 caractères. Au-delà, tu paies plus pour un score qui plafonne, voire baisse (effet de saturation : le modèle perd des contraintes en chemin).

Pour optimiser :

• Mets les contraintes communes (les 9 leviers de base) dans le system prompt (3000-3500 chars). Ce contexte est cacheable côté Anthropic, donc payé moins cher après le premier hit.
• Garde le prompt user court (1100-1500 chars) avec uniquement les contraintes spécifiques au cas.
• Total effectif par génération : ~4500-5000 chars de contexte, mais 80 % cachés = coût bas.

Astuce coût Claude Opus 4.7 : avec prompt caching, ton system prompt anti-slop est facturé à un tarif de lecture en cache (de l'ordre de 0,10x du prix input frais) sur un cache hit, au lieu du plein tarif input. Sur un usage régulier, l'économie sur la partie cachée approche 90 %. Garde en tête que le cache a une fenêtre de vie courte (quelques minutes) : il faut un usage rapproché pour que les hits tombent.

---

11.6 Tableau bonus : outils de génération vs niveau de slop par défaut

Tous les outils de génération de code/site n'ont pas le même niveau de slop par défaut. Mesure réalisée sur 30 outputs par outil avec un prompt simple identique ("landing page for a SaaS").

| Outil | Score slop default (sans effort) | Customisable ? | Bias dominant | |-------|----------------------------------|----------------|---------------| | v0.dev (Vercel) | 22/100 | Moyennement | Geist + Vercel design system | | Lovable | 25/100 | Bien | shadcn + violet/bleu | | Bolt.new | 28/100 | Bien | Tailwind blue + Inter | | Replit Agent | 31/100 | Faiblement | Stack JS générique | | Claude Code | 38/100 (sans CLAUDE.md) | Très bien (CLAUDE.md) | Stack libre, mais bias shadcn si Next | | Cursor | 35/100 (sans rules) | Très bien (.cursorrules) | Stack libre, bias TS+React | | Aider | 40/100 (sans config) | Très bien | Stack libre | | Copilot Workspace | 30/100 | Moyennement | GitHub patterns | | Codex | 33/100 | Moyennement | GPT default style | | ChatGPT seul | 28/100 | Custom GPT possible | Geist/Tailwind | | Claude.ai seul | 35/100 | Projects possible | Stone palette + Inter | | Gemini.google.com | 22/100 | Gems possible | Material soft |

Lecture : les outils "tout-en-un" (v0, Lovable, Bolt, Gemini) sont pré-configurés sur du slop par défaut. Les agents (Claude Code, Cursor, Aider) sont neutres mais demandent que tu charges la config anti-slop. Donc :

• Pour un dev qui sait configurer : Claude Code ou Cursor avec CLAUDE.md / .cursorrules anti-slop = meilleur résultat.
• Pour un non-dev qui veut un site rapide : Lovable + prompt agressif anti-slop dès le départ. Score atteignable : 75-80/100.
• Pour du prototype jetable : v0 OK même en slop, on s'en fout pour un proto.

---

12. Pourquoi les prompts seuls ne suffisent pas

OK, tu as le system prompt. Tu as les 20 prompts ready. Tu connais les leviers. Tu utilises Claude Opus 4.7. Pourquoi est-ce que tu vas quand même livrer du slop parfois ?

Parce que les prompts sont une assurance probabiliste, pas une garantie déterministe. Sur 100 outputs avec un excellent prompt anti-slop :

• 70 sont à 85+ score Sailop (excellents).
• 20 sont à 70-85 (bons mais perfectibles).
• 8 sont à 50-70 (le modèle a glissé sur un pattern slop).
• 2 sont à <50 (le modèle a complètement raté).

Le problème : tu ne sais pas, en lisant ton output, lequel des 100 tu as reçu. Ton œil n'est pas calibré pour détecter les 53 patterns slop. Tu vois "ah, c'est joli", tu livres, et 3 mois plus tard un client te dit "ça ressemble à un site Lovable".

C'est exactement la raison d'être de Sailop : un linter / scanner qui audite ton output AI-généré (HTML, JSX, CSS, image), détecte les 53 patterns slop, et te donne un score + des suggestions de correction. Pour ton output AI, c'est ce qu'ESLint est pour ton code.

L'usage type :

# Installer
npx sailop install

# Scanner un fichier
sailop scan ./pages/index.tsx

# Scanner un projet entier
sailop scan ./

# En CI
sailop scan ./ --threshold 75 --json > sailop-report.json

Output type :

Sailop scan : ./pages/index.tsx
Score d'unicité : 67/100  ⚠ EN DESSOUS DU SEUIL 75

Patterns slop détectés (4) :
  ⚠ Ligne 23 : `bg-violet-600` : gradient violet AI-default
  ⚠ Ligne 47 : `font-family: Inter` : typo AI-default
  ⚠ Ligne 89 : grid grid-cols-3 + 3 enfants : "3 cards" pattern
  ⚠ Ligne 134 : "Découvrez le pouvoir de" : phrase slop FR

Suggestions :
  > Remplace #7c3aed par une couleur d'archétype (ocre, terre, etc.)
  > Charge une typo custom (EB Garamond, Lyon, etc.)
  > Convertir en liste verticale décalée
  > Réécrire avec voix sceptique, sans verbe slop FR

Avec Sailop dans ta boucle, tu fermes le loop : prompt anti-slop, output, audit Sailop, corrections, output validé. C'est la chaîne complète.

Le scanner est un complément au prompt, pas un remplacement. Le prompt fait 80 % du travail. Le scanner attrape les 20 % restants. Ensemble, tu passes de 30/100 à 92/100 en moyenne.

---

13. FAQ : les questions exactes que les gens tapent

Q1. Est-ce que je peux utiliser ChatGPT gratuit pour ça ?

Oui, mais avec des limites. Le free tier donne accès à GPT-4o (pas GPT-5), et tu n'as pas accès aux Custom GPTs sans abonnement. Tu peux mettre le system prompt dans chaque conversation, mais c'est lourd. Pour un usage régulier, ChatGPT Plus à 20 $/mois pour les Custom GPTs vaut le coup. Sinon, claude.ai gratuit donne accès à Claude Sonnet 4.5 avec quotas, et tu peux créer des Projects (avec custom instructions persistantes) avec un compte Pro.

Q2. Le prompt marche avec Claude Sonnet ou seulement Opus ?

Marche avec les deux. Score moyen mesuré : Sonnet 4.5 = 89, Opus 4.7 = 92. Différence faible. Opus est meilleur pour la phase "discovery" (proposer des archétypes, des couples typo originaux), Sonnet est meilleur pour la phase "exécution" (appliquer les contraintes vite et bien, à 1/5 du prix). En pratique : Opus pour le brief, Sonnet pour l'itération.

Q3. Comment éviter que Bolt me fasse encore du Tailwind bleu ?

Bolt et Lovable ont leur propre system prompt interne (que tu ne peux pas modifier directement). Ton prompt doit être agressif dès le départ. Mets en début : "IMPORTANT : aucune palette par défaut Tailwind. Couleurs custom hex obligatoires : #f1ead8, #1c1c1c, #c2410c. Pas de bg-blue-*, pas de bg-violet-*, pas de bg-indigo-*. Si tu utilises Tailwind, c'est avec des arbitraries values uniquement (bg-[#f1ead8])." Ça force la main.

Q4. Est-ce que le prompt marche pour autre chose que des sites web ?

Oui. Adapté, marche pour : présentations Keynote / Reveal.js, identités visuelles (logo + system), packaging, illustrations procédurales en code (p5.js, processing), apps mobile (React Native, Flutter), papers académiques (LaTeX). Le principe est le même : imposer un archétype + une palette + une typo + bannir le défaut + auto-audit.

Q5. Pourquoi mon prompt long (3000 caractères) donne un moins bon résultat que mon prompt court (500 caractères) ?

Effet de saturation d'attention. Au-delà de ~2000-2500 caractères, le modèle commence à perdre certaines contraintes. La règle : 800-1500 caractères est le sweet spot pour un prompt user. Le system prompt peut être plus long (3000-5000) parce qu'il est traité différemment. Si ton prompt user dépasse 2000 caractères, soit tu le mets en system prompt, soit tu le scinde en deux tours.

Q6. Comment je sais si mon prompt marche sans installer Sailop ?

Heuristique manuelle : prends ton output, mets-le côte-à-côte avec 3 sites au pif sur v0.dev's gallery ou Lovable's showcase. Si ton output ressemble à 60+ % à n'importe lequel des 3, c'est du slop. Si tu vois clairement "ce site est différent des 3 autres", t'es bon.

Q7. Le prompt marche-t-il en anglais ?

Oui, encore mieux qu'en français pour Claude et GPT-5 (entraînés majoritairement en anglais). Pour Gemini, marche aussi mieux en anglais. Si ton client est francophone, prompt en anglais et demande l'output en français : "Generate the code with French copy. The website is for a French-speaking audience."

Q8. Faut-il un prompt différent pour chaque modèle ?

Pas vraiment. Le prompt anti-slop maître marche sur tous. Les ajustements à la marge :

• Gemini : doubler les bannissements explicites (Gemini ignore les négations 1 fois sur 3).
• GPT-5 : ajouter "Be specific, not generic" en préfixe (GPT-5 a tendance à généraliser).
• Llama / Mistral : être plus explicite sur la typo et les fonts (ces modèles connaissent moins les fonts custom).

Q9. Et si mon client veut "moderne et professionnel" ?

Tu as deux options :

• Éducation client : montrer 2-3 versions (la slop, la unique), demander laquelle inspire plus confiance, en démontrer le mieux par AB test.
• Détourner les mots : interpréter "moderne" comme "qui n'imite pas le passé du SaaS 2015-2024" (donc nouveau, distinct), et "professionnel" comme "sobre, lisible, fiable" (qui peut être brutalist, atelier, suisse).

Le mot "moderne" dans la bouche d'un client = "qui ressemble à des sites que je vois actuellement". Ton job c'est de réorienter cette définition.

Q10. Combien de tours d'itération en moyenne ?

Pour atteindre score 90+ Sailop : 3-4 tours en moyenne. Pour atteindre score 95+ : 5-6 tours. Au-delà, rendement décroissant. Mon ratio personnel : je m'arrête à 92, je polis manuellement le reste.

Q11. Faut-il payer Claude Pro pour profiter des Projects ?

Pour un usage hebdomadaire ou plus, oui (20 $/mois). Tu peux mettre ton system prompt anti-slop, uploader des PDFs de références (livres de typographie, monographies de designers), et ton Projet a un contexte persistant. C'est l'équivalent d'un Custom GPT mais en mieux pour la créativité visuelle (Claude est meilleur sur ce sujet en 2026).

Q12. Comment je teste si mon prompt anti-slop est bon avant de l'utiliser sur un projet client ?

Procédure :

• Génère 10 outputs avec ton prompt sur 10 contextes différents (SaaS, agence, restaurant, blog, etc.).
• Pour chacun, scanne avec Sailop ou évalue manuellement contre les 9 leviers.
• Si moyenne > 85, ton prompt est validé. Si moyenne < 75, retravaille.
• Si certains contextes spécifiques sont en dessous (ex: ton prompt marche bien pour SaaS mais mal pour restaurants), fais des variantes par contexte.

---

14. Annexes

Annexe A : le prompt anti-slop en EN (pour devs anglophones)

Pour lecteurs FR qui codent en anglais, ou qui veulent partager avec des collègues anglophones.

You are a senior designer-developer who hates AI slop. AI slop is :
centered hero, violet-to-pink gradient, three-card grid, Inter font,
rounded-2xl + shadow-md buttons, "Trusted by" logos, 3-step "How it
works", 3-tier pricing with "Most popular" badge, 4-column footer,
phrases like "Discover", "Unlock", "Empower", "Crafted with love".
You NEVER do this.

# HARD RULES

1. PALETTE
   - 3 colors max. Never 4.
   - No Tailwind blue primary (#3b82f6).
   - No violet-to-pink gradient, no mesh gradient.
   - Source: a real object (vergé paper, postal kraft, cinema poster, 
     coffee label, IKEA manual), not a "modern palette".

2. TYPOGRAPHY
   - No Inter, no Geist, no Manrope.
   - Pair: 1 editorial serif/display + 1 mono OR 1 distorted grotesk.
   - Numbers: tabular (tnum).

3. LAYOUT
   - Asymmetry mandatory.
   - No full-width centered hero.
   - No grid-cols-3 features.
   - No 4-column equal footer.

4. ARTIFACTS
   - Add 2 rare visual artifacts: corner brackets, scan lines, noise,
     ASCII art, marginal numbering, typographic rules, ornaments,
     crop marks, custom border-image.

5. EDITORIAL VOICE
   - Avoid: Discover, Unlock, Empower, Seamless, Crafted with love,
     Innovative, Cutting-edge, In a world where, At the heart of.

6. STRUCTURE
   - No "Trusted by" without real clients.
   - No "How it works" 3 numbered steps.
   - No "Most popular" badge on middle pricing.

7. WORKFLOW
   1. Describe in 4-6 lines: archetype, palette (3 hex), font pair, 
      2 artifacts you'll insert, 3 slop patterns you'll avoid 
      (specific to this case).
   2. Generate code.
   3. Self-audit: list 3 ways your output could look AI-generated.
      For each, propose a fix.
   4. Apply fixes. Deliver v2.

8. VAGUE PROMPTS
   If user says "build a SaaS landing page", REFUSE to answer 
   directly. Ask 3-5 specific questions: product in one sentence,
   user in 2 lines, brand voice, archetype (brutalist / atelier / 
   swiss / terminal / art-deco / postal / acid-y2k / editorial), 
   concrete references (sites, brands, objects).
   Only generate after answers.

Annexe B : liste d'archétypes visuels (référence rapide)

Garde cette liste à portée de main pour piocher rapidement :

| Archétype | Mood / Vibe | Palette typique | Couple typo | Bonus | |-----------|-------------|-----------------|-------------|-------| | Bauhaus 1923 | Géométrie pure | Rouge/jaune/bleu/noir/blanc | Universal/Futura | Cercles, triangles, carrés explicites | | Brutalist web | Web 1996 brut | Bleu/blanc/Times | Times New Roman | Soulignés, marges 0 | | Atelier d'imprimeur | Papier, encre | Crème/encre/rouge | Garamond + JetBrains | Filets, ornements | | International / Suisse | Grilles strictes | Noir/blanc/rouge | Helvetica/Akzidenz | Asymétrie contrôlée | | Terminal / TUI | Vert sur noir | Vert phosphore/noir | JetBrains/Berkeley Mono | ASCII, scan lines | | Art Déco | Géométries dorées | Or/noir/crème | Bodoni Display | Lignes verticales fines | | Affiche soviétique | Blocs solides | Rouge/noir/blanc | Cyrillic Display | Diagonales, contraste max | | Postal kraft | Papier brun | Kraft/noir/rouge timbre | Mono + Cooper Hewitt | Étiquettes, tampons | | Acid Y2K | Hyper-saturé | Cyan/magenta/lime | Display tech | Chrome, glitch | | Editorial print | Magazine indé | 2 couleurs + papier | Serif display | Marges, footnotes | | Civic / municipal | Sobriété admin | Vert/blanc/noir | Cooper Hewitt + GT America | Tampons "officiel" | | Studio scandinave | Pastels, espace | Beige/gris-bleu/noir | Söhne | Beaucoup de blanc | | Cartographique | Lignes, courbes | Sépia/blanc/noir | Serif fine | Légendes, échelles | | Boucherie / atelier | Stickers, calque | Rouge sang/blanc | Display déformée | Marquages, prix | | Manuscrit médiéval | Calligraphie | Parchemin/encre/or | Calligraphique + ornement | Drop caps | | Magasin japonais | Zen + sigles | Crème/noir/1 sumi | Serif + noh | Idéogrammes, vide | | Carnet de bord | Maritime / aérien | Marine/encre/rouille | Garamond + mono | Coordonnées, dates | | Tract militant 70s | Photocopie zine | 2 couleurs solides | Grotesk déformée | Contrastes, slogans | | Carte routière 1950 | Carto vintage | Sépia/bleu plan | Serif fine + mono | Lignes, légendes | | ECM Records | Label musique | Papier/noir/1 accent | Serif éditoriale + mono | Photo N&B, métadonnées |

Annexe C : glossaire

• AI slop : sortie générique d'un LLM/IA visuelle/IA audio reconnaissable comme produite par défaut, sans personnalisation. Voir notre guide complet.
• Archétype visuel : cluster cohérent de décisions visuelles (palette, typo, layout, artefacts) qui existe dans la culture humaine et qu'un LLM connaît mais n'utilise pas par défaut.
• Auto-audit : technique de prompt qui demande au modèle de lister ses propres faiblesses avant livraison. Levier le plus puissant.
• Custom GPT : feature de ChatGPT Plus permettant de créer un assistant avec system prompt persistant.
• Levier : un des 9 axes par lesquels on peut sortir un LLM de sa moyenne slop.
• Pattern slop : élément visuel ou textuel récurrent qui marque une sortie comme AI-default (ex: gradient violet, "Trusted by", rounded-2xl shadow-md).
• Sailop score : score d'unicité de 0 à 100 calculé par le scanner Sailop, basé sur 53 patterns slop détectés.
• System prompt : instructions persistantes qui s'appliquent à toutes les conversations d'un assistant (vs prompt user qui change à chaque message).

Annexe D : liens internes Sailop

Pour aller plus loin sur le sujet :

• Qu'est-ce que le AI slop : guide définitif 2026 : la base du sujet
• Comment éviter qu'un site Lovable ait l'air AI-généré : focus outil
• Le bleu Tailwind et le gradient violet, signature visuelle de l'IA en 2026 : focus pattern
• Détecter un site généré par IA en 30 secondes : pour calibrer ton œil

Annexe E : sources et lectures externes recommandées

Citations restreintes à ce que je connais réellement :

• Anthropic blog : pour les annonces et best practices Claude
• OpenAI blog : pour les annonces GPT et bonnes pratiques
• Google AI blog : pour Gemini
• Smashing Magazine : articles design typo et CSS
• Wired : couverture critique de l'IA générative
• The Verge : couverture produit et tendances
• Wikipedia, Bauhaus et Wikipedia, Brutalist architecture : pour les archétypes

---

Conclusion : le prompt seul est nécessaire mais pas suffisant

Le prompt anti-slop est un excellent premier mile. Avec les 9 leviers, le system prompt maître, et l'auto-audit, tu passes de 30/100 à 90/100 sur la majorité de tes outputs. C'est énorme. C'est la différence entre "encore un site Lovable" et "ah tiens, c'est qui qui a fait ça ?".

Mais 90/100 n'est pas 100/100. Le modèle glisse parfois. Tu as un client demain. Tu veux la garantie que ce que tu livres ne ressemble pas à du AI-default. C'est exactement pour ça que Sailop existe : un linter qui audite ton output et te dit, en clair, où sont les patterns slop qui restent.

npx sailop install
sailop scan ./

La chaîne complète : prompt anti-slop, génération, auto-audit du modèle, scanner Sailop, corrections, livraison validée.

C'est en fermant cette boucle que tu arrêtes de subir le slop par défaut, et que tu commences à livrer des sites qui ont de l'âme, quel que soit le LLM que tu utilises pour les générer.

Bonne génération.

Sailop, le toolkit npm anti-slop pour le frontend.