Does the toolkit follow standard design principles?

Yes, it defaults to industry-standard practices like the 8pt spacing grid and modular typography scales for professional-grade results.

Can I customize the visual style of the generated tokens?

Yes, the generator supports specific style presets such as modern, classic, and playful to align with your brand's aesthetic.

Which file formats does the design token generator support?

The toolkit supports exporting design tokens in JSON, CSS, and SCSS formats, ensuring compatibility with modern web development workflows.

How does this skill assist with developer handoff?

It generates comprehensive documentation and exportable code snippets, reducing friction and ambiguity when moving from design to implementation.

UI Design System Toolkit

Name: UI Design System Toolkit
Author: nadavyigal

bynadavyigal

0•

Herramientas de Diseño

Generates scalable design systems, design tokens, and developer handoff documentation to maintain visual consistency.

This professional toolkit enables Senior UI Designers and Developers to architect and maintain scalable design systems directly within Claude Code. It automates the complex math of typography scales and 8pt grids, generates comprehensive design tokens for colors and spacing, and ensures accessibility compliance. By providing automated developer handoff tools and multi-format exports like CSS and SCSS, it bridges the gap between design vision and production implementation, serving as a single source of truth for product UI.

Características Principales

01Modular typography scale and 8pt grid system implementation

020 GitHub stars

03Responsive design breakpoint calculations and documentation

04Automated design token generation for color, typography, and spacing

05Multi-format exports including JSON, CSS, and SCSS for dev handoff

06Accessibility compliance auditing for UI components

Casos de Uso

01Bootstrapping a new design system from basic brand colors

02Documenting component architectures for engineering team handoff

03Generating production-ready CSS variables from design specifications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nadavyigal/running-coach- product

For use in Claude.ai and ChatGPT

Download Skill