Design systems
UI-UX Pro Max · Design System
Design tokens à trois couches, specs de composant et génération de slides conforme aux tokens.
De quoi il s’agit
Un skill de design system couvrant les couches de tokens primitifs, sémantiques et de composant sous forme de variables CSS, plus des specs d’états de composant et un générateur de slides qui construit des decks à partir de ces mêmes tokens.
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design t
Pourquoi ça compte pour le design
- La couche de tokens sémantiques fait du passage clair/sombre un changement de config, pas une réécriture.
- Les specs de composant tabulent les états par défaut, survol, actif et désactivé : la passation ne laisse aucune ambiguïté.
- Un validateur signale les valeurs hex en dur, gardant composants et slides sur le système de tokens.
Ce que ça couvre
- Token architecture
- Component spec pattern
- Scripts
- Slide system
- Token compliance
- Best practices
Comment l’installer
UI-UX Pro Max · Design System
-
Clonez le dépôt.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Pointez Codex sur le fichier du skill.
cli/assets/skills/design-system/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Lancez generate-tokens.cjs sur une config de tokens JSON pour produire votre fichier de variables CSS.
-
Demandez les specs de composant à Codex, puis lancez validate-tokens.cjs sur src/ pour repérer les valeurs brutes.
-
Utilisez search-slides.py avec les flags de position et de contexte pour choisir les mises en page d’un deck.
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.