Wyodrębnij wizualne tokeny projektowe do plików DESIGN.md gotowych do AI
Ekstraktor DESIGN.md, stworzony przez Vitor M. M. we współpracy z ibe.IA, to rozszerzenie Chrome, które przekształca wizualną tożsamość strony w ustandaryzowany dokument DESIGN.md do kodu UI wspomaganego przez AI. Analizuje strony i zbiera kolory, typografię, odstępy i inne ztokenizowane zasady, aby stworzyć dokument czytelny dla maszyn. Rozszerzenie wykorzystuje kompaktowy panel boczny do szybkiej ekstrakcji i jest skierowane do programistów frontendowych, projektantów UI/UX oraz inżynierów promptów, którzy potrzebują spójnych wskazówek wizualnych dla interfejsów napędzanych przez LLM.
Konwertuje style na stronie na strukturalny plik tokenów projektowych
Rozszerzenie wyodrębnia konkretne dane stylu z dowolnej aktywnej karty i zapisuje je w pliku DESIGN.md. Ekstraktor identyfikuje kolory, skale typografii, jednostki odstępu, style krawędzi i cienie oraz formatuje je jako odniesienia tokenów. Wyjście jest zgodne ze specyfikacją W3C Design Tokens Community Group (DTCG), dzięki czemu zespoły otrzymują ustandaryzowany model tokenów, a nie ad-hoc listę kolorów. To pomaga narzędziom downstream w niezawodnej interpretacji tokenów.
Integruje się z przeglądaniem bez opuszczania strony
Ekstrakcja działa z panelu bocznego zbudowanego na API Chrome Side Panel, pozwalając użytkownikom na rozpoczęcie przechwytywania jednym kliknięciem podczas przeglądania aktywnej strony. Projekt panelu utrzymuje workflow w kompaktowej i nieinwazyjnej formie, dzięki czemu projektanci mogą sprawdzać komponenty i uruchamiać ekstrakcje bez otwierania osobnego okna. Przechwytywanie wielostronicowe konsoliduje tokeny z przeglądanych stron w jednym pliku odniesienia dla spójności na poziomie projektu.
Utrzymuje przetwarzanie lokalnie w przeglądarce dla prywatności
Cała analiza odbywa się w przeglądarce użytkownika; rozszerzenie dokumentuje, że nie przesyła ani nie przechowuje danych zewnętrznie i nie wymaga konta. To przetwarzanie lokalne pasuje do profesjonalnych środowisk z surowymi zasadami prywatności, ponieważ wyodrębnione tokeny i wygenerowany plik DESIGN.md pozostają w środowisku klienta i mogą być eksportowane bezpośrednio do użytku wewnętrznego.
Przygotowuje pliki tokenów dla edytorów AI i użycia programatycznego
Narzędzie produkuje artefakty gotowe do AI, w tym AI Consolidation Prompt oraz eksportowalny plik Markdown z frontmatter YAML odpowiedni do programatycznego przetwarzania. Podpowiedź jest prezentowana, aby pomóc LLM, takim jak Claude i Cursor, zastosować zestaw tokenów, podczas gdy wyjście Markdown jest formatowane do integracji w potokach deweloperskich. Rozszerzenie działa na Chrome i innych przeglądarkach opartych na Chromium z powodu zależności od API.
Najlepiej dopasowane do zespołów, które chcą mieć powtarzalne wskazówki projektowe dla kodu wspomaganego przez AI
Rozszerzenie jest praktyczną opcją dla zespołów frontendowych i inżynierów promptów, którzy potrzebują powtarzalnego, czytelnego maszynowo odniesienia projektowego, aby zredukować wizualny dryf w UI generowanym przez LLM. Jednym z kompromisów jest to, że jego przyjęcie wymaga niewielkiej zmiany w przepływie pracy, aby zaimportować i wersjonować pliki tokenów w istniejących procesach budowy lub przeglądu. Dla projektów, które egzekwują wierność projektową, rozszerzenie daje skoncentrowany, świadomy prywatności sposób na skodyfikowanie zasad wizualnych.
