Design systems
Material 3
Implémentez Material Design 3 de Google sur Compose, Flutter et le web.
De quoi il s’agit
Un guide de Material Design 3 couvrant l’espace de noms de tokens md.sys, plus de 30 composants, la mise en page adaptative, le theming et M3 Expressive. Jetpack Compose est la cible principale ; Flutter et @material/web sont secondaires.
>
Pourquoi ça compte pour le design
- Des tokens de couleur, de typo, de forme et d’élévation remplacent les valeurs hex et de rayon en dur.
- Des surfaces tonales portent la profondeur à la place des ombres, conformément à la spec MD3 actuelle.
- Un audit noté évalue dix catégories et liste les corrections par ordre de priorité.
Ce que ça couvre
- Design token system
- Component quick reference
- Common patterns
- Anti-patterns
- M3 Expressive
- MD3 compliance audit
Comment l’installer
Material 3
-
Clonez le dépôt.
git clone https://github.com/hamen/material-3-skill -
Pointez Codex sur le fichier du skill.
skills/material-3/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Nommez la plateforme pour que Codex choisisse Compose, Flutter ou les propriétés CSS personnalisées.
-
Demandez un composant et obtenez la bonne variante avec le câblage des tokens.
-
Lancez l’audit sur une URL ou des fichiers source pour un rapport de conformité.
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.