Nie masz projektanta? Pożycz sprawdzony design system dla swojej aplikacji

Jak wybrać stronę wzorcową#

Strona, od której pożyczasz, w dużej mierze decyduje o tym, jak będzie się odbierać twoją aplikację, więc poświęć na to dziesięć minut. Dobra strona wzorcowa ma te cechy:

• Ten sam rodzaj produktu. Dashboard dobrze pożycza od innego dashboardu, a nie od sklepu modowego.
• Podobna gęstość. Jeśli twoja aplikacja to formularze i tabele, wybierz stronę z formularzami i tabelami, a nie z jednym dużym hero.
• Jeden wyraźny kolor akcji. Gdy jeden kolor oznacza to, co można kliknąć, rebranding sprowadza się do podmiany tej jednej rodziny kolorów.
• Czytelna typografia. Otwórz stronę na telefonie i przeczytaj akapit. Jeśli czyta się wygodnie, warto wziąć skalę typograficzną.
• Jasna lub ciemna, tak jak chcesz. Zamiana systemu projektowanego najpierw jako ciemny na jasny to redesign, a nie drobna poprawka.
• Wygląd, który nie jest samą marką. Jeśli rozpoznasz stronę po samym kolorze, trzeba by zmienić w niej za dużo.

Galerię DESIGN.md można filtrować według kategorii, co ułatwia szybkie porównanie kilku kandydatów.

Kroki#

1. 1

   Wybierz dwie lub trzy strony

   Kieruj się cechami powyżej. Zrzuty ekranów, które ci się podobają, pomogą później podjąć decyzję.

2. 2

   Wygeneruj DESIGN.md swojej ulubionej strony

   Skopiuj go ze strony galerii albo wklej URL na stronie głównej Design Extractor i uruchom ekstrakcję Pro. Tryb Pro bada kluczowe podstrony witryny i zwraca jeden plik z kolorami, typografią, odstępami, zaokrągleniami i recepturami komponentów. Nie znasz tego formatu? Przeczytaj, czym jest DESIGN.md.

3. 3

   Zrób go swoim

   Zmień rodzinę koloru marki, fonty, jeśli są komercyjne, nazwę i ton. Prompt poniżej zrobi to za jednym razem.

4. 4

   Umieść go w repozytorium i wskaż agentowi

   Zapisz go jako DESIGN.md w katalogu głównym repozytorium. Poradnik dla Claude Code i Cursor zawiera odwołanie do dodania.

5. 5

   Sprawdź go

   Wklej edytowany plik do darmowego Walidatora DESIGN.md. Sprawdza strukturę i oznacza kolory tekstu o zbyt niskim kontraście.

Przykład w praktyce: Notion#

Załóżmy, że podoba ci się styl Notion. Oto jej design system zapisany w DESIGN.md z galerii oraz to, co zachować, a co zmienić.

Co zachować, a co zmienić

### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.

Zrób go swoim jednym promptem#

Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.

Dlaczego nie kopiować marki w całości#

Pliki użyte w tym poradniku#

Dobre punkty wyjścia z galerii. Każda strona zawiera pełny DESIGN.md, jego paletę i próbki typografii.

• 
  Oprogramowanie i SaaS · Productivity & Notes

  Notion

  Strona główna marketingowa Notion łączy głęboko granatową sekcję hero (#02093a) z jasnym tłem treści (#f6f5f4), stosując niestandardowy krój pisma NotionInter we wszystkich rolach tekstowych. Układ opiera się na siatce 12-kolumnowej z odstępami 28px, a język zaokrągleń łączy dwie wartości: 8px dla kart i 9999px dla pigułek. Elementy pływające otrzymują wielowarstwowy, stopniowo narastający system cieni. Niebieski marki (#2537b1) wyznacza przyciski wezwania do działania i akcenty, a semantyczna skala szarości (od gray-200 do gray-900) porządkuje hierarchię tekstu i powierzchni.

• 
  Podróże, transport i logistyka

  Airbnb

  Design system Airbnb opiera się na jednym zastrzeżonym zmiennym kroju pisma (Airbnb Cereal VF) i niemal monochromatycznej palecie neutralnych barw, z głębokim węglem (#222222) i jasnymi szarościami jako podstawą. Firmowy koral-róż „Rausch" (#ff385c) jest zarezerwowany wyłącznie dla głównych przycisków wezwania do działania i logo. Układ to responsywna siatka kart ze zdjęciami, z dużym udziałem obrazu w stosunku do tekstu, miękkimi, 20-pikselowymi zaokrągleniami rogów kart oraz wielowarstwowym systemem ambientowych cieni, który tworzy subtelną głębię bez ostrych kontrastów. Pasek wyszukiwania, w kształcie pigułki, jest wyraźnie wyeksponowany i łączy główną akcję użytkownika w jednym miejscu.

• 
  Usługi biznesowe i profesjonalne

  Shopify

  Strona główna marketingowa Shopify opiera się na dynamicznym, pełnoekranowym wideo w sekcji hero, z niemal czarnym tłem (#02090a), które wyraźnie kontrastuje z białym paskiem nawigacji nad nim. Główny akcent marki to intensywna miętowa zieleń (#36f4a4), używana oszczędnie do wyróżnień i stanów interaktywnych. Typografia łączy NeueHaasGrotesk w nagłówkach display i redakcyjnych z Inter-Variable w tekstach interfejsu. Przyciski CTA mają w pełni zaokrąglone kształty pigułki (border-radius: 9999px). Cały system jest pewny siebie, o wysokim kontraście i aspiracyjny, zaprojektowany tak, by zamieniać odwiedzających w sprzedawców.

Przeglądaj wszystkie przykłady DESIGN.md