skills.rest
Cor-Incorporated
Cor-IncorporatedOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-design-system

Generate design tokens, component documentation, and responsive layout calculations in JSON, CSS, and SCSS.

4|1|Updated Mar 21, 2026
Search Tags:#responsive design#design system#UI design#token generation#developer handoff
One-click install
npx skills add https://github.com/Cor-Incorporated/claude-code-skills --skill ui-design-system-cor-incorporated
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/Cor-Incorporated/claude-code-skills/tree/main/skills/ui-design-system
Command: npx skills add https://github.com/Cor-Incorporated/claude-code-skills --skill ui-design-system-cor-incorporated

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill simplifies the process of designing and maintaining scalable design systems, including generating design tokens, documenting components, and calculating responsive layouts.

Core Features & Use Cases

  • Design Token Generation: Create consistent design tokens for colors, typography, spacing, and more.
  • Component Documentation: Structure and document design components.
  • Responsive Layout Calculations: Calculate responsive design aspects like breakpoints and fluid scales.
  • Accessibility Checks: Ensure compliance with accessibility standards like contrast ratios and focus states.
  • Developer Handoff: Generate assets for developer handoff in multiple formats.
  • Use Case: Use this Skill when setting up a new design system or updating an existing one to ensure consistency and accessibility.

Quick Start

Use the ui-design-system skill to generate a design token system based on the brand color '#3B82F6' and the 'modern' style.

Frequently Asked Questions about ui-design-system

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

FAQPage Schema
How do I generate design tokens for color, typography, and spacing?▼

You generate design tokens by providing brand values like a primary color and style preference. The system calculates and outputs structured tokens for colors, typography, and spacing in JSON, CSS, or SCSS formats for direct integration.

What is the best way to calculate responsive layout breakpoints and fluid scales?▼

Calculating responsive layouts is best handled by an automated system that computes breakpoints and fluid scales. This ensures consistent responsive behavior across UI components and outputs the calculations in JSON, CSS, or SCSS formats.

Does the design token generation require Python to run?▼

Yes, generating this design system requires Python for execution. You must have a Python environment configured to process the design token logic and output the resulting JSON, CSS, or SCSS files.

Can I check color contrast ratios for accessibility compliance?▼

Yes, you can check color contrast ratios for accessibility compliance. The system evaluates generated color palettes against accessibility standards to ensure focus states and contrast ratios meet required compliance guidelines.

What formats are supported for developer handoff assets?▼

Supported formats for developer handoff include JSON, CSS, and SCSS. These outputs allow front-end developers to directly import the generated design tokens, typography scales, and spacing systems into their project codebases.

Related Skills

Explore More Design & Creative Skills→
majiayu000majiayu000
258

ui-design-system

Generate design system tokens from a brand color into JSON, CSS, or SCSS.

Community
Intermediate
ZiadNagarZiadNagar

ui-design-system

Generate design tokens for colors, typography, and spacing with JSON, CSS, or SCSS exports.

Community
Intermediate
inbharataiinbharatai
22

theme-factory

Generate UI themes with color tokens, spacing scales, and typography for CSS and Tailwind CSS.

Community
Intermediate
ovachieverovachiever
52

ui-design-system

Generate design tokens from brand colors in JSON, CSS, or SCSS.

Community
Advanced