Communitygithub.com

Niltra/web-diseno-antislop

Entwirft und prüft Web-Oberflächen, die nicht nach KI aussehen (Anti-Slop). Legt vor dem Schreiben von Code ein Design-DNA fest, wendet harte Verbote (Inter, Lila, zentrierter Hero, Bento, 3 Karten) und die zwei Anti-Slop-Tests an. Verwende es beim Erstellen oder Neugestalten jeder Seite, jedes Abschnitts oder jeder Komponente einer Website oder bei der Prüfung, ob eine Website „wie KI aussieht“.

Was ist web-diseno-antislop?

Die Fähigkeit „Niltra/web-diseno-antislop“ zielt darauf ab, Web-Oberflächen zu entwerfen und zu überprüfen, die nicht den typischen, generischen Stil von KI-generierten Designs aufweisen (Anti-Slop). Der Kernansatz besteht darin, vor jeglicher Codierung ein verbindliches „Design-DNA“-Dokument festzulegen, das die Farbpalette, Schriftarten, das Layoutgerüst, die Hero-Komposition und ein einzigartiges Signaturelement definiert. Anschließend kommt eine Reihe harter Verbote („Baneos duros“) zum Einsatz, die spezifische Muster wie Inter-Schriftart, Lila- oder Indigo-Farbverläufe, zentrierte Hero-Blöcke, Bento-Grids und generische KI-Copy-Texte ächten. Zwei Anti-Slop-Tests überprüfen, ob das Design anhand der Produktkategorie erraten werden könnte – nur wenn dies nicht der Fall ist, gilt es als bestanden. Die Skill unterstützt Entwickler, die mit Frameworks und Tools wie Playwright arbeiten, und integriert Audit-Schritte, die Screenshots aufnehmen und gegen die Verbotsliste prüfen, um sicherzustellen, dass die UI einzigartig, barrierefrei und nicht von KI-Standards geprägt ist.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Niltra/agent-skills-web/tree/HEAD/skills/web-diseno-antislop
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Anti-Slop-Webdesign

Prinzip: Das Standardmodell konvergiert zum Durchschnitt all dessen, was es gesehen hat. Diese Skill durchbricht diese Konvergenz, indem sie vor dem Bauen zu Entscheidungen zwingt und danach mit Beweisen verifiziert.

Wann sie aktiviert wird

  • Beim Erstellen oder Neugestalten von Seiten, Abschnitten, Hero-Bereichen, Karten, Navigation oder jeder anderen UI.
  • Beim Auditieren einer Website oder eines Screenshots mit der Frage „Sieht das nach KI aus?“.
  • Bei der Auswahl von Schriftarten, Paletten, Abständen oder Bewegungen für ein neues Projekt.

Design-DNA (obligatorisch vor dem Code)

Jedes Projekt erklärt zuerst:

  1. Benannte Palette (z.B. „Kontrollraum“): 1 Tinten-/Basis-Farbe, 1 Oberflächen-Farbe, 1 Signal-Akzent, 1 Daten-Akzent, 1 Warnfarbe. HEX oder OKLCH + kontrastgeprüft AA.
  2. Schriftartenpaar mit Rollen: Display, Fließtext, Monospace für Technik, Ziffern. Niemals eine einzige Schriftart für alles.
  3. Skelett des Hauptabschnitts in ASCII.
  4. Komposition des Heroes: Was auf einem 1280x720-Laptop ohne Scrollen sichtbar ist.
  5. Signaturelement: etwas Einzigartiges, das nur diese Website hat (ein lebendiger Graph, ein Grid-Muster, ein Cursor, ein eigener Übergang).
  6. Bewegungsstufe (0-10) und Verhalten bei prefers-reduced-motion.

Es wird in docs/design-dna.md des Projekts geschrieben und während des Baus nicht improvisiert.

Die beiden Anti-Slop-Tests

  • Test 1: Könnte jemand die Palette allein durch Kenntnis der Produktkategorie erraten? Wenn ja, neu machen.
  • Test 2: Könnte man die ästhetische Familie mit Kategorie + Anti-Referenzen erraten? Wenn ja, neu machen.

Harte Verbote (wenn eines auftaucht, wird diese Achse neu generiert)

Schriftart-Territorium: Inter, Roboto, Open Sans oder jede andere System-Standardschriftart in einer Hauptrolle; alle Abschnitte mit derselben Überschriftengröße.

Farb-Territorium: Lila-/Indigo-/Violett-Verläufe; reines #fff und #000; Neon-Grün auf Schwarz als „Dev-Portfolio“; Creme + Terrakotta + Serif; mehr als ein dekorativer Verlauf pro Seite.

Layout-Territorium: Zentrierter, gestapelter Hero (Kicker + H1 + Untertitel + 2 Buttons); 3 gleich breite Spalten mit Icons; Bento mit Karten in Karten; seitlicher Akzentrand bei Karten; Glassmorphismus; falsches Dashboard mit dekorativen Sparklines; alles mit Fade-In-Up beim Eintreten; aufeinanderfolgende Abschnitte mit identischer Struktur.

Visuelles Inhalts-Territorium: Erfundene Screenshots oder schwebende Mockups; Stock-Bilder; KI-generierte Bilder als Ersatz für echte Produkte; Emojis als Feature-Icons; Logo-Reihe „Vertrauen auf uns“ ohne Kontext.

Copy-Territorium: „Elevate your…“, „Unlock“, „Supercharge“, „Take your X to the next level“, „The future of…“, „Seamlessly“, „Effortless“; dekorative Gedankenstriche; Label „Available for work“ mit grünem Punkt; mehr als 2 verschiedene Button-Typen.

Bauregeln

  • Text ist echtes HTML (indexierbar), niemals Text in Canvas, SVG oder Bild.
  • Grid mit Absicht: unterschiedliche Breiten je nach Inhaltstyp, absichtlich gebrochene Ausrichtungen, Hierarchie durch Größe und Gewicht, nicht durch Boxen.
  • Abstände basierend auf einer deklarierten (4/8)-Skala; keine zufälligen Werte.
  • Echte Interaktion: Hover, Fokus, Tastatur, Lade- und Leerzustände. Nichts Dekoratives, das nicht reagiert.
  • Bewegung mit Zweck: tritt einmal ein, nicht in einer Schleife; animiert transform und opacity; respektiert explizit prefers-reduced-motion.
  • Barrierefreiheit vor Originalität: Kontrast AA, sichtbarer Fokus, 44px große Touch-Flächen, minimale Breite 375px.

Anti-Slop-Audit (mit Screenshots)

  1. Desktop 1440 und Mobile 375 mit Playwright CLI erfassen (niemals ohne Screenshot eine Meinung abgeben).
  2. Die Liste der Verbote durchgehen und das erkannte Muster mit Beweis (Selektor/Screenshot) benennen.
  3. Die beiden Tests anwenden.
  4. Fokus, Tastatur, berechneten Kontrast und Reduced-Motion prüfen.
  5. Ausgabe: Muster → Beweis → konkreter Fix. 0 Muster = bestanden.

Unterstützende Werkzeuge

  • Playwright CLI für Screenshots und Überprüfung: siehe Skill web-qa-visual.
  • Echte Assets und Logos: siehe Skill web-assets-reales.
  • Text: Gate no-ai-slop.
  • Protokoll früherer Builds, um Skelett/Palette nicht zu wiederholen: docs/design-dna.md des Projekts (nur Anhängen).

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

Niltra/web-assets-reales

Consigue y trata imágenes reales para una web: capturas con Playwright de proyectos en vivo y repos, foto de perfil descargada con la sesión del navegador, logos de tecnologías con Simple Icons y tratamiento visual coherente con el Design DNA. Úsala cuando falten imágenes, logos, capturas, foto o secuencias de frames.

Niltra/web-qa-visual

Verifica webs con Playwright CLI antes de darlas por terminadas: errores de consola, requests fallidas, overflow responsive a 375/414/768/1280/1440, accesibilidad axe, teclado y foco, reduced-motion, enlaces, SEO/meta y métricas de carga. Úsala al testear una web, tras cada cambio grande o para validar un deploy.

Niltra/web-scrollytelling

Implementa experiencias de scroll cinematográficas estilo Apple (hero pinneado, secuencia de frames en canvas, video scrubbing, capítulos narrados) con GSAP ScrollTrigger, sin scroll-jacking y con rendimiento medido. Úsala al construir heroes animados, secciones pinneadas, galerías horizontales o cualquier efecto "la web es como un vídeo que vas moviendo".

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community