Frontend e UI
design-skills · Neumorphism
Superfici morbide estruse in grigio pietra con tipografia Space Mono.
Che cos’è
Una skill di linee guida per UI neumorfica: ombre interne ed esterne su una superficie monocromatica pietra #E7E5E4, un accento teal #006666, Space Mono per titoli e corpo, spaziatura a densità compatta.
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.
Perché conta per il design
- Le superfici monocromatiche fanno nascere la profondità dall’ombra invece che dal contrasto di colore.
- La spaziatura a densità compatta si adatta a pannelli ricchi di controlli come dashboard e schermate impostazioni.
- Le regole vietano di mescolare metafore visive, così l’estrusione morbida resta l’unico linguaggio di profondità.
Cosa copre
- Style foundations
- Accessibility
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
Come installarlo
design-skills · Neumorphism
-
Clona il repository.
git clone https://github.com/bergside/awesome-design-skills -
Punta Codex sul file della skill.
skills/neumorphism/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Fai impostare a Codex i token di superficie e ombra prima di dare stile a ogni singolo controllo.
-
Chiedi stati di focus visibili, dato che le sole ombre morbide non bastano a chi usa la tastiera.
-
Pretendi HTML semantico prima di ARIA, come specifica questa skill.
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.