Design Systems
UI-UX Pro Max · Design System
Three-layer design tokens, component specs, and token-compliant slide generation.
What it is
A design-system skill covering primitive, semantic, and component token layers as CSS variables, plus component state specs and a slide generator that builds decks from those same 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
Why it matters for design
- Semantic token layer makes light and dark theme switching a config change, not a rewrite.
- Component specs table default, hover, active, and disabled states so handoff leaves nothing ambiguous.
- A validator flags hardcoded hex values, keeping components and slides on the token system.
What it covers
- Token architecture
- Component spec pattern
- Scripts
- Slide system
- Token compliance
- Best practices
How to install
UI-UX Pro Max · Design System
-
Clone the repo.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Point Codex at the skill file.
cli/assets/skills/design-system/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Run generate-tokens.cjs against a JSON token config to emit your CSS variable file.
-
Ask Codex for component specs, then run validate-tokens.cjs over src/ to catch raw values.
-
Use search-slides.py with position and context flags to pick layouts for a deck.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗More Codex design plugins
Frontend & UI What it does gpt-taste Builds award-style landing pages with GSAP scroll motion and gapless bento grids. 
Design Systems What it does Stitch Design Taste Writes a DESIGN.md that steers Google Stitch toward non-generic screens. 
Frontend & UI What it does image-to-code Generates design images first, analyzes them, then builds matching frontend code. 
Frontend & UI What it does imagegen-frontend-mobile Generates premium mobile app screen flows as images, not code. Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.