Frontend e UI
Details that make interfaces feel better
Sedici regole concrete di rifinitura UI con una checklist di revisione.
Che cos’è
Un insieme di principi di design engineering per la rifinitura dell’interfaccia: raggi concentrici, allineamento ottico, ombre stratificate, animazioni d’ingresso sfalsate, numeri tabulari, aree di tocco e specificità delle transizioni.
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/
Perché conta per il design
- Nomina valori esatti, così lo scale alla pressione è sempre 0.96, mai a occhio.
- Corregge il disallineamento dei raggi annidati che fa sembrare storti gran parte dei componenti.
- Intercetta lo spostamento di layout dovuto ai numeri che cambiano prima che arrivi agli utenti.
Cosa copre
- Quick reference
- Core principles
- Common mistakes
- Review output format
- Review checklist
- Reference files
Come installarlo
Details that make interfaces feel better
-
Clona il repository.
git clone https://github.com/jakubkrehel/make-interfaces-feel-better -
Punta Codex sul file della skill.
skills/make-interfaces-feel-better/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Punta Codex su un componente e chiedigli di applicare i principi.
-
Richiedi una revisione: i riscontri tornano come tabelle Prima e Dopo.
-
Esegui la checklist da quattordici voci prima di fare merge di qualsiasi modifica frontend.
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.