Frontend e UI
Border Gradients
Aggiunge un raffinato bordo in gradiente a card, modali e superfici hero.
Che cos’è
Una ricetta CSS per bordi in gradiente discreti che sfrutta la sovrapposizione di padding-box e border-box, più una variante con pseudo-elemento mascherato per superfici con sfondi complessi.
Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
Perché conta per il design
- Dà una definizione del bordo premium senza il glow squillante dei bordi al neon.
- La variante mascherata preserva uno sfondo esistente invece di sovrascriverlo.
- I default tengono gli stop sotto lo 0.4 di opacità, così i bordi incorniciano invece di competere.
Cosa copre
- Use when
- Defaults
- Simple CSS pattern
- Masked pattern
- Tailwind shortcut
- Taste rules
Come installarlo
Border Gradients
-
Clona il repository.
git clone https://github.com/MengTo/Skills -
Punta Codex sul file della skill.
agent-skills/web-design/css-border-gradient/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Punta Codex su una card o un pannello prezzi che ha bisogno di un bordo migliore.
-
Scegli il pattern semplice per i riempimenti pieni, quello mascherato per gli sfondi complessi.
-
Controlla i temi chiaro e scuro separatamente, dato che l’alpha di rado si trasferisce.
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.