Barrierefreiheit

Passe an, wie diese Website aussieht und sich bewegt. Die Einstellungen gelten, solange du auf dieser Website unterwegs bist, und werden nicht gespeichert: Ein Neuladen der Seite setzt sie zurück.

Voreinstellungen

Text

Textgröße
Zeilenhöhe

Darstellung

Farbe

Bewegung

Navigieren und vorlesen

Seitenstruktur

Vorlesen

Vorlesen ist in diesem Browser nicht verfügbar.

CG Web Skills

Design Director für KI-generierte und Template-Websites

cg-web-deslopifier

Seine Aufgabe ist nicht, eine Website „weniger nach KI“ aussehen zu lassen. Sie soll aussehen wie das Ergebnis klarer menschlicher Entscheidungen — ohne ein Template gegen ein anderes zu tauschen.

4.490 Wörter Methode · Dokumentiert für Version 1.3.0 · geprüft

Vollständige SKILL.md lesen

0

Er liest das Projekt, bevor er es anfasst

Brand Guidelines, Tokens, Fonts, Komponenten, Content-Quellen und vorhandene Metadaten kommen zuerst. Logo, freigegebene Farben, eigene Bilder, Informationsarchitektur und funktionierende Integrationen bleiben erhalten, solange sie nicht eindeutig fehlerhaft sind — repariert wird das Design, nicht die Architektur.

Do not rewrite architecture merely to make the design cleaner.

cg-web-deslopifier · SKILL.md

1

Ein Audit der gerenderten Seite, nicht einzelner Eigenschaften

Claude betrachtet die Seite bei 1440, 1024, 768 und 390 Pixeln und katalogisiert, was sie generisch macht: die Fläche aus Verläufen und Glow, eine Karte um alles, der Hero aus Badge, Headline und zwei Buttons, eine Sans-Serif für jede Aufgabe, Stockfotos, Texte, die zu jeder Branche passen, Motion ohne Aufgabe. Ein einzelner Verlauf beweist nichts; die Kombination und die Wiederholung schon.

Audit the rendered site and source code separately. Do not diagnose from source code alone. Visual sameness is a rendered-experience problem.

cg-web-deslopifier · SKILL.md

2

Eine Designrichtung, bevor Komponenten sich ändern

Drei bis fünf konkrete Markeneigenschaften, ein bis drei visuelle Signaturen aus der tatsächlichen Marke, ein kleines Token-System und eine klare Aufgabe für jede Section: die Frage des Besuchers, die sie beantwortet, der Beleg, den sie liefert, die Handlung, zu der sie auffordert.

Avoid empty adjectives such as “modern,” “clean,” “professional,” or “beautiful” unless they are translated into observable decisions.

cg-web-deslopifier · SKILL.md

3

Größter Hebel zuerst

Informationsarchitektur, Hero, Typografie, Inhalte und Bilder kommen vor Karten, Farben und Motion. Claude hört auf, wenn die Seite spezifisch, klar und weiterhin barrierearm und schnell ist — danach noch mehr Neuheit hinzuzufügen, ist ein eigener Fehler.

Never apply all anti-slop techniques simultaneously. The site should gain personality, not become visually noisy.

cg-web-deslopifier · SKILL.md

Was er ablehnt

Den KI-Look zu entfernen darf eine Website weder unehrlicher machen noch eine modische Formel gegen die nächste tauschen. Erfundenen Realismus schließt der Skill ausdrücklich aus:

Do not make a website appear more “real” by inventing case studies, customer names, reviews, numbers, locations, team members, awards, or product behavior.

cg-web-deslopifier · SKILL.md

Was er zuerst ändert

Die Arbeitsreihenfolge des Skills. Schatten auf einer Seite zu tunen, deren Struktur noch generisch ist, ist verschwendete Mühe — deshalb beginnt die Liste mit dem, was Besucher zuerst lesen.

  1. Information architecture
  2. Hero composition
  3. Typography system
  4. Content specificity
  5. Imagery
  6. Layout rhythm
  7. Component treatment
  8. Color/effects
  9. Interaction
  10. Code cleanup

Frag Claude zum Beispiel

  • This site was vibe-coded and looks like every AI landing page. Deslopify it.
  • Remove the AI look from our homepage without changing the brand.
  • Audit our landing page for generic AI design patterns and fix the worst ones.
  • Make this Claude Code website look custom.
Terminal-Sitzung
$ npx cg-web-skills@latest install cg-web-deslopifier