Design system
Beautiful Shadows
Tre utility d’ombra Tailwind pronte all’uso per un’elevazione neutra e stratificata.
Che cos’è
Un set di classi Tailwind di ombra arbitraria esatte in tre intensità. Ognuna sovrappone più livelli neutri a bassa opacità invece della scala d’ombra predefinita di Tailwind.
Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows wit
Perché conta per il design
- L’elevazione resta neutra, senza glow colorato che tinge la superficie sottostante.
- Tre intensità fisse corrispondono rispettivamente a controlli, card e media hero.
- I livelli sovrapposti a bassa opacità sembrano profondità reale invece di una singola ombra netta.
Cosa copre
- Use when
- Shadow utilities
- Examples
- Usage rules
- Avoid
Come installarlo
Beautiful Shadows
-
Clona il repository.
git clone https://github.com/MengTo/Skills -
Punta Codex sul file della skill.
agent-skills/web-design/beautiful-shadows/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Chiedi a Codex di applicare l’utility md a card, pannelli e popover.
-
Riserva l’utility lg ai media hero e ai contenitori tipo modale.
-
Abbina ogni ombra a un riempimento di superficie pulito e a un raggio coerente.
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.