design-system-extractor

Q: How to install design-system-extractor?

Create the skills directory: mkdir -p .claude/skills. Then add the config to .claude/skills/design-system-extractor.md. Finally, /design-system-extractor in Claude Code.

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

design-system-extractor is categorized under General. It covers: design, mcp, agent, plugin.

New

1GitHub TrendingGeneralby KunalKumarkkr01

Reverse-engineer any live website's design system into an implementation-ready design.md + screenshots, by driving a real browser with the Chrome DevTools MCP. Ships as an agent skill, a Claude Code plugin, and an npx installer.

First seen 6/15/2026

Summary

md file with screenshots.

It saves developers hours of manual inspection and ensures accurate design handoff.

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

Add the configuration to .claude/skills/design-system-extractor.md

Invoke in Claude Code

/design-system-extractor

Use Cases

Extract the complete design system from a competitor's landing page to inform your own UI decisions.

Generate a design.md file from a client's existing website to use as a reference for a redesign project.

Capture the color palette and typography scale from a design-heavy site like Dribbble or Awwwards for inspiration.

Reverse-engineer a legacy web app's design tokens to document them for a migration to a new framework.

Create a visual style guide with screenshots from a live site to share with your team for consistent styling.

Quickly analyze a website's component library (buttons, cards, modals) for reuse in your own project.

Usage Examples

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

Extract the design system from stripe.com and save it as design.md

Reverse-engineer the color and typography from airbnb.com and include screenshots

View source on GitHub

designmcpagentplugin

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is design-system-extractor?

This skill reverse-engineers any live website's design system by driving a real browser via Chrome DevTools MCP, extracting colors, typography, spacing, and components into an implementation-ready design.md file with screenshots. It saves developers hours of manual inspection and ensures accurate design handoff.

How to install design-system-extractor?

To install design-system-extractor: create the skills directory (mkdir -p .claude/skills), then add the config to .claude/skills/design-system-extractor.md. Finally, /design-system-extractor in Claude Code.

What is design-system-extractor best for?

design-system-extractor is a community categorized under General. It is designed for: design, mcp, agent, plugin. Created by KunalKumarkkr01.

What can I use design-system-extractor for?

design-system-extractor is useful for: Extract the complete design system from a competitor's landing page to inform your own UI decisions.; Generate a design.md file from a client's existing website to use as a reference for a redesign project.; Capture the color palette and typography scale from a design-heavy site like Dribbble or Awwwards for inspiration.; Reverse-engineer a legacy web app's design tokens to document them for a migration to a new framework.; Create a visual style guide with screenshots from a live site to share with your team for consistent styling.; Quickly analyze a website's component library (buttons, cards, modals) for reuse in your own project..