ui-design-system

Generate design tokens from brand colors and export to JSON, CSS, or SCSS.

24|8|Updated Jan 14, 2026

Search Tags:#typography #design #accessibility #tokens #colors #design-system

Ready to run

npx skills add https://github.com/vadimcomanescu/codex-skills --skill ui-design-system-vadimcomanescu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/vadimcomanescu/codex-skills/tree/main/skills/.experimental/design/ui-design-system
Command: npx skills add https://github.com/vadimcomanescu/codex-skills --skill ui-design-system-vadimcomanescu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Design teams often struggle to maintain visual consistency and scale across products, resulting in fragmented UI components and manual handoffs.

Core Features & Use Cases

Design token generation (colors, typography, spacing) to provide a single source of truth.
Component system architecture and accessibility compliance to accelerate UI development.
Developer handoff documentation to streamline collaboration between design and engineering.
Use Case: When starting a major product redesign, generate tokens and typography scales to enforce a cohesive UI.

Quick Start

Generate a complete design token set from a brand color and chosen style and export in JSON, CSS, or SCSS.

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 a scalable UI?▼

You generate design tokens from brand colors by inputting your primary brand color and selecting a style variant, which produces a complete token system covering colors, typography, spacing, borders, shadows, and breakpoints for scalable UI design.

What design token categories are needed for a complete UI design system?▼

A complete UI design system requires token categories for colors, typography, spacing, borders, shadows, and breakpoints. These tokens act as a single source of truth to maintain visual consistency across components and web projects.

Can I export design tokens to JSON, CSS, or SCSS for developer handoff?▼

Yes, you can export design tokens to JSON, CSS, or SCSS formats. This export capability streamlines developer handoff by providing engineers with directly usable code variables for web project implementation.

Does this design token generator support accessibility compliance and style variants?▼

Yes, the design token generator supports accessibility compliance and optional style variants. You can choose modern, classic, or playful styles to generate tokens that enforce accessible UI components across your product redesign.

What is the best way to maintain visual consistency across product redesigns?▼

The best way to maintain visual consistency during product redesigns is by generating a unified design tokens system. This establishes a single source of truth for typography scales and component architecture, preventing fragmented UI components.

Do I need existing UI components to generate a design token system?▼

No, you do not need existing UI components to generate a design token system. You can start from scratch using only a brand color and chosen style to define the foundational component system architecture and typography scales.