Poradnik

Przebudowujesz stronę? Najpierw wyodrębnij jej design system

Przebudowa, rebranding czy przejście na nowy framework to moment, w którym design system po cichu się gubi. Kolory żyją w starym CSS, skala typograficzna w czyjejś głowie, a stany przycisków w komponencie, którego nikt nie chce otwierać.

Zanim cokolwiek zmienisz, wyodrębnij obecną stronę jako DESIGN.md. Dostajesz spisany punkt odniesienia dla nowej wersji, który przeczyta zarówno twój zespół, jak i twój agent AI do kodowania.

Dla zespołów planujących przebudowę, rebranding lub migrację. Aktualizacja: .

Co zyskasz

  • DESIGN.md obecnej strony, zacommitowany przed pierwszą linią przebudowy.
  • Jasny obraz tego, co plik uchwycił, a czego nie.
  • Listę rzeczy do ręcznego sprawdzenia: zasoby, stany, animacje, breakpointy i strony za logowaniem.
  • Sposób na porównanie nowej strony ze starą po zakończeniu prac.

Kiedy to robić

  • Zmiana frameworka. Ten sam wygląd, nowy stack. DESIGN.md pozwala agentowi AI do kodowania odtworzyć komponenty z dokładnymi wartościami, zamiast czytać stare arkusze stylów.
  • Rebranding. Najpierw zapisz stary system, aby dokładnie wiedzieć, które kolory, fonty i zaokrąglenia się zmieniają, a które zostają.
  • Przekazanie projektu. Nowa agencja lub nowy zespół dostaje jeden plik opisujący, jak strona wygląda dziś, zamiast wycieczki po bazie kodu.

Kroki

  1. Wyodrębnij działającą stronę, zanim cokolwiek zmienisz

    Wklej produkcyjny URL na stronie głównej Design Extractor i uruchom ekstrakcję Pro. To musi być strona publiczna: ekstrakcja wczytuje ją jak odwiedzający, więc localhost i strony za logowaniem nie działają.

  2. Zacommituj go jako punkt odniesienia

    Zapisz go jako DESIGN.md w nowym repozytorium i zacommituj przed startem przebudowy. Od teraz zapisuje, jak strona wyglądała tego dnia.

  3. Przeczytaj sekcję Known Gaps

    Koniec pliku wymienia to, czego ekstrakcja nie mogła uchwycić. Każda pozycja to coś do ręcznego sprawdzenia.

  4. Sprawdź, czego DESIGN.md nie może zawierać

    Zasoby, ekrany po zalogowaniu, animacje i inne pozycje poniżej. Dopisuj uwagi do pliku na bieżąco.

  5. Buduj na jego podstawie

    Wskaż plik agentowi AI do kodowania, jak pokazuje poradnik dla Claude Code i Cursor, i porównuj z nim każdy nowy ekran.

Co plik uchwycił dla Stripe

Aby zobaczyć, co dostajesz, spójrz na DESIGN.md Stripe w galerii. Jego ekstrakcja Pro przechwyciła 5 stron z stripe.com: /nl, /nl/pricing, /nl/products, /nl/newsroom/news/stripe-openai-instant-checkout, /nl/contact/sales. Ekstrakcja twojej własnej strony daje taką samą strukturę.

Kolory21 tokenów, każdy z rolą
Typografia17 stylów, fonty: Sohne
Zaokrąglenia10 tokenów
Odstępy62 tokeny
Komponenty71 receptur w HTML i CSS. Przeszły sprawdzenie z działającą stroną: 44. Oznaczone lub niemożliwe do sprawdzenia, każda z podaniem powodu: 27.
SekcjeOverview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps

Czego według pliku brakuje

Plik uczciwie mówi o swoich ograniczeniach. Pierwsze pozycje (5) z 11 pozycji w sekcji Known Gaps:

Z końca DESIGN.md Stripe, w oryginalnym brzmieniu.
## Known Gaps

- **Many recipes did not reproduce exactly.** `button-primary` (84% pixel match), `card` (78%), `card-2` (94%), `promo-banner` (77%) and `skip-link` (0%; it is visually hidden until focused) are approximations. So are several header and footer recipes (`header-landing`, `header-inner-2` timed out, `footer-landing`, `footer-inner`, `footer-inner-2`).
- **Some recipes could not be judged at all.** `stat` and `stat-2` were not verifiable, because page media covered most of the element.
- **Some elements were never visible.** `footer-landing`, `header-inner` and `logo-strip-item` were not visible when verification ran, so their values come from computed styles only.
- **No section rhythm was measured.** `sectionRhythm` is empty, so vertical spacing between page sections and the inner padding of large cards is described only qualitatively.
- **No `base` spacing step was published.** The evidence frequency (4px, 8px, 12px, 16px and 24px most common) suggests a 4px-derived grid, but it is not a verified token.

Wyodrębnione z publicznej strony Stripe, to nie są oficjalne wytyczne marki. Przeczytaj pełny DESIGN.md Stripe

Twój plik będzie miał własną listę. Traktuj ją jako listę zadań do sprawdzeń poniżej.

Co sprawdzić ręcznie

ElementDlaczego plik może go pominąćCo zrobić
Logo, ikony, obrazyDESIGN.md opisuje style, a nie pliki.Wyeksportuj je z obecnej bazy kodu i przenieś do nowej.
Ekrany po zalogowaniuEkstrakcja widzi tylko strony publiczne.Spisz, czym aplikacja różni się od strony marketingowej, na przykład gęstszymi tabelami lub panelem bocznym.
StanyHover i focus są zapisane tam, gdzie ekstrakcja je zobaczyła; stany pressed, disabled i błędu często nie.Przeklikaj formularze i przyciski i zanotuj brakujące stany.
AnimacjePrzejścia i animacje są co najwyżej opisane słowami.Zanotuj czasy trwania i krzywe easing z obecnego CSS.
BreakpointyEkstrakcja przechwytuje szerokość desktopową i mobilną.Sprawdź układ na tablecie i zanotuj, gdzie zmieniają się kolumny.
Szablony spoza próbkiTryb Pro bada około pięciu kluczowych podstron.Każdą stronę, która wygląda inaczej, na przykład dokumentację czy koszyk, wyodrębnij osobno.

Po przebudowie

Gdy nowa strona już działa, wyodrębnij ją ponownie i porównaj oba pliki. Niezmienione tokeny oznaczają, że wygląd przetrwał; zmienione to albo zaplanowany rebranding, albo odchylenie do poprawienia.

Każdy diff tekstowy pokaże zmienione wartości hex i rozmiary. Pakiet @google/design.md od Google dodaje polecenie diff, które porównuje dwie wersje token po tokenie; artykuł o DESIGN.md opisuje format i narzędzia. Jeśli po drodze edytujesz plik ręcznie, sprawdź go Walidatorem DESIGN.md.

FAQ

Wyodrębnij design system przed przebudową: pytania

Krótkie odpowiedzi na pytania, które ludzie zadają, zanim spróbują.

Nie. DESIGN.md to plik tekstowy opisujący style: kolory, typografię, odstępy, zaokrąglenia i receptury komponentów w HTML i CSS. Wyeksportuj logo, ikony, ilustracje i zdjęcia z obecnej bazy kodu lub plików projektowych i trzymaj je obok.

Nie. Ekstrakcja wczytuje stronę z jej URL tak jak odwiedzający, więc strony za logowaniem, na localhost lub w sieci prywatnej nie są obsługiwane. Wyodrębnij publiczną stronę i zapisz, czym różnią się ekrany po zalogowaniu.

Tryb Pro bada kluczowe podstrony witryny, około pięciu, i łączy to, co znajdzie, w jeden DESIGN.md. Jeśli ważnego szablonu, takiego jak strona dokumentacji czy koszyk, nie ma wśród nich, wyodrębnij też URL tej strony i porównaj oba pliki.

Gdy nowa strona będzie już działać, wyodrębnij ją i porównaj oba pliki. Pakiet @google/design.md od Google ma polecenie diff, które porównuje dwie wersje DESIGN.md token po tokenie, a każdy diff tekstowy pokaże zmienione wartości hex i rozmiary.

Zapisz swoją stronę, zanim ją zmienisz

Wklej produkcyjny URL. Ekstrakcja Pro bada kluczowe podstrony i zwraca jeden DESIGN.md.

Wygeneruj DESIGN.md obecnej strony

Powiązane poradniki

Zobacz wszystkie poradniki DESIGN.md