design-system

Name: design-system
Availability: InStock
Author: Markus

Apply curated visual styles and tokens to UI components.

1|Updated Dec 10, 2025

Search Tags:#UI/UX #design system #styling #design tokens #component generation #aesthetics #AI design

Ready to run

npx skills add https://github.com/markus41/lobbi-design-system --skill design-system-markus41

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/markus41/lobbi-design-system/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/markus41/lobbi-design-system --skill design-system-markus41

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires style-dictionary, sd-tailwindcss-transformer, sentence-transformers, colorjs.io, axe-core, and includes references (resource) components.

What problem does it solve?

This Skill helps you apply cohesive, distinctive visual aesthetics to components and interfaces, ensuring your designs stand out and avoid generic "AI slop" patterns. It automates the consistent application of complex style rules.

Core Features & Use Cases

Style Application: Apply any of 50+ curated visual styles (e.g., brutalist, cyberpunk, art-deco) to components.
Style Blending: Combine multiple styles with weighted ratios (e.g., "blend japandi with scandinavian 80/20").
Component Generation: Generate new styled components that adhere to the active design system tokens.
Use Case: Quickly apply a "cyberpunk" aesthetic to a new dashboard component, ensuring all elements follow the style guide and avoid common AI-generated clichés.

Quick Start

Apply art-deco style to the navigation bar and hero section.

Frequently Asked Questions about design-system

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

FAQPage Schema

How do I apply visual styles to UI components without hard-coded values?▼

Apply curated visual styles using design tokens—this Skill manages 50+ predefined aesthetics (brutalist, cyberpunk, art-deco) through token-based theming via style-dictionary, ensuring consistency and eliminating hard-coded styling across components like dashboards, cards, and forms.

Can I blend multiple design styles together with weighted ratios?▼

Yes, style blending combines multiple visual aesthetics with custom ratios—for example, blend japandi with scandinavian at 80/20—so you can create hybrid design systems without manually reconciling conflicting token values.

How do I ensure generated components meet WCAG 2.1 AA accessibility standards?▼

This Skill enforces accessibility through validation hooks and axe-core integration, automatically checking styled components against WCAG 2.1 AA before deployment to catch contrast, semantic, and interaction issues.

What's the best way to avoid generic AI-generated design patterns?▼

Use curated, distinctive visual styles instead of defaults—this Skill's 50+ hand-crafted aesthetics replace generic patterns, ensuring your interfaces stand out while maintaining design consistency through automated token application.

Does this work with Tailwind CSS for component generation?▼

Yes, the sd-tailwindcss-transformer dependency bridges design tokens and Tailwind, letting you generate styled components that adhere to your active design system while leveraging Tailwind's utility-first approach.

Can I load design tokens progressively in my workflow?▼

Progressive token loading is supported through the CLAUDE design-system workflow, enabling staged application of design tokens so you can manage performance and phased style rollouts across components.