extract-design-system

Q: How to install extract-design-system?

Create the skills directory: mkdir -p .claude/skills. Then run: mkdir -p .claude/skills && curl -o .claude/skills/extract-design-system.md https://raw.githubusercontent.com/arvindrk/extract-design-system.git/main/SKILL.md. Finally, /extract-design-system in Claude Code.

Q: What is extract-design-system best for?

extract-design-system is categorized under General. It covers: design, agent, design-tokens, design-system, design-system-extraction, css-custom-properties, css-variables, color-palette.

New

1knpmGeneralMIT

Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.

First seen 6/3/2026

Summary

This skill extracts design tokens—including colors, typography, spacing, border radius, and shadows—from any public website.

It generates JSON and CSS custom properties that you can directly use in your local projects, saving hours of manual inspection and ensuring design consistency.

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/extract-design-system.md https://raw.githubusercontent.com/arvindrk/extract-design-system.git/main/SKILL.md

Invoke in Claude Code

/extract-design-system

Use Cases

Quickly capture a competitor's color palette and typography scale for competitive analysis.

Extract design tokens from a client's existing website to bootstrap a new design system.

Generate CSS custom properties from a reference site to align your project's visual language.

Obtain spacing and border radius values from a well-designed site to inform your own component library.

Create a JSON token file from a public website for use in design-to-code pipelines.

Reverse-engineer shadow and elevation tokens from a site to replicate its visual depth.

Usage Examples

/extract-design-system https://example.com

Extract design tokens from stripe.com and output as CSS variables

Get the color palette and typography from airbnb.com in JSON format

View source on GitHub

designagentdesign-tokensdesign-systemdesign-system-extractioncss-custom-propertiescss-variablescolor-palette

Security Audits

LicensePassSourceWarnRepositoryPass

Frequently Asked Questions

What is extract-design-system?

This skill extracts design tokens—including colors, typography, spacing, border radius, and shadows—from any public website. It generates JSON and CSS custom properties that you can directly use in your local projects, saving hours of manual inspection and ensuring design consistency.

How to install extract-design-system?

To install extract-design-system: create the skills directory (mkdir -p .claude/skills), then run: mkdir -p .claude/skills && curl -o .claude/skills/extract-design-system.md https://raw.githubusercontent.com/arvindrk/extract-design-system.git/main/SKILL.md. Finally, /extract-design-system in Claude Code.

What is extract-design-system best for?

extract-design-system is a skill categorized under General. It is designed for: design, agent, design-tokens, design-system, design-system-extraction, css-custom-properties, css-variables, color-palette.

What can I use extract-design-system for?

extract-design-system is useful for: Quickly capture a competitor's color palette and typography scale for competitive analysis.; Extract design tokens from a client's existing website to bootstrap a new design system.; Generate CSS custom properties from a reference site to align your project's visual language.; Obtain spacing and border radius values from a well-designed site to inform your own component library.; Create a JSON token file from a public website for use in design-to-code pipelines.; Reverse-engineer shadow and elevation tokens from a site to replicate its visual depth..