Design-Systeme
UI-UX Pro Max · Design System
Dreischichtige Design-Tokens, Komponenten-Specs und token-konforme Slide-Generierung.
Worum es geht
Ein Design-System-Skill, der Primitive-, Semantic- und Component-Token-Ebenen als CSS-Variablen abdeckt, dazu Komponenten-State-Specs und einen Slide-Generator, der Decks aus denselben Tokens baut.
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
Warum das fürs Design zählt
- Die Semantic-Token-Ebene macht den Wechsel zwischen Light- und Dark-Theme zur Config-Änderung statt zum Rewrite.
- Komponenten-Specs listen Default-, Hover-, Active- und Disabled-States auf, damit beim Handoff nichts unklar bleibt.
- Ein Validator markiert hartkodierte hex-Werte und hält Komponenten und Slides im Token-System.
Was es abdeckt
- Token architecture
- Component spec pattern
- Scripts
- Slide system
- Token compliance
- Best practices
So installierst du es
UI-UX Pro Max · Design System
-
Klone das Repo.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Verweise Codex auf die Skill-Datei.
cli/assets/skills/design-system/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Führe generate-tokens.cjs gegen eine JSON-Token-Config aus, um deine CSS-Variablendatei zu erzeugen.
-
Bitte Codex um Komponenten-Specs und führe dann validate-tokens.cjs über src/ aus, um rohe Werte abzufangen.
-
Nutze search-slides.py mit Position- und Kontext-Flags, um Layouts für ein Deck zu wählen.
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.