elmir-mammadli/ai-deslop

KI ent-schlonzen

Ziel: Eine Seite, die sich anfühlt, als wäre sie von einem Menschen mit einer eigenen Haltung gestaltet. Eine typografische Stimme, echter Content, wo früher Platzhalter standen, Dekoration nur dort, wo sie eine Bedeutung trägt. Tells zu entfernen ist die eine Hälfte der Arbeit; die andere Hälfte ist der Nachweis, dass nichts kaputtgegangen ist, wo sie früher waren.

Arbeite in dieser Reihenfolge und überspringe keine Schritte: Scope → Audit → Keep-Liste → Bearbeiten → Reparieren → Verifizieren → Bericht. Ein Durchlauf ist erst abgeschlossen, wenn jedes Tor in der „Definition von erledigt“ erfüllt ist.

1. Scope

• Liste jede Seite, jedes geteilte Component, jede Datendatei und jedes Thumbnail im Scope auf. Die übergeordnete Site zählt, nicht nur Demos oder Unterseiten. Wenn der Nutzer „alles“ sagt, dann ist alles gemeint; höre niemals bei einer Teilmenge auf und melde sie als erledigt.
• Inhalte leben an drei Orten; prüfe alle drei: Stylesheets, Markup/Components und Datendateien (Arrays von Titeln, Typografie-Fakten, Navigationslabels, Metadaten).
• Frage einmal nach, wenn der Scope wirklich unklar ist. Ansonsten fahre fort.

2. Audit mit dem Skript, dann mit dem Auge

Führe zuerst den mitgelieferten Scanner aus. Er listet jeden Kandidaten mit Datei:Zeile auf, gruppiert nach Tell, und beendet sich mit Exit-Code 1, solange noch Fix-Level-Tells vorhanden sind.

python3 <skill-dir>/scripts/audit.py <pfade...> --keep-caps ".wordmark,.logo,.heroTitle"
python3 <skill-dir>/scripts/audit.py src --only caps,tracking,period      # Fokus
python3 <skill-dir>/scripts/audit.py src --json > audit.json               # maschinenlesbar

• fix-Tells müssen auf null sinken (oder einen begründeten deslop-keep-Marker tragen). check-Tells (Verlauf, Leuchten, counter-css, Augenbraue, Streifen, em-Überschrift, Form) benötigen jeweils ein menschliches Urteil, das im Bericht festgehalten wird.
• Der Scanner überspringt Kommentare und node_modules/Build-Ausgabe. Er kann keine Absichten beurteilen, keine Layout-Brüche finden oder gerenderten Text sehen; dafür sind die Schritte 5 und 6 da.
• Zusätzliche Suchvorgänge, die das Skript nicht abdeckt, befinden sich in references/audit.md.

3. Die 20 Tells: Genaue Maßnahmen und Keep-Regeln

#	Tell	Genaue Maßnahme	Nur behalten, wenn
1	Tags und Pillen	radius 999px → 3 bis 4px, oder das Tag als einfarbigen Text gestalten	Es trägt einen Zustand, auf den der Leser reagiert (Dringlichkeit, Status, aktiver Filter)
2	Übermäßige Kursivierung	font-style: italic, italic-Utilities, <em>/<i> für Verzierung löschen	Echte Titel von Werken, ein zitierter Fremdbegriff, ein Wortmarke
3	Standard-KI-Schriftarten	Instrument Serif, Instrument Sans, Geist, Geist Mono, Space Grotesk, IBM Plex Mono, JetBrains Mono, Space Mono ersetzen, wenn sie als Sprachrohr der Seite verwendet werden	Niemals als Sprachrohr; siehe Schriftregeln
4	Negative Laufweite	Jedes negative letter-spacing und tracking-[-…], tracking-tight(er) löschen	Niemals
5	Übermäßig detaillierte UI	Gadgets löschen: Live-Statuspunkte, Fake-Tracker, Cursor-Linsen, magnetische Buttons, Scroll-Schräg-Marquees, sich drehende Zähler, dekorative Aussteuerungsanzeigen	Das Gadget ist das Produkt (Taschenrechner, Planer, Konfigurator)
6	Übermäßige Verwendung von Trennlinien	Höchstens eine strukturelle Linie pro Liste behalten; Linien löschen, die nur trennen	Die Linie gruppiert Zeilen in einer Tabelle oder Liste
7	Farbtöne und Deckkräfte	Solide Farb-Tokens; Leuchten, Unschärfe, backdrop-filter, Schatten mit über 40px Unschärfe löschen	Eine Lasur hält Text auf einem Foto lesbar; eine einzelne dezente Erhebung auf einem echten Overlay (Dialog, Menü)
8	Umrandete Container	Karten ent-boxen, deren Rand nur dekoriert; linke Akzentstreifen (border-left ≥ 3px) löschen	Die Box ist ein echtes Objekt (Formular, Quittung, Ticket, Blatt, Tabelle) oder der Streifen signalisiert einen Status (Formular Erfolg/Fehler)
9	Übermäßig detaillierte Diagramme	„Tafel I“, „Abb. 2“, Legenden und Beschriftungen, die nichts erklären, entfernen	Jedes Element bildet etwas Reales ab
10	Ausführlicher, redundanter Text	Eine Offenlegungszeile im Footer statt wiederholter „Beispiel“-Hinweise; Sätze löschen, die die Überschrift wiederholen	Der Hinweis fügt Informationen hinzu, die sonst nirgendwo stehen
11	Code-Breadcrumbs	// LABEL, /services-Linktext, [1], EV-01, R-03, STATUS:, TEL/MAIL/AREA-Großbuchstaben-Labels löschen	Echte Navigations-Breadcrumbs („Startseite / Über uns“)
12	Abschnittsnummerierung	„01 /“, „§“, „Kapitel 1“, römische Ziffern, „Z1“, nullwertige Zähler im Markup und in CSS counter() löschen	Reihenfolge ist der Inhalt: Anleitungen, Zeitleisten, Formularschritte, Quizfragen, Zahlen, die mit Markierungen in einem Diagramm übereinstimmen. Dann einfaches 1. nicht 01
13	Augenbrauen	Das kleine Label über einer Überschrift löschen; wenn es Fakten enthielt (Ort, Gewerbe, Preis), in die Überschrift oder den ersten Satz verschieben	Es ist ein funktionales Label: Formularlabel, Legende, dt, Tabellenkopf, Footer-Spaltenkopf
14	Dithering, Rauschen	Dither- und Rauschtexturen löschen	Die Textur ist die künstlerische Leitung (Risographie-Druck, Papierrand); mit deslop-keep markieren
15	ASCII-Bilder	Löschen	Niemals standardmäßig
16	Squircles	Radius 12px und höher → 4 bis 6px (Abschnitte, Karten, Bilder, Dialoge)	Echte Kreise (gleiche Breite und Höhe: Avatare, Icon-Punkte, runde Häkchen), bewusste Formen (Bogenfenster, Rohrenden) mit deslop-keep
17	Monospace-Schriftarten	Durch die Textschrift der Site plus font-variant-numeric: tabular-nums ersetzen	Echter Code auf der Seite
18	GROSSBUCHSTABEN-Untertitel	text-transform: uppercase, uppercase-Utilities, Großbuchstaben in Quellstrings löschen; auch deren positive Laufweite löschen	Wortmarken, echte Beschilderung (GEFAHR / WARNUNG / HINWEIS, Rohrmarkierungen) und eine Marke, die auf kompakten Display-Überschriften aufbaut (diese Selektoren in --keep-caps belassen)
19	Verlaufs-Hintergründe	Einfarbig	Datenskalen (Temperatur, Jahreszeiten), Fotolasur, harte Stopp-Haarlinien
20	Punkte in Titeln	Den abschließenden Punkt von h1 bis h3, Seitentiteln, Karten- und Datentiteln, Display-großen einzeiligen Footer-Zeilen entfernen	Fließtextsätze, mehrsätzige Absätze, Abkürzungen („z. B.“, „Inc.“)

Auch entfernen: einen akzentfarbenen Ausdruck in einer Überschrift (gleicher Tell wie #2), umrandete oder konturierte riesige Wortmarken, dekorative Kleckse und Kreise, leere Rahmen und Filmstreifen.

4. Schriftarten

• Liefere niemals eine Standard-KI-Schriftart (#3) als Sprachrohr aus. Wähle je nach Thema, basierend auf dem, worum es auf der Seite geht: Beschilderungsgewerbe bekommen eine Autobahn- oder Kondensschrift, traditionelles Handwerk eine Caslon oder Didone, Studios einen redaktionellen Serifen mit einer ruhigen Sans.
• Eine Display-Schrift plus eine Textschrift oder eine Familie. Keine dritte Familie für Labels.
• Zahlen verwenden font-variant-numeric: tabular-nums in der Textschrift, niemals eine Monospace.
• Beim Austausch auch aktualisieren: Schriftimporte, CSS-Variablen, Layout-Klassenlisten, Header-Kommentare, die Schriftarten nennen, und alle Daten, die Schriftartnamen anzeigen (Katalogkarten, Styleguides). Überprüfe dann jede Überschrift erneut, deren Breite oder Zeilenanzahl von der alten Schrift abhing.
• Lade keine kursiven oder ungenutzten Schriftgewichte, nachdem Kursivierungen entfernt wurden.

5. Textregeln

• Überschriften: kein abschließender Punkt, kein <em>, kein Akzent-Span, Satzfall.
• Schreibe abgehackte Zweisatz-Überschriften in einen natürlichen Satz um:
  • „Ventil schließen. Dann anrufen.“ → „Ventil schließen, dann anrufen“
  • „Leck finden. Dach planen.“ → „Leck finden, dann Dach planen“
  • „Schnell, enthalten, erklärt.“ → „Schnell, enthalten und erklärt“
  • „Eine professionelle Website. Ein klarer Preis.“ → „Eine professionelle Website zu einem klaren Preis“
  • „Sieben Schichten. Eine siehst du.“ → „Sieben Schichten, und du siehst eine“
  • Eine Frage plus eine Anweisung darf als zwei Teile bleiben: „Wasser ab? Buchen Sie einen Morgenbesuch“.
• Wenn eine Augenbraue entfernt wird, die eine Tatsache enthielt, muss diese Tatsache irgendwo sichtbar überleben.
• Befolge die eigenen Stilregeln des Projekts (Rechtschreibvariante, verbotene Wörter, Bindestrich-Stil). Überprüfe die Rechtschreibkonsistenz nach Bearbeitungen.
• Erfinde niemals Beweise: keine gefälschten Bewertungen, Zählungen, Logos, Auszeichnungen. Kennzeichne Beispiele einmal im Footer.

6. Bearbeiten

• Mechanische Änderungen (Großbuchstaben, Laufweite, Kursivierung, Radien, Überschriftenpunkte) per Skript; Ermessensentscheidungen (Umschreibungen, Gadgets, Layouts) von Hand.
• Bearbeite CSS Regel für Regel mit einem kleinen Parser (match selector { body }-Blöcke, ändere den Body, schreibe zurück). Führe niemals einen großen Backtracking-Regex über ein gesamtes Stylesheet aus.
• Zuerst Keep-Liste, dann Bearbeitung. Schreibe auf, welche Selektoren Großbuchstaben behalten und welche Zahlen bleiben, dann übergib diese Liste an das Skript.
• Markiere bewusste Ausnahmen inline, sodass zukünftige Audits sie überspringen: /* deslop-keep: grund */ in CSS, {/* deslop-keep: grund */} in JSX, in derselben oder der vorherigen Zeile.

7. Reparieren, was das Entfernen kaputtmacht

Jede Entfernung kann ein Loch hinterlassen. Überprüfe jedes davon für jede Site:

1. Grids mit einer kleinen ersten Spalte (44px 1fr, 80px 1fr 360px, 90px 1fr 1.4fr), die eine Zahl oder Code enthielt: Entferne diese Spalte an jedem Breakpoint.
2. Linken Rand oder Padding von 28 bis 60px auf p, dd, h3, li, der Text nach einer entfernten Zahl ausrichtete: auf 0 setzen.
3. Übrig gebliebene counter-reset / counter-increment, li > span / dt span-Regeln, display: flex; gap auf Überschriften, die nur eine Zahl beabstandeten.
4. Tote Klassen, die nicht mehr im Markup referenziert werden (dynamische wie s[\badge_${x}`]überspringen), leere Regeln, ungenutzteindex`-Parameter und Props, ungenutzte Importe und Schriftvariablen, veraltete Kommentare.
5. Überschriften, die ein Bild überlappten oder auf einer Zeilenanzahl beruhten, nach einer Schriftänderung.
6. Entferne niemals Ränder innerhalb von ::before / ::after, ohne die Regel zu lesen: Ein linker plus unterer Rand um 45° gedreht ist ein gezeichnetes Häkchen.

8. Verifizieren

• Gerenderte Überprüfung jeder Seite bei 1440 und 390 Breite, mit prefers-reduced-motion: reduce, damit animierte Abschnitte fertig gerendert werden. Scrolle die gesamte Seite, bevor du sie erfasst, damit Lazy-Images geladen werden; entferne Dev-Overlays. Ein leerer Bildbereich ist bis zum Gegenbeweis Lazy-Loading oder ein hängender Dev-Bildoptimierer; vergleiche mit der Produktion, bevor du es als Fehler bezeichnest.
• Automatisierter Durchlauf auf jeder Route bei beiden Breiten: null Konsolenfehler, null horizontaler Überlauf (scrollWidth > innerWidth).
• Projekt-Checks: Typcheck, Lint (null neue Warnungen), die Kopie- oder verbotene-Wörter-Prüfung des Projekts, Produktionsbuild.
• Führe das Audit-Skript erneut aus: fix-Gesamtzahl muss 0 sein.
• Aktualisiere Thumbnails, Vorschauen und Showroom-Bilder, die das alte Design zeigen, und überprüfe sie erneut.
• Stelle Dateien wieder her, die Builds oder Dev-Server überschreiben (z. B. tsconfig.json, next-env.d.ts), vor dem Committen.

9. Definition von erledigt

Alle müssen wahr sein:

• Jedes Element im Scope wurde auditiert (Stylesheets, Markup, Daten, Thumbnails).
• audit.py meldet fix: 0; jeder verbleibende check-Treffer hat ein Urteil.
• Jede Ausnahme befindet sich auf der Keep-Liste oder trägt einen deslop-keep-Marker mit einem Grund.
• Jede Seite wurde gerendert und bei 1440 und 390 angesehen.
• Null Konsolenfehler und null horizontaler Überlauf auf jeder Route.
• Typcheck, Lint, Kopie-Check und Produktionsbuild bestehen.
• Vorschauen und Thumbnails aktualisiert.
• Nichts ohne die Zustimmung des Nutzers gepusht oder veröffentlicht.

10. Bericht

Beende mit einem kurzen Bericht in dieser Form:

1. Scope: Was abgedeckt wurde (Anzahl der Sites und Seiten).
2. Entfernt: Pro Tell, was geändert wurde und ungefähr wie viele Instanzen.
3. Absichtlich behalten: Jede Ausnahme und ihr Grund.
4. Repariert: Gefundene und behobene Layout-Brüche.
5. Verifiziert: Jede Prüfung und ihr Ergebnis.
6. Offene Punkte: Alles, was nicht erledigt oder nicht verifiziert wurde, klar benannt.

In der Praxis gesehene Fallstricke

• Die Festplatte füllt sich schnell mit Headless-Browser-Profilen. Erfasse eine Seite nach der anderen, lösche jedes Profil, beobachte den freien Speicherplatz. Eine volle Festplatte zerstört die Shell und den Dev-Server.
• Töte nicht den Dev-Server des Nutzers. Starte deinen eigenen auf einem anderen Port und stoppe ihn, wenn du fertig bist.
• Das Matching nur auf Klassennamen entfernt funktionale Labels; match auf Position und Elementtyp.
• Datengetriebene Titel und Template-Literal-Seitentitel werden von einem JSX-only-Überschriften-Scan übersehen; das Skript prüft auch title:, heading: und title=.
• Ein Durchlauf, der die übergeordnete Site, die Datendatei oder die Thumbnails überspringt, ist nicht erledigt.

Neue Arbeit ohne die Tells gestalten

Beginne mit dem Thema, nicht mit einer Vorlage: eine Display-Schrift und eine Textschrift, gewählt für das Gewerbe oder Publikum, eine Akzentfarbe mit einer Bedeutung, 0 bis 6px Ecken, Satzfall-Labels, Überschriften ohne Punkte, keine Augenbrauen, keine nummerierten Abschnitte, es sei denn, die Reihenfolge ist wichtig, echte Kopie statt Platzhalter-Labels, und jedes dekorative Element ist mit etwas Wahrem über das Unternehmen verbunden. Führe audit.py aus, bevor du die Arbeit übergibst.