design-system

Generate design tokens, component specifications, and presentation slides from token files.

Updated Jun 27, 2026

Search Tags:#design tokens #UI design #brand compliance #component specification #presentation generation

Ready to run

npx skills add https://github.com/gokul12072006/risore-backend --skill design-system-gokul12072006

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/gokul12072006/risore-backend/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/gokul12072006/risore-backend --skill design-system-gokul12072006

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill simplifies the creation, management, and presentation of design tokens, enabling efficient design-to-code workflows and brand-compliant presentations.

Core Features & Use Cases

Token Architecture: Establish a structured token architecture for consistent design across projects.
Component Specifications: Define component styles and states for UI components.
Slide Generation: Automatically generate slides using design tokens for presentations.
Use Case: Need to create a presentation for a design review meeting. Use this Skill to generate slides that incorporate your design tokens and component specifications.

Quick Start

Use the design-system skill to generate a slide presentation for the 'ClaudeKit Marketing' project with brand tokens.

Frequently Asked Questions about design-system

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

FAQPage Schema

How do I generate design tokens and component specifications for a UI design system?▼

You can generate design tokens and component specifications by providing your design token files to this Skill, which outputs structured data for UI components and establishes a consistent token architecture across your project.

How do I automate presentation generation using brand compliance tokens for a design review?▼

You can automate presentation generation by using your design tokens as input to generate slides, ensuring brand compliance by applying CSS and JavaScript to render structured component specifications directly into your review presentation.

Does this design token management tool work with TailwindCSS and Chart.js?▼

Yes, this design token management tool works with TailwindCSS and Chart.js, utilizing these dependencies alongside its internal scripts and assets to process token files and generate structured component specifications and presentations.

What is the best way to structure UI component specifications from existing design tokens?▼

The best way to structure UI component specifications from existing design tokens is to process the tokens through an automated token architecture system, which outputs structured data defining component styles and states for UI components.

Do I need to provide design token files before generating component specifications and slides?▼

Yes, you must provide design token files as input before generating component specifications and slides, because the Skill depends on these token files and related scripts to output structured data for UI components and presentation slides.

Why are my generated slides not maintaining brand compliance during design token processing?▼

Your generated slides may not maintain brand compliance if the input design token files are incomplete or improperly structured, as the Skill relies on accurate token architecture to apply CSS and JavaScript for brand-compliant presentation generation.