Frontend e UI
design-skills · Bento
Griglia di blocchi variati su crema, tipografia Inter, scala compatta.
Che cos’è
Una skill di linee guida per layout bento box che presentano il contenuto come blocchi a griglia di dimensioni variabili. Inter dappertutto, una scala tipografica compatta da 12 a 32, accenti pesca e blu su crema.
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
Perché conta per il design
- Le dimensioni variabili dei blocchi reggono la gerarchia, così è la griglia stessa a ordinare.
- Una scala tipografica compatta da 12 a 32 fa entrare testo denso in tessere piccole.
- La superficie crema #FFF5E6 tiene leggibili i bordi dei blocchi senza cornici pesanti.
Cosa copre
- Brand
- Style foundations
- Rules: do
- Component rule expectations
- Required output structure
- Quality gates
Come installarlo
design-skills · Bento
-
Clona il repository.
git clone https://github.com/bergside/awesome-design-skills -
Punta Codex sul file della skill.
skills/bento/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Chiedi a Codex di assegnare a ogni blocco una dimensione in base alla priorità del contenuto.
-
Definisci i token di spaziatura sulla scala da 4 a 32 prima di disporre le tessere.
-
Richiedi la gestione di overflow ed etichette lunghe, che questa skill elenca tra i casi limite.
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.