skills.rest
futureboard
futureboardOFFICIAL
Explore all skills by this author →
Website𝕏@ftbdprojectGitHub

design-system

Generates design tokens, CSS variables, and brand-compliant HTML slide decks.

82|9|Updated May 12, 2026
Search Tags:#design system#design tokens#slide generation#tailwind#css variables#chart.js#brand compliance
One-click install
npx skills add https://github.com/futureboard/futureboard-studio --skill design-system-futureboard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/futureboard/futureboard-studio/tree/main/.cursor/skills/design-system
Command: npx skills add https://github.com/futureboard/futureboard-studio --skill design-system-futureboard

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Maintaining consistent colors, spacing, and typography across components and presentations is error-prone when values are hardcoded. This Skill centralizes design decisions into a three-layer token architecture and generates validated, token-compliant CSS and HTML slides. ## Core Features & Use Cases - Three-Layer Token Architecture: Define primitive, semantic, and component tokens in JSON, then generate CSS variables or Tailwind config automatically. - Token Validation: Scan source code and HTML assets for hardcoded hex colors, rgb values, and fonts that bypass the token system. - Slide Generation: Build brand-compliant HTML pitch decks using BM25 search over strategy, layout, copy, and chart CSV databases, with Chart.js integration and contextual layout recommendations. - Use Case: A designer needs a 10-slide investor pitch. The Skill searches slide strategies, picks layouts and typography per slide position, fetches background images, generates the HTML deck, and validates it for token compliance. ## Quick Start Generate a brand-compliant 10-slide investor pitch deck using the design-system skill and validate it for token compliance.

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 design tokens JSON?▼

Run generate-tokens.cjs with a JSON token config file using the --config flag and specify an output file with -o. The script resolves token references across primitive, semantic, and component layers and emits CSS custom properties, with an optional Tailwind format mode.

How do I create a pitch deck with HTML and Chart.js?▼

Use generate-slide.py with a JSON file describing slide types such as title, problem, solution, metrics, chart, testimonial, and CTA. The script outputs an HTML deck that imports design-tokens.css and uses CSS variables for all styling.

What is a three-layer design token architecture?▼

It separates primitive tokens holding raw values like hex colors, semantic tokens aliasing them by purpose such as primary or muted, and component tokens mapping semantics to specific elements like buttons. This structure enables theme switching and per-component customization.

Can I validate HTML files for hardcoded colors?▼

Yes, html-token-validator.py scans slides and infographics for hex, rgb, rgba, and hsl values outside allowed exceptions. It also checks that design-tokens.css is imported and reports files lacking sufficient var() token usage.

Does the slide search require an external API?▼

No, the BM25 search runs locally over CSV databases covering strategies, layouts, copy formulas, and chart types. Background images use curated Pexels URLs, so no API key is required.

When should I not use CSS-only bar charts in slides?▼

The skill requires Chart.js for charts in slides rather than CSS-only bars, since Chart.js provides proper data binding and rendering. CSS-only approaches lack accessibility features and interactive behavior needed for data presentations.

Related Skills

Explore More Design & Creative Skills→
billiampaladbilliampalad
1

brand

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

Community
Intermediate
dmedina-devdmedina-dev
1

ckm:design-system

Generate brand-compliant token systems, Tailwind-ready CSS variables, component specs, and HTML slides from JSON/CSS inputs.

Community
Advanced
azmiariffarisazmiariffaris

design-system

Create a three-layer design-token system with CSS variables.

Community
Advanced
AradotsoAradotso
3

figma-console-mcp-design-system-api

Synchronize Figma design tokens and components with code-ready formats.

Official
Advanced