BeClaude

design-system-extractor

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.

Install & Usage

1
Create the skills directory
mkdir -p .claude/skills
2
Download the skill file
mkdir -p .claude/skills && curl -o .claude/skills/design-system-extractor.md https://raw.githubusercontent.com/KunalKumarkkr01/design-system-extractor/main/SKILL.md
3
Invoke in Claude Code
/design-system-extractor
View source on GitHub
designmcpagentplugin

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is design-system-extractor?

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.

How to install design-system-extractor?

To install design-system-extractor, create the .claude/skills directory in your project, then run the curl command to download the skill file. Once installed, invoke it in Claude Code with /design-system-extractor.

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.