Frontend & UI
design-skills · Neumorphism
Weich extrudierte Flächen in Steingrau mit Space-Mono-Schrift.
Worum es geht
Ein Richtlinien-Skill für neumorphes UI: Innen- und Außenschatten auf einer monochromen Steinfläche #E7E5E4, ein Teal-Akzent #006666, Space Mono für Display und Fließtext, kompaktes Density-Spacing.
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.
Warum das fürs Design zählt
- Monochrome Flächen bedeuten, dass Tiefe aus Schatten statt aus Farbkontrast kommt.
- Kompaktes Density-Spacing passt zu kontrolllastigen Panels wie Dashboards und Settings-Screens.
- Regeln verbieten das Mischen visueller Metaphern, damit weiche Extrusion die einzige Tiefensprache bleibt.
Was es abdeckt
- Style foundations
- Accessibility
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
So installierst du es
design-skills · Neumorphism
-
Klone das Repo.
git clone https://github.com/bergside/awesome-design-skills -
Verweise Codex auf die Skill-Datei.
skills/neumorphism/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Lass Codex Flächen- und Schatten-Tokens setzen, bevor er ein einzelnes Control stylt.
-
Verlange sichtbare Focus-States, da weiche Schatten allein Tastaturnutzer im Stich lassen.
-
Fordere semantisches HTML vor ARIA, wie dieser Skill vorgibt.
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.