Refero Styles vs Design Extractor
Design Extractor tworzy DESIGN.md z dowolnego publicznego URL, który mu podasz. Plik 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.
Refero Styles to duża, darmowa biblioteka stylów stron, każdy z kolorami, typografią, odstępami i komponentami w kilku formatach. Nie znasz tego formatu? Przeczytaj, czym jest DESIGN.md.
Sprawdzono na podstawie: styles.refero.design, jedną z jego stron stylów i jego mapę stron stylów. 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
| Refero Styles | 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 | Każdy komponent jest opisany prozą, z rolą i wymiarami, bez HTML. | 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 | Darmowa biblioteka stylów stron, w wersji beta, od Refero, produktu z referencjami UI pod adresem refero.design. | Generator: podajesz publiczny URL, a on zwraca DESIGN.md tej strony. |
| Dowolna strona na żądanie | Brak w ofercie | Tak. Wklej dowolny publiczny URL, a ekstrakcja startuje od razu. |
| Zakres | Liczba stron stylów wymienionych w jego mapie stron stylów: 1342. | Dowolna publiczna strona oraz galeria wcześniej wyodrębnionych marek. |
| Formaty na styl | DESIGN.md (compact i extended), Tailwind v4, zmienne CSS i tokeny projektowe. | Jeden DESIGN.md, z tokenami we front matter i recepturami komponentów w HTML i CSS. |
| Cena | Przeglądanie i kopiowanie za darmo. | Przedpłacone kredyty, bez subskrypcji. Pakiety od 5 USD za pulę 50 kredytów; ekstrakcja Pro kosztuje 10 kredytów. |
| Aktualność | Migawki. Styl Apple został wyodrębniony 2026-09-20. | Tworzony z działającej strony w chwili uruchomienia. |
| Dostęp dla agentów | Każda strona stylu linkuje do MCP od Refero dla Claude, ChatGPT, Cursor, Codex i innych. | Zdalny serwer MCP, którego narzędzie ekstrakcji przyjmuje dowolny URL, z Claude Code, claude.ai, ChatGPT, Codex, Cursor i innych klientów. |
| Rozszerzenie przeglądarki | Brak w ofercie | Rozszerzenie Chrome, które wyodrębnia kartę, na której jesteś. |
Co oferuje Refero Styles
- Darmowa biblioteka stylów stron, którą można przeglądać według nastroju, na przykład SaaS w trybie ciemnym czy układy redakcyjne.
- Kilka formatów na styl: DESIGN.md (compact i extended), Tailwind v4, zmienne CSS i tokeny projektowe.
- Linki do MCP od Refero dla Claude, ChatGPT, Cursor, Codex i innych.
Biblioteka czy dowolny URL na żądanie
Biblioteka obejmuje strony, które ktoś już do niej dodał. Design Extractor odczytuje wskazaną przez ciebie działającą stronę, więc obejmuje twój własny produkt, klienta, konkurenta czy niszową markę, tak jak wyglądają dziś.
Wklej URL na stronie głównej albo zleć to agentowi przez serwer MCP. Gotowe pliki, z ich recepturami i wynikami sprawdzania, zobaczysz w galerii.
Jak przejść z Refero Styles
- Wklej URL strony na stronie głównej Design Extractor i uruchom ekstrakcję Pro.
- Zapisz wynik jako DESIGN.md w katalogu głównym repozytorium i zachowaj odwołanie w AGENTS.md lub CLAUDE.md. Ręczne zmiany sprawdź darmowym Walidatorem DESIGN.md.
- Albo zleć to agentowi: połącz serwer MCP i poproś go o wyodrębnienie strony.
Werdykt
Wybierz Design Extractor, jeśli potrzebujesz DESIGN.md dla dowolnej publicznej strony, a nie tylko stron z biblioteki, z recepturami komponentów sprawdzonymi z działającą stroną. Odczytuje stronę taką, jak wygląda teraz, i jest zgodny ze specyfikacją Google, z recepturą dla każdego komponentu wybranego ze strony, oznaczoną z podaniem powodu, gdy nie przejdzie. Obsługuje strony z ograniczeniami regionalnymi. Twój agent może go uruchamiać przez MCP.
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.
TypeUI vs Design Extractor
Darmowe rozszerzenie Chrome od TypeUI, które wypełnia własny szablon stylami z twojej karty, w porównaniu z DESIGN.md zgodnym ze specyfikacją, z recepturami komponentów sprawdzonymi z działającą stroną.
FAQ
Refero Styles vs Design Extractor: pytania
Krótkie odpowiedzi o Refero Styles i Design Extractor, sprawdzone 2026-10-20.
Tak. W dniu 2026-10-20 przeglądanie i kopiowanie stylów na styles.refero.design było darmowe. Jego strony zawierają linki do MCP od Refero na refero.design.
Nie. Refero Styles nie daje możliwości przesłania własnego URL: wybierasz z jego biblioteki. Design Extractor tworzy DESIGN.md z dowolnego publicznego URL, gdy go uruchomisz.
Nie. Design Extractor tworzy jeden plik: DESIGN.md zgodny ze specyfikacją Google, z tokenami we front matter i każdym komponentem wybranym ze strony jako recepturą z destylowanego HTML i CSS. Twój agent AI do kodowania go czyta i pisze style, których używa twój projekt.
Każda receptura komponentu jest renderowana osobno i porównywana z działającą stroną: przez dopasowanie strukturalne jej części do tego, co zmierzono na stronie, oraz porównanie pikseli ze świeżym przechwyceniem prawdziwego elementu. Receptura, która nie przejdzie, jest oznaczana z podaniem powodu i nigdy nie trafia do pliku jako zweryfikowana.
W dniu 2026-10-20 jego mapa stron stylów zawierała wpisy dla 1342 stron stylów.
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.
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ą.