98.8K+Download
Skip to the usage guide
design-systemby nextlevelbuilder

Design System Skill.

A Claude Code and Codex skill for brand and design-system work: three-tier design tokens, component specifications, and slide generation.

  • Brand & Design Systems
  • Design system
Download OpenDesignView usage guide
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/design-system/SKILL.mdSKILL.md
--- name: design-system description: 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 tokens, systematic design, brand-compliant presentations. --- ## When to Use ## Token Architecture ## Script Paths ## Quick Start ## Component Spec Pattern ## Scripts
Front matter and section headings read from the upstream file on 2026-09-14 · 7,414 characters in full

01 What it does

What the design-system Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Generates three-layer design token architectures (primitive → semantic → component), component specifications, and brand-compliant presentation slides. Primitive tokens define raw values like --color-blue-600. Semantic tokens alias them by purpose (--color-primary). Component tokens specify per-component usage (--button-bg).

The skill provides generation and validation scripts for CSS variables, Tailwind theme integration, and a contextual slide system that uses BM25 search across 15 deck structures, 25 layouts, and Duarte sparkline emotion arcs. All slides must import design-tokens.css and use CSS variables exclusively. Chart.js is required for data visualization. Supports Pexels and Unsplash image fetching.

What it produces

  • Token validation report identifying hardcoded values in source code that should reference tokens
See the example prompt ↗

How It Works

  1. 01
    Load Token Architecture Reference

    The skill loads references/token-architecture.md to establish the three-layer token structure before generating or validating tokens.

  2. 02
    Generate CSS from JSON Config

    Run generate-tokens.cjs with a JSON config file to output a CSS file with the three-layer token structure as CSS variables.

  3. 03
    Search Slide Strategies by Goal

    Use BM25 search via search-slides.py to find matching deck structures, emotion arcs, and sparkline beats from slide-strategies.csv, optionally filtering by domain (copy or chart) and contextual position.

  4. 04
    Apply Contextual Decision Flow

    Parse the goal, query slide-layout-logic.csv for layout and break_pattern flag, slide-typography.csv for type scale, slide-color-logic.csv for color treatment, and slide-backgrounds.csv for image category.

  5. 05
    Generate HTML with Design Tokens

    Create slide HTML that imports assets/design-tokens.css, uses var() for all styling, includes Chart.js for charts, and adds navigation and animation classes from slide-animations.css.

  6. 06
    Validate Token Compliance

    Run slide-token-validator.py to check that the generated slide HTML uses CSS variables exclusively and contains no hardcoded color, font, or spacing values.

02 Find your fit

When to Use the design-system Skill

Use the design-system skill in Claude Code or Codex when the job is brand and design-system work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Creating design token systems with three-layer architecture for theme switching and component customization
  • Defining component state specifications with hover, active, and disabled variants
  • Generating brand-compliant presentation slides with contextual layout selection and emotion arc planning
  • Converting design specifications into Tailwind theme configuration using component tokens
  • Design-to-code handoff with systematic spacing and typography scales

Know the Boundaries

  • Hardcoded color, font, or spacing values are not permitted; all styling must use CSS variables from design-tokens.css

What to Provide

  • Brand guidelines documentdocs/brand-guidelines.md provides brand identity, voice, and color definitions that inform primitive token extraction.
  • Source directory for validationA project directory path for validate-tokens.cjs to scan for hardcoded values that should use tokens instead.

03 Inside the skill

Rules the design-system Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Never Use Raw Hex in Components

    Components must always reference tokens via CSS variables, never hardcode color values directly.

  2. All Slides Must Import design-tokens.css

    Every slide HTML file must import assets/design-tokens.css as the single source of truth and use var() for all styling properties.

  3. Use Chart.js for Data Visualization

    Charts must be rendered with Chart.js (version 4.4.1 or later), not CSS-only bars or other approaches.

  4. Script Paths Relative to SKILL.md Directory

    Script paths like scripts/generate-tokens.cjs are relative to the directory containing SKILL.md, not the project root.

  5. Use HSL Format for Opacity Control

    Token values should use HSL color format to enable opacity adjustments without duplicating token definitions.

  6. Pattern Breaks at 1/3 and 2/3 Positions

    Premium decks alternate between 'What Is' (frustration) and 'What Could Be' (hope) emotions, with pattern breaks calculated at 1/3 and 2/3 deck positions following Duarte sparkline method.

  7. Slides Must Focus on Persuasion

    All generated slides must include navigation (keyboard arrows, click, progress bar), center-align content, and focus on persuasion or conversion goals.

  8. Document Every Token's Purpose

    Each token definition must include documentation explaining its intended purpose in the system.

04 Put it to work

Install design-system in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add design-system to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

Generic skills CLI form for .claude/skills/design-system/SKILL.md; the repository may document its own path.

Give the Skill a First Brand and design-system Work Task

Adapt this prompt with your own content and constraints, then run it in Claude Code or Codex.

Example prompt
/slides:create "10-slide investor pitch for ClaudeKit Marketing"

Source: SKILL.md example (verbatim).

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Confirm Chart.js script tag is present and charts use Chart.js constructor, not CSS-only rendering
  • Check that component specs follow the state table pattern with default, hover, active, and disabled columns
  • Review the reference implementation at assets/designs/slides/claudekit-pitch-251223.html for feature completeness

In OpenDesign import design-system from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
nextlevelbuilder
Repository
github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Skill file
.claude/skills/design-system/SKILL.md Content checksum recorded at verification; commit 7f69fed
License
MIT From LICENSE; SKILL.md says “MIT”.
Repository stars
127,450 GitHub snapshot taken 2026-09-14 for the whole nextlevelbuilder/ui-ux-pro-max-skill repository, which contains 7 skills in this catalog. Not a rating or usage count for design-system.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. When to UseDesign tokens, component specs, CSS variables, spacing scales, design-to-code handoff, Tailwind config, slide generation
  2. Token ArchitectureThree-layer structure: primitive raw values, semantic purpose aliases, component-specific tokens with CSS variable examples
  3. Script PathsScript paths relative to SKILL.md directory; working directory at project root for file access
  4. Quick StartCommands to generate tokens from JSON config and validate token usage in source directories
  5. ReferencesSeven reference files covering architecture, primitive/semantic/component tokens, specs, states, variants, Tailwind integration
  6. Component Spec PatternTable structure for defining component properties across default, hover, active, disabled states
  7. ScriptsFive scripts: token generation, validation, BM25 slide search, slide token validation, image fetching
  8. TemplatesStarter JSON template with three-layer token structure
  9. IntegrationExtract primitives from brand, feed component tokens to Tailwind; depends on brand and ui-styling skills
  10. Slide SystemBrand-compliant presentations using design tokens, Chart.js, contextual decision CSVs, BM25 search
  11. Source of TruthBrand guidelines, design-tokens.json and .css, slide-animations.css define all slide styling
  12. Slide Search (BM25)Search slide templates by goal with domain filters and contextual parameters (position, total, previous emotion)
The Skill's Own Description
“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 tokens, systematic design, brand-compliant presentations.”

Front-matter description from SKILL.md. The full file is about 7,414 characters. Read the full file on GitHub.

06 Before you install

Questions About the design-system Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What agents should use this skill?

The skill specifies ui-ux-designer and frontend-developer as primary agents. It integrates with the brand skill (to extract primitives from brand colors and typography) and the ui-styling skill (to feed component tokens into Tailwind config).

Design System

Run design-system on a Real Brand and design-system Work Task.

Download OpenDesign, import design-system from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows