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

0•

디자인 도구

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.

주요 기능

01Atomic Design component specifications and mapping

02Perceptually uniform color palette generation using OKLCH

03Mathematical typography scaling and fluid type systems

04W3C Design Token (DTCG) hierarchy construction

050 GitHub stars

06Automated WCAG AA/AAA accessibility auditing and compliance

사용 사례

01Standardizing UI components with consistent spacing, colors, and typography

02Auditing existing interfaces for color contrast and accessibility compliance

03Establishing a new design system's primitive and semantic token layers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add teslasoft-de/claude-skills-marketplace visual-design

For use in Claude.ai and ChatGPT

Download Skill