skills.rest
Ramadan-Elgamal
Ramadan-ElgamalCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system

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

Updated Aug 7, 2026
Search Tags:#design tokens#slide generation#tailwind#css variables#chart.js#brand compliance#component specs
One-click install
npx skills add https://github.com/Ramadan-Elgamal/Autobees --skill design-system-ramadan-elgamal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Ramadan-Elgamal/Autobees/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/Ramadan-Elgamal/Autobees --skill design-system-ramadan-elgamal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (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, component specs, and HTML slide decks. ## 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 decision-system CSVs (layouts, typography, color logic, copywriting formulas), Chart.js charts, BM25 slide search, and curated Pexels background images. - Use Case: Ask for a 10-slide investor pitch and receive a token-compliant HTML deck with emotion-arc pacing, pattern breaks, charts, and validated styling. ## Quick Start Ask the assistant to generate a pitch deck for your product using the design-system skill, or run the token generator on your tokens.json to produce CSS variables.

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. A Tailwind format is also available via --format tailwind.

How do I create a brand-compliant HTML slide deck?▼

Use generate-slide.py with a JSON file describing slide types (title, problem, solution, metrics, chart, testimonial, cta), or run --demo for a sample deck. All slides import design-tokens.css and must use var() tokens, Chart.js for charts, and include navigation.

What is the three-layer design token architecture?▼

Primitive tokens hold raw values like hex colors and spacing, semantic tokens alias them by purpose such as --color-primary, and component tokens map semantics to specific elements like --button-bg. This structure enables theme switching and per-component customization.

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

Run validate-tokens.cjs against your source directory to flag hardcoded values. For HTML assets like slides and infographics, html-token-validator.py checks for hex, rgb, and hardcoded fonts, while allowing brand rgba transparency and external image URLs.

Does the slide generator support charts and background images?▼

Yes. Slides use Chart.js 4 for data visualization rather than CSS-only bars, and fetch-background.py provides curated Pexels images per slide type with brand-color overlay gradients. The slide-charts.csv and slide-backgrounds.csv files drive chart and image selection.

When should I not use this token-based slide approach?▼

Avoid it when you need native PowerPoint or Keynote files, since output is standalone HTML. It also requires an existing design-tokens.css as the source of truth, so teams without an established token system must define one first.

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
4asaanAI4asaanAI

ckm:design-system

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

Community
Advanced
djimontypdjimontyp

frontend

Build React interfaces with shadcn/ui, semantic tokens, and WCAG AA compliance.

Community
Intermediate
sheriaxsheriax

clerk-custom-ui

Create custom Clerk authentication flows and theme components with React hooks.

Official
Intermediate