skills.rest
AgLyx3
AgLyx3COMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

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

Updated Mar 21, 2026
Search Tags:#typography#handoff#design-system#responsive-design#design-tokens#color-palette#component-library
One-click install
npx skills add https://github.com/AgLyx3/My-Note-App-Not-Just-a-Note-App --skill ui-design-system-aglyx3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/AgLyx3/My-Note-App-Not-Just-a-Note-App/tree/main/.cursor/skills/product-team/ui-design-system
Command: npx skills add https://github.com/AgLyx3/My-Note-App-Not-Just-a-Note-App --skill ui-design-system-aglyx3

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to maintain visual consistency across products as teams scale, leading to duplicated work and misaligned UI tokens.

Core Features & Use Cases

  • Design token generation: produce colors, typography, spacing, and breakpoint scales from a brand color.
  • Component documentation: auto-generate library docs and handoff artifacts for design-dev collaboration.
  • Responsive design calculations: provide fluid typography and spacing for multi-device layouts.
  • Developer handoff: export tokens in JSON, CSS, and SCSS formats for integration.
  • Use Case: For a new product line, generate a token system to rapidly wireframe and implement a consistent UI.

Quick Start

Generate tokens for brand color #0066CC using the modern style and export JSON tokens.

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 a complete design token system from a brand color?▼

To generate a design token system, provide a base brand color to produce a cohesive scale of colors, typography, spacing grids, and responsive breakpoints for multi-device layouts. This eliminates duplicated design work and aligns UI tokens.

What design token formats can I export for developer handoff?▼

You can export design tokens in JSON, CSS, and SCSS formats for developer handoff. These exports include auto-generated component library documentation to streamline design-dev collaboration and integration.

How does fluid typography and spacing work for responsive design?▼

Fluid typography and spacing calculations provide multi-device layouts by scaling values across defined responsive breakpoints. This ensures text and UI spacing adapt smoothly across different screen sizes without manual adjustments.

Can I generate component library docs and handoff artifacts automatically?▼

Yes, you can auto-generate component library documentation and handoff artifacts alongside your design tokens. This automatically produces the necessary docs to maintain UI consistency and support design-dev collaboration.

What is the best way to maintain visual consistency across scaling products?▼

The best way to maintain visual consistency is to build a cohesive design system from tokens. Generating colors, typography, and spacing scales from a single brand color prevents misaligned UI tokens and duplicated work.

Related Skills

Explore More Design & Creative Skills→
sonle0311sonle0311

ckm:design-system

Manage design token architecture and generate CSS variables from JSON files.

Community
Advanced
michalstanieckomichalstaniecko

frontend-design

Standardize SCSS, Tailwind, and Bootstrap styling for WordPress themes.

Community
Intermediate
fatihkanfatihkan
7

minimalist-ui

Define a frontend UI protocol enforcing ultra-minimal editorial styling across components.

Community
Advanced
coastdigitalgroupcoastdigitalgroup
2

fluid-typography-and-spacing

Generate CSS clamp() tokens for fluid typography and spacing across breakpoints.

Official
Intermediate