design-system

Generate design tokens, component specifications, and presentation slides.

Updated Sep 26, 2025

Search Tags:#design tokens #slide generation #brand compliance #component specifications #systematic design

Ready to run

npx skills add https://github.com/WizCoderr/.dotfiles --skill design-system-wizcoderr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/WizCoderr/.dotfiles/tree/main/.cursor/skills/design-system
Command: npx skills add https://github.com/WizCoderr/.dotfiles --skill design-system-wizcoderr

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation of design tokens, component specifications, and slide generation, streamlining the design process and ensuring consistency across presentations.

Core Features & Use Cases

Token Architecture: Create and manage three-layer tokens (primitive→semantic→component) for systematic design.
Component Specifications: Define and maintain detailed specifications for UI components.
Slide Generation: Generate brand-compliant presentations using design tokens and contextual decision systems.
Use Case: For a company creating a new product, this Skill can automatically generate a complete presentation deck with consistent design elements based on predefined tokens and specifications.

Quick Start

Generate design tokens from the provided JSON configuration and output them to a CSS file using the generate-tokens script.

Frequently Asked Questions about design-system

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

FAQPage Schema

How do I automate design token architecture for UI components?▼

Design token architecture is automated by generating a three-layer system (primitive, semantic, component) from a JSON configuration. This process outputs systematic CSS variable scales for spacing and typography directly into a CSS file using Node.js scripts.

Can I generate brand-compliant presentation slides using design tokens?▼

Yes, you can generate brand-compliant presentations by applying design tokens and contextual decision systems. The tool automates slide creation to ensure visual consistency across your deck based on predefined component specifications.

What is a three-layer design token system and when do I need it?▼

A three-layer design token system structures design primitives into semantic values, then maps them to specific component specifications. You need this systematic approach when scaling UI development to maintain visual consistency across complex product interfaces.

Do I need Node.js to generate CSS variables for spacing and typography scales?▼

Yes, Node.js is required to execute the specific scripts for design token generation and validation. The Node environment processes your JSON configuration to systematically output the CSS variables for your spacing and typography scales.

How do I define component specifications for a systematic design workflow?▼

Define component specifications by detailing UI element requirements within your token architecture. The system manages these detailed specifications to maintain systematic design consistency, ensuring generated components and slides adhere to predefined brand rules.

What's the best way to maintain brand compliance across generated presentation slides?▼

The best way to maintain brand compliance is by automating slide generation through a contextual decision system driven by design tokens. By defining component specifications upfront, the generated slides automatically enforce consistent visual rules.