Frontend & UI
UI-UX Pro Max · UI Styling
Construit des interfaces accessibles avec des composants shadcn et des utilitaires Tailwind.
De quoi il s’agit
Combine une couche de composants shadcn sur des primitives Radix, une couche de styling utilitaire Tailwind et une couche de design visuel sur canvas. Inclut des fichiers de référence pour le theming, l’accessibilité, les règles responsive et la personnalisation.
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing
Pourquoi ça compte pour le design
- Les dialogs et menus héritent de la gestion du focus de Radix : l’accessibilité n’est pas rajoutée après coup.
- Les couleurs de thème vivent dans des variables CSS : le dark mode reste cohérent.
- Des breakpoints mobile-first : les mises en page partent du petit écran et montent en complexité.
Ce que ça couvre
- Core stack
- Component library guide
- Theme and customization
- Accessibility patterns
- Responsive design
- Visual design system
Comment l’installer
UI-UX Pro Max · UI Styling
-
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/ui-styling/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Lancez npx shadcn@latest init pour configurer le framework et le thème.
-
Ajoutez des composants avec npx shadcn@latest add button card dialog form.
-
Lancez scripts/tailwind_config_gen.py pour générer une config avec des tokens personnalisés.
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.