skills.rest
NextSpark-js
NextSpark-jsOFFICIAL
Explore all skills by this author →
GitHub

design-system

Map CSS design tokens from NextSpark themes to mockup values.

3|Updated Jan 3, 2026
Search Tags:#typography#theming#design system#tokens#css variables#color mapping
One-click install
npx skills add https://github.com/NextSpark-js/nextspark --skill design-system-nextspark-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/NextSpark-js/nextspark/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/NextSpark-js/nextspark --skill design-system-nextspark-js

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps bridge the gap between design mockups and code by analyzing design tokens, mapping them to theme variables, and identifying discrepancies.

Core Features & Use Cases

  • Theme Token Extraction: Reads CSS variables from theme globals.css files.
  • Color & Typography Mapping: Compares mock values (HEX, RGB) to theme tokens (OKLCH) and identifies similarities or gaps.
  • Use Case: When a designer provides a mockup with specific colors and fonts, this Skill can analyze the existing NextSpark theme's design tokens and report how well the mockup's styles align, suggesting adjustments or new tokens needed.

Quick Start

Analyze the design tokens in the default theme and compare them against the provided mock color palette.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I map design tokens from a mockup to my NextSpark theme?▼

To map design tokens, provide your mockup values and the Skill will compare them against existing CSS variables in your NextSpark theme. It calculates similarities for colors and typography, generating a detailed report that highlights matches and gaps.

What is design token gap analysis and when do I need it?▼

Design token gap analysis identifies discrepancies between design mockups and your codebase. You need it when a designer provides a mockup with specific colors or fonts, and you must determine if existing theme definitions cover those styles or require new tokens.

Can I compare HEX and RGB color values against OKLCH theme variables?▼

Yes, you can compare HEX and RGB color values from your mockups against OKLCH CSS variables. The Skill performs color similarity calculations to map these mock values directly to your existing theme tokens.

Does this tool extract typography and spacing tokens from globals.css?▼

Yes, the tool extracts typography and spacing tokens by reading CSS variables directly from your theme globals.css file. It uses these extracted definitions to compare against mock values and find matching styles.

What is the best way to find missing CSS variables in a design system?▼

The best way to find missing CSS variables is to run a gap analysis comparing your mockup's styles against the extracted theme tokens. This process generates a detailed mapping report showing exactly which design tokens are missing.

Related Skills

Explore More Design & Creative Skills→
NextSpark-jsNextSpark-js

shadcn-theming

Initialize and customize shadcn/ui themes with CSS variables and OKLCH colors.

Official
Intermediate
muskie9muskie9

essentials-theme

Create subthemes extending silverstripe-essentials-theme by overriding CSS and Bootstrap variables.

Community
Intermediate
amit397amit397

tailwind-design-system

Build design systems with Tailwind CSS v4 using CSS-first configuration.

Community
Advanced
RoleModelRoleModel
6

theming-context

Override Optics tokens in a custom theme file for design system theming.

Official
Intermediate