Sistemas de diseño
UI-UX Pro Max · Design System
Tokens de diseño en tres capas, especificaciones de componentes y generación de slides acorde a los tokens.
Qué es
Una skill de sistema de diseño que cubre las capas de tokens primitivos, semánticos y de componente como variables CSS, además de especificaciones de estados de componente y un generador de slides que construye decks a partir de esos mismos 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
Por qué importa para el diseño
- La capa de tokens semánticos convierte el cambio entre tema claro y oscuro en un ajuste de configuración, no en una reescritura.
- Las especificaciones de componente tabulan los estados default, hover, active y disabled, así el traspaso no deja nada ambiguo.
- Un validador señala los valores hex escritos a mano, manteniendo componentes y slides dentro del sistema de tokens.
Qué cubre
- Token architecture
- Component spec pattern
- Scripts
- Slide system
- Token compliance
- Best practices
Cómo instalarlo
UI-UX Pro Max · Design System
-
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/design-system/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Ejecuta generate-tokens.cjs sobre una configuración de tokens en JSON para emitir tu archivo de variables CSS.
-
Pídele a Codex las especificaciones de componente, y luego ejecuta validate-tokens.cjs sobre src/ para cazar valores en crudo.
-
Usa search-slides.py con los flags de posición y contexto para elegir maquetaciones para un deck.
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.