design-system-governance
OfficialSync design tokens: Figma vs. Code
Authorbacchus-labs
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automatically detects and tracks inconsistencies between design tokens defined in Figma and their implementation in code, ensuring design-code alignment.
Core Features & Use Cases
- Token Drift Detection: Compares design tokens (colors, typography, spacing, etc.) from Figma against code implementations (CSS, Tailwind, JSON).
- Automated Issue Creation: Generates detailed Wrangler issues for any detected drift, including missing tokens, value mismatches, and potential renames.
- Use Case: After the design team updates brand colors in Figma, run this skill to automatically identify any code files that haven't adopted the new primary color values, creating tickets for developers to fix.
Quick Start
Run the design-system-governance skill to audit for design token drift between Figma and the codebase.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-system-governance Download link: https://github.com/bacchus-labs/wrangler/archive/main.zip#design-system-governance Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.