joyeking/redesigned-portfolio

tasteskill: Anti-Slop-Frontend-Fertigkeit

Landingpages, Portfolios und Redesigns. Keine Dashboards, keine Datentabellen, keine mehrstufige Produkt-UI. Jede Regel unten ist kontextabhängig. Nichts davon wird automatisch ausgeführt. Lies zuerst das Briefing, dann ziehe nur das heran, was passt.

---

0. BRIEF-INFERENZ (Die Situation verstehen, bevor etwas passiert)

Bevor du Code anfasst oder Knöpfe drehst, inferiere, was der Benutzer wirklich will. Die meiste LLM-Designausgabe ist schlecht, weil das Modell zu einer Standard-Ästhetik springt, anstatt die Situation zu lesen.

0.A Lese zuerst diese Signale

1. Seitentyp – Landing (SaaS / Consumer / Agentur / Event), Portfolio (Dev / Designer / Kreativstudio), Redesign (erhalten vs. überarbeiten), redaktionell / Blog.
2. Vibe-Wörter, die der Benutzer verwendet hat – „minimalistisch", „ruhig", „Linear-Stil", „Awwwards", „brutalistisch", „Premium-Consumer", „Apple-esk", „verspielt", „ernstes B2B", „redaktionell", „Agentur-esk", „gläsern", „Dark Tech".
3. Referenz-Signale – URLs, die sie verlinkt haben, Screenshots, die sie eingefügt haben, Produkte, die sie genannt haben, Marken, mit denen sie konkurrieren.
4. Zielgruppe – B2B-Beschaffungsgremium vs. designbewusster Verbraucher vs. Personalvermittler, der ein Portfolio scannt. Die Zielgruppe bestimmt die Ästhetik, nicht dein Geschmack.
5. Bereits vorhandene Marken-Assets – Logo, Farbe, Schriftart, Fotografie. Bei Redesigns sind dies Ausgangsmaterial, kein optionaler Input (siehe Abschnitt 11).
6. Stille Einschränkungen – barrierefreiheitsorientierte Zielgruppen, öffentlicher Sektor, regulierte Branchen, vertrauenspriorisierender Handel, Kinderprodukte. Diese Einschränkungen ÜBERSCHREIBEN ästhetische Präferenzen.

0.B Gib einen einzeiligen „Design-Read" aus, bevor du generierst

Gib vor jedem Code in einer Zeile an: „Ich lese das als: für , mit einer -Sprache, tendierend zu <Designsystem oder Ästhetik-Familie>."

Beispiel-Reads:

• „Ich lese das als: B2B-SaaS-Landingpage für technische Käufer, mit einer minimalistischen, Linear-ähnlichen Sprache, tendierend zu Tailwind-Utilities + Geist + zurückhaltender Motion."
• „Ich lese das als: Solo-Designer-Portfolio für Personalvermittler, mit einer redaktionellen/kinetischen Sprachsprache, tendierend zu nativem CSS + scrollgesteuerter Animation + benutzerdefinierter Typografie."
• „Ich lese das als: Redesign einer öffentlichen Dienstleistungsseite, mit einer vertrauenspriorisierenden Sprache, tendierend zu GOV.UK Frontend oder USWDS."

0.C Wenn das Briefing mehrdeutig ist, stelle EINE Frage, rate nicht

Stelle genau eine klärende Frage – niemals eine Mehrfachfrage – und nur, wenn der Design-Read wirklich auseinandergeht. Beispiel: „Sollte sich das eher Linear-sauber oder Awwwards-experimentell anfühlen?"

Wenn du es aus dem Kontext sicher ableiten kannst, stelle keine Frage. Erkläre einfach den Design-Read und fahre fort.

0.D Anti-Default-Disziplin

Standardmäßig nicht verwenden: KI-lila Farbverläufe, zentrierter Hero über dunklem Mesh, drei gleiche Feature-Karten, generischer Glasmorphismus überall, Endlosschleifen-Mikroanimationen überall, Inter + Slate-900. Das sind die LLM-Standards. Greife basierend auf dem Design-Read bewusst darüber hinaus.

---

1. DIE DREI REGLER (Kernkonfiguration)

Setze nach dem Design-Read drei Regler. Jede Layout-, Bewegungs- und Dichteentscheidung unten wird durch diese gesteuert.

• DESIGN_VARIANCE: 8 – 1 = Perfekte Symmetrie, 10 = Kunstvolles Chaos
• MOTION_INTENSITY: 6 – 1 = Statisch, 10 = Kinematisch / Physik
• VISUAL_DENSITY: 4 – 1 = Kunstgalerie / Luft, 10 = Cockpit / Dichte Daten

Basislinie: 8 / 6 / 4. Verwende diese, sofern der Design-Read sie nicht überschreibt. Bitte den Benutzer nicht, diese Datei zu bearbeiten – Überschreibungen erfolgen gesprächsweise.

1.A Regler-Inferenz (Design-Read → Reglerwerte)

Signal	VARIANCE	MOTION	DENSITY
„minimalistisch / sauber / ruhig / redaktionell / Linear-Stil"	5-6	3-4	2-3
„Premium-Consumer / Apple-esk / Luxus / Marke"	7-8	5-7	3-4
„verspielt / wild / Dribbble / Awwwards / experimentell / Agentur"	9-10	8-10	3-4
„Landingpage / Portfolio / Marketing-Seite (Standard)"	7-9	6-8	3-5
„vertrauenspriorisierend / öffentlicher Sektor / reguliert / Barrierefreiheit kritisch"	3-4	2-3	4-5
„Redesign – erhalten"	an vorhanden anpassen	+1	an vorhanden anpassen
„Redesign – überarbeiten"	+2	+2	an vorhanden anpassen

1.B Anwendungsfall-Voreinstellungen

Anwendungsfall	VARIANCE	MOTION	DENSITY
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
Öffentlicher Dienst	3	2	5
Redesign – erhalten	anpassen	anpassen+1	anpassen
Redesign – überarbeiten	+2	+2	anpassen

1.C Wie die Regler die Ausgabe steuern

Verwende diese (oder vom Benutzer überschriebene Werte) als globale Variablen. Querverweise in diesem Dokument beziehen sich auf diese exakten Variablennamen – erfinde niemals Aliase wie LAYOUT_VARIANCE oder ANIM_LEVEL.

---

2. BRIEFING → DESIGNSYSTEM-KARTE

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. Tue nicht so, als ob ein Ästhetik-Trend ein offizielles System wäre.

2.A Wann greife ich zu einem echten Designsystem (offizielle Pakete verwenden)

Briefing liest sich als…	Greife zu	Warum
Microsoft / Enterprise-SaaS / Dashboards	@fluentui/react-components oder @fluentui/web-components	Offizielles Fluent UI, Microsoft-Token, Barrierefreiheit erledigt
Google-ähnliche UI, Material-ähnliches Produkt	@material/web + Material 3 Token	Offiziell, thematisierbar via Material Theming
IBM-Stil B2B / Enterprise-Analytik	@carbon/react + @carbon/styles	Offizielles Carbon, ausgereifte Daten-Dichte-Muster
Shopify-App-Oberflächen	polaris.js Web-Komponenten / Polaris React	Erforderlich für Shopify-Admin-UI
Atlassian / Jira-Stil Produkt	@atlaskit/* + @atlaskit/tokens	Offizielles Atlassian DS
GitHub-Stil Devtool / Community-Seite	@primer/css oder @primer/react-brand	Offizielles Primer; Brand-Variante für Marketing
Öffentlicher Dienst UK	govuk-frontend	Rechtlich / regulatorisch erwartet
US-Öffentlicher Sektor / Vertrauenspriorisierend	uswds	Gleicher Grund
Schnelles lokales Business / Agentur-MVP	Bootstrap 5.3	Langweilig, schnell, funktioniert
Moderne barrierefreie React-Grundlage	@radix-ui/themes	Primitive + ausgefeiltes Theme
Modernes SaaS, wo du die Komponenten besitzt	shadcn/ui (npx shadcn@latest add ...)	Du besitzt den Code, einfach anzupassen; niemals im Standardzustand ausliefern
Tailwind-basiertes modernes SaaS / KI-Marketing	Tailwind v4 Utilities + dark: Variante	Standard für Indie- und kleine Team-Builds

Ehrlichkeitsregel: Wenn das Briefing als eines der oben genannten Systeme gelesen wird, installiere und verwende das offizielle Paket. Baue sein CSS nicht von Hand nach. Importiere keine Token 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 einzelnes offizielles Paket. Baue mit nativem CSS + Tailwind + einer gepflegten Komponentenbibliothek. Sei in Code-Kommentaren ehrlich darüber, was geliehene Inspiration vs. offizielles Material ist.

Ästhetik	Ehrliche Implementierung
Glasmorphismus / „Milchglas"	backdrop-filter, geschichtete Ränder, Highlight-Overlays. Biete eine Vollfüllung-Alternative für prefers-reduced-transparency.
Bento (Apple-Stil Kachelraster)	CSS Grid mit gemischten Zellgrößen. Keine einzelne Bibliothek besitzt dies.
Brutalismus	NativenCSS, Monospace, rohe Rahmen. Keine Bibliothek.
Redaktionell / Magazin	Serifen-Schrift, asymmetrisches Raster, 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, scrollgesteuerte 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. Kennzeichne klar als Näherung.

---

3. STANDARD-ARCHITEKTUR & KONVENTIONEN

Sofern der Design-Read kein echtes Designsystem auswählt (Abschnitt 2.A), sind dies die Standardeinstellungen:

3.A Stack

• Framework: React oder Next.js. Standardmäßig Server-Komponenten (RSC).
  • RSC-SICHERHEIT: Globaler Zustand funktioniert NUR in Client-Komponenten. In Next.js umschließe Provider mit einer "use client"-Komponente.
  • INTERAKTIVITÄTSISOLATION: Jede Komponente, die Motion, Scroll-Listener oder Zeigerphysik verwendet, MUSS ein isoliertes Blatt mit 'use client' oben sein. Server-Komponenten rendern nur statische Layouts.
• Styling: Tailwind v4 (Standard). Tailwind v3 nur, wenn das bestehende Projekt es verlangt.
  • Für v4: Verwende NICHT das tailwindcss-Plugin in postcss.config.js. Verwende @tailwindcss/postcss oder das Vite-Plugin.
• Animation: Motion (die ehemals als Framer Motion bekannte Bibliothek). Importiere von motion/react (import { motion } from "motion/react"). Das framer-motion-Paket funktioniert weiterhin als Legacy-Alias – bevorzuge motion/react in neuem Code.
• Schriftarten: Verwende immer next/font (Next.js) oder selbst gehostet mit @font-face + font-display: swap. Verlinke Google Fonts niemals via <link> in der Produktion.

3.B Zustand

• Lokaler useState / useReducer für isolierte UI.
• Globaler Zustand NUR zur Vermeidung von tiefem Prop-Drilling – Zustand, Jotai oder React-Kontext.
• NIEMALS useState verwenden, um kontinuierliche Werte zu verfolgen, die durch Benutzereingaben gesteuert werden (Mausposition, Scroll-Fortschritt, Zeigerphysik, magnetisches Hover). Verwende Motions useMotionValue / useTransform / useScroll. useState rendert den React-Baum bei jeder Änderung neu und bricht auf Mobilgeräten zusammen.

3.C Icons

• Erlaubte Bibliotheken (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. Wenn ein Glyph fehlt, installiere eine zweite Bibliothek oder setze aus Primitiven zusammen – zeichne keine Icon-Pfade von Grund auf neu.
• Eine Familie pro Projekt. Mische Phosphor nicht mit Lucide im selben Komponentenbaum.
• Standardisiere strokeWidth global (z.B. 1.5 oder 2.0).

3.D Emoji-Richtlinie

Standardmäßig nicht empfohlen in Code, Markup und sichtbarem Text. Ersetze Symbole durch Icon-Bibliotheks-Glyphen. Überschreibung: Erlaube Emojis nur, wenn der Benutzer explizit nach einem verspielten / Chat-Stil / sozial-nativen Vibe fragt – und selbst dann verwende sie sparsam und mit Absicht.

3.E Responsivität & Layout-Mechanik

• Standardisiere Breakpoints (sm 640, md 768, lg 1024, xl 1280, 2xl 1536).
• Begrenze Seiten-Layouts mit max-w-[1400px] mx-auto oder max-w-7xl.
• Ansichtsfenster-Stabilität: Verwende NIEMALS h-screen für vollständige Hero-Abschnitte. Verwende IMMER min-h-[100dvh], um Layout-Sprünge auf Mobilgeräten (iOS Safari Adressleiste) zu verhindern.
• Grid über Flex-Mathe: Verwende NIEMALS komplexe Flexbox-Prozentrechnung (w-[calc(33%-1rem)]). Verwende IMMER CSS Grid (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. Wenn das Paket fehlt, gib zuerst den Installationsbefehl aus. Gehe niemals davon aus, dass eine Bibliothek existiert.

---

4. DESIGN-ENGINEERING-DIREKTIVEN (Voreingenommenheitskorrektur)

LLMs verwenden standardmäßig Klischees. Überschreibe diese Standardeinstellungen proaktiv. Jede Regel hat einen kontextbewussten Überschreibungspfad.

4.1 Typografie

• Anzeige / Überschriften: Standard text-4xl md:text-6xl tracking-tighter leading-none.

• Fließtext / Absätze: Standard text-base text-gray-600 leading-relaxed max-w-[65ch].

• Serifenlose Schriftwahl:

  • Standardmäßig nicht empfohlen: Inter. Wähle zuerst Geist, Outfit, Cabinet Grotesk, Satoshi oder eine markenangepasste Serifen-Schrift.
  • Überschreibung: Inter ist akzeptabel, wenn der Benutzer explizit nach einem neutralen / standard / Linear-Stil fragt, oder wenn das Briefing eine Seite für den öffentlichen Sektor / Barrierefreiheit priorisiert.

• Kombinationen, die du kennen solltest: Geist + Geist Mono, Satoshi + JetBrains Mono, Cabinet Grotesk + Inter Tight, GT America + IBM Plex Mono.

• SERIFEN-DISZIPLIN (STARK NICHT EMPFOHLEN ALS STANDARD):

  • Serifen sind standardmäßig sehr nicht empfohlen für jedes Projekt. „Es fühlt sich kreativ / Premium / redaktionell an" ist KEIN Grund, zu Serifen zu greifen. Die Standard-Denkweise des Agenten, dass „kreatives Briefing = Serife" ist der am häufigsten getestete KI-Verrat in Produktionsrunden.
  • Serifen sind nur akzeptabel, wenn EINE dieser Bedingungen explizit zutrifft:
    • Das Markenbriefing nennt buchstäblich eine Serifenschrift, ODER
    • Die ästhetische Familie ist wirklich redaktionell / Luxus / Publikation / 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) standardmäßig serifenlose Anzeigeschrift (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Serifenlose Anzeigeschriften sind nicht „langweilig" – sie sind der Standard aus dem gleichen Grund, aus dem Schwarz in der Mode der Standard ist.
  • BETONUNGSREGEL (verwandt): Wenn du ein Wort innerhalb einer Überschrift betonen möchtest (die kinetische „und räumliche Design"-Bewegung), verwende Kursiv oder Fett der GLEICHEN Schrift. Injiziere NICHT ein zufälliges Serifenwort in eine serifenlose Überschrift (oder umgekehrt), nur um visuelles Interesse zu wecken. Gemischte Familienbetonung ist amateurhaft. Kursiv-/Fett-Betonung in derselben Familie ist der richtige Zug.
  • Insbesondere VERBOTEN als Standard: Fraunces und Instrument_Serif (die beiden LLM-Lieblings-Anzeigeserifen).
  • Wenn eine Serife gerechtfertigt ist (selten, siehe oben), wechsle 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