← Wszystkie tematy W 32% ogłoszeń · 15 z 47 ogłoszeń frontend React

Design system i komponenty

Jedno pudełko klocków dla wszystkich zespołów

Design system pojawia się w 15 z 47 ogłoszeń, często z nazwami shadcn/ui, Radix albo Storybook. Pytają o API komponentów, tokeny i wersjonowanie.

Przerobione Opanowane 0 z 4 pytań

Ucz się z Claude Wytłumacz od zera Próbna rozmowa Zadanie praktyczne Ściąga na 1 stronę

Co piszą w ogłoszeniach

„Knowledge of Design Systems and component libraries.”
emagine Polska · Frontend React Developer
„Advanced proficiency in JavaScript (ES6+), TypeScript, and React, with deep experience building and managing shared design systems and implementing Micro Frontend architectures or modular UI strategies in large-scale systems.”
Relativity · Lead Frontend Engineer
„tworzenie i utrzymanie reużywalnych komponentów (własny design system) w celu zapewnienia spójności”
Eko-Okna S.A. · Frontend Developer (Senior React)

Scena · design tokens

Jedno pudełko klocków dla wszystkich

Trzy zespoły budują trzy aplikacje: sklep, panel i bloga. Bez wspólnego pudełka każdy zespół maluje klocki sam, trochę innym niebieskim i z trochę innymi rogami. Z design systemem wszyscy biorą klocki z jednego pudełka, a kolory i zaokrąglenia są zapisane w tokenach. Zmień markę i zobacz, ile aplikacji za tym nadąży.

Sklep

Lizak3 zł

Do koszyka

Panel

Zamówienia12 dziś

Eksportuj

Blog

Nowy wpis5 min czytania

Czytaj

każdy zespół sam design system

Zaokrąglenie –

Zmień kolor marki w obu trybach.

Porównajmy

Headless czy gotowa biblioteka?

	Gotowa biblioteka (MUI, Ant)	Headless (Radix, shadcn/ui)
Co dostajesz?	Pomalowane klocki.Komponenty z gotowym wyglądem i motywem.	Niepomalowane klocki z dobrym mechanizmem.Zachowanie, dostępność, fokus, klawiatura. Wygląd robisz sam.
Szybkość startu	Bardzo szybko.Panel admina w jeden dzień.	Wolniej na start.Trzeba ostylować (często Tailwind).
Własna marka	Walka z cudzym stylem.Nadpisywanie motywu, wysoka specyficzność.	Pełna kontrola.shadcn/ui kopiuje kod komponentu do repo, więc jest Twój.
Rozmiar	Cięższy plecak.Runtime stylów, duże paczki.	Lżej.Tylko to, czego używasz.
Kiedy?	Narzędzia wewnętrzne, MVP.	Produkt z mocną własną marką i design systemem.Zespół ma projektantów i tokeny z Figmy.

Jedno pudełko

Wszystkie zespoły biorą klocki z tego samego pudełka. Wygląd zgadza się sam.

Tokeny

Kolor, odstęp i zaokrąglenie mają nazwy. Zmieniasz w jednym miejscu, zmienia się wszędzie.

API klocka

Mało, dobrze nazwanych wariantów (variant, size) zamiast stu propsów do koloru.

Sprawdź się

Pytania z rozmów

Najpierw odpowiedz na głos, dopiero potem rozwiń odpowiedź.

Jak zaprojektować API komponentu Button, żeby był elastyczny, ale nie chaotyczny?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Klocek ma kilka gotowych kolorów i rozmiarów do wyboru, a nie słoik farby, którą każdy maluje po swojemu.

Na rozmowę: Ograniczony zestaw wariantów zamiast dowolnych stylów: variant (primary, secondary, ghost, danger), size (sm, md, lg), stany (disabled, loading), ikony (leftIcon / rightIcon). Przekazuję natywne atrybuty przez ...rest i forwardRef, żeby działał jak prawdziwy button (type, aria-*, onClick). Polimorfizm przez asChild (Radix Slot) albo as, żeby link wyglądał jak przycisk bez łamania semantyki. Warianty w cva lub tailwind-variants z typami TS. className jako furtka, ale nie główny mechanizm.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Design tokens: co to jest i jak przenoszą się z Figmy do kodu?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Każdy kolor i odstęp ma swoją nazwę, jak kredka w pudełku: „niebieski-marki”, a nie „ten trochę ciemniejszy niebieski”.

Na rozmowę: Tokeny to nazwane decyzje projektowe: kolory, typografia, odstępy, promienie, cienie, czasy animacji. Zwykle dwie warstwy: prymitywne (blue-500) i semantyczne (color-action-primary, color-text-muted), a komponenty używają tylko semantycznych, co umożliwia motywy i dark mode. Z Figmy eksportuje się je (Tokens Studio, Figma Variables) do JSON w formacie W3C, a Style Dictionary generuje CSS variables, konfigurację Tailwinda i stałe TS. Pipeline w CI pilnuje synchronizacji.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Jak wersjonujesz bibliotekę komponentów i wprowadzasz breaking changes?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Gdy zmieniasz kształt klocka, uprzedzasz wszystkich, dajesz im czas i instrukcję, jak przebudować wieże.

Na rozmowę: Semver: patch to poprawki, minor to nowe rzeczy kompatybilne wstecz, major to breaking changes. Changesets do opisu zmian i automatycznego changelogu. Breaking change wprowadzam etapami: nowe API obok starego, ostrzeżenie deprecation w konsoli i w typach (@deprecated), dokumentacja migracji, czasem codemod (jscodeshift), usunięcie w następnym majorze. Storybook i testy wizualne (Chromatic) łapią niezamierzone zmiany wyglądu. W monorepo konsumenci mogą migrować w swoim tempie.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Headless UI (Radix, shadcn/ui) vs gotowa biblioteka (MUI): plusy i minusy?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Gotowa biblioteka to pomalowane klocki: szybko budujesz, ale wszystko wygląda jak u sąsiada. Headless to dobre, niepomalowane klocki: malujesz po swojemu.

Na rozmowę: MUI i Ant dają gotowy wygląd, dużo komponentów i szybki start (panele, narzędzia wewnętrzne), ale ich styl trudno dopasować do własnej marki, są cięższe i część stylowania dzieje się w runtime. Headless (Radix, React Aria, Headless UI) daje zachowanie, dostępność i obsługę klawiatury bez wyglądu, który robisz sam (często Tailwind). shadcn/ui kopiuje gotowe, ostylowane komponenty Radix do repo, więc masz pełną kontrolę i własny kod. Przy własnym design systemie i mocnej marce wybieram headless.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Poziom wyżej

Wersja dla seniora

Tak wyglądają pytania na seniora i leada: nie ma jednej dobrej odpowiedzi, liczy się to, jak ważysz kompromisy i czy mówisz o skali, ryzyku i ludziach.

Przypadek 1

Design system dla 8 zespołów, z którego nikt nie korzysta

Rok temu powstał design system z 40 komponentami. Używają go 2 z 8 zespołów. Reszta kopiuje komponenty do siebie i zmienia je, bo „DS nie ma tego, czego potrzebujemy” i „na zmiany czeka się miesiąc”. Dostajesz zespół DS i masz poprawić adopcję.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy traktujesz DS jak produkt z użytkownikami
Czy szukasz przyczyn braku adopcji u odbiorców
Czy proponujesz model współtworzenia zamiast wąskiego gardła
Czy mierzysz adopcję

Odpowiedź seniora

Design system to produkt, a zespoły to jego klienci. Zaczynam od rozmów z każdym zespołem i od danych: skanuję repozytoria (np. react-scanner), żeby zobaczyć, które komponenty są używane, które skopiowane i czego brakuje. Zwykle problemy to brak elastyczności w kilku kluczowych komponentach, wolny proces zmian i słaba dokumentacja.

Zmieniam model na współtworzenie: jasne zasady kontrybucji, szablon RFC dla nowych komponentów, review w ciągu 48 godzin, a zespoły mogą dodawać komponenty do warstwy eksperymentalnej i promować je do stabilnej. Kluczowe komponenty dostają furtki (asChild, slots, className), żeby nie trzeba było ich kopiować.

Dbam o doświadczenie odbiorcy: Storybook z przykładami z prawdziwych ekranów, codemody przy zmianach, częste wydania z changelogiem, kanał wsparcia. Mierzę procent ekranów i komponentów korzystających z DS, liczbę lokalnych kopii i czas od zgłoszenia do wydania.

Typowe wpadki

Nakaz używania DS bez poprawy jego jakości
Zespół DS jako jedyna osoba decydująca o wszystkim
Mierzenie sukcesu liczbą komponentów w bibliotece

Dopytają o

Jak zdecydujesz, co trafia do DS, a co zostaje w zespole?
Jak przekonasz zespół, który ma własną kopię Buttona?
Kto finansuje pracę nad DS?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 2

Breaking change w Buttonie używanym w 2000 miejsc

Komponent Button ma propy color, primary, secondary, outline i big, które się wykluczają i powodują błędy. Nowy projekt wymaga wariantów variant i size. Button jest użyty w ponad 2000 miejsc w 12 repozytoriach i aplikacjach w monorepo.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy planujesz zmianę bez blokowania zespołów
Czy znasz codemody i deprecation
Czy myślisz o testach wizualnych

Odpowiedź seniora

Projektuję nowe API (variant, size, z typami TS, które nie pozwalają na sprzeczne kombinacje) i wprowadzam je obok starego w wersji minor. Stare propy działają, ale są oznaczone @deprecated w typach i dają ostrzeżenie w konsoli w trybie developerskim. Wewnątrz komponentu stare propy mapuję na nowe, więc wygląd się nie zmienia.

Piszę codemod (jscodeshift albo ts-morph), który zamienia stare propy na nowe w kodzie. Uruchamiam go sam w monorepo w kilku PR-ach podzielonych na obszary, a dla zewnętrznych repozytoriów publikuję go z instrukcją. Przypadki, których codemod nie rozumie, oznacza komentarzem TODO do ręcznej poprawy.

Zmiany sprawdzają testy wizualne (Chromatic lub zrzuty w Playwright), które pokazują każdą różnicę w wyglądzie. Stare API usuwam w kolejnym majorze, gdy metryki użycia pokazują zero wystąpień. Komunikuję harmonogram z wyprzedzeniem.

Typowe wpadki

Zmiana API w jednym majorze bez okresu przejściowego
Ręczna zmiana 2000 miejsc
Brak testów wizualnych przy masowej zmianie

Dopytają o

Jak zmierzysz, ile miejsc zostało do migracji?
Co jeśli zespół nie zmigruje przez pół roku?
Jak zaprojektujesz typy, żeby sprzeczne propy były błędem kompilacji?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 3

Wiele marek i motywów na jednej bibliotece

Firma przejęła dwie inne marki. Wszystkie trzy mają korzystać z jednej biblioteki komponentów, ale wyglądać inaczej: inne kolory, fonty, zaokrąglenia, a jedna marka ma też tryb ciemny i wysoki kontrast. Obecnie kolory są wpisane w komponenty.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy znasz warstwy tokenów: prymitywne, semantyczne, komponentowe
Czy wiesz, jak przełączać motywy bez przebudowy aplikacji
Czy myślisz o dostępności każdego motywu

Odpowiedź seniora

Wprowadzam trzy warstwy tokenów. Prymitywne to paleta każdej marki (blue-500, radius-8). Semantyczne opisują znaczenie (color-action-primary, color-text-muted, radius-control) i to ich używają komponenty. Opcjonalnie komponentowe (button-bg) dla wyjątków. Komponenty nigdy nie odwołują się do prymitywów.

Tokeny trzymam w JSON w formacie W3C, a Style Dictionary generuje dla każdej marki i trybu zestaw CSS custom properties. Motyw przełącza atrybut na root (data-brand, data-theme), więc jedna paczka komponentów działa dla wszystkich marek, a zmiana motywu nie wymaga przebudowy. Fonty i ikony też są parametrem marki.

Każda kombinacja marki i trybu przechodzi automatyczny test kontrastu par tokenów oraz testy wizualne komponentów w Storybooku. Projektanci pracują na tych samych tokenach w Figma Variables, więc zmiana płynie z projektu do kodu jednym pipeline.

Typowe wpadki

Osobna kopia biblioteki dla każdej marki
Tokeny nazwane kolorem zamiast znaczeniem, np. color-blue dla przycisku
Brak sprawdzania kontrastu w nowych motywach

Dopytają o

Co zrobisz, gdy jedna marka chce zupełnie innego kształtu komponentu?
Jak uniknąć mignięcia złego motywu przy ładowaniu?
Jak zsynchronizujesz tokeny z Figmy bez ręcznego kopiowania?

Zapytaj Claude Rozwiń case Zagraj interviewera