skills.rest
wssAchilles
wssAchillesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design-system

Generate design tokens from brand colors in json, css, or scss formats.

2|Updated Aug 2, 2025
Search Tags:#typography#handoff#UI design#responsive-design#design-tokens#token-generation
One-click install
npx skills add https://github.com/wssAchilles/Mycode --skill ui-design-system-wssachilles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/wssAchilles/Mycode/tree/main/telegram/.codex/skills/ui-design-system
Command: npx skills add https://github.com/wssAchilles/Mycode --skill ui-design-system-wssachilles

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

The UI design system provides a centralized toolkit to generate design tokens, document components, and streamline design-to-development handoff, ensuring visual consistency across products.

Core Features & Use Cases

  • Design token generation: colors, typography, spacing from brand guidelines
  • Component documentation: centralized, versioned components and guidelines
  • Responsive calculations and accessibility checks to support multi-device layouts
  • Use Case: When starting a new product line, generate tokens once and reuse across apps and platforms.

Quick Start

Run the token generator with a brand color to produce tokens, then integrate the output into your design system docs. Example: python scripts/design_token_generator.py '#0066CC' modern json

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 from brand colors for UI development?▼

Design tokens are centralized variables that store visual design decisions like colors, typography, and spacing. They ensure visual consistency across products by providing a single source of truth that translates brand guidelines into developer-ready formats.

What do I need to run the design token generator script?▼

You need Python 3 installed to run the design_token_generator.py script. Execute it via command line with a hex color and style parameter to output a portable tokens file in your chosen format.

Can I use generated design tokens for responsive web and mobile layouts?▼

Yes, generated design tokens support responsive web and mobile design workflows. The token set includes responsive calculations and accessibility checks to support multi-device layouts and token-driven theming across platforms.

What output formats does the design token generation support for developer handoff?▼

Design token generation supports JSON, CSS, and SCSS output formats for developer handoff. These portable token files integrate directly into design system documentation and frontend workflows.

What's the best way to maintain visual consistency when starting a new product line?▼

The best way to maintain visual consistency is generating a design token set once from your brand guidelines and reusing it across apps and platforms. This centralized approach streamlines design-to-development handoff and ensures scalable UI systems.

Related Skills

Explore More Design & Creative Skills→
HarshodaiHarshodai

brand

Validate brand assets against color palettes and naming conventions.

Community
Advanced
kmshihab7878kmshihab7878
6

ui-design-system

Generate design tokens from a brand color and export as CSS, SCSS, and JSON.

Community
Advanced
cookeyholdercookeyholder

ui-design-system

Generate design tokens and document components for UI standardization.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced