skills.rest
SeemSeam
SeemSeamCOMMUNITY
Explore all skills by this author →
GitHub

design-system-tokens

Detect design token drift across Figma, CSS, and Tailwind sources.

17|2|Updated Jun 2, 2026
Search Tags:#design tokens#token management#Figma#component alignment#theme support
One-click install
npx skills add https://github.com/SeemSeam/agent-roles-spec --skill design-system-tokens-seemseam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-tokens
Source: https://github.com/SeemSeam/agent-roles-spec/tree/main/roles/frontend-engineer/skills/design-system-tokens
Command: npx skills add https://github.com/SeemSeam/agent-roles-spec --skill design-system-tokens-seemseam

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the management of design tokens across various platforms and workflows, addressing token drift, theme support, and component alignment.

Core Features & Use Cases

  • Token Source Identification: Automatically detect and categorize token sources like Figma, CSS, and Tailwind.
  • Token Drift Detection: Identify inconsistencies between design sources and code, helping maintain consistency.
  • Token Structure Recommendations: Provide structured guidelines for token organization and naming conventions.
  • Use Case: A frontend engineer uses this Skill to align a component library with a design system's token set, ensuring consistency across all products.

Quick Start

Use the design-system-tokens skill to check for token drift in your Figma components and generate a report.

Frequently Asked Questions about design-system-tokens

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?▼

To detect design token drift, this Skill identifies and manages design tokens from various sources like Figma, CSS, and Tailwind, automatically flagging inconsistencies between your design files and component code.

What is design token management and how does it handle component alignment?▼

Design token management is the structured organization of visual variables, and this Skill handles component alignment by suggesting structured token naming conventions to maintain consistency across all product workflows.

Can I use this to manage tokens for a Tailwind CSS workflow?▼

Yes, you can use this Skill to manage tokens for a Tailwind CSS workflow, as it specifically supports identifying token sources and detecting drift within Figma, CSS, and Tailwind environments.

How do I structure design tokens for theme support?▼

To structure design tokens for theme support, this Skill provides structured recommendations for token organization and naming conventions, streamlining theme management across various platforms.

What is the best way to align a component library with a design system's token set?▼

The best way to align a component library is using this Skill to identify token sources, detect drift, and apply structured token management practices, ensuring frontend components match the design system.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

figma

Extract design tokens, components, and styles from Figma files.

Community
Intermediate
samjhechtsamjhecht
4

design-system-governance

Detect design token drift between Figma and code implementations.

Community
Advanced
apexradiusapexradius

design-system

Generate CSS custom properties and a component library from a brand name.

Official
Intermediate
wellsgzwellsgz

normalize

Apply design system tokens and components to normalize UI consistency.

Community
Advanced