skills.rest
Rasslonely
RasslonelyCOMMUNITY
Explore all skills by this author →
GitHub

design-system

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

Updated Jul 31, 2026
Search Tags:#design system#design tokens#slide generation#tailwind#css variables#chart.js#component specs
One-click install
npx skills add https://github.com/Rasslonely/NexusXRP --skill design-system-rasslonely
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Rasslonely/NexusXRP/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/Rasslonely/NexusXRP --skill design-system-rasslonely

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 establishes a single source of truth with a three-layer token architecture (primitive, semantic, component) and generates token-compliant CSS and slide decks automatically. ## Core Features & Use Cases - Token Generation & Validation: Convert JSON token configs into CSS variables or Tailwind 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 with variants, sizes, and states. - Slide Deck Generation: Build brand-compliant HTML presentations using BM25 slide search, decision-system CSVs (layouts, typography, color logic, copywriting formulas), Chart.js charts, and token validation. - Use Case: A designer needs a 10-slide investor pitch. The Skill queries layout and emotion-arc strategies, generates HTML slides importing design-tokens.css, fetches Pexels background images, and validates the output for token compliance. ## Quick Start Ask the AI to generate a brand-compliant pitch deck or generate CSS design tokens from the starter JSON template using the included scripts.

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 brand-compliant pitch deck with HTML slides?▼

Use the slide generation workflow: search slide strategies with search-slides.py, apply layout and typography decisions from the CSV files, generate HTML importing design-tokens.css, then validate with the token validator. All slides must use var() token references and Chart.js for charts.

Can design tokens integrate with Tailwind CSS?▼

Yes. The generate-tokens.cjs script supports a tailwind output format that maps semantic color tokens to CSS variable references for tailwind.config.ts. Component tokens flow into the Tailwind theme so utilities stay synchronized with the token system.

Why does slide HTML validation fail with hardcoded color errors?▼

The html-token-validator.py script flags hex, rgb, and hsl values in style blocks or inline styles because slides must use var(--token) references from design-tokens.css. Exceptions exist for Chart.js script blocks, brand-color rgba transparency, and external image URLs.

Where do slide background images come from?▼

The fetch-background.py script provides curated Pexels image URLs per slide type (hero, problem, team, cta, and others) and generates overlay CSS gradients using brand colors resolved from design-tokens.json. No API key is required.

Related Skills

Explore More Design & Creative Skills→
Ramadan-ElgamalRamadan-Elgamal

brand

Manages brand voice, visual identity, design tokens, and asset validation workflows.

Community
Intermediate
DanSnowDanSnow
2

design-extractor

Audit frontend codebases for design token and component extraction opportunities.

Community
Advanced
HACK-WUHACK-WU
2

ui-designer

Design interface visual schemes and generate zero-build HTML demo prototypes from requirements.

Community
Advanced
imbue-aiimbue-ai
213

frontend-design-tokens

Guide CSS/SCSS design token adoption with Radix UI tokens and custom overrides.

Official
Intermediate