Frontend & UI
design-skills · Brutalism
Mises en page inspirées du béton brut, titrage Darker Grotesque, rouge et ocre.
De quoi il s’agit
Un skill de directives pour une UI brutaliste puisée dans l’architecture de béton brut des années 1950 : dépouillée, fonctionnelle, volontairement heurtée. Titrage Darker Grotesque, rouge #DD614C et ocre #DAA144 sur blanc.
Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
Pourquoi ça compte pour le design
- Des éléments francs et dépouillés abandonnent la décoration : structure et texte portent le poids.
- Deux accents forts, rouge et ocre, remplacent entièrement dégradés et ombres.
- Le plancher d’accessibilité s’applique quand même : les mises en page heurtées gardent contraste et focus visible.
Ce que ça couvre
- Brand
- Style foundations
- Accessibility
- Rules: do
- Quality gates
- Example constraint language
Comment l’installer
design-skills · Brutalism
-
Clonez le dépôt.
git clone https://github.com/bergside/awesome-design-skills -
Pointez Codex sur le fichier du skill.
skills/brutalism/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Dites à Codex que le ton est franc et dépouillé avant qu’il ne choisisse les composants.
-
Ancrez chaque règle à un token ou un seuil, comme l’exigent les portes qualité.
-
Associez chaque règle « à faire » à un exemple concret « à ne pas faire » lors de la relecture.
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.