skills.rest
michsindlinger
michsindlingerCOMMUNITY
Explore all skills by this author →
GitHub

Design System Extraction Skill

Extract design tokens like colors, typography, and spacing from web URLs or screenshots.

1|Updated Feb 14, 2026
Search Tags:#typography#design system#style guide#color palette#tokens#extraction#UI analysis
One-click install
npx skills add https://github.com/michsindlinger/specwright --skill design-system-extraction-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Design System Extraction Skill
Source: https://github.com/michsindlinger/specwright/tree/main/specwright/templates/skills/design-system-extraction
Command: npx skills add https://github.com/michsindlinger/specwright --skill design-system-extraction-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about Design System Extraction Skill

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

FAQPage Schema
How do I extract design tokens from a website URL?▼

Yes, you can extract a color palette and typography styles from a static screenshot. The skill uses multimodal analysis to process image inputs, identifying visual design patterns and outputting documented design tokens for your style guide.

Can I use a screenshot to extract a color palette and typography styles?▼

Yes, you can extract a color palette and typography styles from a static screenshot. The skill uses multimodal analysis to process image inputs, identifying visual design patterns and outputting documented design tokens for your style guide.

How do I automatically generate a style guide from an existing UI?▼

Generating design system documentation from web URLs or screenshots requires multimodal analysis and web fetching capabilities. The skill uses these dependencies to process diverse input sources and extract the visual design patterns.

Do I need web fetching capabilities to analyze live web pages for design patterns?▼

Generating design system documentation from web URLs or screenshots requires multimodal analysis and web fetching capabilities. The skill uses these dependencies to process diverse input sources and extract the visual design patterns.

What design system elements can be extracted from visual mockups?▼

Design system elements that can be extracted from visual mockups include colors, typography, spacing, and component styles. The skill analyzes these visual elements to automate the creation of design system documentation and style guides.

Related Skills

Explore More Design & Creative Skills→
0xRayAI0xRayAI

multimodal-looker

Analyze diagrams, screenshots, and UI mockups to generate structured specifications.

Official
Intermediate
rachel353rachel353

design-guide

Extract design languages from live websites into markdown guides and JSON data.

Community
Advanced
opzero1opzero1
3

frontend-philosophy

Codify visual and UI philosophy for design consistency across projects.

Official
Basic
lsst-sqrelsst-sqre
2

design-system

Reference Rubin Observatory design system CSS variables and design tokens.

Official
Basic