Ui Design System
Generates comprehensive UI design systems with components, color palettes, typography scales, and spacing tokens. You'd reach for this when starting a new project and need a consistent foundation rather than making up values as you go. It's opinionated about structure, which is actually helpful because design systems are one of those things where having any consistent system beats bikeshedding over the perfect one. Saves you from the "let's just add one more shade of blue" problem that plagues teams without guidelines.
- skills.sh installs
- 1.1K
- GitHub stars
- 29.5K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add alirezarezvani/claude-skills --skill ui-design-system --agent claude-codeInstalls into .claude/skills of the current project.
Files
UI Design System
Generate design tokens, create color palettes, calculate typography scales, build component systems, and prepare developer handoff documentation.
Table of Contents
Trigger Terms
Use this skill when you need to:
- "generate design tokens"
- "create color palette"
- "build typography scale"
- "calculate spacing system"
- "create design system"
- "generate CSS variables"
- "export SCSS tokens"
- "set up component architecture"
- "document component library"
- "calculate responsive breakpoints"
- "prepare developer handoff"
- "convert brand color to palette"
- "check WCAG contrast"
- "build 8pt grid system"
Workflows
Workflow 1: Generate Design Tokens
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/alirezarezvani/claude-skills
- Categories
- Frontend Development, Documentation, Design & UI/UX
- First seen
- Jun 3, 2026
More from alirezarezvani/claude-skills
All 267- Financial Analyst1.1K
- Self Improving Agent1.1K
- Karpathy Coder1.1K
- Senior Devops1.1K
- Product Manager Toolkit1K
- Tdd Guide1K
- Gdpr Dsgvo Expert1K
- A11y Audit998
- Ux Researcher Designer991
- Senior Prompt Engineer984
- Senior Data Scientist975
- Agile Product Owner945
- Senior Ml Engineer940
- Content Creator931
- Senior Secops928
- Cto Advisor925
- Tech Stack Evaluator923
- Content Humanizer908
- App Store Optimization894
- Cfo Advisor880
- Cold Email879
- Risk Management Specialist876
- Information Security Manager Iso27001875
- Product Strategist874
Recommended
More Frontend Development1
capacitor-vuecapawesome-team/skillsGuides the agent through Vue-specific patterns for Capacitor app development. Covers Vue 3 Composition API with Capacitor plugins, custom composables for native1.1Kskills.sh installs
capacitor-vuecapawesome-team/skillsGuides the agent through Vue-specific patterns for Capacitor app development. Covers Vue 3 Composition API with Capacitor plugins, custom composables for native1.1Kskills.sh installs2
nextjsjezweb/claude-skillsBuild Next.js 16 apps with App Router, Server Components/Actions, Cache Components ("use cache"), and async route params. Includes proxy.ts and React 19.2. Prev1Kskills.sh installs
nextjsjezweb/claude-skillsBuild Next.js 16 apps with App Router, Server Components/Actions, Cache Components ("use cache"), and async route params. Includes proxy.ts and React 19.2. Prev1Kskills.sh installs3ionic-reactcapawesome-team/skillsGuides the agent through Ionic Framework development with React — project structure, React-specific Ionic components, IonReactRouter and navigation patterns, Io1Kskills.sh installs
ionic-reactcapawesome-team/skillsGuides the agent through Ionic Framework development with React — project structure, React-specific Ionic components, IonReactRouter and navigation patterns, Io1Kskills.sh installs4
tailwind-best-practicesasyrafhussin/agent-skillsTailwind CSS patterns and conventions. Use when writing responsive designs, implementing dark mode, creating reusable component styles, configuring Tailwind, or1Kskills.sh installs
tailwind-best-practicesasyrafhussin/agent-skillsTailwind CSS patterns and conventions. Use when writing responsive designs, implementing dark mode, creating reusable component styles, configuring Tailwind, or1Kskills.sh installs5
zustand-state-managementmindrally/skillsBest practices for Zustand state management in React and Next.js applications with TypeScript.993skills.sh installs
zustand-state-managementmindrally/skillsBest practices for Zustand state management in React and Next.js applications with TypeScript.993skills.sh installs6
frontend-designdavila7/claude-code-templatesCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, 981skills.sh installs
frontend-designdavila7/claude-code-templatesCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, 981skills.sh installs