In den eigenen Worten des Skills
Ein Anti-Slop-Frontend-Skill für Landingpages, Portfolios und Redesigns. Der Agent liest das Briefing, leitet eine Design-Richtung ab und setzt dann drei Regler (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY), die jede Layout-, Motion- und Dichte-Entscheidung steuern. Er ordnet Briefings echten Designsystemen zu, wo eines existiert (Fluent, Carbon, GOV.UK, Polaris), und benennt rein ästhetische Richtungen ehrlich.
Feste Regeln betreffen die Viewport-Anpassung des Hero-Bereichs, Zurückhaltung bei Eyebrow-Elementen, einen Akzent und ein Theme pro Seite, verbotene KI-Signale sowie konkrete Icon-, Font- und Animations-Bibliotheken. Redesigns beginnen mit einem Audit. Am Ende steht ein mechanischer Pre-Flight Check, dessen jede Checkbox erfüllt sein muss, bevor Code ausgeliefert wird.
Was er erzeugt
- Ein einzeiliger Design Read, formuliert vor jedem Code: Seitentyp, Zielgruppe, Vibe-Sprache und das Designsystem oder die ästhetische Familie, in deren Richtung man tendiert.
- Frontend-Code standardmäßig auf Tailwind v4, mit Rückgriff auf v3 nur, wenn das bestehende Projekt es erfordert.
- Code-Kommentare, die klar benennen, welche Teile inspirierte Übernahmen und welche offizielles Material sind.
- Klar gekennzeichnete Platzhalter-Slots, wenn keine Bildquelle vorhanden ist, plus eine abschließende Liste der noch benötigten echten Bilder.
So funktioniert es
- 01Lesen Sie zuerst das Briefing
Der Agent leitet aus Seitentyp, Vibe-Wörtern, Referenzen, Zielgruppe, vorhandenen Markenmaterialien und stillen Vorgaben ab, was der Nutzer tatsächlich will, statt zu einer Standardästhetik zu greifen.
- 02Die drei Regler einstellen
Der Ausgangswert ist 8 / 6 / 4 und wird durch den Design Read konversationell überschrieben. Für einzelne Anwendungsfälle gibt es Presets, vom Service im öffentlichen Sektor (3 / 2 / 5) bis zur Agentur-Landingpage (9 / 8 / 3).
- 03Eine Grundlage ehrlich wählen
Liest sich das Briefing wie Microsoft, IBM, GitHub, Shopify, Atlassian oder öffentlicher Sektor, installieren und verwenden Sie das offizielle Paket, statt dessen CSS von Hand nachzubauen.
- 04Den Standard-Stack anwenden
React oder Next.js mit Server Components, Tailwind v4 und Motion, importiert aus motion/react, wobei Animation in Client-Leaf-Komponenten isoliert ist.
- 05Den Pre-Flight Check durchführen
Bevor irgendein Code ausgegeben wird, muss jede Checkbox in der Matrix aus Abschnitt 14 erfüllt sein; eine einzige nicht angehakte Checkbox bedeutet, dass die Arbeit nicht abgeschlossen ist.