Does this skill generate production-ready code?

Yes, it produces design tokens and UI specifications exportable in CSS, SCSS, and JSON formats that can be directly integrated into frontend projects.

Does this replace user research or UX wireframing?

No, this skill is focused on the visual and systematic layer of design. It is intended to be used after initial research and information architecture have been established.

What is OKLCH and why does this skill use it?

OKLCH is a modern color space that provides perceptually uniform lightness, ensuring that color palettes remain accessible and visually consistent across different hues.

Can it help with web accessibility (WCAG)?

Absolutely. The skill includes built-in guardrails for WCAG AA and AAA compliance, specifically regarding contrast ratios, focus indicators, and interactive target sizes.

Visual Design System

Name: Visual Design System
Author: teslasoft-de

byteslasoft-de

디자인 도구

Generates systematic, accessible visual designs and design token architectures using modern color spaces and Atomic Design principles.

소개

This skill transforms Claude into a specialized design systems engineer, enabling the creation of mathematically grounded UI specifications and accessible visual identities. It utilizes advanced methodologies like OKLCH for perceptually uniform color palettes, W3C Design Token standards for cross-platform consistency, and Atomic Design for modular component architecture. By automating the creation of typography scales, spacing systems, and semantic layers, it bridges the gap between high-level brand requirements and production-ready frontend documentation, ensuring all outputs meet WCAG AA/AAA accessibility standards.

주요 기능

Atomic Design component specifications and mapping
Perceptually uniform color palette generation using OKLCH
Mathematical typography scaling and fluid type systems
W3C Design Token (DTCG) hierarchy construction
0 GitHub stars
Automated WCAG AA/AAA accessibility auditing and compliance

사용 사례

Standardizing UI components with consistent spacing, colors, and typography
Auditing existing interfaces for color contrast and accessibility compliance
Establishing a new design system's primitive and semantic token layers

소개

주요 기능

Atomic Design component specifications and mapping
Perceptually uniform color palette generation using OKLCH
Mathematical typography scaling and fluid type systems
W3C Design Token (DTCG) hierarchy construction
0 GitHub stars
Automated WCAG AA/AAA accessibility auditing and compliance

사용 사례

Standardizing UI components with consistent spacing, colors, and typography
Auditing existing interfaces for color contrast and accessibility compliance
Establishing a new design system's primitive and semantic token layers