design-token-lock

What problem does it solve?

This Skill eliminates the persistent style drift that occurs when implementing Figma designs into code, ensuring the final product matches the design exactly by establishing a single, versioned source of truth for all design values.

Core Features & Use Cases

• Figma Token Extraction: Pulls exact color, typography, spacing, effect, and text content values directly from Figma files, with a fallback to computed element styles if no Figma variables are defined.
• Versioned Lockfile Creation: Writes a design-tokens.lock.json file that acts as the single source of truth for all design values, preventing inconsistent styling across components and teams.
• Automated Config Generation: Creates Tailwind configuration files and CSS custom properties that are fully tied to the lockfile, ensuring all styling stays in sync with the original design.
• Real-World Use Case: Teams building web or mobile apps from Figma designs can use this Skill to guarantee every component uses the correct design tokens, eliminating manual styling errors and reducing review cycles.

Quick Start

Use the design-token-lock skill to extract all design tokens from your linked Figma file and generate the corresponding Tailwind configuration and CSS custom properties for your project.