Leaderboard/Design/extract-design-system
Last commit on May 9, 2026·Created on March 22, 2026

arvindrk/extract-design-system

Reverse‑engineers a site into the tokens you build from.
Combined rank
#454
across all skills
In Design
#40
category rank
Stars
167
+10.6% in last 7d
Forks
19
0.0% in last 7d
Watchers
0
0 watchers in last 7d
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of real attention, adoption, and active maintenance.
Description

This skill extracts design primitives—colors, fonts, spacing, radius, and shadow scales—from a public website and generates starter token files for your project. It helps designers, frontend developers, and teams bootstrapping a design system capture a reference site's visual language without manual inspection. The output is useful for initialization, not pixel-perfect reproduction, and never overwrites existing styles without confirmation.

WHO IT'S FOR
Frontend Design Ops Engineers
scaffold design token files for new projects
UX Engineers
reverse-engineer visual primitives from live sites
Design System Maintainers
initialize token libraries from competitor or inspiration sites
Frontend Developers
bootstrap project styling from an existing brand
30 Days of GitHub Stars
+54 stars
↑ 50.5% monthly change
Jul 7Jul 14Jul 21Jul 28Aug 5
Compatibility & Install
1 Skill · 3 Compatible agents · 3 categories · 2 install paths
Compatible agents
Claude CodeCodexCursor
Categories
DesignAutomationDeveloper Tooling
Install via
Claude Plugin
Repository instructions
NPX Skills Add
Repository instructions
Also in this category
4 of 46