Frontend & UI
design-skills · Bento
Grille de blocs variés sur crème, typo Inter, échelle compacte.
De quoi il s’agit
Un skill de directives pour les mises en page bento qui présentent le contenu en blocs de grille de tailles variées. Inter partout, une échelle typo compacte de 12 à 32, des accents pêche et bleu sur crème.
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
Pourquoi ça compte pour le design
- Des tailles de bloc variées portent la hiérarchie : la grille elle-même fait le classement.
- Une échelle typo compacte de 12 à 32 loge du texte dense dans de petites tuiles.
- La surface crème #FFF5E6 garde les bords de bloc lisibles sans bordures lourdes.
Ce que ça couvre
- Brand
- Style foundations
- Rules: do
- Component rule expectations
- Required output structure
- Quality gates
Comment l’installer
design-skills · Bento
-
Clonez le dépôt.
git clone https://github.com/bergside/awesome-design-skills -
Pointez Codex sur le fichier du skill.
skills/bento/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Demandez à Codex d’attribuer à chaque bloc une taille selon la priorité du contenu.
-
Définissez les tokens d’espacement sur l’échelle de 4 à 32 avant de disposer les tuiles.
-
Réclamez la gestion du débordement et des libellés longs, que ce skill liste comme cas limites.
Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.
En savoir plus sur la liste codex-design ↗Autres plugins design pour Codex
Frontend & UI Ce qu’il fait gpt-taste Construit des pages primables avec du scroll GSAP et des grilles bento sans trous. 
Design systems Ce qu’il fait Stitch Design Taste Rédige un DESIGN.md qui oriente Google Stitch vers des écrans non génériques. 
Frontend & UI Ce qu’il fait image-to-code Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant. 
Frontend & UI Ce qu’il fait imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. Prochaine étape
Designez avec Open Design, sans la config
Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.