ui-design-system
by alirezarezvani (GitHub) in alirezarezvani/claude-skills
What it does
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 collaboratio
Quoted from the skill's SKILL.md under its MIT license.
Install
git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git /tmp/claude-skills mkdir -p ~/.claude/skills/ cp -r /tmp/claude-skills/product-team/skills/ui-design-system ~/.claude/skills/ui-design-system
The command copies the skill from the author's repo. SkillTrove does not host it.
Files
- SKILL.md
- assets/design_system_doc_template.md
- references/component-architecture.md
- references/developer-handoff.md
- references/responsive-calculations.md
- references/token-generation.md
- scripts/design_token_generator.py
Source: https://github.com/alirezarezvani/claude-skills/tree/main/product-team/skills/ui-design-system. Checked 2026-10-13.
Similar skills
api-and-interface-design
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, def...
documentation-and-adrs
Records decisions and documentation. Use when you need to document an architecture decision (ADR) or the reasoning behind a design choice, when changing publ...
frontend-ui-engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing lay...
performance-optimization
Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance reg...
source-driven-development
Grounds every implementation decision in official documentation. Use when you want to verify an approach against the official docs before implementing it, or...
spec-driven-development
Creates specs before coding. Use when starting a new project, feature, or significant change and no specification exists yet. Use when drafting a PRD or requ...