Frontend & UI
UI-UX Pro Max · UI Styling
Baut barrierefreie Interfaces mit shadcn-Komponenten und Tailwind-Utilities.
Worum es geht
Kombiniert eine shadcn-Komponentenebene auf Radix-Primitives, eine Tailwind-Utility-Styling-Ebene und eine Canvas-Ebene für visuelles Design. Enthält Referenzdateien zu Theming, Barrierefreiheit, Responsive-Regeln und Anpassung.
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
Warum das fürs Design zählt
- Dialoge und Menüs erben Radix’ Focus-Management, damit Barrierefreiheit nicht nachgerüstet wird.
- Theme-Farben liegen in CSS-Variablen, damit der Dark Mode konsistent bleibt.
- Mobile-First-Breakpoints bedeuten, dass Layouts klein beginnen und nach oben aufbauen.
Was es abdeckt
- Core stack
- Component library guide
- Theme and customization
- Accessibility patterns
- Responsive design
- Visual design system
So installierst du es
UI-UX Pro Max · UI Styling
-
Klone das Repo.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Verweise Codex auf die Skill-Datei.
cli/assets/skills/ui-styling/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Führe npx shadcn@latest init aus, um Framework und Theme zu konfigurieren.
-
Füge Komponenten mit npx shadcn@latest add button card dialog form hinzu.
-
Führe scripts/tailwind_config_gen.py aus, um eine Config mit eigenen Tokens zu erzeugen.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.