Generate design tokens from brand colors in JSON, CSS, or SCSS.
npx skills add https://github.com/ovachiever/droid-tings --skill ui-design-system
Please help me install this Agent Skill. Skill: ui-design-system Source: https://github.com/ovachiever/droid-tings/tree/main/skills/ui-design-system Command: npx skills add https://github.com/ovachiever/droid-tings --skill ui-design-system
Create and maintain scalable design systems with tokens, components, accessibility checks, and developer handoff docs.
Generate tokens for a brand color and export as CSS.
High-intent search queries and answers about installing and using this skill.
Design token generation automates creation of color palettes, typography scales, spacing grids, and breakpoints from brand colors into JSON, CSS, or SCSS formats. This Skill produces complete token sets for colors, typography, spacing, borders, shadows, and animations across modern, classic, and playful styles, streamlining handoff to developers.
Yes. This Skill generates accessibility tokens alongside standard design tokens and produces developer handoff documentation. It supports component system creation with built-in accessibility checks to ensure your design system meets compliance requirements from the start.
Design tokens export as JSON, CSS, and SCSS formats. This flexibility allows designers and developers to integrate tokens into any modern workflow, whether you're building web applications, component libraries, or cross-platform design systems.
Yes. This Skill requires a Python-based workflow to automate token generation and export. The Python environment handles the processing pipeline that transforms brand inputs into complete token sets across all formats and style variations.
Design tokens include responsive breakpoint definitions and spacing grid generation as part of the core token set. These tokens organize layout scale values consistently across your design system, ensuring alignment between design and development across different screen sizes.
Design tokens automate generation and maintenance of design system values, eliminating manual documentation errors and ensuring consistency. Token-based workflows provide structured, exportable data that developers can programmatically consume, reducing handoff friction and sync issues compared to static documentation.
majiayu000Generate design system tokens from a brand color into JSON, CSS, or SCSS.
popup-studio-aiBuild a platform-agnostic design system with tokens and reusable components across web, mobile, and cross-framework projects.
DevanBEnforce Tailwind utility classes and design system tokens in CSS files.
AgLyx3Generate design tokens from a brand color and export them in JSON, CSS, and SCSS.
