Design for AI

Stil Skeuomorphismus: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für skeuomorphismus. Auch bekannt als skeuomorphes Design, realistisches UI, iOS-6-Stil, Leder-und-Leinen-UI, Skeuomorph-Revival. 2007-2013 (iPhone bis iOS 6); erneutes Interesse ab 2023.

Merkmale

  • Interfaces imitieren physische Materialien: Leder, Leinen, gebürstetes Metall, Holz, Glas, Papier
  • realistische Beleuchtung: Verläufe, die ein Licht von oben modellieren, Glanzlichter und Drop-Shadows
  • genähte Ränder, geprägter Text, abgeschrägte Buttons, Knöpfe und Toggles, die mechanisch aussehen
  • Texturen über sich wiederholende Bilder oder SVG-Rauschen; nichts ist flach
  • Objekte verhalten sich physisch: Seiten rollen sich, Schalter gleiten, Regler drehen sich
  • starke Tiefenordnung mit mehreren Schattenebenen
  • warme, haptische Farben: Hellbraun, Dunkelbraun, Stahlgrau, Filzgrün

Palette

#3b2a1e Lederbraun, #d9c8a9 Naht, #b8b8b8 gebürstetes Metall, #f4efe4 Papier, #1f1f1f Text, #2f6b3a Filzgrün

Schrift

Helvetica-artig (Arimo, Work Sans) für UI, Marker-Felt-Stil ist kommerziell; nutze Lora oder Georgia für "Papier"-Inhalte; Größen 15-17px UI, 20px Papier; Text oft geprägt mit einem 1px weißen text-shadow darunter

Do

  • modelliere eine Lichtquelle oben links und halte jeden Verlauf, jedes Glanzlicht und jeden Schatten damit konsistent
  • nutze Texturen aus SVG-Rauschen oder kleinen kachelbaren Bildern; jede unter 20KB
  • lass Bedienelemente wie ihr physisches Gegenstück aussehen (ein echter Toggle, ein echter Drehregler) und animiere sie physisch

Don't

  • misch keine Materialmetaphern auf einem Panel; Leder-Nav mit Metallbuttons ist okay, Lederbuttons auf Metall nicht
  • nutze keine flachen Icons; Icons brauchen dieselbe Beleuchtung wie die Oberflächen
  • nutze es nicht seitenweit für Leseinhalte; reserviere es für Controls und Chrome, halte Text auf schlichtem Papier

Bekannt dafür: iOS 6 (Notizen, Game Center, Freunde suchen), Apple Podcasts 2012, Things 2, GarageBand

CSS-Seed
:root {
  --bg: #3b2a1e;
   --paper: #f4efe4;
   --fg: #1f1f1f;
   --metal: linear-gradient(#e6e6e6,#a8a8a8);
   --stitch: #d9c8a9;
   --radius: 10px;
   --shadow: 0 2px 4px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.4);
   --font: 'Work Sans',sans-serif
}
Prompt

Baue die Seite im skeuomorphen Stil. Nav und Footer sind dunkles Leder: Hintergrund #3b2a1e mit einer SVG-Rauschtextur (feTurbulence baseFrequency 0.8, opacity 0.15), einer gestrichelten 1px #d9c8a9 Nahtlinie 6px vom Rand eingerückt und inset 0 1px 0 rgba(255,255,255,0.15) als oberes Glanzlicht. Inhaltspanels sind Papier #f4efe4 mit einer schwachen horizontalen Linientextur und box-shadow 0 3px 8px rgba(0,0,0,0.45). Buttons sind gebürstetes Metall: linear-gradient(#ececec,#a8a8a8), 1px Rand #6b6b6b, border-radius 10px, inset 0 1px 0 rgba(255,255,255,0.7), Text #1f1f1f geprägt mit text-shadow 0 1px 0 rgba(255,255,255,0.6); der aktive Zustand kippt auf inset-Schatten. Toggles sehen aus wie echte Schalter mit gleitendem Knopf (200ms ease-out). Schrift Work Sans bei 16px für UI, Lora bei 19px für Papierinhalte. Eine Lichtquelle oben links in jedem Verlauf. Keine flachen Icons; Icons bekommen eine Verlaufsfüllung und ein 1px Glanzlicht unten.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im skeuomorphen Stil. Nav und Footer sind dunkles Leder: Hintergrund #3b2a1e mit einer SVG-Rauschtextur (feTurbulence baseFrequency 0.8, opacity 0.15), einer gestrichelten 1px #d9c8a9 Nahtlinie 6px vom Rand eingerückt und inset 0 1px 0 rgba(255,255,255,0.15) als oberes Glanzlicht. Inhaltspanels sind Papier #f4efe4 mit einer schwachen horizontalen Linientextur und box-shadow 0 3px 8px rgba(0,0,0,0.45). Buttons sind gebürstetes Metall: linear-gradient(#ececec,#a8a8a8), 1px Rand #6b6b6b, border-radius 10px, inset 0 1px 0 rgba(255,255,255,0.7), Text #1f1f1f geprägt mit text-shadow 0 1px 0 rgba(255,255,255,0.6); der aktive Zustand kippt auf inset-Schatten. Toggles sehen aus wie echte Schalter mit gleitendem Knopf (200ms ease-out). Schrift Work Sans bei 16px für UI, Lora bei 19px für Papierinhalte. Eine Lichtquelle oben links in jedem Verlauf. Keine flachen Icons; Icons bekommen eine Verlaufsfüllung und ein 1px Glanzlicht unten.

## Tokens
:root { --bg:#3b2a1e; --paper:#f4efe4; --fg:#1f1f1f; --metal:linear-gradient(#e6e6e6,#a8a8a8); --stitch:#d9c8a9; --radius:10px; --shadow:0 2px 4px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.4); --font:'Work Sans',sans-serif }

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.