Discussion

Supprimer l'apparence IA d'une page web dans Claude Code

De Wikiprompt, l’encyclopédie libre de prompts

Alex Prompter
Contribué parAlex PrompterXSource

7 nov. 2026

Supprimer l'apparence IA d'une page web dans Claude Code Un flux de travail complet Claude Code pour supprimer le style « AI-slop » d'une page web existante, avec des captures d'écran avant/après, une liste numérotée des éléments « slop », neuf passes de stylage, des vérifications WCAG AA, et une revue par un sous-agent juge/gardien. Adapté de la compétence « unslop » de Damir Sokolovsky.

Contenu du PromptEnregistrer

🌐
<task> Retirez l'aspect IA de [PAGE: URL de développement locale]. Modifiez uniquement l'artisanat : les fonctionnalités, le comportement, les faits et l'ordre des sections restent inchangés. Aucune nouvelle section ni composant. </task> <before> Lecture seule jusqu'à mon approbation. Utilisez Chrome DevTools MCP. Laissez toute connexion à moi et ne lisez jamais les identifiants. - Enregistrez les captures avant hors du dépôt, en émulant 1440x900 et 390x844, en morceaux de hauteur d'écran. - Consignez les résultats de construction et de test, ainsi que les échecs d'accessibilité de lighthouse_audit sur bureau et mobile. </before> <plan> 1. Liste des défauts : numérotez chaque signe de défaut IA et où il apparaît : dégradés violets, lueurs, texte en dégradé, étiquettes emoji, badges scintillants, capitales espacées, boucles infinies, espacement dérivant. Si la page est globalement correcte, dites-le et corrigez uniquement ces éléments. 2. Direction, trois lignes. Monde : son cadre ou son matériau. Focus : 1 à 2 endroits reçoivent une couleur et un détail riches, le reste reste sobre. Signature : un petit détail que seul ce produit aurait. Les couleurs, logos et polices réels de la marque restent (un dégradé violet n'en fait pas partie). 3. Tableau de copie, actuel vs proposé, ton uniquement : points d'exclamation, salutations "Bon retour", mots d'enthousiasme. Aucun changement de revendication, nombre, prix, nom ou ligne légale. Montrez-moi les trois, puis arrêtez-vous et attendez mon accord. </plan> <passes> Après mon accord, sur une nouvelle branche, un commit par passe sur toute la page : 1. Espacement : grille de 4px, mêmes choses même taille 2. Couleur : une échelle neutre teintée vers le Monde, trois niveaux de texte, un accent réservé aux spots Focus, pas de dégradés de teinte ni de lueurs 3. Icônes : les icônes de ligne du projet remplacent les emoji, une taille et un trait 4. Copie : uniquement les lignes approuvées 5. Typographie : graisses 400 et 500, casse de phrase, police du projet 6. Mise en page : alignement et proportions uniquement dans les sections 7. Détails : rayons cohérents, badges discrets, la Signature 8. Visuels : supprimez le remplissage décoratif, ne générez rien 9. Mouvement : supprimez les boucles, transition-all, agrandissements au survol </passes> <rules> - Seuls le style et la copie approuvée changent. Tout le reste (logique, données, configuration, nouveau package ou police) va sur une liste d'approbation, non construit. - Les fichiers de thème comptent comme style ; nommez toute autre page qu'un changement atteint. - Conservez chaque id, attribut data- et aria-. Ne modifiez jamais un test pour le réussir : les ruptures de copie seule vont sur la liste d'approbation. - Le texte reste conforme WCAG AA : 4.5:1, ou 3:1 pour le grand texte. Chaque contrôle conserve un état de focus visible. - Ne poussez jamais et ne fusionnez jamais. </rules> <check> Après le dernier commit, reprenez les mêmes captures, puis : - Construction et tests : aucune nouvelle défaillance. Pas de tests ? Cliquez uniquement sur les contrôles qui ne peuvent pas écrire, envoyer, supprimer ou payer, et appelez cela une preuve plus faible. - Relancez lighthouse_audit : aucune nouvelle défaillance. Il ne peut pas noter le texte sur les images ou les dégradés, donc listez-les comme non vérifiés. Parcourez par tabulation pour voir les états de focus. Grep pour les éléments de mouvement que les captures ne peuvent pas montrer. - Juge, un sous-agent neuf, pas une fourche : reçoit uniquement les captures avant et après et la liste des défauts, ne modifie rien. Marque chaque élément comme supprimé, toujours présent ou impossible à dire, en citant la capture. Signale tout ce qui casse à la largeur du téléphone. Test d'échange : cette page aurait-elle toujours du sens avec le nom d'une autre entreprise ? - Garde, mêmes conditions : reçoit uniquement les règles ci-dessus, les lignes de copie approuvées et le diff complet de la branche. Liste chaque changement qui n'est pas du style ou de la copie approuvée. </check> <stop> Attendez les deux rapports, corrigez ce qu'ils trouvent, puis reprenez les captures et relancez la vérification avec un nouveau juge et garde, 2 tours maximum, puis arrêtez même si des éléments restent. Test d'échange échoué : poussez le Monde et la Signature, style uniquement. Si la copie figée en est la cause, signalez-le simplement. </stop> <output> Marques finales des défauts, résultats de test et Lighthouse, liste d'approbation. Terminez par ce dont vous avez besoin de moi : fusionner, annuler, ou une décision sur chaque approbation. </output>

Connectez-vous pour voir le prompt complet

Continuer avec:

En vous connectant, vous acceptez nos Conditions et Confidentialité

Utilisation

Ce prompt est conçu pour être utilisé avec coding. Copiez le contenu ci-dessus et collez-le dans votre outil d’IA préféré.

Pour de meilleurs résultats, personnalisez les espaces réservés (indiqués par des crochets ou des majuscules) selon vos besoins.

Références

Catégories :coding| twitter| claude-code| web-design

Discussion