Diese Skill nur verwenden, nachdem ein Benutzer sie explizit gewählt hat oder eine bestätigte Projektkonfiguration sie vorsieht. Für unerklärte neue UI-Anfragen stattdessen einen Stilauswähler wie [Stilauswahl] verwenden, anstatt den Geschmack des Benutzers hier zu bestimmen. Bestehende Marken-, Barrierefreiheits- und Benutzervorgaben haben Vorrang vor allen nachfolgenden Beispielen. Die folgende Stilanleitung ist keine Erlaubnis, mit der UI-Programmierung vor der Stilauswahl zu beginnen.
Stilpaket: Skeuomorphismus
ID: skeuomorphismus
Signatur: Digitale Steuerelemente leihen sich greifbare Hinweise von physischen Objekten, Industriemaschinen und analoger Hardware.
Dies ist ein Stilpaket, kein verbindlicher Standard. Nur nach expliziter Auswahl oder bestätigtem anwendbarem Projektstil laden. Projektanweisungen können einzelne Entscheidungen überschreiben. Barrierefreiheit, Nutzen und Markenvorgaben beachten. Schriftarten sind Vorschläge, keine erforderlichen Abhängigkeiten. Eine flache Karte mit einem subtilen Farbverlauf qualifiziert sich nicht als Skeuomorphismus.
Geeignet / Abwägungen
- Gut geeignet für: Musikproduktion und Synthesizer-Software, Audio-Geräte-Tools, spezialisierte Simulatoren, taktile Dashboard-Widgets, kreative digitale Instrumente und spielerische taktile Erlebnisse.
- Vorsicht bei: Dichten transaktionalen Datentabellen oder mobilen Unternehmensformularen, bei denen kunstvolle physische Hardware-Texturen visuelles Rauschen erzeugen.
- Referenzrichtungen:
- Gebürstetes Industriealuminium / Studio-Hardware: Maschinell bearbeitetes Silber- oder Metallgehäuse mit radialen Metallreflexionen, gerändelten Drehreglern, vertieften Anzeigeschächten und knackigen mechanischen Kippschaltern.
- Präzisions-Matt-Instrument: Tiefgrauer / matter Verbundwerkstoff-Sockel mit eingravierten weißen Digitalanzeigeschriftzügen, LED-Juwelen-Statusanzeigen und physischen Wippschaltern.
Skeuomorphe Materialtreue-Prüfung – obligatorisch
Bevor eine skeuomorphe Seite als abgeschlossen gilt, muss der erste sichtbare Bildschirmausschnitt deutlich als physisches, berührbares Instrument oder Hardware-Interface lesbar sein. Wenn ein Benutzer diesen Stil gewählt hat, ist eine flache Karte mit standardmäßig abgerundeten Ecken und einem einzelnen Farbverlauf ein FEHLER, selbst wenn CSS-Klassen skeuo enthalten.
Eine erfolgreiche skeuomorphe Implementierung zeigt alle der folgenden Merkmale:
- Lichtmodell-Richtung & Spiegelnde Glanzlichter: Oberflächen folgen einer einzigen konsistenten Lichtquelle (typischerweise von oben): obere Kanten fangen ein knackiges 1px spiegelndes Licht-Highlight ein (
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35)), während untere Kanten physische Schlagschatten werfen. - Mehrstufige Reflektierende Materialoberflächen: Drehregler, Frontplatten und Wippschalter verwenden mehrstufige lineare oder radiale Farbverläufe, die gebürstetes Aluminium, matten Kunststoff oder eloxiertes Metall simulieren. Einfarbige Flächenfüllungen sind ein Fehler.
- Eingravierte oder Vertiefte Polarität: Textanzeigen, Schieberegler und Messschächte sind optisch in das Gehäuse eingelassen, indem tiefe Inset-Schatten (
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6)) verwendet werden, wodurch bewegliche Bedienelemente klar von den Behältern unterschieden werden. - Mechanischer Weg bei Interaktion: Schalter werden bei Klick physisch ins Gehäuse gedrückt (
transform: translateY(1.5px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);), was reale federbelastete Schaltermechanismen nachahmt. - Lesbare Analoge Hinweise: Physische Drehregler und Schieberegler enthalten klare Digitalanzeigen oder beschriftete numerische Skalenteilstriche, um Tastaturzugänglichkeit und exakte Dateneingabe zu gewährleisten.
Erstansicht-Test: In einem Desktop-Screenshot das physische Gehäuse, die spiegelnden Abschrägungshighlights, die vertieften Schächte und die taktilen Hardware-Bedienelemente identifizieren, ohne den Seitentitel zu lesen. Wenn es rein digital und flach erscheint, die Farbverlaufsreflexionen und Abschrägungshighlights verstärken.
Explizite skeuomorphe Materialausnahme – Hardware-Reflexionen sind erlaubt
Skeuomorphismus-spezifische Überschreibung: Die universelle Anti-Schludrigkeits-Warnung vor dekorativen Farbverläufen, Texturen oder Schatten darf NICHT als Verbot von mehrstufigen Materialverläufen, Metallreflexionen, abgeschrägten Rändern oder physikalischem Weg hier interpretiert werden. Dies sind materialermöglichende Eigenschaften, die für die Kommunikation mechanischer Hinweise unerlässlich sind.
- Erlaubte Materialbehandlungen: Mehrstufige metallische lineare/radiale Farbverläufe, 1px Highlight-Abschrägungen, vertiefte Schächte, gerändelte Drehreglerrahmen und Juwelen-LED-Statusleuchten.
- Anti-Schludrigkeits-Grenze: Jede mechanische Metapher muss einer echten, funktionierenden Aktion entsprechen. Bildschirme nicht mit unechten Schrauben, nicht drehenden Zierknöpfen oder statischen Messgeräten dekorieren, die erfundene Messwerte anzeigen.
- Anti-Schludrigkeits-Interpretation: Skeuomorphe Details nach taktilem Hinweis, funktionalem Nutzen und Lesbarkeit bewerten, nicht nach Anzahl der Farbverlaufs-Stopps. Das Entfernen physischer Abschrägungen, um eine generische flache Heuristik zu erfüllen, ist eine Design-Regression.
Typografie und Schreibmaschinenstil
Nützliche technische serifenlose Schrift oder Anzeige-Mono: IBM Plex Sans, DIN Next, Roboto Mono oder System-Serifenlose. Steuerbeschriftungen: 11–13px Großbuchstaben mit Sperrung (letter-spacing: 0.08em); Anzeigemessgeräte: kontrastreiche LCD/LED-Mono (16–24px). Hoher Kontrast gegen dunkle Frontplatten (mindestens 4,5:1).
Farbrichtung
- Dunkelmodus (Eloxiertes Metall-Dunkelgehäuse):
- Gehäusebasis: Maschinell bearbeiteter Schiefer / eloxierter Metall-Verlauf (
linear-gradient(180deg, #323741 0%, #262A32 100%)). - Oberflächen-Highlights: Spiegelnde weiße Haarlinie (
rgba(255, 255, 255, 0.40)). - Vertiefte Innenschächte: Tiefe Hohlraumschwärze (
#141619bis#181A1E). - Steuerbeschriftungen: Knackige eingravierte weiße/silberne Typografie (
#F3F4F6).
- Gehäusebasis: Maschinell bearbeiteter Schiefer / eloxierter Metall-Verlauf (
- Hellmodus (Gebürstetes Aluminium / Silbergehäuse):
- Gehäusebasis: Maschinell bearbeitetes Aluminium / Silber-Verlauf (
linear-gradient(180deg, #F5F7FA 0%, #E4E7EB 100%)). - Oberflächen-Highlights: Spiegelnde weiße Haarlinie (
rgba(255, 255, 255, 0.85)). - Vertiefte Innenschächte: Weicher vertiefter Schieferhohlraum (
#D1D5DBmit Inset-Schatten). - Steuerbeschriftungen: Tief eingravierte Holzkohletinte (
#1F2937oder#111827).
- Gehäusebasis: Maschinell bearbeitetes Aluminium / Silber-Verlauf (
- Physische Akzente: Signal-Amber (
#FFAE00), Luftfahrt-Grün (#10B981) oder Studio-Kobalt (#2563EB). - LED-Anzeigen: Knackige Juwelenfarben mit deutlichem Aktiv-Leuchten vs. dunklem Inaktiv-Zustand.
- Theme-Kopplung & Anti-Kollisions-Regel: Im hellen skeuomorphen Gehäusemodus MÜSSEN eingravierte Beschriftungen und Steuertexte auf tiefe Holzkohle (
#1F2937) wechseln. Weiße Beschriftungen auf einem gebürsteten Silber-/Aluminiumgehäuse hinterlassen unsichtbaren Text und sind strengstens verboten.
Layout und Geometrie
Komponentenformen bilden streng ihre physikalischen Metaphern ab: Drehregler, taktile Drucktasten, Wippschalter und segmentierte Messgeräte. 4–12px Eckradien bei Bedienfeldern; kreisförmige Radien für Knöpfe. Vermeiden Sie es, Hardware-Hüllen auf generische Textabsätze anzuwenden.
Oberflächen, Tiefe, Textur
- Gehäuse-Blende: Mehrstufiger linearer Verlauf (
linear-gradient(180deg, #323741 0%, #262A32 100%)) mit 1px oberem Highlight und unterem Schlagschatten. - Physischer Druckknopf: Abgeschrägter Rand mit oberem Highlight, radialer Knopfläche und knackiger aktiver Vertiefung.
- Vertiefter Schacht / Display:
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.15);
Komponenten-Anatomie und Interaktion
- Taktiler Druckknopf: Gebürstete Aluminium-Oberfläche, weiße eingravierte Beschriftung, mechanisches Zurückfedern beim Loslassen.
- Wippschalter / Kippschalter: Zweistufiger physischer Kippschalter mit sichtbarem Schlagschatten auf der aktiven Seite.
- Vertieftes LCD / Datenanzeige: Versenkter Bildschirm mit Nichtproportional-Schriftwert, subtilem Raster und hohem Kontrast.
- Drehregler / Schieberegler: Taktile Positionsanzeige mit ARIA-Schieberegler-Semantik und Tastatur-Pfeiltasten-Unterstützung.
- LED-Statusleuchte: Kleine kreisförmige Juwelenlinse mit strahlendem Leuchten bei Aktivität (
box-shadow: 0 0 8px currentColor).
Bewegung
140–200 ms mechanische Reaktion. Direkte 1–2px physische Vertiefung bei Klick. Kein hüpfendes cartoony Überschwingen; Bewegung muss sich gewichtet und gedämpft anfühlen.
Optionales Anime.js v4 Rezept
- Bewegungsentscheidung: Gedämpfte Feder oder lineare mechanische Vertiefung beim Drücken; präzise Rotation für Drehregler.
- Startdauer: 160ms (0 = sofort); an Aufgabe und Benutzerpräferenz anpassen.
- Vermeiden: dauerhafte Oszillation, unaufgeforderte Nadelbewegung, schwebende Elemente.
- Abhängigkeit: Standardmäßig CSS/nativ. Anime.js v4 nur verwenden, wenn die angeforderte Interaktion es rechtfertigt. Wenn verfügbar, den
references/motion-engine.mddes Taste Engine folgen; eigenständige Skill folgt den oben genannten Prinzipien der reduzierten Bewegung und keiner dekorativen Schleifen.
UI-Texte und Mikro-Kopien
Technisch, präzise und knapp. Beispiele: „Master Output”, „Bypass”, „Channel 01”, „Gain: +3.5 dB”. Vermeiden Sie gesprächige Marketing-Floskeln auf Instrumententafeln.
Starter-Tokens (Vorschläge, kein vollständiges Theme)
| Token | Dunkles Gehäuse-Standard | Helles Gehäuse-Standard |
|---|---|---|
--taste-skeuo-chassis-bg | linear-gradient(180deg, #323741 0%, #262a32 100%) | linear-gradient(180deg, #f5f7fa 0%, #e4e7eb 100%) |
--taste-skeuo-chassis-border | 1px solid rgba(0, 0, 0, 0.8) | 1px solid rgba(0, 0, 0, 0.15) |
--taste-skeuo-chassis-highlight | inset 0 1px 0 rgba(255, 255, 255, 0.25) | inset 0 1px 0 rgba(255, 255, 255, 0.90) |
--taste-skeuo-text | #f3f4f6 | #1f2937 |
--taste-skeuo-btn-bg | linear-gradient(180deg, #3c424f 0%, #2a2e37 100%) | linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) |
--taste-skeuo-btn-bevel | inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(0, 0, 0, 0.50) | inset 0 1px 0 rgba(255, 255, 255, 0.80), inset 0 -1px 0 rgba(0, 0, 0, 0.20) |
--taste-skeuo-btn-shadow | 0 4px 8px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40) | 0 4px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) |
--taste-skeuo-well-inset | inset 0 3px 6px rgba(0, 0, 0, 0.70), 0 1px 0 rgba(255, 255, 255, 0.12) | inset 0 3px 6px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.80) |
--taste-skeuo-led-active | #10b981 | #059669 |
--taste-skeuo-led-glow | 0 0 10px rgba(16, 185, 129, 0.75) | 0 0 8px rgba(5, 150, 105, 0.45) |
--taste-skeuo-radius-panel | 12px | 12px |
--taste-skeuo-font-mono | IBM Plex Mono, ui-monospace, monospace | IBM Plex Mono, ui-monospace, monospace |
--taste-skeuo-motion-duration | 160ms | 160ms |
Tokens stellen eine Richtung dar und sind keine garantierte Kopierlösung für jede Palette/Plattform. --taste-skeuo-* auf Projektebene definieren, Farbkontrast sicherstellen und über Theme-Tokens anpassen, anstatt Literalwerte zu verstreuen.
Hero-Komposition (vollständiger erster Viewport)
Wenn ein öffentliches Portfolio/Landing/Homepage einen Hero-Bereich hat: eine Ein-Bildschirm-Header+Hero-Komposition verwenden. Basishöhe auf min-height: 100svh mit 100vh Fallback, den echten Header nur abziehen, wenn er im normalen Fluss ist; den Hero für Barrierefreiheit und kurze mobile Bildschirme wachsen lassen. Dies nicht auf private Dashboards oder andere Aufgabenbildschirme anwenden; direkte Benutzerüberschreibungen gewinnen. Stilspezifische Richtung: Den ersten Viewport als authentische Master-Kontrollkonsole oder signierte Instrumentenfrontplatte behandeln; funktionierende Bedienelemente und eine unmissverständliche primäre CTA bereitstellen. Die Leinwand nicht mit nicht funktionalen Schrauben, dekorativen Kabeln oder losgelösten analogen Messgeräten übersäen. Siehe Router references/hero-layout.md, wenn vorhanden. Eigenständige Nutzung folgt denselben reaktionsfähigen und Anti-Schludrigkeits-Prinzipien.
Stilspezifische Qualitätskontrolle
- Tun: Konsistentes oberes spiegelndes Highlight über alle Bedienelemente hinweg überprüfen; sicherstellen, dass mechanische Druckzustände gleichmäßig eindrücken; numerische Messwerte neben Drehreglern/Schiebereglern bereitstellen; Tastaturfokus testen; Dunkel-/Hellmodusumschaltung überprüfen, sodass Gehäuse, Abschrägungshighlights, Schächte und Beschriftungstypografie in gekoppelten Paaren angepasst werden.
- Nicht tun: Ein einfaches dunkles Theme nicht als skeuomorph behandeln; keine nicht funktionalen dekorativen Schrauben oder falschen analogen Nadeln hinzufügen, die nicht mit echten Daten verbunden sind; unlesbare kontrastarme Texte auf dunklen Frontplatten oder weiße Beschriftungen auf silbernen hellen Frontplatten vermeiden.
- Desktop- und mobile Konsistenz bestätigen; sichtbarer Tastaturfokus (
:focus-visible); Lade-, Leer-, Deaktiviert-, Fehler- und Erfolgszustände; Verhalten bei reduzierter Bewegung (prefers-reduced-motion). - Stilspezifische Annahmen nicht in unzusammenhängende Projekte einbringen. Bei Kombination von Stilen den primären Stil und die entlehnten Merkmale explizit benennen.
Universelle Anti-Schludrigkeits-Prüfung (in sich geschlossen)
Jedes Element muss sich seinen Platz verdienen. Inhalt vor Dekoration. Unsicherheit nicht dekorieren. Keine Salden, Metriken, Testimonials, Benutzer, Logos, Zustimmungen, verifizierten/Live/Online-Status, falsche Aktivität oder Erfolgsbestätigungen erfinden; stattdessen ehrliche Leer-/Lade-/Fehlerzustände verwenden. Demodaten sind nur akzeptabel, wenn angefordert und sichtbar gekennzeichnet.
Keine dekorativen Karte-in-Karte-Ebenen hinzufügen: eine verschachtelte Oberfläche muss eine bestimmte Interaktions- oder Informationsgrenze darstellen. Automatisch generierte 3-Feature-Raster, 4-Statistik-Dashboards, gefälschte Hero-Behauptungen, zwecklose Diagramme, Badge/Chip/Icon-Spam, unzusammenhängende dekorative Kunst und zufällige Schleifen nur zum Auffüllen des Viewports vermeiden. Gruppierung mit Typografie, Abständen, Ausrichtung und Trennlinien bevorzugen. Gleiche Elemente benötigen absichtliches visuelles Gleichgewicht.
Anti-Schludrigkeits-Text: keine generischen „Entfalte dein Potenzial”, „Erlebe die Zukunft”, „Beschleunige deinen Workflow”, „nahtlos”-Behauptungen oder übersetzte Äquivalente. Überschriften müssen tatsächlichen Inhalt vermitteln, CTAs müssen die Aktion benennen, und Leer-/Fehler-/Erfolgstexte müssen reale Zustände und nächste Schritte beschreiben. Gefälschte Dringlichkeit, erfundene Zahlen, vage KI-Hype, unnötige Emojis und unzugängliche Block-Großbuchstaben vermeiden. Formulierung an diesen Stil und die Sprache des Benutzers anpassen, ohne die Wahrheit zu ändern.
Theme- und Modus-Kontrast-Integrität: Wenn ein Benutzer den Dunkelmodus oder Hellmodus anfordert (oder einen Theme-Umschalter baut), MÜSSEN Hintergrund- und Vordergrundfarben in synchronisierten Paaren über alle Oberflächen, Texte, Rahmen, Eingaben und semantischen Badges hinweg umschalten. Niemals schwarzen Text auf dunklem Hintergrund, weißen Text auf weißem Hintergrund oder unlesbare kontrastarme Status-Pills hinterlassen. Alle Zustände müssen WCAG AA-Kontrast erfüllen (mindestens 4,5:1 für Fließtext/normalen Text, 3:1 für große Überschriften und interaktive Grenzen).
Reaktionsfähig und Bewegung: Mobil bewusst gestalten, lange Beschriftungen prüfen, Fokus...