Can I use this skill to refactor existing CSS?

Absolutely. It is designed to help transition legacy projects into structured, token-driven systems for better maintainability.

What formats does the design token generator support?

The tool exports design tokens in JSON, CSS, and SCSS formats, ensuring compatibility with modern frontend frameworks and build tools.

What UI styles are available in the generator?

The generator includes pre-configured styles for modern, classic, and playful aesthetics, which can be further customized based on brand requirements.

Does this skill help with web accessibility?

Yes, it includes built-in capabilities for accessibility compliance to ensure your design system meets standard contrast and usability requirements.

UI Design System Architect

Name: UI Design System Architect
Author: piotroq

bypiotroq

0•

Design Tools

Generates comprehensive design tokens, component architectures, and responsive layouts to maintain visual consistency across digital products.

This skill provides a robust toolkit for Senior UI Designers and Frontend Developers to build and scale professional design systems within Claude Code. It automates the creation of design tokens—including color palettes, modular typography scales, and 8pt spacing grids—while ensuring accessibility compliance and streamlining the developer handoff process. It is particularly useful when starting new projects from scratch or refactoring legacy interfaces into structured, token-driven architectures that facilitate seamless design-to-dev collaboration.

Key Features

010 GitHub stars

02Responsive design breakpoint and layout calculations

03Automated design token generation for JSON, CSS, and SCSS

04Standardized developer handoff documentation

05Accessibility-compliant color palette generation

06Modular typography and 8pt spacing grid system creation

Use Cases

01Standardizing spacing and typography across complex frontend projects

02Automating the creation of themeable tokens for multi-brand applications

03Building a scalable enterprise-level design system from brand colors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com ui-design-system

For use in Claude.ai and ChatGPT

Download Skill