Can I use this for custom, one-off styles?

This skill is specifically designed for governed design systems. It is not recommended for bespoke styling that is intentionally meant to deviate from a standardized system.

What platforms can it extract tokens from?

It extracts design tokens directly from Figma using the Figma MCP server and can parse code tokens from CSS, Tailwind configurations, and W3C Design Token JSON files.

Does this skill automatically update my code tokens?

No, this is a report-only skill. It identifies inconsistencies and creates issues in Wrangler for resolution, ensuring that developers maintain control over code changes.

How does it handle different naming conventions?

The skill includes a normalization phase that converts various naming styles (like CamelCase, snake_case, or slash-separated Figma names) into a standardized format for accurate comparison.

Design System Governance

Name: Design System Governance
Author: bacchus-labs

bybacchus-labs

•

デザインツール

Detects and tracks design token drift between Figma design systems and code implementations to ensure visual consistency.

The Design System Governance skill provides a systematic approach to maintaining design integrity by identifying discrepancies between Figma designs and your codebase. It automates the extraction of color, typography, spacing, and shadow tokens, comparing them across various sources like CSS variables, Tailwind configurations, and W3C JSON files. Instead of making risky auto-fixes, this skill focuses on visibility—normalizing token names and classifying drift severity to generate actionable reports. By integrating with Wrangler for issue tracking, it ensures that every design-to-code inconsistency is logged, categorized, and ready for resolution by the development team.

主な機能

01Support for CSS Variables, Tailwind Configs, and Design Token JSON

023 GitHub stars

03Drift severity classification and reconciliation recommendations

04Smart token name normalization for accurate cross-platform comparison

05Automated token extraction from Figma via MCP integration

06Automated Wrangler issue creation for identified inconsistencies

ユースケース

01Verifying implementation accuracy after a design system update or migration

02Conducting baseline health assessments when onboarding new projects or libraries

03Performing periodic audits to ensure code stays aligned with the source of truth in Figma

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bacchus-labs/wrangler design__design-system-governance

For use in Claude.ai and ChatGPT

Download Skill