Poradnik

Połącz dwie strony wzorcowe w jeden design prototypu

„Niech to będzie jak Notion połączony ze Stripe.” Klienci ciągle tak opisują prototypy. Mając DESIGN.md każdej z tych stron, możesz zamienić to zdanie w jedną konkretną specyfikację: porównaj tokeny obok siebie, zdecyduj, który plik prowadzi, i połącz je.

Design Extractor daje ci oba pliki. Połączenie należy do ciebie, ręcznie albo z agentem AI do kodowania, a ten poradnik pokazuje oba sposoby.

Dla projektantów i agencji tworzących prototypy. Aktualizacja: .

Co zyskasz

  • Dwa pliki DESIGN.md porównane token po tokenie, aby różnice były konkretne.
  • Plan połączenia: jeden plik jako baza, nazwane grupy tokenów z drugiego.
  • Połączony DESIGN.md, zrobiony ręcznie lub przez agenta z promptem poniżej.
  • Sprawdzenie kontrastu, aby połączenie nadal było czytelne.

Jak działa łączenie

Połączenie to nie średnia. Połowa jednej palety zmieszana z połową drugiej daje stronę, która nie wygląda jak żadna z nich. Działa jeden plik bazowy plus kilka nazwanych części z drugiego:

  • Baza daje strukturę: skalę typograficzną, odstępy, zaokrąglenia i receptury komponentów.
  • Akcent użycza całych grup, na przykład rodziny koloru primary lub fontu nagłówkowego, nigdy pojedynczych przypadkowych wartości.

Oba pliki są zgodne ze specyfikacją DESIGN.md od Google, więc grupy do siebie pasują: colors, typography, rounded, spacing i components. Pełną strukturę opisuje artykuł co zawiera DESIGN.md.

Kroki

  1. Wygeneruj oba pliki

    Skopiuj je z galerii, jeśli tam są, albo wklej każdy URL na stronie głównej Design Extractor i uruchom ekstrakcję Pro dla każdego.

  2. Ustaw je obok siebie

    Porównaj kolory primary, tła, fonty, rozmiary tekstu i zaokrąglenia, jak w tabeli poniżej.

  3. Wybierz bazę

    Wybierz stronę, której układ i gęstość pasują do prototypu.

  4. Nazwij, czego użycza akcent

    Zapisz to jako grupy tokenów, na przykład „jej rodzina koloru primary”.

  5. Połącz ręcznie lub z agentem

    Oba sposoby są poniżej. Zapisz wynik jako DESIGN.md w repozytorium prototypu.

  6. Sprawdź kontrast i strukturę

    Wklej połączony plik do darmowego Walidatora DESIGN.md.

Przykład w praktyce: Notion i Stripe

Dwa prawdziwe pliki z galerii: DESIGN.md Notion i DESIGN.md Stripe. Oba zostały wyodrębnione z publicznych stron tych marek i nie są oficjalnymi wytycznymi marek.

NotionStripe
Primary#0075DE#533AFD
Tło#FFFFFF#FFFFFF
Tekst#000000#061B31
FontyNotion Inter, Lyon TextSohne
Największy teksthero-display, 96px, grubość 600hero-display, 56px, grubość 500
Tekst głównybody, 16px, grubość 400body-lg, 18px, grubość 300
Zaokrąglenie przycisku8px4px
Tokeny kolorów2021
Receptury komponentów1471

Jeden ze sposobów połączenia

Weź Notion jako bazę dla typografii, odstępów, zaokrągleń i komponentów, a Stripe niech użyczy rodziny koloru primary (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft). To klasyczny brief „nasz układ, ich energia”.

Sprawdź liczby, zanim się na to zdecydujesz. Primary z Stripe na tle z Notion ma kontrast 6.1:1. Tekst on-primary z Notion na nowym primary osiąga 6.1:1. Tekst główny wymaga kontrastu co najmniej 4,5:1 według WCAG AA; duży tekst i ikony wymagają 3:1.

Jedna pułapka: własny primary Notion, #0075DE, występuje w pliku 65 razy, głównie w recepturach komponentów. Zamiana tokenu na górze nie wystarczy; trzeba zmienić każde wystąpienie.

Ilustracja opisanego wyżej ręcznego połączenia, złożona przez tę stronę z dwóch plików z galerii: tokeny Notion z rodziną primary Stripe, w skrócie. To nie jest funkcja Design Extractor ani wynik działania agenta.
---
name: Notion and Stripe prototype
colors:
  primary: "#533AFD"
  primary-focus: "#5452FB"
  primary-bright: "#635BFF"
  primary-pressed: "#4032C8"
  primary-deep: "#2E2B8C"
  primary-soft: "#D6D9FC"
  on-primary: "#FFFFFF"
  ink: "#000000"
typography:
  hero-display:
    fontFamily: Notion Inter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -4.6px
  body:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 4px
  sm: 8px
  md: 12px
  full: 9999px
---

Połącz ręcznie

  1. Skopiuj plik bazowy do DESIGN.md i zmień jego name.
  2. W colors zastąp rodzinę primary bazy wartościami akcentu.
  3. Przeszukaj cały plik pod kątem każdej starej wartości hex i ją zastąp. Receptury komponentów powtarzają kolory w swoim CSS, więc sama lista tokenów nie wystarczy.
  4. Przepisz teksty w sekcjach Overview i Colors tak, aby opisywały połączenie, a nie którąkolwiek z marek.
  5. Sprawdź plik w walidatorze i popraw ostrzeżenia o kontraście.

Połącz z agentem

Zapisz oba pliki w repozytorium prototypu, na przykład w design/, i daj agentowi prompt, który nazywa bazę, grupy do przejęcia i sprawdzenia do wykonania. Ten został napisany dla tego poradnika z prawdziwymi nazwami plików i tokenów.

Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.

Przejrzyj wynik jak każdą inną zmianę: przeczytaj diff, a potem wklej plik do walidatora. Agent wykonuje pisanie; decyzje w prompcie nadal należą do ciebie.

FAQ

Połącz design dwóch stron w jeden: pytania

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

Nie, nie ma funkcji łączenia. Każda ekstrakcja zwraca DESIGN.md jednej strony. Dwa pliki łączysz ręcznie albo prosisz agenta AI do kodowania, by zrobił to promptem podobnym do tego z poradnika, a potem przeglądasz wynik.

Dwie, czasem trzy. Jeden plik jest bazą i daje strukturę: skalę typograficzną, odstępy, zaokrąglenia i komponenty. Pozostałe użyczają nazwanej części, na przykład rodziny kolorów lub fontu nagłówkowego. Mieszanie wartości z większej liczby plików sprawia, że wynik wygląda na posklejany.

Ten, którego układ i gęstość pasują do prototypu. Jeśli klient chce spokojnego produktu w stylu dokumentu z kolorami innej strony, bazą jest spokojna strona, a druga użycza kolorów, nie odwrotnie.

Wklej połączony plik do darmowego Walidatora DESIGN.md. Sprawdza strukturę i oznacza kolory tekstu o zbyt niskim kontraście. Potem zbuduj z nim jeden prawdziwy ekran, zanim pokażesz go klientowi.

Wygeneruj oba pliki do swojego briefu

Wklej URL każdej strony wzorcowej i wygeneruj jej DESIGN.md, gotowy do porównania i połączenia.

Wygeneruj DESIGN.md z dowolnej strony

Powiązane poradniki

Zobacz wszystkie poradniki DESIGN.md