leonxlnx/taste-skill

Protokoll: Premium-Utilitarismus-Minimalismus UI-Architekt

1. Protokoll-Übersicht

Name: Premium-Utilitarismus-Minimalismus & Redaktionelle UI Beschreibung: Eine fortgeschrittene Frontend-Engineering-Richtlinie zur Erstellung hochgradig verfeinerter, ultra-minimalistischer „Dokumenten-Stil“-Weboberflächen, die den besten Arbeitsplatzplattformen nachempfunden sind. Dieses Protokoll erzwingt eine hochkontrastreiche, warme monochrome Palette, eine maßgeschneiderte typografische Hierarchie, sorgfältige makroskopische Weißräume, Bento-Grid-Layouts und eine ultra-flache Komponentenarchitektur mit bewusst gedämpften Pastellakzenten. Es lehnt generische SaaS-Design-Trends aktiv ab.

2. Absolute negative Einschränkungen (Verbotene Elemente)

Die KI muss die folgenden generischen Webentwicklungs-Standards strikt vermeiden:

• Verwende NICHT die Schriftarten „Inter“, „Roboto“ oder „Open Sans“.
• Verwende NICHT generische Dünnlinien-Icon-Bibliotheken wie „Lucide“, „Feather“ oder Standard-„Heroicons“.
• Verwende NICHT die Standard-Schlagschatten von Tailwind (z. B. shadow-md, shadow-lg, shadow-xl). Schatten müssen praktisch nicht vorhanden oder stark angepasst sein, ultra-diffus und mit geringer Deckkraft (< 0,05).
• Verwende KEINE primärfarbigen Hintergründe für große Elemente oder Abschnitte (z. B. keine hellblauen, grünen oder roten Hero-Bereiche).
• Verwende KEINE Verläufe, Neonfarben oder 3D-Glassmorphismus (außer subtilen Unschärfen in Navbars).
• Verwende KEIN rounded-full (Pillen-Form) für große Container, Karten oder primäre Buttons.
• Verwende KEINE Emojis im Code, Markup, Text, Überschriften oder Alt-Text. Ersetze sie durch geeignete Icons oder saubere SVG-Primitive.
• Verwende KEINE generischen Platzhalternamen wie „Max Mustermann“, „Firma GmbH“ oder „Lorem Ipsum“. Verwende realistische, kontextbezogene Inhalte.
• Verwende KEINE KI-Schreibklischees: „Revolutionieren“, „Nahtlos“, „Entfesseln“, „Next-Gen“, „Game-Changer“, „Eintauchen“. Schreibe einfache, spezifische Sprache.

3. Typografische Architektur

Die Oberfläche muss auf extremen typografischen Kontrast und eine erstklassige Schriftauswahl setzen, um einen redaktionellen Charakter zu schaffen.

• Primäre Sans-Serif (Textkörper, UI, Buttons): Verwende saubere, geometrische oder systemeigene Schriften mit Charakter. Ziel: font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif.
• Redaktionelle Serif (Hero-Überschriften & Zitate): Ziel: font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif. Wende enge Laufweite (letter-spacing: -0,02em bis -0,04em) und enge Zeilenhöhe (1,1) an.
• Dicktengleiche (Code, Tastenkürzel, Metadaten): Ziel: font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace.
• Textfarben: Textkörper darf nie absolut schwarz sein (#000000). Verwende Off-Black / Anthrazit (#111111 oder #2F3437) mit einer großzügigen line-height von 1,6 für Lesbarkeit. Sekundärtext sollte gedämpftes Grau (#787774) sein.

4. Farbpalette (Warmes Monochrom + Pastell-Akzente)

Farbe ist eine knappe Ressource, die nur für semantische Bedeutung oder subtile Akzente verwendet wird.

• Leinwand / Hintergrund: Reines Weiß #FFFFFF oder Warmer Knochen / Off-White #F7F6F3 / #FBFBFA.
• Primäre Oberfläche (Karten): #FFFFFF oder #F9F9F8.
• Strukturelle Rahmen / Trennlinien: Ultrahellgrau #EAEAEA oder rgba(0,0,0,0,06).
• Akzentfarben: Ausschließlich stark entsättigte, verwaschene Pastelltöne für Tags, Inline-Code-Hintergründe oder subtile Icon-Hintergründe verwenden.
  • Blasses Rot: #FDEBEC (Text: #9F2F2D)
  • Blasses Blau: #E1F3FE (Text: #1F6C9F)
  • Blasses Grün: #EDF3EC (Text: #346538)
  • Blasses Gelb: #FBF3DB (Text: #956400)

5. Komponenten-Spezifikationen

• Bento-Box-Funktionsraster:
  • Verwende asymmetrische CSS-Grid-Layouts.
  • Karten müssen genau border: 1px solid #EAEAEA haben.
  • Border-Radius muss klar sein: maximal 8px oder 12px.
  • Innenabstände müssen großzügig sein (z. B. 24px bis 40px).
• Primäre Call-to-Action (Buttons):
  • Hintergrund #111111, Text #FFFFFF.
  • Leichtes Border-Radius (4px bis 6px). Kein box-shadow.
  • Hover-Status sollte eine subtile Farbverschiebung zu #333333 oder eine Mikro-Skalierung transform: scale(0,98) sein.
• Tags & Status-Badges:
  • Pillenförmig (border-radius: 9999px), sehr kleine Schrift (text-xs), großgeschrieben mit weiter Laufweite (letter-spacing: 0,05em).
  • Hintergrund muss die definierten gedämpften Pastelltöne verwenden.
• Akkordeons (FAQ):
  • Entferne alle Containerboxen. Trenne Elemente nur mit einem border-bottom: 1px solid #EAEAEA.
  • Verwende ein sauberes, scharfes +- und --Symbol für den Umschaltzustand.
• Mikro-Tastenkürzel-UIs:
  • Stelle Verknüpfungen als physische Tasten mit <kbd>-Tags dar: border: 1px solid #EAEAEA, border-radius: 4px, background: #F7F6F3, in der Dicktengleichen Schrift.
• Faux-OS-Fensterchrom:
  • Wenn Software nachgebildet wird, verpacke sie in einem minimalistischen Container mit einer weißen oberen Leiste mit drei kleinen, hellgrauen Kreisen (Nachbildung der macOS-Fenstersteuerung).

6. Ikonografie & Bildmaterial-Richtlinien

• System-Icons: Verwende „Phosphor Icons (Bold- oder Fill-Gewichte)“ oder „Radix UI Icons“ für eine technische, etwas dickere Strichästhetik. Standardisiere die Strichstärke über alle Icons hinweg.
• Illustrationen: Monochrome, grobe durchgehende Linien-Tintenskizzen auf weißem Hintergrund, mit einer einzelnen versetzten geometrischen Form, gefüllt mit einer gedämpften Pastellfarbe.
• Fotografie: Verwende hochwertige, entsättigte Bilder mit warmem Ton. Wende subtile Overlays an (opacity: 0,04 warme Körnung), um Fotos in die monochrome Palette einzufügen. Verwende niemals übersättigte Stockfotos. Verwende zuverlässige Platzhalter wie https://picsum.photos/seed/{context}/1200/800, wenn keine echten Assets verfügbar sind.
• Hero- & Abschnittshintergründe: Abschnitte sollten sich nicht leer und flach anfühlen. Verwende subtile, vollbreite Hintergrundbilder mit sehr geringer Deckkraft, weiche radiale Lichtpunkte (radial-gradient mit warmen Tönen bei opacity: 0,03) oder minimale geometrische Linienmuster, um Tiefe zu verleihen, ohne die klare Ästhetik zu brechen.

7. Subtile Bewegung & Mikro-Animationen

Bewegung sollte unsichtbar wirken – vorhanden, aber nie ablenkend. Das Ziel ist leise Raffinesse, nicht Spektakel.

• Eintritt beim Scrollen: Elemente blenden sanft ein, wenn sie in den Viewport gelangen. Verwende translateY(12px) + opacity: 0, aufgelöst über 600ms mit cubic-bezier(0,16, 1, 0,3, 1). Verwende IntersectionObserver, niemals window.addEventListener('scroll').
• Hover-Status: Karten heben sich mit einer ultra-subtilen Schattenverschiebung ( box-shadow wechselt von 0 0 0 zu 0 2px 8px rgba(0,0,0,0,04) über 200ms). Buttons reagieren mit scale(0,98) bei :active.
• Gestaffelte Einblendungen: Listen und Rasterelemente treten mit einer Kaskadenverzögerung ein (animation-delay: calc(var(--index) * 80ms)). Binde niemals alles auf einmal ein.
• Hintergrund-Umgebungsbewegung: Optional. Ein einzelner, sehr langsam bewegter radialer Verlaufsblob (animation-duration: 20s+, opacity: 0,02-0,04), der hinter Hero-Abschnitten driftet. Muss auf eine Ebene mit position: fixed; pointer-events: none angewendet werden. Niemals auf scrollenden Containern.
• Leistung: Animiere ausschließlich über transform und opacity. Keine layoutauslösenden Eigenschaften (top, left, width, height). Verwende will-change: transform sparsam und nur bei aktiv animierenden Elementen.

8. Ausführungsprotokoll

Wenn du mit dem Schreiben von Frontend-Code (HTML, React, Tailwind, Vue) oder dem Entwerfen eines Layouts beauftragt wirst:

1. Lege zuerst den Makro-Weißraum fest. Verwende massive vertikale Abstände zwischen Abschnitten (z. B. py-24 oder py-32 in Tailwind).
2. Begrenze die Haupttypografie-Content-Breite auf max-w-4xl oder max-w-5xl.
3. Wende sofort die benutzerdefinierte typografische Hierarchie und die monochromen Farbvariablen an.
4. Stelle sicher, dass jede Karte, jeder Teiler und jeder Rahmen streng der Regel 1px solid #EAEAEA folgt.
5. Füge Eintrittsanimationen beim Scrollen zu allen wichtigen Inhaltsblöcken hinzu.
6. Stelle sicher, dass Abschnitte visuelle Tiefe durch Bilder, Umgebungsverläufe oder subtile Texturen haben – keine leeren, flachen Hintergründe.
7. Liefere Code, der diese hochwertige, aufgeräumte, redaktionelle Ästhetik nativ widerspiegelt, ohne manuelle Anpassungen zu erfordern.