skills.rest
s0nbuildtech287
s0nbuildtech287COMMUNITY
Explore all skills by this author →
GitHub

design-system

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

Updated Aug 31, 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/s0nbuildtech287/body_gym --skill design-system-s0nbuildtech287
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/s0nbuildtech287/body_gym/tree/main/SKILL/ui-ux-pro-max-skill/.claude/skills/design-system
Command: npx skills add https://github.com/s0nbuildtech287/body_gym --skill design-system-s0nbuildtech287

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 difficult when colors, spacing, and typography are hardcoded. This Skill establishes a single source of truth through a three-layer token architecture (primitive, semantic, component) and enforces token compliance in generated HTML slides and components. ## Core Features & Use Cases - Token Generation & Validation: Convert JSON token configs into CSS variables or Tailwind theme config, and scan codebases for hardcoded values that violate the token system. - 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 BM25 slide search, decision CSVs for layout/typography/color, Chart.js charts, and Pexels background images, then validate output for token compliance. - Use Case: A designer needs a 10-slide investor pitch deck that matches brand guidelines. The Skill selects layouts and emotion arcs from strategy CSVs, generates HTML using only CSS token variables, and validates the result with the token validator. ## Quick Start Ask the AI to generate a brand-compliant pitch deck or produce CSS design tokens from the starter JSON template using the design-system skill.

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 generate-tokens.cjs --config tokens.json -o tokens.css. It resolves token references across primitive, semantic, and component layers and can also output a Tailwind color config with --format tailwind.

What is a three-layer design token architecture?▼

It separates raw primitive values (hex colors, spacing) from semantic aliases (primary, muted) and component-specific tokens (button-bg). Each layer references the one below, so changing a primitive propagates through the entire system and enables theme switching.

How do I create a pitch deck that follows brand guidelines?▼

Use the slide generation workflow: search slide strategies with search-slides.py, apply layout and typography decisions from the CSV files, generate HTML that imports design-tokens.css, then validate with the token validator script to catch hardcoded values.

Does the token validator work with Chart.js colors in slides?▼

Yes. The html-token-validator.py script skips hardcoded values inside script tags, which covers Chart.js dataset colors. It also allows rgba values matching brand colors for transparency effects, while flagging hardcoded hex colors in style blocks and inline styles.

Can I use these design tokens with Tailwind CSS?▼

Yes. The generate-tokens.cjs script supports a tailwind output format that maps semantic color tokens to CSS variable references for your tailwind.config theme extension. The references directory also includes a dedicated Tailwind integration guide.

Why does slide validation fail on my generated HTML?▼

Validation fails when the HTML is missing the design-tokens.css import or contains hardcoded hex, rgb, or hsl colors in style blocks. Replace all literal values with var(--token-name) references and ensure the tokens stylesheet is linked in the head.

Related Skills

Explore More Design & Creative Skills→
travisjneumantravisjneuman
88

brand-identity

Develop and document brand identity with strategy, visual elements, voice, and guidelines.

Community
Intermediate
muhammaddadumuhammaddadu
1

tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui, Vite, React, and dark mode theming.

Community
Advanced
danielzmeowdanielzmeow

polish

Performs a final quality pass on digital products for visual, interaction, and content consistency.

Community
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced