Diskussion

Entferne den KI-Look von Webseiten in Claude Code

Von Wikiprompt, der freien Prompt-Enzyklopädie

Alex Prompter
Beigetragen vonAlex PrompterXQuelle

7. Nov. 2026

Entferne den KI-Look von Webseiten in Claude Code Ein umfassender Claude Code Workflow zur Entfernung von AI-Slop-Styling von einer bestehenden Webseite, mit Vorher/Nachher-Screenshots, einer nummerierten Slop-Liste, neun Styling-Durchgängen, WCAG-AA-Prüfungen und einer Überprüfung durch einen Judge/Guard-Subagenten. Adaptiert von Damir Sokolovskys Unslop-Skill.

Prompt-InhaltSpeichern

🌐
<task> Entferne den KI-Look von [PAGE: lokale Dev-URL]. Ändere nur das Handwerk: Funktionen, Verhalten, Fakten und Abschnittsreihenfolge bleiben. Keine neuen Abschnitte oder Komponenten. </task> <before> Nur lesen, bis ich zustimme. Verwende Chrome DevTools MCP. Überlasse mir jegliches Login und lies niemals Anmeldedaten. - Speichere Vorher-Aufnahmen außerhalb des Repos, emuliere 1440x900 und 390x844, in Bildschirmhöhen-Stücken. - Notiere die Build- und Testergebnisse sowie lighthouse_audit Zugänglichkeitsfehler auf Desktop und Mobilgerät. </before> <plan> 1. Slop-Liste: Nummeriere jedes Zeichen von KI-Slop und wo es erscheint: lila Verläufe, Glühen, Verlaufstext, Emoji-Labels, Glitzer-Badges, weit gesperrte Großbuchstaben, Endlosschleifen, driftender Abstand. Wenn die Seite größtenteils in Ordnung ist, sag das und behebe nur diese. 2. Richtung, drei Zeilen. Welt: ihre Umgebung oder ihr Material. Fokus: 1-2 Stellen bekommen reiche Farbe und Detail, der Rest bleibt ruhig. Signatur: ein kleines Detail, das nur dieses Produkt hätte. Echte Markenfarben, Logos und Schriften bleiben (ein lila Verlauf ist keine). 3. Kopiertabelle, aktuell vs. vorgeschlagen, nur Ton: Ausrufezeichen, "Willkommen zurück"-Begrüßungen, Hype-Wörter. Keine Behauptung, Zahl, Preis, Name oder Rechtszeile ändern. Zeig mir alle drei, dann stoppe und warte auf mein OK. </plan> <passes> Nach meinem OK, auf einem neuen Branch, ein Commit pro Durchgang über die gesamte Seite: 1. Abstand: 4px-Raster, Gleiches gleich groß 2. Farbe: eine neutrale Skala getönt Richtung Welt, drei Textebenen, eine Akzentfarbe für Fokus-Stellen reserviert, keine Farbverläufe oder Glühen 3. Icons: die Linien-Icons des Projekts ersetzen Emojis, eine Größe und Strichstärke 4. Kopie: nur genehmigte Zeilen 5. Typografie: Gewichte 400 und 500, Satzfall, die Schrift des Projekts 6. Layout: Ausrichtung und Proportionen nur innerhalb von Abschnitten 7. Details: konsistente Radien, ruhige Badges, die Signatur 8. Visuals: dekorativen Füllstoff entfernen, nichts generieren 9. Bewegung: Schleifen entfernen, transition-all, Hover-Vergrößerungen </passes> <rules> - Nur Styling und genehmigte Kopie ändern. Alles andere (Logik, Daten, Konfiguration, ein neues Paket oder eine neue Schrift) kommt auf eine Genehmigungsliste, ungebaut. - Themendateien zählen als Styling; benenne andere Seiten, die eine Änderung erreicht. - Behalte jede id, data- und aria-Attribut. Bearbeite niemals einen Test, um ihn zu bestehen: Nur-Kopie-Brüche kommen auf die Genehmigungsliste. - Text bleibt WCAG AA: 4.5:1, oder 3:1 für großen Text. Jedes Steuerelement behält einen sichtbaren Fokuszustand. - Nie pushen oder mergen. </rules> <check> Nach dem letzten Commit, nimm dieselben Aufnahmen erneut, dann: - Build und Tests: keine neuen Fehler. Keine Tests? Klicke nur Steuerelemente, die nicht schreiben, senden, löschen oder bezahlen können, und nenne das schwächeren Beweis. - Führe lighthouse_audit erneut aus: keine neuen Fehler. Es kann Text über Bildern oder Verläufen nicht bewerten, also liste diese als ungeprüft. Tab durchgehen, um Fokuszustände zu sehen. Grep nach Bewegungselementen, die Standbilder nicht zeigen können. - Beurteiler, ein frischer Subagent, kein Fork: bekommt nur die Vorher- und Nachher-Aufnahmen und die Slop-Liste, bearbeitet nichts. Markiert jedes Element als weg, noch da oder nicht erkennbar, mit Verweis auf den Screenshot. Flaggt alles, was bei Telefonbreite kaputt ist. Austauschtest: Würde diese Seite mit dem Namen einer anderen Firma noch Sinn ergeben? - Wächter, gleiche Bedingungen: bekommt nur die obigen Regeln, genehmigte Kopiezeilen und den vollständigen Branch-Diff. Listet jede Änderung auf, die kein Styling oder keine genehmigte Kopie ist. </check> <stop> Warte auf beide Berichte, behebe, was sie finden, nimm dann Aufnahmen erneut und führe den Check mit einem neuen Beurteiler und Wächter erneut aus, maximal 2 Runden, dann stoppe, auch wenn Elemente bleiben. Fehlgeschlagener Austauschtest: Welt und Signatur pushen, nur Styling. Wenn eingefrorene Kopie es verursacht, berichte es einfach. </stop> <output> Finale Slop-Markierungen, Test- und Lighthouse-Ergebnisse, Genehmigungsliste. Ende mit dem, was du von mir brauchst: Merge, Revert oder eine Entscheidung zu jeder Genehmigung. </output>

Melde dich an, um den vollständigen Prompt zu sehen

Weiter mit:

Mit der Anmeldung akzeptierst du unsere Nutzungsbedingungen und Datenschutz

Verwendung

Dieser Prompt ist für die Verwendung mit coding gedacht. Kopiere den Inhalt oben und füge ihn in dein bevorzugtes KI-Tool ein.

Für beste Ergebnisse passe die Platzhalter (eckige Klammern oder Großbuchstaben) an deine Anforderungen an.

Referenzen

Kategorien:coding| twitter| claude-code| web-design

Diskussion