skills.rest
AngelP17
AngelP17COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design-system

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

1|Updated Jan 29, 2026
Search Tags:#typography#design system#color palette#design tokens#handoff#UI design#spacing
One-click install
npx skills add https://github.com/AngelP17/factoryops-console --skill ui-design-system-angelp17
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/AngelP17/factoryops-console/tree/main/factoryops-console/.agent/skills/ui-design-system
Command: npx skills add https://github.com/AngelP17/factoryops-console --skill ui-design-system-angelp17

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Design teams often struggle to maintain visual consistency across products due to inconsistent tokens, scattered component guidance, and fragmented design-dev handoff artifacts. This Skill consolidates token generation, component documentation, and responsive design calculations into a single, reusable system.

Core Features & Use Cases

  • Design token generation for colors, typography, and spacing to establish a consistent visual language.
  • Component documentation, responsive calculations, and accessible design guidance to streamline design-dev collaboration.
  • Use Case: When upgrading a product line, generate a complete token set from a brand color and export CSS/SCSS for engineering handoff across web and mobile projects.

Quick Start

Run: python scripts/design_token_generator.py '#0066CC' modern json to generate a full tokens 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 automatically from a brand color?▼

Design token generation automates creation of color palettes, typography scales, spacing grids, and breakpoints from a single brand color input. Run python scripts/design_token_generator.py '#0066CC' modern json to produce a complete token system exported as JSON, CSS, or SCSS for immediate use across web and mobile projects.

What formats can I export design tokens in?▼

Design tokens export to JSON, CSS, and SCSS formats, enabling seamless handoff between design and engineering teams. Each format preserves the complete token system including colors, typography, spacing, and responsive breakpoints for implementation across platforms.

Can I use design tokens to maintain consistency across multiple products?▼

Yes. Design tokens establish a single source of truth for visual language across products. By consolidating color palettes, typography scales, spacing grids, and component documentation, tokens eliminate inconsistencies and streamline design-dev collaboration on web and mobile projects.

How do design tokens improve the design-to-development handoff?▼

Design tokens translate visual decisions into structured, machine-readable data that developers can directly integrate. Exported JSON, CSS, and SCSS files eliminate manual specification translation, reduce errors, and accelerate implementation of colors, typography, spacing, and responsive breakpoints.

What's included in a generated design system?▼

A generated design system includes color palettes derived from your brand color, typography scales with font sizing and line heights, spacing grids, responsive breakpoints, and component documentation with accessible design guidance—all exported as reusable tokens.

Do I need design experience to create a design token system?▼

No. The skill automates token generation from minimal input—a brand color and style choice. It handles color palette creation, typography scaling, and spacing calculations, making design system creation accessible without specialized design knowledge.

Related Skills

Explore More Design & Creative Skills→
gitdukgitduk

ui-design-system

Generate design system tokens from brand colors and style variants.

Community
Advanced
ovachieverovachiever
52

ui-design-system

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

Community
Advanced
tdiminotdimino
41

figma-mcp

Convert Figma designs into HTML, CSS, React, or Vue code.

Community
Advanced
ProfPowellProfPowell
1

open-props

Import modular CSS custom properties for design systems.

Community
Basic