skills.rest
mr-creative-hmh
mr-creative-hmhCOMMUNITY
Explore all skills by this author →
GitHub

design-system

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

Updated Aug 25, 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/mr-creative-hmh/creative-tasks --skill design-system-mr-creative-hmh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/mr-creative-hmh/creative-tasks/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/mr-creative-hmh/creative-tasks --skill design-system-mr-creative-hmh

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 automates the generation of token-compliant CSS and slide decks. ## Core Features & Use Cases - Token Generation & Validation: Convert JSON token configs into CSS variables or Tailwind theme config, and scan source code 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 search over strategy, layout, typography, color, and copywriting CSVs, with Chart.js integration and token compliance validation. - Use Case: A designer needs a 10-slide investor pitch. The Skill queries decision CSVs for layout and emotion arcs, generates HTML slides importing design-tokens.css, and validates the output for hardcoded colors. ## Quick Start Ask the AI to generate a brand-compliant pitch deck or generate CSS variables from your design tokens JSON config.

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 generate-tokens.cjs with your JSON config: node generate-tokens.cjs --config tokens.json -o tokens.css. It resolves token references like {primitive.color.blue.600} and outputs primitive, semantic, and component layers, plus a dark mode block. Use --format tailwind for a Tailwind color config.

What is a three-layer design token architecture?▼

It separates tokens into primitive (raw values like hex colors), semantic (purpose aliases like --color-primary), and component layers (like --button-bg referencing semantic tokens). This enables theme switching and per-component customization without touching raw values.

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

Run validate-tokens.cjs against your source directory to detect hardcoded values. For HTML slides and infographics, html-token-validator.py checks for hex, rgb, and hsl colors outside allowed exceptions and verifies the design-tokens.css import exists.

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

Yes. The slide system queries CSV decision files for strategy, layout, typography, and color based on your goal, then generates HTML importing design-tokens.css. Charts use Chart.js, and slide-token-validator.py confirms token compliance before delivery.

Does the token generator support dark mode themes?▼

Yes. Define a dark.semantic section in your tokens JSON and generate-tokens.cjs outputs a .dark CSS class with overridden semantic variables. The semantic layer structure makes light and dark theme switching straightforward.

Related Skills

Explore More Design & Creative Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
DanSnowDanSnow
2

design-extractor

Audit frontend codebases for design token and component extraction opportunities.

Community
Advanced
olznolzn
16

colour-craft

Create perceptually uniform OKLCH colour systems for web interfaces.

Community
Advanced
Asymmetric-alAsymmetric-al
417

moai-library-shadcn

Install, compose, and customize shadcn/ui components with Tailwind CSS tokens.

Official
Intermediate