Rozszerzenie Design Extractor do Chrome
Rozszerzenie Design Extractor do Chrome zamienia stronę z bieżącej karty w DESIGN.md: plik design systemu z kolorami, typografią, odstępami, kształtami i zasadami komponentów strony, napisany dla agentów AI do kodowania, takich jak Claude Code, Cursor i Copilot. Jedno kliknięcie na pasku narzędzi, bez wklejania URL.
Instalacja jest darmowa. Każda ekstrakcja zużywa kredyty z twojego przedpłaconego salda, po tej samej cenie co na stronie.
Co robi
DESIGN.md z karty, na której jesteś
Wyodrębnia stronę z twojej karty
Jedno kliknięcie wysyła adres bieżącej karty do tej samej ekstrakcji co formularz na stronie głównej. Tryb Pro bada też kluczowe podstrony witryny, więc wynik odzwierciedla całą witrynę, a nie jeden ekran.
Tworzy pełny design system
Tokeny YAML dla kolorów, typografii, odstępów i kształtów oraz osiem sekcji formatu DESIGN.md: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components oraz Do's and Don'ts.
Receptura dla każdego komponentu
Komponenty wybrane ze strony, takie jak nagłówek, przyciski, pola i karty, trafiają do pliku jako destylowany HTML i CSS, sprawdzony z działającą stroną albo oznaczony z podaniem powodu.
To samo konto, te same kredyty
Rozszerzenie korzysta z sesji, którą masz na design-extractor.com. Bez drugiego logowania, a okienko pokazuje saldo kredytów.
Jak to działa
Trzy kroki od karty do DESIGN.md
Dodaj je do Chrome i przypnij
Zainstaluj je z Chrome Web Store i przypnij przez ikonę puzzla. Prosi o dostęp do design-extractor.com i aktywnej karty, do niczego więcej. Zaloguj się raz na stronie; okienko korzysta z tej sesji.
Otwórz publiczną stronę i kliknij Extract this page
Wybierz tryb w okienku i uruchom ekstrakcję. Postęp widać w okienku, a ty możesz dalej przeglądać strony.
Otwórz DESIGN.md
Open result przenosi cię do DESIGN.md na stronie. Plik jest też zapisany w Moich ekstrakcjach, gdzie możesz go skopiować, pobrać lub edytować, zanim wrzucisz go do repozytorium.
Szczegóły instalacji, logowania, kredytów i obecnych ograniczeń znajdziesz w przewodniku konfiguracji rozszerzenia. Wolisz wkleić URL? Ta sama ekstrakcja działa na stronie głównej.
Porównanie
Co dodaje względem DESIGN.md Style Extractor od TypeUI
DESIGN.md Style Extractor od TypeUI to darmowe rozszerzenie open source, które wypełnia własny szablon TypeUI stylami strony z twojej karty. Rozszerzenie Design Extractor dodaje:
DESIGN.md zgodny ze specyfikacją Google
Tokeny w front matter YAML i kanoniczne sekcje w kolejności ze specyfikacji. Sprawdź dowolny plik darmowym Walidatorem DESIGN.md.
Receptura dla każdego wybranego komponentu
Destylowany HTML i CSS dla nagłówka, przycisków, pól, kart i innych, każdy sprawdzony z działającą stroną przez dopasowanie strukturalne i porównanie pikseli albo oznaczony z podaniem powodu.
Strony z ograniczeniami regionalnymi
Gdy strona blokuje odwiedzających z niektórych krajów, ekstrakcja może przejść przez przeglądarkę w innym kraju. Ekstrakcja z innego kraju kosztuje cenę Pro powiększoną o dopłatę za kraj, łącznie 16 kredytów (w tym dopłata: 6).
To samo konto i kredyty co na stronie
Każda ekstrakcja zapisuje się w Moich ekstrakcjach, gdzie możesz ją edytować, skopiować lub pobrać, a twój agent może ją odczytać przez MCP.
Sprawdzono na podstawie wersji 0.4.0, README i kodu źródłowego oraz wpisu w Chrome Web Store.
| Aspekt | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| Jak odczytuje stronę | Nasze serwery otwierają adres strony w przeglądarce i analizują wyrenderowaną stronę. Tryb Pro bada też kluczowe podstrony witryny. | Odczytuje obliczone style do 280 widocznych elementów strony otwartej w twojej karcie, wewnątrz twojej przeglądarki. |
| Czego trzyma się wynik | Specyfikacji DESIGN.md od Google: tokeny w front matter YAML i kanoniczne sekcje w kolejności ze specyfikacji. | Własnego szablonu DESIGN.md od TypeUI (Mission, Brand, Style Foundations, Rules i inne), bez front matter YAML, albo pliku SKILL.md. |
| Komponenty | Receptura z destylowanego HTML i CSS dla każdego komponentu wybranego ze strony, sprawdzona z działającą stroną przez dopasowanie strukturalne i porównanie pikseli albo oznaczona z podaniem powodu. | Liczba komponentów każdego typu w ramach ogólnych wskazówek dotyczących komponentów. Wynik nie jest porównywany z wyrenderowaną stroną. |
| Gdzie trafia wynik | Zapisywany w Moich ekstrakcjach na stronie, gdzie możesz go edytować, skopiować lub pobrać. | Pokazywany w okienku, gdzie możesz go skopiować lub pobrać jako plik. |
| Jakie strony może odczytać | Tylko strony publiczne. Strony za logowaniem, na localhost lub w sieci prywatnej nie są jeszcze obsługiwane. | Stronę otwartą w twojej karcie, w tym strony, na których masz aktywną sesję, bo odczytuje tę stronę bezpośrednio. |
| Cena | Instalacja jest darmowa. Ekstrakcje zużywają przedpłacone kredyty. | Darmowe i open source (MIT). |
Wybierz rozszerzenie Design Extractor, jeśli potrzebujesz DESIGN.md zgodnego ze specyfikacją Google, z recepturą dla każdego komponentu sprawdzoną z działającą stroną, zapisanego na twoim koncie. Pełne porównanie znajdziesz na stronie TypeUI vs Design Extractor.
FAQ
Pytania o rozszerzenie Chrome
Krótkie odpowiedzi o instalacji rozszerzenia, o tym, co wysyła, i ile kosztuje.
Instalacja jest darmowa. Każda ekstrakcja zużywa kredyty z twojego przedpłaconego salda, po tej samej cenie co na stronie. Pakiety zaczynają się od 5 USD za pulę 50 kredytów, nie ma subskrypcji, a kredyty nigdy nie wygasają. Jeśli ekstrakcja nie powiedzie się po naszej stronie, kredyty są zwracane.
Tylko adres bieżącej karty i wybrany tryb, gdy klikniesz Extract this page. Nigdy nie czyta treści strony, nie działa w tle na odwiedzanych stronach i nie zawiera analityki.
Jeszcze nie. Nasze serwery przechwytują stronę z jej adresu, więc strona musi być publiczna. Strony za logowaniem, na localhost lub w sieci prywatnej nie są obsługiwane. Rozszerzenie jest dostępne tylko dla Chrome.
Nie. Okienko korzysta z sesji, w której zalogowano się na design-extractor.com. Po wylogowaniu pokazuje przycisk Sign in, który otwiera stronę. Wylogowanie w okienku wylogowuje cię też ze strony.
Każdy agent, który czyta pliki z twojego repozytorium. Zapisz DESIGN.md obok kodu i wskaż go Claude Code, Cursor, GitHub Copilot, Codex, Windsurf lub Google Stitch jako wzorzec stylu dla nowego UI.
Rozszerzenia takie jak DESIGN.md Style Extractor od TypeUI odczytują obliczone style w twojej przeglądarce i wypełniają wartościami własny szablon. Design Extractor tworzy DESIGN.md zgodny ze specyfikacją Google, z recepturą HTML i CSS dla każdego komponentu wybranego ze strony, sprawdzoną z działającą stroną albo oznaczoną z podaniem powodu, i zapisuje go na twoim koncie.
Wygeneruj DESIGN.md z karty, na której jesteś
Instalacja jest darmowa. Każda ekstrakcja zużywa kredyty z twojego przedpłaconego salda, po tej samej cenie co na stronie.