TypeUI vs Design Extractor
DESIGN.md Style Extractor od TypeUI to darmowe rozszerzenie Chrome, które odczytuje style strony z twojej karty i wypełnia własny szablon DESIGN.md od TypeUI. Plik Design Extractor jest zgodny ze specyfikacją DESIGN.md od Google, a każdy komponent wybrany ze strony trafia do niego jako receptura HTML i CSS, którą twój agent AI do kodowania może odtworzyć. Każda receptura jest sprawdzana z działającą stroną albo oznaczana z podaniem powodu. Działa też na stronach, które odpowiadają tylko odwiedzającym z określonych krajów.
Nie znasz tego formatu? Najpierw przeczytaj, czym jest DESIGN.md.
Sprawdzono na podstawie: README i kod źródłowy rozszerzenia, jego wpis w Chrome Web Store i README od TypeUI. Oferty i ceny się zmieniają, więc przed decyzją sprawdź ich stronę.
Dlaczego Design Extractor
Zgodny ze specyfikacją DESIGN.md od Google
Front matter w YAML używa tylko właściwości zdefiniowanych w specyfikacji, bez własnych kluczy najwyższego poziomu. Kanoniczne sekcje występują w kolejności ze specyfikacji, od Overview do Do's and Don'ts. Wpisy komponentów we front matter używają tylko ośmiu właściwości ze specyfikacji, z dosłownymi wartościami. Sprawdź dowolny plik darmowym Walidatorem DESIGN.md.
Receptura dla każdego komponentu wybranego ze strony
Nagłówek, stopka, przyciski, pola, karty i inne komponenty wybrane ze strony trafiają do pliku jako receptury: destylowany HTML i CSS z dosłownymi wartościami, w sekcji Components pliku DESIGN.md. Każda receptura wymienia swoje części oraz stany hover i focus zaobserwowane na stronie, aby twój agent AI do kodowania mógł odtworzyć komponent, zamiast go zgadywać.
Weryfikacja z działającą stroną
Każda receptura jest renderowana osobno i sprawdzana z działającą stroną: przez dopasowanie strukturalne wyrenderowanych części do tego, co zmierzono na stronie, oraz porównanie pikseli ze świeżym przechwyceniem prawdziwego elementu. Receptura, która nie przejdzie, jest budowana od nowa i sprawdzana ponownie. Taka, która nadal nie przechodzi, jest oznaczana z podaniem powodu i nigdy nie trafia do pliku jako zweryfikowana. Strona wyniku pokazuje, jak dokładnie komponenty pasują i jaka część kolorów oraz stylów tekstu strony jest pokryta: zobacz Stripe w galerii.
Działa na stronach z ograniczeniami regionalnymi
Niektóre strony odpowiadają tylko odwiedzającym z określonych krajów. Gdy ekstrakcja nie powiedzie się z tego powodu, strona wyniku oferuje wybór kraju, z krajami, z których strona się wczytuje, na początku listy, i uruchamia tę samą ekstrakcję przez przeglądarkę w wybranym kraju. Ekstrakcja z innego kraju kosztuje cenę Pro powiększoną o dopłatę za kraj, łącznie 16 kredytów (w tym dopłata: 6). Jeśli ekstrakcja się nie powiedzie, zwracamy ci kredyty.
Obok siebie
| TypeUI | Design Extractor | |
|---|---|---|
| Zgodność ze specyfikacją | Brak w ofercie | Zgodny ze specyfikacją DESIGN.md od Google: front matter tylko z właściwościami ze specyfikacji i bez własnych kluczy najwyższego poziomu, kanoniczne sekcje w kolejności ze specyfikacji, a wpisy komponentów ograniczone do ośmiu właściwości ze specyfikacji, z dosłownymi wartościami. |
| Receptury komponentów | Komponenty pojawiają się jako liczba na typ (przyciski, linki, pola, karty, nawigacja, listy, tabele) w ramach ogólnych wskazówek dotyczących komponentów. | Każdy komponent wybrany ze strony, taki jak nagłówek, stopka, przyciski, pola i karty, trafia do pliku jako receptura: destylowany HTML i CSS w sekcji Components, aby twój agent AI do kodowania mógł go odtworzyć. |
| Weryfikacja z działającą stroną | Brak w ofercie | Tak. Każda receptura jest renderowana osobno i sprawdzana z działającą stroną: przez dopasowanie strukturalne jej części i porównanie pikseli. Komponent, który nie przejdzie, jest oznaczany z podaniem powodu i nigdy nie trafia do pliku jako zweryfikowany. |
| Strony z ograniczeniami regionalnymi | Brak w ofercie | Tak. Gdy strona blokuje odwiedzających z niektórych krajów, nieudana ekstrakcja oferuje wybór kraju, z krajami, z których strona się wczytuje, na początku listy, i uruchamia tę samą ekstrakcję przez przeglądarkę w tym kraju. Ekstrakcja z innego kraju kosztuje cenę Pro powiększoną o dopłatę za kraj, łącznie 16 kredytów (w tym dopłata: 6). |
| Czym jest | DESIGN.md Style Extractor, darmowe rozszerzenie Chrome od Bergside SRL, twórcy TypeUI. Wersja 0.4.0, około 40 000 użytkowników w Chrome Web Store, open source na licencji MIT. | Generator: podaj mu publiczny URL na stronie, przez MCP lub z rozszerzenia Chrome i otrzymaj DESIGN.md tej strony. |
| Czego trzyma się wynik | Własnego szablonu DESIGN.md od TypeUI: Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules i inne, bez front matter w YAML. Może też zapisać SKILL.md. | Specyfikacji DESIGN.md od Google: tokeny we front matter YAML i kanoniczne sekcje w kolejności ze specyfikacji. |
| Jak odczytuje stronę | Odczytuje obliczone style do 280 widocznych elementów strony z twojej karty, wewnątrz twojej przeglądarki, bez żądań sieciowych. | Nasze serwery otwierają URL w przeglądarce i analizują wyrenderowaną stronę. Tryb Pro bada też kluczowe podstrony witryny. |
| Jakie strony może odczytać | Stronę otwartą w twojej karcie, w tym strony, na których masz aktywną sesję. | Tylko strony publiczne. Strony za logowaniem, na localhost lub w sieci prywatnej nie są jeszcze obsługiwane. |
| Gdzie trafia wynik | Pokazywany w okienku, gdzie możesz go skopiować lub pobrać. Przycisk Quick install zapisuje SKILL.md w folderze skilli Claude Code, Codex lub Cursor wybranego projektu. | Zapisywany w Moich ekstrakcjach na twoim koncie, gdzie możesz go edytować, skopiować lub pobrać. Twój agent może go odczytać przez MCP. |
| Cena | Darmowe. Bez konta i płatności. | Przedpłacone kredyty, bez subskrypcji. Pakiety od 5 USD za pulę 50 kredytów; ekstrakcja Pro kosztuje 10 kredytów. Galeria i darmowe narzędzia nic nie kosztują. |
| Dostęp dla agentów | Rozszerzenie działa ze swojego okienka. Osobne CLI i hostowany serwer MCP od TypeUI udostępniają wyselekcjonowane skille designowe i prompty UI. | Zdalny serwer MCP, którego narzędzie ekstrakcji przyjmuje dowolny URL, z Claude Code, claude.ai, ChatGPT, Codex, Cursor i innych klientów. |
Co oferuje TypeUI
- Darmowe rozszerzenie Chrome open source (MIT) z około 40 000 użytkowników w Chrome Web Store, bez konta i płatności.
- Działa w całości w twojej przeglądarce na stronie z twojej karty, w tym na stronach, na których masz aktywną sesję.
- Wartości typografii, kolorów, odstępów, zaokrągleń, cieni i animacji w DESIGN.md we własnym formacie TypeUI albo w SKILL.md.
- Skopiuj lub pobierz plik z okienka albo zainstaluj SKILL.md przez Quick install w projekcie Claude Code, Codex lub Cursor.
- Poza rozszerzeniem TypeUI oferuje wyselekcjonowane skille designowe, prompty UI, otwartoźródłowe CLI i hostowany serwer MCP, a także wersję Pro z rozszerzonymi plikami skilli designowych, promptami UI dla układów i prywatną społecznością na Discordzie.
Czym się różnią
Rozszerzenie TypeUI podsumowuje wartości stylów znalezione na jednej stronie i dodaje ogólne wskazówki ze swojego szablonu. Design Extractor renderuje stronę, wybiera jej komponenty i pisze recepturę dla każdego z nich, a potem sprawdza każdą recepturę z działającą stroną, więc twój agent wie, które komponenty może odtworzyć tak, jak są zapisane, a które zostały oznaczone, wraz z powodem. Zobacz to na przykładzie Stripe w galerii.
Wolisz zaczynać od karty, na której jesteś? Rozszerzenie Chrome Design Extractor wysyła ją do tej samej ekstrakcji, z tym samym kontem i kredytami. Twój agent może też uruchomić ekstrakcję i odczytać wynik przez serwer MCP. Więcej gotowych plików zobaczysz w galerii.
Jak przejść z TypeUI
- Wklej URL strony na stronie głównej Design Extractor albo kliknij Extract this page w rozszerzeniu Chrome i uruchom ekstrakcję Pro.
- Zapisz wynik jako DESIGN.md w katalogu głównym repozytorium, zastępując stary plik. Twoje odwołanie w AGENTS.md lub CLAUDE.md nadal działa.
- Jeśli użyto Quick install, usuń folder skilla design-system zapisany przez TypeUI i zachowaj odwołanie do DESIGN.md.
- Aby agent sam uruchamiał ekstrakcje, połącz serwer MCP.
Werdykt
Wybierz Design Extractor, jeśli potrzebujesz DESIGN.md zgodnego ze specyfikacją Google, z recepturą dla każdego komponentu wybranego ze strony, sprawdzoną z działającą stroną albo oznaczoną z podaniem powodu, zapisanego na twoim koncie. Obsługuje strony z ograniczeniami regionalnymi. Twój agent może go uruchamiać przez MCP. Rozszerzenie TypeUI jest darmowe i odczytuje strony, na których masz aktywną sesję, co pokazuje tabela.
Inne porównania
getdesign.md vs Design Extractor
Wyselekcjonowana kolekcja gotowych plików DESIGN.md w porównaniu z DESIGN.md zgodnym ze specyfikacją, z recepturami komponentów sprawdzonymi z działającą stroną, z dowolnego URL.
designmd.me vs Design Extractor
Dwa generatory DESIGN.md z URL porównane pod kątem zgodności ze specyfikacją, receptur komponentów, sprawdzania z działającą stroną i ceny.
Refero Styles vs Design Extractor
Duża, darmowa biblioteka stylów stron w porównaniu z DESIGN.md zgodnym ze specyfikacją, z recepturami komponentów sprawdzonymi z działającą stroną, z dowolnego URL.
FAQ
TypeUI vs Design Extractor: pytania
Krótkie odpowiedzi o TypeUI i Design Extractor, sprawdzone 2026-10-20.
Tak. W dniu 2026-10-20 rozszerzenie było darmowe i open source na licencji MIT, bez konta i płatności. Design Extractor nie jest darmowy: ekstrakcje zużywają przedpłacone kredyty, pakiety od 5 USD za pulę 50 kredytów, a ekstrakcja Pro kosztuje 10 kredytów. Galeria i darmowe narzędzia nic nie kosztują.
Nie. Plik stosuje otwartoźródłowy format TypeUI DESIGN.md, z sekcjami takimi jak Mission, Brand, Style Foundations i Rules, a wersja 0.4.0 nie zapisuje front matter w YAML, więc plik nie jest zgodny ze specyfikacją DESIGN.md od Google. Design Extractor jest zgodny ze specyfikacją Google, a darmowy Walidator DESIGN.md sprawdza zgodność z nią dowolnego pliku.
DESIGN.md zgodny ze specyfikacją Google, z tokenami we front matter i każdym komponentem wybranym ze strony, takim jak nagłówek, stopka, przyciski, pola i karty, jako recepturą z destylowanego HTML i CSS. Każda receptura jest sprawdzana z działającą stroną przez dopasowanie strukturalne i porównanie pikseli, a taka, która nie przejdzie, jest oznaczana z podaniem powodu.
Tak. Odczytuje stronę z twojej karty wewnątrz twojej przeglądarki, więc działa na stronach, na których masz aktywną sesję. Design Extractor odczytuje tylko strony publiczne: strony za logowaniem, na localhost lub w sieci prywatnej nie są jeszcze obsługiwane.
Design Extractor może uruchomić ekstrakcję z innego kraju. Gdy ekstrakcja nie powiedzie się z tego powodu, strona wyniku oferuje wybór kraju, z krajami, z których strona się wczytuje, na początku listy, i uruchamia tę samą ekstrakcję przez przeglądarkę w tym kraju. Ekstrakcja z innego kraju kosztuje cenę Pro powiększoną o dopłatę za kraj, łącznie 16 kredytów (w tym dopłata: 6). Jeśli ekstrakcja się nie powiedzie, zwracamy ci kredyty.
Tak. Oba tworzą DESIGN.md, który leży w twoim repozytorium, więc konfiguracja agenta się nie zmienia. Przepuść stronę przez Design Extractor, na stronie lub w jego rozszerzeniu Chrome, i podmień plik. Jeśli użyto Quick install, usuń folder skilla design-system zapisany przez TypeUI i zachowaj odwołanie do DESIGN.md.
Wygeneruj DESIGN.md dla strony, której potrzebujesz
Wklej dowolny publiczny URL. Tryb Pro bada kluczowe podstrony witryny i zwraca DESIGN.md zgodny ze specyfikacją, z recepturami komponentów sprawdzonymi z działającą stroną.