skills.rest
echoVic
echoVicCOMMUNITY
Explore all skills by this author →
Website𝕏@echo_vicGitHub

ui-designer/design-system

Defines design tokens for colors, typography, spacing, radius, shadows, and motion in UI specifications.

553|50|Updated Jan 10, 2026
Search Tags:#Design system#Typography#UI Design#Color palette#Spacing#Design tokens#Responsive design
One-click install
npx skills add https://github.com/echoVic/boss-skill --skill ui-designer-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer/design-system
Source: https://github.com/echoVic/boss-skill/tree/main/skill/skills/ui-designer/design-system
Command: npx skills add https://github.com/echoVic/boss-skill --skill ui-designer-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI design work often produces inconsistent visuals because colors, font sizes, and spacing are chosen ad hoc. This Skill provides a complete design system specification with standardized design tokens so every page and component follows the same visual language.

Core Features & Use Cases

  • Design Token Definitions: Provides ready-to-use tables for brand colors, neutral colors, semantic colors, typography hierarchy, 4px-based spacing, border radius, shadows, and animation timing with CSS variables.
  • Responsive Breakpoints: Defines a mobile-first breakpoint system (xs through 2xl) with container widths and touch target guidance.
  • Usage Principles and Anti-Patterns: Documents consistency rules, WCAG AA contrast requirements, and common mistakes such as non-standard spacing values or excessive font sizes.
  • Use Case: When starting a new product UI, a designer or agent can apply this specification to produce a design document with a complete design system section covering colors, fonts, spacing, radius, shadows, and motion.

Quick Start

Ask the agent to create a UI design document for your product using the design system specification with unified colors, typography, and spacing tokens.

Frequently Asked Questions about ui-designer/design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design system for a new product UI?▼

Start by defining design tokens before any page design: brand, neutral, and semantic colors, a typography hierarchy, 4px-based spacing, radius, shadows, and motion values. This specification provides ready-made tables and CSS variables for each category.

What spacing scale should I use in UI design?▼

Use a 4px base unit where all spacing values are multiples of 4, ranging from 4px for tight icon-text gaps to 64px for page-level separation. Related elements get smaller spacing while unrelated sections get larger gaps.

Does this design system support responsive design?▼

Yes, it defines six mobile-first breakpoints from xs (below 640px) to 2xl (1536px and above) with container widths. It also requires touch targets of at least 44x44px on mobile devices.

How do I ensure color accessibility in UI design?▼

Ensure text and background color combinations meet WCAG AA contrast ratio of at least 4.5:1. Use neutral grays for text hierarchy and reserve semantic colors like green, amber, and red strictly for status feedback.

What are common design system mistakes to avoid?▼

Avoid introducing undefined colors, using spacing values that are not multiples of 4, defining more than ten font sizes, and adding animations to every element. Keep tokens minimal so the system stays maintainable.

Related Skills

Explore More Design & Creative Skills→
Pika-LabsPika-Labs
38

build-a-brand

Build a complete brand identity and 15-page brand guidelines PDF.

Official
Advanced
xcrrrxcrrr
4

frontend-design

Generate frontend design specifications with CSS custom properties and component states.

Community
Advanced
VirtoCommerceVirtoCommerce
2

qa-design

Evaluate design system consistency and UX usability issues across web interfaces.

Official
Advanced
carrilloappscarrilloapps

tailwind-design-system

Creates Tailwind CSS v4 design systems with semantic @theme tokens and CVA components.

Community
Advanced