design-system
Builds a three-layer design token system (primitive, semantic, component) with CSS variables, spacing and type scales, component specs and slide generation.
- Kind
- Skill
- Works with
- Claude Code
- Source
- UI UX Pro Max @ 3a13158ff1f3
- Path
- .claude/skills/design-system/SKILL.md
- Jobs
- UI/UX work, Implementation
- Topics
- Design systems, CSS & Tailwind, UI/UX
Credit
- Made by
- nextlevelbuilder
- Original
- github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/3a13158f…
- License
- MIT
Listed by Skill Manifest; not made by us.
InstallInstall it from a plugin marketplace.
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
Install factsScanned 2 Nov 2026
- Adds
- .claude/skills/design-system/ (the skill folder)
- 11 file(s) the skill refers to
- Runs scripts
- Yes
- scripts/generate-tokens.cjs
- scripts/validate-tokens.cjs
- scripts/search-slides.py
- shell block in the text
- Uses the network
- None found
- Needs secrets
- None found
- Source revision
- 3a13158ff1f3
- Licence
- MIT
- Last activity
- 1 Nov 2026
- Review
- Reviewed
Found by a static scan of the stored text; nothing is run. “None found” is not a guarantee, so read what you install before you run it.
- Only the main file is read; other files in the folder are not scanned
# Design System
Token architecture, component specifications, systematic design, slide generation.
## When to Use
- Design token creation
- Component state definitions
- CSS variable systems
- Spacing/typography scales
- Design-to-code handoff
- Tailwind theme configuration
- **Slide/presentation generation**
## Token Architecture
Load: `references/token-architecture.md`
### Three-Layer Structure
```
Primitive (raw values)
↓
Semantic (purpose aliases)
↓
Component (component-specific)
```
**Example:**
```css
/* Primitive */
--color-blue-600: #2563EB;
/* Semantic */
--color-primary: var(--color-blue-600);
/* Component */
--button-bg: var(--color-primary);
```
## Script Paths
…