Frontend & UI
Skeuomorphic UI
Gibt Buttons und Panels taktile Tiefe mit gestapelten Verläufen und Schatten.
Worum es geht
Ein Oberflächenrezept für taktiles Web-UI: vertikale Verlaufsfüllungen, ein 1px reflektierender Verlaufsrand, gestapelte Außen- und Inset-Schatten. Geprägter Text, Icons und Mikrotextur sind optional.
Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, rea
Warum das fürs Design zählt
- Erhabene und gedrückte States kehren die Tiefe um, damit Controls physisch wirken.
- Die Tiefe bleibt gerichtet, mit Licht von oben und Schatten unten.
- Warnt davor, Glassmorphism, Neumorphism und Skeuomorphism in einer Komponente zu mischen.
Was es abdeckt
- Use when
- Surface recipe
- Raised surface
- Pressed surface
- Embossed text and icons
- Micro texture
So installierst du es
Skeuomorphic UI
-
Klone das Repo.
git clone https://github.com/MengTo/Skills -
Verweise Codex auf die Skill-Datei.
agent-skills/web-design/skeuomorphic-ui/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Setz die Basis-Tokens einmal und stimm sie dann pro Marke und Theme ab.
-
Wende die erhabene Fläche auf Karten, Buttons, Tabs und Control-Gehäuse an.
-
Nutze die gedrückte Variante nur für aktive Toggles und ausgewählte Tabs.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.