Source ↗

nextlevelbuilderdesign-system

Mechanism

When It Triggers · How It Works · What It Produces

Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.

Trigger Timing

When creating design tokens, defining component specs, configuring Tailwind themes, or generating brand-compliant presentations/slides.

Working Mechanism

  • Builds three-layer token architecture (primitive→semantic→component) via JSON and CSS variable scripts
  • Validates code for hardcoded values using validate-tokens.cjs
  • For slides: uses BM25 search and CSV decision system to pick layout, typography, color, charts, then generates HTML with Chart.js and validates token compliance

Outcome

A systematic design token system and brand-compliant strategic slide decks with consistent styling and validated token usage.

Use Cases

Two Typical Use Cases

Scenario 01

Build token system for new product UI

A frontend team starts a new product UI and needs consistent styling. They use design-system to generate three-layer tokens from brand colors via generate-tokens.cjs, then hand CSS variables to ui-styling. This avoids hardcoded values, enables theme switching, and speeds up development with a clear design-to-code flow.

Scenario 02

Generate brand-compliant pitch slides

A marketer must create an investor pitch deck. Using design-system's slide system, they run search-slides.py for contextual layout, apply CSV strategies and design tokens, generate Chart.js HTML slides, and validate with slide-token-validator.py. Result is a persuasive, brand-compliant deck with zero hardcoded colors.

Skill Relationships

Which Skills I Use · Which Skills Use Me

Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.

Tier 1 · These Skills Use Me

Tier 2 · Current Skill

  • design-systemStyle Guide · Workflow

Tier 3 · I Use These Skills

Full Relationship Graph

Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.