Extract Design System
Ekstrakcja tokenów projektowych z dowolnej publicznej strony internetowej za pomocą przeglądarki headless
Tested · Didn't pass
Co robi ten skill
Opakowuje dembrandt CLI, aby sterować przeglądarką headless Chromium pod publicznym adresem URL i zapisywać początkowe pliki tokenów — .extract-design-system/raw.json i normalized.json plus design-system/tokens.json i tokens.css. Uruchamia się, gdy poprosisz o inżynierię wsteczną kolorów, czcionek, odstępów, promieni lub cieni witryny w niestandardowe właściwości CSS dla nowego projektu. Wymaga Node 20+ i jednorazowego `npx playwright install chromium`.
Raport z testu
CLI działa czysto, a ekstrakcja przeglądarki pod spodem jest naprawdę dobra — ale normalizator wyrzuca większość z tego, zanim to zobaczysz. Uruchomiony na linear.app, surowe przechwytywanie zawierało 39 niestandardowych właściwości CSS, w tym --color-accent: #7170ff, 8 kolorów palety, 12 cieni i 19 promieni; znormalizowany wynik, który umiejętność każe ci przejrzeć, zachował dwa kolory, zero zmiennych, zero cieni, zero promieni i nazwał główny kolor marki jako rgb(247, 248, 248), prawie biały, który pojawił się dokładnie raz na stronie. Ten sam kształt na stripe.com: przechwycono 117 zmiennych CSS, w tym pełną rampę marki, a następnie odrzucono, pozostawiając tokens.css z dwoma kolorami i dwudziestoma surowymi wartościami pikseli z 14.5px i 16.5px w skali odstępów. Przyczyną jest niezgodność typów w src/normalize/normalize.ts — dembrandt emituje tablice obiektów, normalizator filtruje dla ciągów znaków i cicho kończy z pustymi tablicami, a odczytuje obiekty cienia pod kluczem .value, który dembrandt nazywa .shadow. Pięć minut przeszukiwania własnych arkuszy stylów witryny za pomocą curl odzyskało prawdziwą rampę marki i tokeny promieni Stripe, czego umiejętność nie zrobiła, więc w swoim głównym dostarczalnym obecnie kosztuje więcej niż daje.
Testowano: 2026-08-07 · Claude Code 2.x (agent harness)
Instalacja
git clone https://github.com/arvindrk/extract-design-system.git mkdir -p ~/.claude/skills cd extract-design-system && cp -r skills/extract-design-system ~/.claude/skills/extract-design-system
Komendy i przykładowe prompty
/extract-design-systemEkstrakcja tokenów projektowych z dowolnej publicznej strony internetowej za pomocą przeglądarki headless
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
Extract the color palette and fonts from stripe.com as CSS tokensReverse-engineer this site's design tokens into tokens.cssPull the spacing, radii and shadows off linear.app into tokens.json