Design System Governance

概要

Design System Governance is a specialized utility designed to maintain visual consistency by identifying discrepancies between Figma design files and production codebases. It extracts design tokens—including colors, typography, spacing, and shadows—from Figma via MCP and compares them against various code sources such as Tailwind configurations, CSS variables, or W3C JSON files. By normalizing token names and calculating drift severity, the skill provides actionable reconciliation recommendations and automatically generates tracking issues, ensuring the design system remains a single source of truth throughout the development lifecycle.

主な機能

• Automated issue creation for tracking reconciliation tasks within the project
• Multi-format code parsing for Tailwind CSS, CSS variables, and design token JSON
• Intelligent name normalization and fuzzy matching to detect potential token renames
• Automated extraction of styles and tokens from Figma via MCP server integration
• Drift severity classification to prioritize critical design-code mismatches
• 1 GitHub stars

ユースケース

• Pre-release verification to confirm all design tokens are correctly implemented
• Baseline assessments of design system health during new project onboarding
• Conducting periodic audits to ensure production code aligns with design system updates