design-system

Name: design-system
Availability: InStock
Author: Harshodai

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

Ready to run

npx skills add https://github.com/Harshodai/tayari-skill-boost --skill design-system-harshodai

💬 Prompt for ChatGPT / Claude Chat▼

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.