skills.rest
teslasoft-de
teslasoft-deCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-design

Generates cohesive visual design systems with OKLCH color tokens and CSS/SCSS/JSON exports.

1|1|Updated Jan 25, 2026
Search Tags:#typography#accessibility#OKLCH#visual-design#design-tokens#design-systems#color-palettes
One-click install
npx skills add https://github.com/teslasoft-de/claude-skills-marketplace --skill visual-design-teslasoft-de
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design
Source: https://github.com/teslasoft-de/claude-skills-marketplace/tree/main/plugins/ux/skills/visual-design
Command: npx skills add https://github.com/teslasoft-de/claude-skills-marketplace --skill visual-design-teslasoft-de

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Create cohesive, accessible visual design systems and tokens for modern UI, enabling consistent brand expression across products.

Core Features & Use Cases

  • Design tokens: color, typography, spacing, and elevation tokens aligned to a design system.
  • Color systems: OKLCH-based palettes with WCAG-compliant contrast guidance for accessible interfaces.
  • Typography & layout: scalable type ramps and fluid typography for responsive experiences.
  • Use Case: Rapidly bootstrap a design system for a new product, including documentation and accessibility checks.

Quick Start

Generate a starter visual design system with tokens, typography scales, and a color palette.

Frequently Asked Questions about visual-design

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

FAQPage Schema
How do I generate a design system with WCAG-compliant color palettes and fluid typography?▼

To create design tokens for web and mobile, you define color, typography, spacing, and elevation values. The system automatically generates cohesive tokens and exports them in CSS, SCSS, or JSON formats for direct integration into your projects.

What is OKLCH and why use it for design token color palettes?▼

OKLCH is a color space model used for building design token palettes because it offers perceptual uniformity. It allows you to create predictable color systems that maintain consistent visual lightness and contrast ratios for accessible interfaces.

Can I export design tokens to CSS, SCSS, and JSON for my design system?▼

Yes, you can export design tokens to CSS, SCSS, and JSON formats. The system generates these export files directly from your defined color, typography, spacing, and elevation values for seamless integration into web and mobile projects.

How do I map Atomic Design components to my visual design system tokens?▼

You can map Atomic Design components to visual design system tokens by aligning your color, typography, and spacing tokens directly with component structures. This ensures consistent brand expression and automated accessibility validation across your UI.

Does this design token generator support fluid typography for responsive web layouts?▼

Yes, this design token generator supports fluid typography for responsive web layouts. It produces scalable type ramps that automatically adjust text sizes across different screen sizes, ensuring readable content without defining manual breakpoints.

Related Skills

Explore More Design & Creative Skills→
nielpattinnielpattin

normalize

Audit and realign UI components to match design system standards.

Community
Advanced
hongmaple0820hongmaple0820
9

ui-design-system

Generate design-system tokens and handoff documentation for React, Tailwind, and CSS.

Community
Advanced
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced