unify-design

Audit design token drift and scaffold token files across codebases.

50|2|Updated Apr 14, 2026
One-click install
npx skills add https://github.com/subinium/vibesubin --skill unify-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: unify-design
Source: https://github.com/subinium/vibesubin/tree/main/plugins/vibesubin/skills/unify-design
Command: npx skills add https://github.com/subinium/vibesubin --skill unify-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes a project's design tokens (colors, spacing, typography, radii, shadows, breakpoints) into a single truth source and audits code for drift, reducing hard-coded values and visual inconsistencies.

Core Features & Use Cases

  • Establishes the BI source of truth for design tokens and scaffolds a tokens file when missing.
  • Audits for hard-coded hex colors, arbitrary Tailwind values, and duplicate component variants, and proposes token-based fixes.
  • Performs structural audits (Button variants, navigation, and common shells) to promote consolidation and consistency across pages.

Quick Start

Run the unify-design audit to identify drift and scaffold tokens, then apply token-based fixes after operator confirmation.

Frequently Asked Questions about unify-design

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

FAQPage Schema
How do I audit my codebase for design drift and hard-coded values?▼

To audit design drift, run the unify-design audit to detect hard-coded hex colors, arbitrary values, and duplicate components, then receive a concrete plan for token-based fixes and component consolidation.

What is a single source of truth for design tokens?▼

A single source of truth for design tokens centralizes colors, spacing, typography, radii, shadows, and breakpoints into one file, reducing hard-coded values and visual inconsistencies across the project.

How do I consolidate duplicate UI components and inconsistent Button variants?▼

To consolidate duplicate UI components and inconsistent Button variants, perform a structural audit using unify-design to identify drift across pages and propose token-based fixes for consistency.

Does this design token audit work with Tailwind, MUI, and Chakra?▼

Yes, the design token audit works with Tailwind, MUI, and Chakra by enforcing framework-specific token locations and scaffolding a tokens file when missing, ensuring accurate extraction and consolidation.

How do I scaffold a missing design tokens file in my frontend project?▼

To scaffold a missing design tokens file in your frontend project, run the unify-design audit to establish the source of truth for colors, spacing, and typography, then apply the proposed token-based fixes.

What is the best way to refactor hardcoded hex colors into design tokens?▼

The best way to refactor hardcoded hex colors into design tokens is to run an audit that detects drift and proposes token-based fixes, establishing a centralized source of truth for consistent UI.