Skills
.Work. You
Rest

Design System Extraction Skill

Community

Extract design tokens from visuals.

Design & Creative#typography#design system#style guide#color palette#tokens#extraction#UI analysis
Authormichsindlinger
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill automates the tedious process of manually identifying and documenting design system elements like colors, typography, and spacing from existing websites or visual mockups.

Core Features & Use Cases

  • Automated Design Token Extraction: Extracts colors, typography, spacing, and component styles.
  • Multi-Source Input: Works with both live URLs (via WebFetch) and static screenshots (via multimodal input).
  • Use Case: Quickly generate a design-system.md file for a new project by analyzing a competitor's website or a provided UI screenshot.

Quick Start

Use the design system extraction skill to analyze the provided screenshot and document its color palette.

Dependency Matrix

Required Modules

None required

Components

references

💻 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 System Extraction Skill
Download link: https://github.com/michsindlinger/specwright/archive/main.zip#design-system-extraction-skill

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 223,000+ vetted skills library on demand.