Design system
Mesh Gradient Dark Blue Clean
Sistema blu notte quasi nero con un campo mesh dentro un guscio hero.
Che cos’è
Una direzione blu scuro con token di colore CSS, un guscio hero a bordo in gradiente, un campo mesh su canvas, una nav pill in vetro, nodi fluttuanti, binari e CTA in coppia.
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
Perché conta per il design
- Il mesh sta dentro il guscio hero, così guida la composizione invece di decorarla.
- Token nominati fissano i valori di sfondo, guscio, linea, testo e accento su tutta la pagina.
- Binari, quadrati angolari e pill dei nodi danno al guscio minimale una struttura tecnica.
Cosa copre
- System recipe
- Color tokens
- Hero shell
- Canvas mesh field
- Nodes and rails
- Motion defaults
Come installarlo
Mesh Gradient Dark Blue Clean
-
Clona il repository.
git clone https://github.com/MengTo/Skills -
Punta Codex sul file della skill.
agent-skills/web-design/mesh-gradient-dark-blue-clean/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Incolla il blocco di token, poi costruisci le fondamenta della pagina e il guscio hero.
-
Aggiungi il canvas mesh dentro il guscio, dietro al contenuto del guscio.
-
Metti qualche nodo, binario e marcatore, poi tieni lenti i loop di drift.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.