Skills
.Work. You
Rest

design-extract-system-tokens

Official

Turn live websites into design tokens.

Design & Creative#design system#Playwright#design tokens#Tailwind#DTCG#website extraction#Figma variables
AuthorAradotso
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It saves teams from manually reverse-engineering a website’s design system by extracting tokens and system artifacts directly from a live URL.

Core Features & Use Cases

  • Website-to-Token Extraction: Automatically capture primitive and semantic design tokens from a page, then output W3C DTCG tokens.
  • Multi-Artifact Design System Generation: Produce Tailwind configs, CSS variables, shadcn/ui themes, and Figma variable imports from the same source.
  • Design Understanding Beyond Colors: Includes layout patterns, component anatomy stubs, interaction/motion language, accessibility contrast reports, and design-quality scoring.
  • Use Case: When you want your app to match a competitor or reference brand, extract tokens from the reference site, apply them to your codebase, and iterate with drift checking for consistency over time.

Quick Start

Ask the agent to extract design system tokens from https://stripe.com and generate a complete token bundle ready for Tailwind and Figma imports.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-extract-system-tokens
Download link: https://github.com/Aradotso/design-skills/archive/main.zip#design-extract-system-tokens

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.