skills.rest
bhisoftware
bhisoftwareCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

Generate design system tokens in JSON, CSS, and SCSS formats.

Updated Aug 27, 2026
Search Tags:#design system#component library#design tokens#css variables#ui generation#developer handoff
One-click install
npx skills add https://github.com/bhisoftware/page-refresh --skill ui-design-system-bhisoftware
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/bhisoftware/page-refresh/tree/main/library/bhi-claude-skills/design-system
Command: npx skills add https://github.com/bhisoftware/page-refresh --skill ui-design-system-bhisoftware

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires colorsys, and includes scripts (resource) components.

What problem does it solve?

This Skill automates the creation of comprehensive design system tokens and component structures, ensuring visual consistency and streamlining developer handoff.

Core Features & Use Cases

  • Design Token Generation: Creates color palettes, typography scales, spacing units, shadows, and more based on brand inputs.
  • Component Architecture: Provides a foundation for building scalable UI component libraries.
  • Developer Handoff: Generates documentation and formats (JSON, CSS, SCSS) for easy integration into development workflows.
  • Use Case: A startup needs to establish a consistent visual identity across its web and mobile applications. This Skill can generate a complete design system based on their primary brand color, which developers can then directly implement.

Quick Start

Use the ui-design-system skill to generate design tokens for the brand color '#FF5733' in a 'modern' style and export them as CSS.

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 my brand color?▼

Generate design tokens by inputting your primary brand color and selecting a style. This Skill outputs comprehensive color palettes, typography scales, spacing units, and shadows in JSON, CSS, or SCSS formats.

What are design tokens and when do I need them for UI development?▼

Design tokens are centralized variables storing visual design decisions like colors, typography, and spacing. You need them to ensure UI consistency and streamline developer handoff across web and mobile applications.

Can I export design tokens as CSS variables or SCSS for my component library?▼

Yes, you can export design tokens as CSS variables or SCSS. The Skill generates design system tokens in JSON, CSS, and SCSS formats for easy integration into your UI development workflows.

Do I need Python to generate a design system with colorsys?▼

Yes, you need a Python environment with the colorsys library installed. This Skill requires Python with color manipulation libraries to accurately generate and compute comprehensive color palettes.

What's the best way to create a consistent component library architecture from brand inputs?▼

Automate component architecture creation by generating foundational design tokens from your brand inputs. This Skill provides a scalable foundation for UI component libraries using multiple supported styles.

Does this design token generator support different visual styles?▼

Yes, the design token generator supports multiple visual styles. You can specify a style, such as 'modern', alongside your brand color to generate a matching comprehensive design system.

Related Skills

Explore More Design & Creative Skills→
vinayakgvinayakg

brand-guidelines

Apply Anthropic brand colors and Poppins and Lora typography to documents.

Community
Basic
ovachieverovachiever
52

ui-design-system

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

Community
Advanced
hai-serieshai-series
3

hai-ui

Build cross-platform UIs with Svelte 5 Runes, DaisyUI, and Tailwind CSS.

Official
Advanced
tenzirtenzir
2

styling-tenzir-ui

Provide Tenzir design system tokens and CSS component specifications for UI styling.

Official
Basic