skills.rest
VictorHueni
VictorHueniCOMMUNITY
Explore all skills by this author →
GitHub

ux-design-system

Generate design system tokens from a markdown file for automatic theming.

Updated Apr 8, 2026
Search Tags:#branding#theming#design system#UX#CSS generation
One-click install
npx skills add https://github.com/VictorHueni/homemade-claude-kit --skill ux-design-system-victorhueni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-design-system
Source: https://github.com/VictorHueni/homemade-claude-kit/tree/main/skills/ux-design-system
Command: npx skills add https://github.com/VictorHueni/homemade-claude-kit --skill ux-design-system-victorhueni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill simplifies the process of creating and maintaining a consistent visual design system for projects, ensuring all artifacts are themed and styled coherently.

Core Features & Use Cases

  • Unified Design System: Centralize brand and design elements in one place, enabling easy updates and consistency across all artifacts.
  • Automatic Theming: Generate the canonical token sheet from a markdown file, allowing all com-* artifacts to theme themselves automatically.
  • Domain-Agnostic: The skill is designed to be used across different projects, without hardcoding any specific brand guidelines.

Quick Start

Run the python scripts/generate_tokens.py scaffold command to scaffold the design system, then edit the design-system.md file to define your brand rationale and token values.

Frequently Asked Questions about ux-design-system

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

FAQPage Schema
How do I generate a consistent visual design system for projects?▼

To generate a visual design system, run the scaffold command to create a markdown file, then define your brand rationale and token values to automatically theme all composable artifacts.

How does automatic theming work for composable artifacts?▼

Automatic theming works by generating a canonical token sheet from a markdown file, allowing all com-* artifacts to read user-defined token values and style themselves coherently.

What is the best way to centralize brand and design elements for multiple projects?▼

Centralizing brand and design elements is best achieved by authoring a domain-agnostic design system markdown file, which avoids hardcoding brand guidelines and enables easy updates across artifacts.

Does this design system tool hardcode specific brand guidelines?▼

No, this design system tool is domain-agnostic and does not hardcode specific brand guidelines, allowing you to define custom branding and theming based on your own user-defined token values.

How do I scaffold a design system using Python?▼

To scaffold a design system using Python, run the generate_tokens.py scaffold command to create the initial design-system.md file, then edit the file to define your token values.

Related Skills

Explore More Design & Creative Skills→
elophantoelophanto
116

brand-guardian

Develops brand foundation and identity system including visual, voice, and governance guidelines.

Community
Advanced
RamonsDkaRamonsDka
1

brand-guidelines

Apply Anthropic brand colors and typography to documents, presentations, and UI components.

Community
Intermediate
MarbleSodasMarbleSodas

popular-web-designs

Generate brand-accurate HTML and CSS from design system templates.

Community
Basic
TheBushidoCollectiveTheBushidoCollective
187

Lua Coroutines

Create, yield, and resume Lua coroutines for cooperative multitasking.

Official
Advanced