Frontend e UI
Skeuomorphic UI
Dà a bottoni e pannelli una profondità tattile con gradienti e ombre stratificati.
Che cos’è
Una ricetta di superficie per UI web tattile: riempimenti a gradiente verticale, un bordo in gradiente riflettente da 1px, ombre esterne e interne sovrapposte. Testo in rilievo, icone e micro texture sono opzionali.
Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, rea
Perché conta per il design
- Gli stati sollevato e premuto invertono la profondità, così i controlli sembrano fisici.
- La profondità resta direzionale, con luce dall’alto e ombra sotto.
- Mette in guardia dal mescolare glassmorphism, neumorphism e skeuomorphism in un solo componente.
Cosa copre
- Use when
- Surface recipe
- Raised surface
- Pressed surface
- Embossed text and icons
- Micro texture
Come installarlo
Skeuomorphic UI
-
Clona il repository.
git clone https://github.com/MengTo/Skills -
Punta Codex sul file della skill.
agent-skills/web-design/skeuomorphic-ui/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Imposta i token di base una volta, poi regolali per brand e tema.
-
Applica la superficie sollevata a card, bottoni, tab e alloggiamenti dei controlli.
-
Aggiungi la variante premuta solo ai toggle attivi e alle tab selezionate.
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.