Design-Systeme
Mesh Gradient Dark Blue Clean
Fast schwarzes Navy-System mit einem Mesh-Feld in einer Hero-Hülle.
Worum es geht
Eine dunkelblaue Richtung mit CSS-Color-Tokens, einer Border-Gradient-Hero-Hülle, Canvas-Mesh-Feld, gläserner Nav-Pill, schwebenden Nodes, Rails und gepaarten CTAs.
Create a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion. Use when the interface needs a near-black
Warum das fürs Design zählt
- Das Mesh sitzt in der Hero-Hülle, damit es die Komposition treibt statt sie nur zu schmücken.
- Benannte Tokens fixieren Werte für Hintergrund, Hülle, Linie, Text und Akzent über die ganze Seite.
- Rails, Eckquadrate und Node-Pills geben der minimalen Hülle technische Struktur.
Was es abdeckt
- System recipe
- Color tokens
- Hero shell
- Canvas mesh field
- Nodes and rails
- Motion defaults
So installierst du es
Mesh Gradient Dark Blue Clean
-
Klone das Repo.
git clone https://github.com/MengTo/Skills -
Verweise Codex auf die Skill-Datei.
agent-skills/web-design/mesh-gradient-dark-blue-clean/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Füg den Token-Block ein und bau dann das Seitenfundament und die Hero-Hülle.
-
Setz das Mesh-Canvas in die Hülle, hinter den Hüllen-Content.
-
Platzier ein paar Nodes, Rails und Marker und halt die Drift-Loops langsam.
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.