Frontend y UI
UI-UX Pro Max · UI Styling
Construye interfaces accesibles con componentes shadcn y utilidades de Tailwind.
Qué es
Combina una capa de componentes shadcn sobre primitivas de Radix, una capa de estilos con utilidades de Tailwind y una capa de diseño visual en canvas. Incluye archivos de referencia para theming, accesibilidad, reglas responsive y personalización.
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
Por qué importa para el diseño
- Los diálogos y menús heredan la gestión de foco de Radix, así la accesibilidad no se añade a posteriori.
- Los colores del tema viven en variables CSS, así el modo oscuro se mantiene coherente.
- Los breakpoints mobile-first hacen que las maquetaciones arranquen pequeñas y crezcan hacia arriba.
Qué cubre
- Core stack
- Component library guide
- Theme and customization
- Accessibility patterns
- Responsive design
- Visual design system
Cómo instalarlo
UI-UX Pro Max · UI Styling
-
Clona el repositorio.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Señálale a Codex el archivo de la skill.
cli/assets/skills/ui-styling/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Ejecuta npx shadcn@latest init para configurar el framework y el tema.
-
Añade componentes con npx shadcn@latest add button card dialog form.
-
Ejecuta scripts/tailwind_config_gen.py para generar una configuración con tokens propios.
Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.
Más en la lista codex-design ↗Más plugins de diseño para Codex
Frontend y UI Qué hace gpt-taste Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos. 
Sistemas de diseño Qué hace Stitch Design Taste Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas. 
Frontend y UI Qué hace image-to-code Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente. 
Frontend y UI Qué hace imagegen-frontend-mobile Genera flujos de pantallas de apps móviles premium como imágenes, no como código. Siguiente paso
Diseña con Open Design, sin montar nada
Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.