UI Design System
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools.
Before & after
Same prompt, same agent — the only difference is the skill.
A design system is essential for consistency. You'll want to document your color palette, typography rules, spacing, and component behaviors. Then engineers need to know which components exist and how to use them. Creating documentation usually involves screenshots, code examples, and maybe some Figma files. It's a lot of work to keep it all in sync. Have you decided which tool you want to use for the source of truth—Figma, Storybook, or something else?
DESIGN TOKEN GENERATION COLOR PALETTE Primary brand: #0055CC (hover: #003D99, active: #002966) Secondary: #F0F2F5 (backgrounds, neutral surfaces) Status colors: success #1A7C00, warning #B85C00, error #C00, info #003D99 Text: body #1A1A1A, secondary #666666, disabled #CCCCCC Borders: standard #D9D9D9, subtle #E6E6E6 TYPOGRAPHY SCALE Heading 1: 32px, 1.2 line-height, 600 weight Heading 2: 24px, 1.3 line-height, 600 weight Body: 16px, 1.5 line-height, 400 weight Small: 14px, 1.4 line-height, 400 weight Caption: 12px, 1.4 line-height, 400 weight SPACING SCALE (8px base) 4, 8, 12, 16, 24, 32, 48, 64px COMPONENT DOCUMENTATION → Button (4 variants: primary, secondary, ghost, danger) → Input fields (text, email, password, number) → Card layouts (minimal, elevated, bordered) → Modal dialog (responsive, dismiss patterns) → Navigation tabs (horizontal, vertical, scrollable) DEVELOPER HANDOFF 1. CSS custom properties file (copy into project) 2. Component prop types (TypeScript interface) 3. Responsive grid rules (mobile: 4-col, tablet: 8-col, desktop: 12-col) 4. Accessibility checklist (WCAG 2.1 AA, keyboard navigation, screen reader support) 5. Browser support matrix (Chrome 90+, Safari 14+, Firefox 88+) SOURCE OF TRUTH Figma library with auto-sync to code via design-token script
About this skill
name: ui-design-system description: Use when UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools.
Ui Design System
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff.
What you get
- Public GitHub repo (alirezarezvani/claude-skills)
- the ui-design-system skill folder with SKILL.md. Part of a 337-skill / 30-agent / 70-command install.
Customize your output
- Fork the repo and adapt the skill's instructions and references to your workflow.
Example output
Activates automatically when your request matches Ui Design System; chains with the other skills, agents, and commands in the collection.
Best for
Creators, builders, and teams using Claude Code.
SKILL.md preview
---
name: ui-design-system
description: Use this skill when generating design tokens, documenting components, or preparing a developer handoff for a UI design system.
version: 1.0.0
category: Business & Ops / Product
author: AgentVolt
license: proprietary
tags:
- business-ops
- product
---
# Ui Design System
Builds and maintains a UI design system — generating design tokens, documenting components, and preparing developer handoff.
## When to use
… (sign up to view the full skill)More business & ops skills
View all Business & Ops skills →Product Manager Toolkit
Comprehensive toolkit for product managers including RICE prioritization, customer interview analysis, PRD templates, discovery frameworks, and go-to-market strategies.
Product Skills
Coordinates a set of product-management sub-skills — prioritization, discovery, UX research, competitive teardown, analytics, roadmapping.
Experiment Designer
Use when planning product experiments, writing testable hypotheses, estimating sample size, prioritizing tests, or interpreting A/B outcomes with practical statistical rigor.
UX Researcher & Designer
UX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks, and research synthesis.