Frontend e UI
apple-design
I principi di interfaccia fluida di Apple tradotti in molle e gesti per il web.
Che cos’è
Conoscenza distillata dai talk di design Apple al WWDC, soprattutto Designing Fluid Interfaces, mappata su CSS, Pointer Events e librerie di molle. Copre risposta, interrompibilità, momentum, materiali, tipografia e accessibilità.
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible tran
Perché conta per il design
- Il feedback scatta al pointer-down, così gli elementi premuti smettono di sembrare morti.
- Le animazioni partono dal valore live a schermo, eliminando i salti visibili quando si interrompono.
- I colpi rapidi proiettano un punto d’arrivo, così i lanci finiscono dove puntava il gesto.
Cosa copre
- Response
- Direct manipulation
- Interruptibility
- Momentum projection
- Materials and depth
- Reduced motion and accessibility
Come installarlo
apple-design
-
Clona il repository.
git clone https://github.com/emilkowalski/skills -
Punta Codex sul file della skill.
skills/apple-design/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Chiedi a Codex di costruire uno sheet, un drawer o un’interazione di trascinamento.
-
Traccia 1:1 con pointer capture e registra lo storico della velocità.
-
Al rilascio passa la velocità a una molla usando i valori di smorzamento forniti.
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.