Frontend & UI
design-skills · Claymorphism
Pralle, runde 3D-Formen, Poppins-Headlines, Blau auf Weiß.
Worum es geht
Ein Richtlinien-Skill für claymorphes UI: weiche, runde, pralle Formen, die formbaren Ton nachahmen. Poppins für Display, Montserrat für Fließtext, ein Blau-Akzent #3B82F6 und tiefblauer Text auf Weiß.
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
Warum das fürs Design zählt
- Pralle, runde Formen geben Buttons eine klare Druck-Affordanz ohne zusätzliche Labels.
- Tiefblauer Text #1C398E auf Weiß hält den Kontrast, während die Palette verspielt bleibt.
- Regeln verbieten das Mischen von Metaphern, damit Ton-Tiefe nie mit Glas oder Flat kombiniert wird.
Was es abdeckt
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
So installierst du es
design-skills · Claymorphism
-
Klone das Repo.
git clone https://github.com/bergside/awesome-design-skills -
Verweise Codex auf die Skill-Datei.
skills/claymorphism/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Bitte Codex zuerst um Radius- und Schatten-Tokens, da sie den Ton-Look definieren.
-
Kombiniere Poppins-Display mit Montserrat-Fließtext wie vorgegeben, nicht zwei ähnliche Sans-Schriften.
-
Prüfe, dass focus-visible- und Disabled-States die weiche Formgebung überstehen.
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.