skills.rest
billiampalad
billiampaladCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Generates three-layer design tokens, component specifications, and brand-compliant HTML slide decks.

1|Updated Mar 9, 2026
Search Tags:#design system#brand guidelines#design tokens#slide generation#tailwind#css variables#component specs
One-click install
npx skills add https://github.com/billiampalad/wd4 --skill design-system-billiampalad
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/billiampalad/wd4/tree/main/.agents/skills/design/ui-ux-pro-max-skill-main/.claude/skills/design-system
Command: npx skills add https://github.com/billiampalad/wd4 --skill design-system-billiampalad

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Maintaining visual consistency across components and presentations is hard when colors, spacing, and typography are hardcoded everywhere. This Skill centralizes design decisions into a three-layer token architecture (primitive, semantic, component) and generates CSS variables, component specs, and token-compliant slide decks from a single JSON source of truth. ## Core Features & Use Cases - Token Generation & Validation: Convert a JSON token config into CSS variables or Tailwind theme config, and scan source code or HTML for hardcoded colors and fonts that violate token usage. - Component Specifications: Reference detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables covering variants, sizes, states, and anatomy. - Slide Deck Generation: Build brand-compliant HTML presentations using design tokens, Chart.js visualizations, curated Pexels backgrounds, and a contextual decision system driven by strategy, layout, typography, and color CSVs. - Use Case: A team rebrands their product. They update the token JSON, regenerate the CSS variables, validate existing HTML slides for hardcoded values, and produce a new investor pitch deck that automatically follows the updated brand. ## Quick Start Generate CSS design tokens from my tokens.json config and then create a 10-slide brand-compliant investor pitch deck using those tokens.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I generate CSS variables from a design tokens JSON file?▼

Run the generate-tokens.cjs script with your token config: node scripts/generate-tokens.cjs --config tokens.json -o tokens.css. It resolves references between primitive, semantic, and component layers and outputs CSS custom properties, with an optional Tailwind format mode.

How do I check my code for hardcoded colors instead of design tokens?▼

Use the validate-tokens.cjs script against your source directory to detect hardcoded values. For HTML assets like slides, run html-token-validator.py, which flags hex, rgb, and hardcoded font declarations outside allowed exceptions.

What is a three-layer design token architecture?▼

It splits tokens into primitive raw values like hex colors, semantic aliases describing purpose like primary or muted, and component tokens scoped to elements like buttons. This structure enables theme switching and per-component customization without touching base values.

Can I generate slide decks that follow my brand guidelines?▼

Yes. The slide generator builds HTML decks that import design-tokens.css and use only CSS variables, with Chart.js for data visualization and curated Pexels background images. A contextual decision system selects layouts, typography, and colors per slide.

Does the token generator support dark mode themes?▼

Yes. The token JSON supports a dark section containing semantic overrides, and the generator emits these under a .dark CSS class. Switching themes only requires toggling that class since components reference semantic variables.

Why does slide validation fail on rgba values?▼

The validator flags hardcoded rgba colors, but allows rgba values matching known brand colors since CSS transparency requires them. If your rgba is not in the allowed brand list, replace it with a token reference or add it to the allowed patterns.

Related Skills

Explore More Design & Creative Skills→
nextlevelbuildernextlevelbuilder
123.5k

brand

Manage brand voice, visual identity, and asset compliance with validation scripts.

Official
Intermediate
4asaanAI4asaanAI

ckm:design-system

Generate design tokens, CSS variables, component specs, and HTML slide decks.

Community
Advanced
olznolzn
16

colour-craft

Create perceptually uniform OKLCH colour systems for web interfaces.

Community
Advanced
Asymmetric-alAsymmetric-al
417

shadcn/ui Design System - Skill

Compose shadcn/ui components with design tokens in Next.js applications.

Official
Intermediate