Was macht tasteskill: Anti-Schlonz Frontend Skill?
Landing Pages, Portfolios und Redesigns. Keine Dashboards, keine Datentabellen, keine mehrstufige Produkt-UI. Jede Regel unten ist kontextabhängig. Keine davon feuert automatisch. Lies zuerst das Briefing, dann nimm nur das, was passt.
0. BRIEF-INFERENZ (Erst den Raum lesen, dann handeln)
Bevor du Code anfasst oder an den Einstellungen drehst, inferiere, was der Benutzer wirklich will. Die meisten LLM-Designausgaben sind schlecht, weil das Modell zu einer Standardästhetik springt, anstatt den Raum zu lesen.
0.A Lies zuerst diese Signale
- Seitentyp – Landing (SaaS / Consumer / Agentur / Event), Portfolio (Dev / Designer / Kreativstudio), Redesign (bewahren vs. überarbeiten), redaktionell / Blog.
- Vibe-Wörter des Benutzers – „minimalistisch“, „ruhig“, „Linear-ähnlich“, „Awwwards“, „brutalistisch“, „Premium-Consumer“, „Apple-ähnlich“, „verspielt“, „seriös B2B“, „redaktionell“, „agentur-ähnlich“, „gläsern“, „Dark Tech“.
- Referenzsignale – verlinkte URLs, eingefügte Screenshots, genannte Produkte, Marken, mit denen sie konkurrieren.
- Zielgruppe – B2B-Einkaufsgremium vs. designbewusster Kunde vs. Recruiter, der ein Portfolio scannt. Die Zielgruppe bestimmt die Ästhetik, nicht dein Geschmack.
- Bereits vorhandene Markenassets – Logo, Farbe, Schriftart, Fotografie. Bei Redesigns sind dies Ausgangsmaterial, kein optionaler Input (siehe Abschnitt 11).
- Stille Randbedingungen – Barrierefreiheit als Priorität, öffentlicher Sektor, regulierte Branchen, vertrauensbasierter Handel, Kinderprodukte. Diese Randbedingungen ÜBERSCHREIBEN die ästhetische Präferenz.
0.B Gib einen einzeiligen „Design-Read“ aus, bevor du generierst
Vor allem Code: Gib eine Zeile an: „Lese dies als: für , mit einer -Sprache, tendierend zu <Designsystem oder ästhetischer Familie>.“
Beispiel-Reads:
- „Lese dies als: B2B SaaS Landing für technische Käufer, mit einer Linear-ähnlichen minimalistischen Sprache, tendierend zu Tailwind-Utilities + Geist + zurückhaltende Motion.“
- „Lese dies als: Solo-Designer-Portfolio für Personalverantwortliche, mit einer redaktionellen / kinetischen Schriftsatz-Sprache, tendierend zu nativem CSS + scrollgetriebene Animation + benutzerdefinierte Typografie.“
- „Lese dies als: Redesign einer öffentlich-rechtlichen Dienstleistungsseite, mit einer vertrauensbasierten Sprache, tendierend zu GOV.UK Frontend oder USWDS.“
0.C Wenn das Briefing vage ist, stelle eine Frage, rate nicht
Stelle genau eine klärende Frage – niemals eine Mehrfachfragen-Dusche – und nur, wenn der Design-Read wirklich divergiert. Beispiel: „Sollte dies sich eher wie Linear-sauber oder Awwwards-experimentell anfühlen?“
Wenn du aus dem Kontext sicher inferieren kannst, frage nicht. Gib einfach den Design-Read aus und fahre fort.
0.D Anti-Default-Disziplin
Nicht per Default zu: KI-lila Farbverläufe, zentrierter Hero über dunklem Mesh, drei gleiche Feature-Karten, generisches Glas-Morphism an allem, Endlos-Loop-Mikroanimationen überall, Inter + slate-900. Das sind die LLM-Defaults. Greif bewusst danach, basierend auf dem Design-Read.
1. DIE DREI REGLER (Kernkonfiguration)
Stelle nach dem Design-Read drei Regler ein. Jede Layout-, Motion- und Dichte-Entscheidung unten wird durch diese gesteuert.
DESIGN_VARIANZ: 8– 1 = perfekte Symmetrie, 10 = künstlerisches ChaosMOTIONS_INTENSITÄT: 6– 1 = statisch, 10 = kinematografisch / PhysikVISUELLE_DICHTE: 4– 1 = Kunstgalerie / luftig, 10 = Cockpit / datengepackt
Baseline: 8 / 6 / 4. Verwende diese, es sei denn, der Design-Read überschreibt sie. Bitte den Benutzer nicht, diese Datei zu bearbeiten – Überschreibungen erfolgen im Gespräch.
1.A Regler-Inferenz (Design-Read → Regler-Werte)
| Signal | VARIANZ | MOTION | DICHTE |
|---|---|---|---|
| „minimalistisch / sauber / ruhig / redaktionell / Linear-ähnlich“ | 5-6 | 3-4 | 2-3 |
| „Premium-Consumer / Apple-ähnlich / Luxus / Marke“ | 7-8 | 5-7 | 3-4 |
| „verspielt / wild / Dribbble / Awwwards / experimentell / Agentur“ | 9-10 | 8-10 | 3-4 |
| „Landing Page / Portfolio / Marketingseite (Default)“ | 7-9 | 6-8 | 3-5 |
| „vertrauensbasiert / öffentlich-rechtlich / reguliert / barrierefreiheitskritisch“ | 3-4 | 2-3 | 4-5 |
| „Redesign - bewahren“ | vorhanden angleichen | +1 | vorhanden angleichen |
| „Redesign - überarbeiten“ | +2 | +2 | vorhanden angleichen |
1.B Anwendungsfall-Voreinstellungen
| Anwendungsfall | VARIANZ | MOTION | DICHTE |
|---|---|---|---|
| Landing (SaaS, Mainstream) | 7 | 6 | 4 |
| Landing (Agentur / kreativ) | 9 | 8 | 3 |
| Landing (Premium-Consumer) | 7 | 6 | 3 |
| Portfolio (Designer / Studio) | 8 | 7 | 3 |
| Portfolio (Entwickler) | 6 | 5 | 4 |
| Redaktionell / Blog | 6 | 4 | 3 |
| Öffentlich-rechtlich | 3 | 2 | 5 |
| Redesign - bewahren | angleichen | angleichen+1 | angleichen |
| Redesign - überarbeiten | +2 | +2 | angleichen |
1.C Wie die Regler die Ausgabe steuern
Verwende diese (oder vom Benutzer überschriebenen Werte) als globale Variablen. Querverweise im gesamten Dokument beziehen sich auf diese genauen Variablennamen – erfinde niemals Aliasse wie LAYOUT_VARIANZ oder ANIM_STUFE.
2. BRIEF → DESIGN-SYSTEM-ABBILDUNG
Sobald du den Design-Read (Abschnitt 0) und die Regler (Abschnitt 1) hast, wähle die richtige Grundlage. Erfinde kein CSS für Dinge, die ein offizielles Paket haben. Gib nicht vor, dass ein ästhetischer Trend ein offizielles System ist.
2.A Wann man ein echtes Designsystem verwenden sollte (offizielle Pakete)
| Das liest sich wie … | Verwende | Warum |
|---|---|---|
| Microsoft / Enterprise SaaS / Dashboards | @fluentui/react-components oder @fluentui/web-components | Offizielles Fluent UI, Microsoft-Tokens, Barrierefreiheit erledigt |
| Google-artige UI, Material-flavored Produkt | @material/web + Material 3 Tokens | Offiziell, via Material Theming anpassbar |
| IBM-artiges B2B / Enterprise Analytics | @carbon/react + @carbon/styles | Offizielles Carbon, ausgereifte Daten-Dichte-Muster |
| Shopify App-Oberflächen | Web Components von polaris.js / Polaris React | Für Shopify Admin UI erforderlich |
| Atlassian / Jira-artiges Produkt | @atlaskit/* + @atlaskit/tokens | Offizielles Atlassian DS |
| GitHub-artiges Devtool / Community-Seite | @primer/css oder @primer/react-brand | Offizielles Primer; Brand-Variante für Marketing |
| Öffentlich-rechtlich UK Service | govuk-frontend | Rechtlich / regulatorisch erwartet |
| US-öffentlich-rechtlich / vertrauensbasiert | uswds | Gleicher Grund |
| Schnelles lokales Geschäft / Agentur MVP | Bootstrap 5.3 | Langweilig, schnell, funktioniert |
| Moderne barrierefreie React-Grundlage | @radix-ui/themes | Primitives + poliertes Theme |
| Modernes SaaS, bei dem du die Komponenten selbst besitzt | shadcn/ui (npx shadcn@latest add ...) | Du besitzt den Code, einfach anzupassen; nie im Default-Status ausliefern |
| Tailwind-basiertes modernes SaaS / KI-Marketing | Tailwind v4 Utilities + dark: Variante | Default für Indie + kleine Teams |
Ehrlichkeitsregel: Wenn das Briefing wie eines der obigen Systeme klingt, installiere und verwende das offizielle Paket. Erstelle sein CSS nicht von Hand neu. Importiere keine Tokens eines Systems, um dann 90% davon zu überschreiben.
Ein System pro Projekt. Mische Fluent React nicht mit Carbon im selben Baum. Importiere keine shadcn/ui-Komponenten in eine Material 3 App.
2.B Wenn das Briefing eine Ästhetik ist, kein System
Für diese Richtungen gibt es kein einziges offizielles Paket. Baue mit nativem CSS + Tailwind + einer gepflegten Komponentenbibliothek. Sei in Code-Kommentaren ehrlich, was geliehene Inspiration vs. offizielles Material ist.
| Ästhetik | Ehrliche Implementierung |
|---|---|
| Glas-Morphism / „Milchglas“ | backdrop-filter, geschichtete Ränder, Highlight-Überlagerungen. Biete eine Vollfüll-Fallback für prefers-reduced-transparency. |
| Bento (Apple-artige Kachelraster) | CSS Grid mit gemischten Zellengrößen. Keine einzelne Bibliothek besitzt dies. |
| Brutalismus | Natives CSS, Monospace, rohe Ränder. Keine Bibliothek. |
| Redaktionell / Magazin | Serifenschrift, asymmetrisches Grid, großzügiger Weißraum. Keine Bibliothek. |
| Dark Tech / Hacker | Mono + Akzent-Neon, Terminal-Motive. Keine Bibliothek. |
| Aurora / Mesh-Verläufe | SVG oder geschichtete radiale Verläufe. Keine Bibliothek. |
| Kinetische Typografie | Native CSS-Animationen, scrollgetriebene Animationen, GSAP für Hijacks. Keine Bibliothek. |
| Apple Liquid Glass | Apple dokumentiert dies nur für Apple-Plattformen. Es gibt kein offizielles liquid-glass.css. Web-Implementierungen sind Näherungen mit backdrop-filter + geschichteten Rändern + Highlights. Klar als Näherung kennzeichnen. |
3. STANDARD-ARCHITEKTUR & KONVENTIONEN
Es sei denn, der Design-Read wählt ein echtes Designsystem (Abschnitt 2.A), sind dies die Defaults:
3.A Stack
- Framework: React oder Next.js. Standardmäßig Server Components (RSC).
- RSC-SICHERHEIT: Globaler Zustand funktioniert NUR in Client Components. In Next.js, wrappe Provider in eine
"use client"-Komponente. - INTERAKTIVITÄTSISOLATION: Jede Komponente, die Motion, Scroll-Listener oder Zeiger-Physik verwendet, MUSS ein isoliertes Blatt mit
'use client'an der Spitze sein. Server Components rendern nur statische Layouts.
- RSC-SICHERHEIT: Globaler Zustand funktioniert NUR in Client Components. In Next.js, wrappe Provider in eine
- Styling: Tailwind v4 (Default). Tailwind v3 nur, wenn das bestehende Projekt dies verlangt.
- Für v4: NICHT das
tailwindcss-Plugin inpostcss.config.jsverwenden. Verwende@tailwindcss/postcssoder das Vite-Plugin.
- Für v4: NICHT das
- Animation: Motion (die Bibliothek, die früher Framer Motion hieß). Importiere aus
motion/react(import { motion } from "motion/react"). Dasframer-motion-Paket funktioniert weiterhin als Legacy-Alias – bevorzugemotion/reactin neuem Code. - Schriftarten: Verwende immer
next/font(Next.js) oder selbst hosten mit@font-face+font-display: swap. Verlinke niemals Google Fonts via<link>in Produktion.
3.B Zustand
- Lokales
useState/useReducerfür isolierte UI. - Globaler Zustand NUR zur Vermeidung von tiefem Prop-Drilling – Zustand, Jotai oder React Context.
- NIEMALS
useStateverwenden, um kontinuierliche Werte zu verfolgen, die durch Benutzereingaben getrieben werden (Mausposition, Scroll-Fortschritt, Zeiger-Physik, magnetisches Hover). Verwende dieuseMotionValue/useTransform/useScrollvon Motion.useStaterendert den React-Baum bei jeder Änderung neu und bricht auf Mobilgeräten zusammen.
3.C Icons
- Erlaubt (Prioritätsreihenfolge):
@phosphor-icons/react,hugeicons-react,@radix-ui/react-icons,@tabler/icons-react. - Nicht empfohlen:
lucide-react. Nur akzeptabel, wenn der Benutzer explizit danach fragt oder das Projekt bereits davon abhängt. - Niemals SVG-Icons von Hand zeichnen. Fehlt ein Glyph, installiere eine zweite Bibliothek oder komponiere aus Primitiven – zeichne keine Icon-Pfade von Grund auf neu.
- Eine Familie pro Projekt. Mische Phosphor nicht mit Lucide im selben Komponentenbaum.
- Standardisiere
strokeWidthglobal (z. B.1.5oder2.0).
3.D Emoji-Richtlinie
Standardmäßig nicht empfohlen in Code, Markup und sichtbarem Text. Ersetze Symbole durch Icon-Bibliotheksglyphen. Ausnahme: Erlaube Emojis nur, wenn der Benutzer explizit nach einer verspielten / Chat-artigen / sozial-nativen Stimmung fragt – und selbst dann sparsam und mit Absicht verwenden.
3.E Responsivität & Layout-Mechanik
- Standardisiere Breakpoints (
sm 640,md 768,lg 1024,xl 1280,2xl 1536). - Begrenze Seitenlayouts mit
max-w-[1400px] mx-autoodermax-w-7xl. - Viewport-Stabilität: NIEMALS
h-screenfür vollständig hohe Hero-Abschnitte verwenden. IMMERmin-h-[100dvh]verwenden, um Layout-Sprünge auf Mobilgeräten (iOS Safari Adressleiste) zu vermeiden. - Grid statt Flex-Mathe: NIEMALS komplexe Flexbox-Prozent-Mathe (
w-[calc(33%-1rem)]). IMMER CSS Grid verwenden (grid grid-cols-1 md:grid-cols-3 gap-6).
3.F Abhängigkeitsprüfung (obligatorisch)
Bevor du IRGENDEINE Drittanbieter-Bibliothek importierst, überprüfe package.json. Fehlt das Paket, gib zuerst den Installationsbefehl aus. Niemals annehmen, dass eine Bibliothek existiert.
4. DESIGN ENGINEERING DIREKTIVEN (Verzerrungskorrektur)
LLMs tendieren zu Klischees. Überschreibe diese Defaults proaktiv. Jede Regel hat einen kontextbewussten Überschreibungspfad.
4.1 Typografie
-
Display / Überschriften: Default
text-4xl md:text-6xl tracking-tighter leading-none. -
Fließtext / Absätze: Default
text-base text-gray-600 leading-relaxed max-w-[65ch]. -
Serifenlose Schriftartauswahl:
- Nicht empfohlen als Standard:
Inter. Wähle zuerstGeist,Outfit,Cabinet Grotesk,Satoshioder eine markenangemessene Serifenschrift. - Ausnahme: Inter ist akzeptabel, wenn der Benutzer explizit nach einem neutralen / Standard / Linear-ähnlichen Gefühl fragt, oder wenn das Briefing eine öffentlich-rechtliche / barrierefreiheitsorientierte Seite ist.
- Nicht empfohlen als Standard:
-
Kombinationen zum Wissen:
Geist+Geist Mono,Satoshi+JetBrains Mono,Cabinet Grotesk+Inter Tight,GT America+IBM Plex Mono. -
SERIFEN-DISZIPLIN (SEHR NICHT EMPFOHLEN ALS STANDARD):
- Serifenschrift ist sehr nicht empfohlen als Standardschriftart für jedes Projekt. „Es fühlt sich kreativ / Premium / redaktionell an“ ist KEIN Grund, zu Serifen zu greifen. Das Default-Gedankenmodell des Agenten, dass „kreatives Briefing = Serife“ ist der am häufigsten getestete KI-Verrat in Produktionsrunden.
- Serifenschrift ist nur akzeptabel, wenn EINES davon explizit wahr ist:
- Das Markenbriefing nennt buchstäblich eine Serifenschrift, ODER
- Die ästhetische Familie ist wirklich redaktionell / Luxus / Verlag / Manuskript / Erbe / Vintage UND du kannst artikulieren, warum diese spezifische Serife zu dieser spezifischen Marke passt
- Für alles andere (Kreativagentur, Designstudio, moderne Marke, Premium-Consumer, Portfolio, Lifestyle), Standard-sans-serif Display (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Sans-Serif Display-Schriftarten sind nicht „langweilig“ – sie sind der Standard aus dem gleichen Grund, aus dem Schwarz der Standard in der Mode ist.
- BETONUNGSREGEL (relevant): Wenn du ein Wort in einer Überschrift betonen möchtest (der kinetische „und
räumlichesDesign“-Move), verwende Kursiv oder Fett der GLEICHEN Schriftart. Fühge keine zufällige Serifenwort in eine serifenlose Überschrift ein (oder umgekehrt), nur um visuelles Interesse zu wecken. Gemischte Familien-Betonung ist amateurhaft. Kursiv/Fett-Betonung in derselben Familie ist der richtige Move. - Speziell VERBOTEN als Standard:
FrauncesundInstrument_Serif(die beiden von LLMs bevorzugten Display-Serifen). - Wenn eine Serife gerechtfertigt ist (selten, siehe oben), rotiere aus diesem Pool, verwende NICHT dieselbe Serife in aufeinanderfolgenden Projekten: PP Editorial New, GT Sectra Display, Cardinal Grotesque, Reckless Neue, Tiempos Headline, Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, IvyPresto, Migra, Editorial Old, Saol Display, Söhne Breit Kursiv, Domaine Display, Canela, Schnyder, Tobias, NB Architekt, I…