Description
ui-design-system is an agent skill from the davila7 claude-code-templates collection, listed on skills.sh. It is a toolkit for creating and maintaining scalable design systems, aimed at a senior UI designer. Its core capabilities are design token generation for colours, typography and spacing, component system architecture, responsive design calculations, accessibility compliance, and developer handoff documentation. The key script is design_token_generator.py, which generates a complete set of design tokens from a brand colour. It is run as python scripts/design_token_generator.py with a brand colour, a style and an output format. The styles it names are modern, classic and playful, and the formats are JSON, CSS and SCSS. The output can then be used by developers when they build components. The skill is for designers and design system owners who need consistent tokens across a product, and who want a generated starting point to adjust rather than choosing every value by hand.…
Highlights
- Design tokens from a brand colour
- Modern, classic and playful styles
- JSON, CSS and SCSS output
- Accessibility and handoff documentation
Ratings & Reviews
No ratings yet
Be the first to rate ui-design-system.
People also visit
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy
ui-design-system FAQ
What does the ui-design-system skill do?
It generates design tokens for colours, typography and spacing from a brand colour, and supports design system work.
How do I install it?
Run: npx skills add https://github.com/davila7/claude-code-templates --skill ui-design-system
Which styles and formats can I choose?
Styles are modern, classic and playful. Formats are JSON, CSS and SCSS.
How is the script run?
As python scripts/design_token_generator.py with the brand colour, style and format.
Has it been checked for security?
skills.sh lists three audits: Gen Agent Trust Hub Pass, Socket Pass and Snyk Pass.
What are the best ui-design-system alternatives?
Popular alternatives to ui-design-system include implement, brand-guidelines and canvas-design. See all ui-design-system alternatives