skills.rest
Harshodai
HarshodaiCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Manage design token architecture and generate brand-compliant HTML slide decks with Chart.js.

Updated Jan 20, 2026
Search Tags:#automation#branding#slides#tokens#ui-ux#design-system
One-click install
npx skills add https://github.com/Harshodai/tayari-skill-boost --skill design-system-harshodai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Harshodai/tayari-skill-boost/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/Harshodai/tayari-skill-boost --skill design-system-harshodai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chart.js, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the fragmentation of design assets by providing a single source of truth for tokens, component specifications, and brand-compliant presentation generation.

Core Features & Use Cases

  • Token Architecture: Manages a three-layer token system (primitive, semantic, component) to ensure design consistency across codebases.
  • Component Specs: Provides detailed documentation for UI components including variants, states, and sizing.
  • Slide Generation: Automates the creation of persuasive, brand-compliant slide decks using contextual decision logic and Chart.js integration.

Quick Start

Use the design-system skill to create a 10-slide investor pitch deck for your project.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate HTML slide deck generation using design tokens?▼

You maintain design consistency across codebases by managing a three-layer token system: primitive, semantic, and component tokens. This architecture serves as a single source of truth for UI styling and component specifications.

Can I generate an investor pitch deck with Chart.js integration?▼

Yes, you can generate a persuasive investor pitch deck using automated slide generation with native Chart.js integration. The system applies contextual decision logic and token-based styling to ensure brand compliance across the presentation.

What is a three-layer design token system for UI development?▼

A three-layer design token system separates UI styling into primitive, semantic, and component tokens. This architecture provides a single source of truth for visual identity, ensuring systematic UI development and consistent styling across codebases.

Does this design token architecture support component specifications and variants?▼

Yes, the design token architecture supports systematic UI development by providing detailed component specifications. It documents UI component variants, states, and sizing to ensure visual consistency across your codebase and generated assets.

How do I keep branding consistent across auto-generated HTML slides and UI components?▼

You keep branding consistent by using CSS variables linked to a centralized design token architecture. This ensures that all auto-generated HTML slides and UI components reference the same visual identity source.

Related Skills

Explore More Design & Creative Skills→
TheWatcher01TheWatcher01

brand-guidelines

Define and enforce brand identity with typography, color tokens, and CSS variables.

Community
Intermediate
shaprisshapris

theme-factory

Apply font and color themes to slide decks, documents, and HTML artifacts.

Community
Intermediate
calvingitcalvingit
2

ckm:slides

Convert strategic communication needs into HTML slide decks with Chart.js and design tokens.

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate