Jak wyodrębnić system projektowy z dowolnej strony internetowej za pomocą jednego polecenia terminala

Czy zdarzyło Ci się kiedyś przeglądać landing page lub serwis internetowy kogoś innego i pomyśleć: „Jakie czcionki wybrał, jakich odstępów użył, jaka jest jego paleta kolorów?” Zazwyczaj w tym momencie otwierasz DevTools, zaczynasz żmudne klikanie przez elementy, kopiowanie kodów hex i przeglądanie obliczonych stylów. Jeśli projekt jest duży, ta rutyna może zająć kilka godzin.

Niedawno natknąłem się na dembrandt, narzędzie, które automatyzuje ten proces w absurdalnym stopniu. Podajesz mu adres URL, a ono wyprowadza ustrukturyzowane tokeny projektowe: paletę kolorów, typografię, siatkę odstępów, cienie, zaokrąglenia rogów i animacje.

Co to jest i dla kogo jest przeznaczone

dembrandt to narzędzie wiersza poleceń i biblioteka TypeScript zbudowana dla Node.js. Uruchamia silnik przeglądarki za pomocą Playwright, przechodzi do określonej strony, wyodrębnia obliczone style z DOM i porządkuje je.

Narzędzie obsługuje wiele przypadków użycia:

• Szybkie audyty i inżynieria wsteczna interfejsu użytkownika innych osób.
• Tworzenie tokenów projektowych dla projektu legacy, który nigdy nie miał jawnego systemu projektowego.
• Monitorowanie „dryfu" stylów w pipeline'ach CI/CD.
• Eksportowanie kontekstu dla asystentów AI, takich jak Cursor czy Claude Code.

Jak zacząć

Będziesz potrzebować Node.js w wersji 18 lub wyższej. Ponieważ narzędzie opiera się na Playwright bez dołączonych binariów, pierwszym krokiem jest pobranie Chromium:

npm install -g dembrandt
dembrandt install-browser
dembrandt dembrandt.com

Jeśli wolisz nie instalować globalnie, npx działa bez problemu:

npx dembrandt install-browser
npx dembrandt example.com

Przeglądarka pobiera się raz do współdzielonej pamięci podręcznej Playwright, a następnie narzędzie jest gotowe do użycia.

Co w środku: formaty i integracje

Narzędzie nie tylko zrzuca masę właściwości CSS do konsoli. Grupuje typografię według rozmiaru i grubości, analizuje częstotliwość użycia kolorów i oblicza poziomy pewności dla odkrytych reguł.

Eksportowanie tokenów do standardów W3C i Tailwind

Jeśli używasz Style Dictionary lub Tokens Studio w Figmie, tokeny można eksportować do specyfikacji W3C DTCG:

dembrandt example.com --dtcg

Dla programistów frontendowych pracujących z nowoczesnym Tailwind CSS, dostępna jest flaga 5, która generuje dyrektywę 6 dla czwartej wersji frameworka, zawierającą tylko faktycznie używane wartości.

Sprawdzanie kontrastu WCAG

Flaga 7 uruchamia audyt dostępności. Narzędzie identyfikuje rzeczywiste pary tekst-tło w DOM i ocenia je pod kątem zgodności z poziomami WCAG 2.1 AA i AAA. To przydatne do szybkiego sprawdzania dostępności interfejsu bez rozbudowanych rozszerzeń.

Śledzenie zmian stylów w CI

Jednym z najbardziej przekonujących przypadków użycia jest zapobieganie przypadkowym zmianom stylów w pull requestach. Możesz przechwycić snapshot tokenów w swoim repozytorium i walidować podglądowe wdrożenia w GitHub Actions:

uses: dembrandt/[email protected]
  with:
    url: https://preview.example.com
    baseline: .dembrandt/baseline.json

Jeśli ktoś przypadkowo zmodyfikuje podstawowy kolor marki lub zaburzy skalę odstępów, akcja zakończy się niepowodzeniem i pozostawi komentarz w PR-ze z listą zmienionych tokenów. W przypadku innych systemów CI, narzędzie zwraca niezerowy kod wyjścia przy porównywaniu za pomocą flagi 8.

Łączenie z agentami AI przez protokół MCP

Deweloperzy dodali obsługę Model Context Protocol (MCP). Oznacza to, że narzędzie może łączyć się bezpośrednio z Claude Code, Cursor lub Windsurf:

claude mcp add --transport stdio dembrandt -- npx -y --package dembrandt dembrandt-mcp

Po tym sieć neuronowa otrzymuje zestaw narzędzi (9, 10, 11, 12) i może samodzielnie badać interfejs oraz pisać kod na podstawie aktualnych tokenów strony.

Potencjalne wyzwania

W README szczerze opisano ograniczenia techniczne, o których warto pamiętać:

• Tryb ciemny nie jest wykrywany automatycznie — musisz wymusić go flagą 13.
• Strony oparte na Canvas lub WebGL nie mogą być parsowane, ponieważ nie mają tradycyjnego drzewa DOM.
• Duże SPA zbudowane na React lub Vue potrzebują czasu na hydratację, więc najlepiej od razu przekazać flagę 14, aby zwiększyć limity czasowe.
• Widok mobilny aktywuje się osobno za pomocą parametru 15.

Podsumowanie

dembrandt tworzy pomost między rzeczywistym kodem webowym a formalną dokumentacją systemu projektowego. Jeśli potrzebujesz uporządkować rozproszone style w istniejącym projekcie, podłączyć automatyczne sprawdzanie stylów w CI lub przekazać asystentowi AI aktualny kontekst frontendu, narzędzie zdecydowanie warto dodać do zakładek. Dzięki otwartemu kodowi źródłowemu (MIT), łatwo je osadzić w wewnętrznych skryptach buildowych.