Design system
UI-UX Pro Max · Design System
Design token a tre livelli, specifiche dei componenti e generazione di slide conforme ai token.
Che cos’è
Una skill di design system che copre i livelli di token primitivi, semantici e di componente come variabili CSS, più le specifiche di stato dei componenti e un generatore di slide che costruisce deck dagli stessi token.
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
Perché conta per il design
- Il livello di token semantici rende il passaggio tra tema chiaro e scuro un cambio di config, non una riscrittura.
- Le specifiche dei componenti tabulano gli stati default, hover, active e disabled, così l’handoff non lascia ambiguità.
- Un validatore segnala i valori hex scritti a mano, tenendo componenti e slide sul sistema di token.
Cosa copre
- Token architecture
- Component spec pattern
- Scripts
- Slide system
- Token compliance
- Best practices
Come installarlo
UI-UX Pro Max · Design System
-
Clona il repository.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Punta Codex sul file della skill.
cli/assets/skills/design-system/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Esegui generate-tokens.cjs su una config JSON di token per produrre il tuo file di variabili CSS.
-
Chiedi a Codex le specifiche dei componenti, poi esegui validate-tokens.cjs su src/ per intercettare i valori grezzi.
-
Usa search-slides.py con i flag di posizione e contesto per scegliere i layout di un deck.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.