skills.rest
salamientark
salamientarkCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

Generate design tokens and developer handoff documentation from Python scripts.

Updated Dec 23, 2024
Search Tags:#typography#documentation#handoff#design-system#design-tokens#tokens-json
One-click install
npx skills add https://github.com/salamientark/dotfiles --skill ui-design-system-salamientark
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/salamientark/dotfiles/tree/main/claude/skills/product-team/ui-design-system
Command: npx skills add https://github.com/salamientark/dotfiles --skill ui-design-system-salamientark

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Design teams struggle to maintain visual consistency across products while delivering scalable tokens and handoff docs.

Core Features & Use Cases

  • Design token generation for colors, typography, spacing, and breakpoints, with export to CSS, SCSS, and JSON.
  • Comprehensive developer handoff documentation and component API references to streamline collaboration.
  • Responsive design considerations, WCAG-ready tokens, and a centralized knowledge base for design-system references.

Quick Start

Run the token generator with your brand color to produce a complete token set and export-ready files.

Frequently Asked Questions about ui-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate design tokens from brand colors for a scalable design system?▼

Generate design tokens by running the token generator script with your brand color to produce a complete token set and export-ready files for your scalable design system.

What is the best way to export design tokens to CSS, SCSS, and JSON?▼

The best way to export design tokens to CSS, SCSS, and JSON is using the token generator script, which automates the formatting and output of these files for developer handoff.

Can I use this to create developer handoff documentation for a component library?▼

Yes, you can create developer handoff documentation for a component library, as the system generates comprehensive API references and centralized knowledge base docs to streamline collaboration.

Does the design token system support WCAG-ready tokens for responsive design?▼

Yes, the design token system supports WCAG-ready tokens and includes responsive design considerations to ensure visual consistency and accessibility across products.

Do I need a Python environment to run the design token generator?▼

Yes, you need a Python environment to run the design token generator, as the core processing logic requires executing the design_token_generator.py script and its reference docs.

Related Skills

Explore More Design & Creative Skills→
DevXojeDevXoje

ui-design-system

Generate color, typography, spacing, and breakpoint tokens from brand inputs.

Community
Basic
FlorianRiquelmeFlorianRiquelme

Frontend CSS

Standardize CSS across frameworks with consistent methodology and production optimization.

Community
Basic
medusajsmedusajs
35.7k

UI Component Documentation Writer

Generate MDX documentation and live TSX examples for Medusa UI components.

Official
Intermediate
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced