ui-design-systemUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
Install via ClawdBot CLI:
clawdbot install alirezarezvani/ui-design-systemGenerate design tokens, create color palettes, calculate typography scales, build component systems, and prepare developer handoff documentation.
Use this skill when you need to:
Situation: You have a brand color and need a complete design token system.
Steps:
modern | classic | playful
python scripts/design_token_generator.py "#0066CC" modern json
# CSS custom properties
python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css
# SCSS variables
python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss
# JSON for Figma/tooling
python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.jsonSituation: You need to structure a component library using design tokens.
Steps:
| Component | Tokens Used |
|-----------|-------------|
| Button | colors, sizing, borders, shadows, typography |
| Input | colors, sizing, borders, spacing |
| Card | colors, borders, shadows, spacing |
| Modal | colors, shadows, spacing, z-index, animation |
Size variants:
sm: height 32px, paddingX 12px, fontSize 14px
md: height 40px, paddingX 16px, fontSize 16px
lg: height 48px, paddingX 20px, fontSize 18pxColor variants:
primary: background primary-500, text white
secondary: background neutral-100, text neutral-900
ghost: background transparent, text neutral-700references/component-architecture.mdSituation: You need breakpoints, fluid typography, or responsive spacing.
Steps:
| Name | Width | Target |
|------|-------|--------|
| xs | 0 | Small phones |
| sm | 480px | Large phones |
| md | 640px | Tablets |
| lg | 768px | Small laptops |
| xl | 1024px | Desktops |
| 2xl | 1280px | Large screens |
Formula: clamp(min, preferred, max)
/* 16px to 24px between 320px and 1200px viewport */
font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);Pre-calculated scales:
--fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem);
--fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem);
--fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
--fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);| Token | Mobile | Tablet | Desktop |
|-------|--------|--------|---------|
| --space-md | 12px | 16px | 16px |
| --space-lg | 16px | 24px | 32px |
| --space-xl | 24px | 32px | 48px |
| --space-section | 48px | 80px | 120px |
references/responsive-calculations.mdSituation: You need to hand off design tokens to development team.
Steps:
# For CSS projects
python scripts/design_token_generator.py "#0066CC" modern css
# For SCSS projects
python scripts/design_token_generator.py "#0066CC" modern scss
# For JavaScript/TypeScript
python scripts/design_token_generator.py "#0066CC" modern jsonReact + CSS Variables:
import './design-tokens.css';
<button className="btn btn-primary">Click</button>Tailwind Config:
const tokens = require('./design-tokens.json');
module.exports = {
theme: {
colors: tokens.colors,
fontFamily: tokens.typography.fontFamily
}
};styled-components:
import tokens from './design-tokens.json';
const Button = styled.button`
background: ${tokens.colors.primary['500']};
padding: ${tokens.spacing['2']} ${tokens.spacing['4']};
`;references/developer-handoff.mdGenerates complete design token system from brand color.
| Argument | Values | Default | Description |
|----------|--------|---------|-------------|
| brand_color | Hex color | #0066CC | Primary brand color |
| style | modern, classic, playful | modern | Design style preset |
| format | json, css, scss, summary | json | Output format |
Examples:
# Generate JSON tokens (default)
python scripts/design_token_generator.py "#0066CC"
# Classic style with CSS output
python scripts/design_token_generator.py "#8B4513" classic css
# Playful style summary view
python scripts/design_token_generator.py "#FF6B6B" playful summaryOutput Categories:
| Category | Description | Key Values |
|----------|-------------|------------|
| colors | Color palettes | primary, secondary, neutral, semantic, surface |
| typography | Font system | fontFamily, fontSize, fontWeight, lineHeight |
| spacing | 8pt grid | 0-64 scale, semantic (xs-3xl) |
| sizing | Component sizes | container, button, input, icon |
| borders | Border values | radius (per style), width |
| shadows | Shadow styles | none through 2xl, inner |
| animation | Motion tokens | duration, easing, keyframes |
| breakpoints | Responsive | xs, sm, md, lg, xl, 2xl |
| z-index | Layer system | base through notification |
| Step | Brightness | Saturation | Use Case |
|------|------------|------------|----------|
| 50 | 95% fixed | 30% | Subtle backgrounds |
| 100 | 95% fixed | 38% | Light backgrounds |
| 200 | 95% fixed | 46% | Hover states |
| 300 | 95% fixed | 54% | Borders |
| 400 | 95% fixed | 62% | Disabled states |
| 500 | Original | 70% | Base/default color |
| 600 | Original × 0.8 | 78% | Hover (dark) |
| 700 | Original × 0.6 | 86% | Active states |
| 800 | Original × 0.4 | 94% | Text |
| 900 | Original × 0.2 | 100% | Headings |
| Size | Value | Calculation |
|------|-------|-------------|
| xs | 10px | 16 ÷ 1.25² |
| sm | 13px | 16 ÷ 1.25¹ |
| base | 16px | Base |
| lg | 20px | 16 × 1.25¹ |
| xl | 25px | 16 × 1.25² |
| 2xl | 31px | 16 × 1.25³ |
| 3xl | 39px | 16 × 1.25⁴ |
| 4xl | 49px | 16 × 1.25⁵ |
| 5xl | 61px | 16 × 1.25⁶ |
| Level | Normal Text | Large Text |
|-------|-------------|------------|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large text: ≥18pt regular or ≥14pt bold
| Aspect | Modern | Classic | Playful |
|--------|--------|---------|---------|
| Font Sans | Inter | Helvetica | Poppins |
| Font Mono | Fira Code | Courier | Source Code Pro |
| Radius Default | 8px | 4px | 16px |
| Shadows | Layered, subtle | Single layer | Soft, pronounced |
Detailed reference guides in references/:
| File | Content |
|------|---------|
| token-generation.md | Color algorithms, HSV space, WCAG contrast, type scales |
| component-architecture.md | Atomic design, naming conventions, props patterns |
| responsive-calculations.md | Breakpoints, fluid typography, grid systems |
| developer-handoff.md | Export formats, framework setup, Figma sync |
Generated Mar 1, 2026
A tech startup needs to quickly establish a consistent visual identity across their web and mobile apps. Using the UI Design System skill, they generate design tokens from their brand color, create a component library for rapid prototyping, and ensure accessibility compliance for a professional launch.
A large corporation with multiple product teams aims to unify disparate UI styles into a single design system. This skill helps generate standardized tokens, document component APIs for developer adoption, and facilitate handoff to ensure consistency and reduce design debt.
An online retailer seeks to improve user experience with responsive designs and accessible components. The skill calculates fluid typography and breakpoints for mobile-first layouts, builds reusable product cards and buttons, and exports tokens for seamless integration with their tech stack.
A design agency working on a client's website uses this skill to generate color palettes from brand guidelines, create a component system for efficient collaboration, and prepare developer handoff documentation to streamline delivery and client approval.
A SaaS company expanding its feature set needs to maintain UI consistency as new components are added. This skill helps map tokens to evolving components, define variant patterns for scalability, and ensure responsive design calculations support diverse user devices.
Offer the UI Design System as a cloud-based service where users pay monthly for access to token generation, component documentation, and collaboration features. Revenue comes from tiered subscriptions based on team size and advanced workflows like developer handoff.
Provide expert services to help companies adopt and customize the design system, including workshops, token setup, and integration support. Revenue is generated through project-based contracts or hourly rates for design and development guidance.
Distribute the skill as a free plugin for design tools like Figma or VS Code, with premium features such as advanced token exports, accessibility audits, and team collaboration tools. Revenue comes from upgrades and enterprise licenses.
💬 Integration Tip
Integrate this skill by exporting design tokens as CSS variables for direct use in web projects or as JSON for framework-specific setups, ensuring version control for consistency across teams.
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Build scalable, themable Tailwind CSS component libraries using CVA for variants, compound components, design tokens, dark mode, and responsive grids.
Create award-winning, memorable websites with advanced animations, creative interactions, and distinctive visual experiences. Use this skill when building sites that need to be exceptional—portfolio sites, agency showcases, product launches, or any project where "wow factor" matters.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.