skills.rest
bacchus-labs
bacchus-labsOFFICIAL
Explore all skills by this author →
GitHub

design-system-governance

Detect design token drift between Figma and code implementations.

4|1|Updated Oct 29, 2025
Search Tags:#drift detection#figma#design tokens#governance#sync#code implementation
One-click install
npx skills add https://github.com/bacchus-labs/wrangler --skill design-system-governance-bacchus-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-governance
Source: https://github.com/bacchus-labs/wrangler/tree/main/.wrangler/memory/knowledge-base/reference-prompts/skills/ui-related-skills/design__design-system-governance
Command: npx skills add https://github.com/bacchus-labs/wrangler --skill design-system-governance-bacchus-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

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

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.

Frequently Asked Questions about design-system-governance

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

FAQPage Schema
How do I detect design token drift between Figma and code?▼

Detect design token drift by comparing extracted Figma tokens against parsed code sources. This identifies missing tokens, value mismatches, and potential renames to ensure design-code alignment.

What design token formats are supported for code implementation sync?▼

Code implementation sync supports CSS variables, Tailwind CSS, and W3C Design Tokens JSON formats. The parser compares these code sources against extracted Figma tokens to find inconsistencies.

How does automated issue creation work for design token mismatches?▼

Automated issue creation generates detailed Wrangler issues for detected token drift. It logs missing tokens, value mismatches, and potential renames, creating actionable tickets for developers to resolve.

Can I track Figma design system updates against my codebase automatically?▼

You can track Figma design system updates by running an audit against your codebase. It compares updated brand colors or typography in Figma with code implementations to flag unadopted values.

What is the best way to find missing design tokens in CSS or Tailwind?▼

The best way to find missing design tokens is to run a token comparison audit. It parses CSS variables or Tailwind configurations and matches them against Figma tokens to identify gaps and mismatches.

Does design token governance work with W3C Design Tokens JSON format?▼

Design token governance works with W3C Design Tokens JSON format. It parses the JSON file and compares the defined tokens against Figma extractions to detect any value mismatches or missing entries.

Related Skills

Explore More Design & Creative Skills→
bacchus-labsbacchus-labs
4

design-system-setup

Initialize design systems via templates or Q&A with Figma MCP integration.

Official
Advanced
samjhechtsamjhecht
4

design-system-governance

Detect design token drift between Figma and code implementations.

Community
Advanced
mahg-esmahg-es
3

compliance

Map regulatory requirements to technical controls and automate evidence collection.

Official
Advanced
Dragoon0xDragoon0x
4

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

Community
Intermediate