Wygeneruj DESIGN.md
z dowolnej strony

DESIGN.md to tekstowy dokument z design systemem, który agenci AI do kodowania czytają, aby generować spójne UI. To designowy odpowiednik AGENTS.md: zarówno ludzie, jak i agenci mogą go czytać, edytować i egzekwować. Ma dwie warstwy. Front matter w YAML zawiera czytelne dla maszyn tokeny projektowe, takie jak kolory, typografia i odstępy. Treść w Markdown wyjaśnia uzasadnienie designu.

DESIGN.md zwykle zawiera osiem kanonicznych sekcji w tej kolejności: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components oraz Do's and Don'ts. Front matter w YAML zapisuje dokładne wartości tokenów. Treść w Markdown wyjaśnia, jak i dlaczego je stosować. Nieistotne sekcje można pominąć, a dodatkowe sekcje dla danej dziedziny można dopisać.

Wklej adres dowolnej publicznej strony w Design Extractor i kliknij przycisk ekstrakcji. Zarejestruj się, kup pakiet kredytów, a każda ekstrakcja zużyje kilka kredytów. Wynikiem jest DESIGN.md, który możesz skopiować. Wrzuć DESIGN.md do repozytorium, a twój agent AI przeczyta go jako wzorzec stylu w Claude, Cursor, Copilot lub Stitch.

Z DESIGN.md skorzysta każde narzędzie AI do kodowania, które czyta pliki Markdown z katalogu projektu. Należą do nich Claude Code, Cursor, GitHub Copilot i inni asystenci kodowania z dostępem do plików. Umieść DESIGN.md w katalogu głównym projektu lub w folderze z dokumentacją i odwołaj się do niego w prompcie.

Z każdej publicznie dostępnej strony. Design Extractor analizuje działającą stronę tak, jak renderuje ją przeglądarka. Obsługuje strony statyczne, SPA i strony renderowane po stronie serwera. Strona musi być dostępna pod zwykłym adresem HTTP/HTTPS.

Niektóre strony, na przykład portale rządowe i lokalne sklepy, otwierają się tylko dla odwiedzających z określonych krajów. Jeśli ekstrakcja nie powiedzie się, bo strona odrzuciła wizytę, strona wyniku to pokaże i zaproponuje kraje, w których strona się wczytuje. Wybierz jeden, a strona zostanie wczytana przez przeglądarkę w tym kraju i wyodrębniona jak zwykle. Ekstrakcja z innego kraju kosztuje cenę trybu plus niewielką dopłatę, pokazaną przed startem, a za ekstrakcję, która mimo to się nie powiedzie, dostajesz zwrot. Ta sama opcja jest dostępna w rozszerzeniu Chrome i przez serwer MCP.

Tak. Rozszerzenie Design Extractor do Chrome korzysta z sesji, w której logujesz się na stronie: bez osobnego logowania. Jego okienko pokazuje saldo kredytów, a jedno kliknięcie wysyła stronę z bieżącej karty do tej samej ekstrakcji co formularz na stronie głównej, w trybie Lite lub Pro, za te same kredyty. Gotowy DESIGN.md otwiera się na stronie i pojawia się w Moich ekstrakcjach. W tej pierwszej wersji strona musi być publiczna: przechwytuje ją serwer, więc strony za logowaniem, na localhost lub w sieci prywatnej nie są jeszcze obsługiwane. Edycja i pobieranie nadal odbywają się na stronie.

Tak. Design Extractor jest też serwerem MCP. W claude.ai, Claude Desktop lub ChatGPT dodaj adres serwera jako konektor i zaloguj się na swoje konto; w Claude Code, Codex, Cursor lub Agent SDK połącz się jednym poleceniem (strona dokumentacji ma gotowy blok dla każdego z nich, z kluczem API ze strony konta tam, gdzie klient go wymaga) i poproś o wyodrębnienie strony. Agent uruchamia ekstrakcję, sprawdza ją po około minucie i dostaje tekst DESIGN.md do zapisania w repozytorium, za te same kredyty co na stronie. Claude Code i Codex mogą też zainstalować go jako plugin, który dodaje skill nakładający DESIGN.md na bazę kodu.