Frontend e UI
UI-UX Pro Max · UI Styling
Costruisce interfacce accessibili con componenti shadcn e utility Tailwind.
Che cos’è
Unisce uno strato di componenti shadcn su primitive Radix, uno strato di styling con utility Tailwind e uno strato di design visivo su canvas. Include file di riferimento per theming, accessibilità, regole responsive e personalizzazione.
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
Perché conta per il design
- Dialog e menù ereditano la gestione del focus di Radix, così l’accessibilità non è un ripensamento.
- I colori del tema vivono in variabili CSS, così la dark mode resta coerente.
- I breakpoint mobile-first fanno partire i layout in piccolo e crescere verso l’alto.
Cosa copre
- Core stack
- Component library guide
- Theme and customization
- Accessibility patterns
- Responsive design
- Visual design system
Come installarlo
UI-UX Pro Max · UI Styling
-
Clona il repository.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Punta Codex sul file della skill.
cli/assets/skills/ui-styling/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Esegui npx shadcn@latest init per configurare framework e tema.
-
Aggiungi componenti con npx shadcn@latest add button card dialog form.
-
Esegui scripts/tailwind_config_gen.py per generare una config con token personalizzati.
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.